/* Appointment Form Styles */

/* The global stylesheet sets `html, body { height: 100%; overflow-x: hidden }`,
   which makes <body> its own scroll container: html's non-visible overflow goes
   to the viewport, so body keeps overflow-y:auto at exactly viewport height.
   window.scrollTo() then targets a viewport that never scrolls, and resetting
   scroll between form steps silently does nothing. Let the document scroll
   normally here - this page has no fixed chrome that needs a pinned body. */
html, body {
    height: auto;
    min-height: 100%;
}

.appointment-form-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

/* ===== PROGRESS BAR ===== */

.progress-container {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.progress-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    max-width: 600px;
    width: 100%;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.progress-step.active .step-number {
    background: linear-gradient(135deg, #d4af37, #f4e5a1);
    color: #000;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.progress-step.completed .step-number {
    background: #4CAF50;
    color: #fff;
}

.progress-step.completed .step-number::after {
    content: '✓';
}

.step-label {
    font-size: 14px;
    color: #999;
    text-align: center;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.progress-step.active .step-label {
    color: #f4e5a1;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.progress-line {
    flex: 1;
    height: 3px;
    background: #e0e0e0;
    margin: 0 10px;
    position: relative;
    top: -24px;
}

.progress-step.completed ~ .progress-line {
    background: #4CAF50;
}

/* ===== FORM STEPS ===== */

#appointmentForm {
    position: relative;
}

/* Hide honeypot and tracking fields */
#appointmentForm input[type="hidden"],
#appointmentForm .honeypot {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    display: none !important;
}

.form-step {
    display: none !important;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-step.active {
    display: block !important;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-step h2 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 28px;
}

.form-step > .help-text {
    margin-bottom: 30px;
    color: #666;
}

/* ===== FORM GROUPS ===== */

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 18px;
    color: #2c3e50;
}

.required {
    color: #e74c3c;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.3s;
    background-color: #fff;
    color: #2c3e50;
}

/* Date Fields Row */
.date-fields-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.date-field-wrapper {
    flex: 1;
    min-width: 0;
}

.date-field-wrapper label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #2c3e50;
}

.date-field-wrapper input[type="date"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s;
    background-color: #fff;
    color: #2c3e50;
}

.date-field-wrapper input[type="date"]:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* Artist Selection Grid */
.artist-selection-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.artist-card {
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
    position: relative;
}

.artist-card:hover {
    border-color: #d4af37;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

.artist-card.selected {
    background: linear-gradient(135deg, #d4af37, #f4e5a1);
    border-color: #d4af37;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.artist-card .artist-checkbox {
    display: none;
}

.artist-card .artist-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.artist-card .first-name {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.2;
}

.artist-card .last-name {
    font-size: 13px;
    font-weight: 400;
    color: #2c3e50;
    line-height: 1.2;
}

.artist-card.selected .first-name,
.artist-card.selected .last-name {
    color: #000;
}

/* Booking U5: Books Open / Waitlist Only / Books Closed */
.artist-card .artist-availability {
    margin-top: 4px;
    font-size: 11px;
    color: #5a6b7b;
}

.artist-card.artist-unavailable {
    cursor: not-allowed;
    opacity: 0.55;
    background-color: #f4f4f4;
}

.artist-card.artist-unavailable:hover {
    border-color: #ddd;
    box-shadow: none;
    transform: none;
}

/* Shop Recommendation special styling */
.artist-card.shop-recommendation {
    background-color: #f8f9fa;
}

.artist-card.shop-recommendation.selected {
    background: linear-gradient(135deg, #d4af37, #f4e5a1);
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
    .artist-selection-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .artist-selection-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .artist-selection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .artist-card {
        padding: 12px 8px;
    }

    .artist-card .first-name,
    .artist-card .last-name {
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    .artist-selection-grid {
        grid-template-columns: 1fr;
    }
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.help-text {
    display: block;
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

.help-text.upload-instructions {
    margin-top: 0;
    padding-left: 20px;
}

.help-text.image-limit-note {
    margin-top: 10px;
}

.char-count {
    display: block;
    font-size: 13px;
    color: #666;
    margin-top: 5px;
    text-align: right;
}

.checkbox-group label {
    font-weight: normal;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.disabled-option {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    background: #3498db;
    color: #fff;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 5px;
}

/* ===== ARTIST SELECTION ===== */

.artist-selection {
    margin-top: 15px;
}

.shop-recommendation {
    margin-bottom: 20px;
}

.artist-divider {
    text-align: center;
    margin: 20px 0;
    font-weight: 600;
    color: #999;
    position: relative;
}

.artist-divider::before,
.artist-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 30px);
    height: 1px;
    background: #ddd;
}

.artist-divider::before {
    left: 0;
}

.artist-divider::after {
    right: 0;
}

.artist-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.artist-card {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    background: #fff;
}

.artist-card:hover {
    border-color: #d4af37;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.artist-card input[type="checkbox"] {
    margin-right: 12px;
    margin-top: 3px;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.artist-card input[type="checkbox"]:checked ~ .artist-info {
    color: #000;
}

.artist-card input[type="checkbox"]:checked {
    accent-color: #d4af37;
}

.artist-info {
    flex: 1;
}

.artist-info strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
}

.instagram {
    display: inline-block;
    color: #3498db;
    font-size: 14px;
    margin-bottom: 5px;
}

.specialties {
    font-size: 13px;
    color: #666;
    margin: 5px 0;
}

.books-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 5px;
}

.books-status.open {
    background: #d4edda;
    color: #155724;
}

.books-status.closed {
    background: #f8d7da;
    color: #721c24;
}

.books-status.waitlist_only {
    background: #fff3cd;
    color: #856404;
}

/* ===== STYLES LIST ===== */

.styles-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.style-checkbox {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.style-checkbox:hover {
    border-color: #d4af37;
    background: #fafafa;
}

.style-checkbox input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ===== SIZE SELECTION ===== */

.size-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.size-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.size-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.size-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s;
    text-align: center;
}

.size-option:hover .size-label {
    border-color: #d4af37;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.size-option input[type="radio"]:checked ~ .size-label {
    border-color: #d4af37;
    background: linear-gradient(135deg, #d4af37, #f4e5a1);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.size-label strong {
    display: block;
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 4px;
}

.size-label small {
    font-size: 13px;
    color: #666;
}

/* ===== IMAGE UPLOAD ===== */

.image-upload-zone {
    border: 2px dashed #d4af37;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
}

.image-upload-zone:hover {
    background: #f0f0f0;
    border-color: #c4a02f;
}

.image-upload-zone.drag-over {
    background: #e8f5e9;
    border-color: #4CAF50;
}

.upload-placeholder svg {
    color: #d4af37;
    margin-bottom: 15px;
}

.upload-placeholder p {
    margin: 10px 0;
    color: #666;
}

.image-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.image-preview {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.image-preview img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.remove-image {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(231, 76, 60, 0.9);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

.remove-image:hover {
    background: #c0392b;
}

.file-name {
    display: block;
    padding: 8px;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== SCHEDULE PREFERENCES ===== */

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.checkbox-grid label:hover {
    border-color: #d4af37;
    background: #fafafa;
}

.checkbox-grid input[type="checkbox"] {
    margin-right: 8px;
}

.legal-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 15px;
    margin: 20px 0;
    color: #856404;
}

.legal-notice p {
    color: #856404;
    margin: 0;
}

.legal-notice strong {
    display: block;
    margin-bottom: 5px;
    color: #856404;
}

/* ===== SUCCESS SCREEN ===== */

.success-screen {
    text-align: center;
    padding: 60px 30px !important;
}

.success-icon {
    margin-bottom: 20px;
}

.success-screen h2 {
    color: #4CAF50;
    margin-bottom: 15px;
}

.success-screen p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Stack the success-screen actions so the "return to website" link sits
   directly below the "submit another request" button, both centered. */
.success-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

/* Force a readable white button for the "return to website" link. A global
   .btn-secondary in style.css (gray background, white text) otherwise wins the
   cascade and renders the text unreadable. Two classes beats that specificity. */
.success-actions .btn-secondary {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #ccc;
}

.success-actions .btn-secondary:hover {
    background: #f3f3f3;
    color: #1a1a1a;
    border-color: #b0b0b0;
}

.request-id {
    font-size: 18px;
    color: #2c3e50;
}

.request-id strong {
    color: #d4af37;
}

/* ===== FORM ACTIONS ===== */

.form-actions {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: linear-gradient(135deg, #d4af37, #f4e5a1);
    color: #000;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #c4a02f, #e4d591);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.btn-secondary {
    background: #fff;
    color: #666;
    border: 1px solid #ddd;
}

.btn-secondary:hover {
    background: #f8f8f8;
    border-color: #ccc;
}

.btn-next,
.btn-submit {
    margin-left: auto;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== MODALS ===== */

.modal {
    /* `display` is owned by style.css's modal system -- see the note there. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-content h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
}

.modal-content p {
    margin-bottom: 15px;
    color: #666;
    line-height: 1.6;
}

.modal-content .btn {
    margin-top: 10px;
}

/* ===== LOADING OVERLAY ===== */

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2000;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #d4af37;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-overlay p {
    font-size: 18px;
    color: #666;
}

/* ===== UTILITY ===== */

.loading {
    padding: 20px;
    text-align: center;
    color: #666;
    font-style: italic;
}

.error {
    color: #e74c3c;
    padding: 20px;
    text-align: center;
}

/* ===== FIELD VALIDATION ERRORS ===== */

.field-error {
    display: block;
    color: #e74c3c;
    font-size: 13px;
    margin-top: 6px;
    font-weight: 500;
}

.input-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15) !important;
}

.input-error:focus {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.25) !important;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .appointment-form-container {
        padding: 0 15px;
        margin: 20px auto;
    }

    .form-step {
        padding: 20px;
    }

    .form-step h2 {
        font-size: 24px;
    }

    .progress-bar {
        flex-direction: row;
    }

    .step-label {
        font-size: 12px;
    }

    .step-number {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .progress-line {
        height: 2px;
        top: -20px;
    }

    .artist-list {
        grid-template-columns: 1fr;
    }

    .size-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-next,
    .btn-submit {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .size-options {
        grid-template-columns: 1fr;
    }

    .image-previews {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== SCHEDULE WARNING ===== */

.schedule-warning {
    color: #e65100 !important;
    font-weight: 600;
    font-size: 1.05em;
}

/* ===== DATE WARNING BOX ===== */

.date-warning-box {
    background: #fff3e0;
    border: 2px solid #e65100;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    color: #bf360c;
    font-size: 0.95em;
    line-height: 1.5;
}

.date-fields-section {
    margin-top: 24px;
}

/* ===== CONSENT & TERMS ===== */

.consent-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

/* Plain statement of fact where the email opt-in checkbox used to be: we reply by
   email to every request, so there is nothing for the client to decide here. */
.consent-note {
    margin: 0 0 12px;
    font-size: 0.95em;
    line-height: 1.5;
    color: #666;
}

/* The SMS opt-in is the one box on this form a client can miss without
   noticing, and it stays unchecked by default for A2P 10DLC. Giving it the
   studio's gold as a framed callout makes it read as an offer worth a look
   rather than more fine print -- the consent sentence inside is unchanged. */
.sms-optin-callout {
    margin-top: 4px;
    padding: 14px 16px 6px;
    background: #fffdf5;
    border: 2px solid #d4af37;
    border-left-width: 6px;
    border-radius: 8px;
}

.sms-optin-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 1.05em;
    font-weight: 700;
    color: #1a1a1a;
}

/* Says out loud what the unchecked box already implies, so nobody reads the
   highlight as something they are required to accept. */
.sms-optin-optional {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1e4b8;
    color: #6b5613;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sms-optin-subhead {
    margin: 0 0 10px;
    font-size: 0.95em;
    line-height: 1.5;
    color: #444;
}

/* A bigger hit target than the terms box below it: this one is a real choice
   and is often the first thing tapped on a phone. Names both classes so it
   outranks the .consent-checkbox sizing further down the file rather than
   tying with it and losing on source order. */
.appointment-form-container .form-group .consent-checkbox.sms-optin-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: #b8912a;
}

.sms-optin-callout:focus-within {
    border-color: #b8912a;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

/* Three classes deep to outrank the global sheet's
   `form label:not(.radio-label):not(.radio-option label)`, which is (0,2,2)
   and was winning: both consent blocks rendered as bold 18px body text with
   the flex row collapsed, so wrapped lines ran back under the checkbox
   instead of staying in the text column, and the legal fine print shouted
   louder than the question it belongs to. */
.appointment-form-container .form-group .consent-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 12px;
    font-weight: 400;
    font-size: 0.95em;
    line-height: 1.5;
    color: #333;
}

.appointment-form-container .form-group .consent-checkbox input[type="checkbox"] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.terms-section {
    margin-top: 16px;
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 8px;
}

.appointment-form-container .form-group .terms-checkbox span {
    font-weight: 500;
}

/* Legal links inside the white form card must be dark to stay readable
   (the global theme sets `a { color: #fff }` for dark backgrounds). Higher
   specificity than the global a:link/a:visited rule so it always wins. */
.consent-section .consent-checkbox a,
.terms-section .consent-checkbox a {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 600;
}

.consent-section .consent-checkbox a:hover,
.terms-section .consent-checkbox a:hover {
    color: #1d4ed8;
}

/* ===== STUDIO BRANDING (Renaissance Tattoo Collective) ===== */

.studio-branding {
    text-align: center;
    color: #f4e5a1;
}

.studio-branding-top {
    margin-bottom: 28px;
}

.studio-branding .studio-name {
    margin: 0 0 4px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #d4af37;
}

.studio-branding .studio-tagline {
    margin: 0 0 8px;
    font-style: italic;
    font-size: 0.95rem;
    color: #cfcfcf;
}

.studio-branding .studio-contact {
    margin: 0;
    font-size: 0.85rem;
    color: #bdbdbd;
}

.studio-branding a {
    color: #f4e5a1;
    text-decoration: underline;
}

.studio-branding-bottom {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.studio-branding-bottom .studio-name-sm {
    margin: 0 0 4px;
    font-weight: 600;
    color: #d4af37;
}

.studio-branding-bottom .studio-legal-links {
    margin: 8px 0 0;
    font-size: 0.85rem;
}