/* Booking Form Specific Styles */

:root {
    --error-color: rgb(
        250 114 104
    ); /* coral for errors per brand spec — overrides global */
    --book-success-bg: #e8f4f0; /* light teal tint of --tertiary-color, used in completion banner */
}

/* Note: Validation error styles are now in forms.css for global use */

body,
button,
input,
select,
textarea {
    font-family: var(--font-sans);
    font-weight: 400;
    font-style: normal;
}

/* The funnel is laid out as a column so the footer always finishes at the bottom
   of the viewport. Short pages — /book/who is the shortest — used to end mid-screen
   and leave a band of page background below the footer, because contact.css unsets
   the global min-height on main above 769px. main absorbs the slack instead, so no
   page needs to guess at the height of the chrome around it. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    font-family: var(--font-sans);
    padding: 0.5em 0;
    flex: 1 0 auto;
    min-height: 0;
}

/* Contact page header styling */
.contact-header h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-2xl);
    color: var(--tertiary-color);
    margin-bottom: 6px;
    max-width: 980px;
    letter-spacing: -0.025em;
}

/* Contact page subtitle styling */
.contact-subtitle {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    letter-spacing: 0px;
    color: var(--book-dark);
    margin-bottom: 1.5rem;
}

/* Page header for the pages that predate the brand redesign. It used to be a
   Light-weight Lexend heading, which read as a different product sitting next to
   .contact-header above; it now carries the same display face and weight, so a
   visitor moving between the two sees one typeface throughout. */
.booking-header h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-2xl);
    color: var(--text-color);
    margin-bottom: 6px;
    letter-spacing: -0.025em;
}

.booking-header .booking-subtitle {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--muted-text-color);
    margin-bottom: 1.5rem;
}

/* Widen form-container on larger screens for the booking flow */
@media (min-width: 769px) {
    .form-container {
        max-width: 980px;
    }
}

/* Contact form 2-column grid layout */
.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 12px;
    max-width: 980px;
    margin: 0 auto;
}

.insurance-info-section {
    grid-column: 1 / -1;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--background-color);
    padding: 18px;
    margin-top: 8px;
}

.insurance-info-header h3 {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-color);
}

.insurance-info-header p {
    margin: 8px 0 14px;
    color: var(--text-color);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.insurance-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 12px;
}

.insurance-section-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--border-color);
    margin: 2px 0 6px;
}

/* Contact form label styling - prevent wrapping */
.form-group > label {
    white-space: nowrap;
}

.insurance-info-grid .form-group > label {
    font-weight: 500;
}

/* Radio button labels should not be bold */
.radio-group label {
    font-weight: normal;
}

/* Make standalone select fields match grid input width */
#relationship_to_patient,
#referring_organization_type {
    width: 100%;
    max-width: 450px;
}

/* Contact form submit button styling */
.contact-submit-btn {
    width: auto;
    height: auto;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border: 2px solid var(--primary-color);
    border-radius: 100px;
    background: var(--primary-color);
    color: white;
    font-weight: 500;
    font-size: var(--text-sm);
    transition: all 0.3s ease;
    cursor: pointer;
    flex: 0 0 auto;
}

.contact-submit-btn:hover:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(250, 114, 104, 0.3);
}

.contact-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Contact form input field styling */
.contact-form-grid .form-group input,
.contact-form-grid .form-group select {
    width: 100%;
    max-width: 100%;
    height: 42px;
    border: 1.5px solid var(--book-warm-accent);
    border-radius: 24px;
    padding: 10px 16px 10px 16px;
    font-size: var(--text-md);
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.contact-form-grid .form-group select {
    padding-right: 40px;
}

/* Select dropdown arrow positioning for all form selects */
.form-group select {
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
}

.contact-form-grid .form-group input:focus,
.contact-form-grid .form-group select:focus {
    border-color: var(--primary-color);
    outline: none;
}

.contact-form-grid .form-group {
    position: relative;
}

.insurance-provider-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    max-height: 220px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

.insurance-provider-suggestions.open {
    display: block;
}

.insurance-provider-suggestion {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    padding: 10px 12px;
    color: var(--text-color);
    font-size: var(--text-sm);
}

.insurance-provider-suggestion:hover,
.insurance-provider-suggestion.active,
.insurance-provider-suggestion:focus {
    background: var(--primary-transparent);
    outline: none;
}

.insurance-provider-suggestion + .insurance-provider-suggestion {
    border-top: 1px solid var(--border-color);
}

.insurance-type-field select {
    max-width: 460px;
}

/* Insurance details container (shown/hidden by JS based on insurance type selection) */
.insurance-details-container {
    grid-column: 1 / -1;
    display: none; /* .open class makes it visible */
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 12px;
    margin-top: -16px;
    margin-bottom: 20px;
    padding: 20px 24px 20px;
    border: 1.5px solid var(--book-warm-accent);
    border-radius: 16px;
    background: var(--background-color);
}

.insurance-details-container.open {
    display: grid;
    animation: insuranceDetailsReveal 0.25s ease;
}

@keyframes insuranceDetailsReveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.insurance-section-label {
    grid-column: 1 / -1;
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--book-dark);
    margin-bottom: -4px;
}

.insurance-section-label.secondary-label {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

/* Date of Birth three-field container */
.dob-fields-container {
    display: flex;
    align-items: end;
    gap: 8px;
}

.dob-fields-container input {
    text-align: center;
}

.dob-fields-container label {
    margin-bottom: 2px;
    padding-left: 2px; /* Visual alignment with the rounded input field below */
    font-weight: normal;
}

/* Month and Day fields - narrower */
.dob_month,
.dob_day {
    width: 70px;
    flex-shrink: 0;
}

/* Year field - wider */
.dob_year {
    width: 100px;
    flex-shrink: 0;
}

/* Error state for DOB fields */
.dob-fields-container input.date-error {
    border-color: var(--error-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25) !important;
}

/* ======================== */
/* Booking Error Page       */
/* ======================== */
.booking-error-page .container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding: var(--spacing-xl) var(--spacing-md);
}

.booking-error-page .booking-error-card {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-color: var(--error-light-bg);
    padding: var(--spacing-xxl) var(--spacing-xl);
    border-radius: var(--border-radius-lg);
}

.booking-error-page .error-icon {
    color: var(--error-color);
    margin-bottom: var(--spacing-md);
}

.booking-error-page .error-icon svg {
    width: 50px;
    height: 50px;
}

.booking-error-page h2 {
    color: var(--error-color);
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-lg);
}

.booking-error-page .error-details {
    margin-bottom: var(--spacing-lg);
}

.booking-error-page .error-details p {
    font-size: var(--text-md);
    color: var(--text-color);
    margin-bottom: 0;
    line-height: var(--leading-relaxed);
}

.booking-error-page .error-apology {
    font-size: var(--text-sm);
    color: var(--muted-text-color);
    margin-bottom: var(--spacing-xl);
}

.booking-error-page .button-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.booking-error-page .button-group .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    border-radius: 100px;
    font-size: var(--text-md);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.booking-error-page .button-group .btn-primary {
    background: var(--primary-color);
    color: white;
    border: 2px solid var(--primary-color);
}

.booking-error-page .button-group .btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(250, 114, 104, 0.3);
}

.booking-error-page .button-group .btn-outline-secondary {
    background: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--border-color);
}

.booking-error-page .button-group .btn-outline-secondary:hover {
    background: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
    transform: translateY(-2px);
}

/* Responsive: single column on mobile */
@media (max-width: 768px) {
    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .insurance-info-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 20px;
    }

    .insurance-info-section {
        padding: 14px;
    }

    .contact-header h2 {
        font-size: var(--text-2xl);
    }

    .contact-subtitle {
        font-size: var(--text-lg);
        margin-bottom: 1rem;
    }

    .contact-form-grid .form-group input,
    .contact-form-grid .form-group select {
        max-width: 100%;
    }

    /* Insurance type select: remove desktop max-width cap on mobile */
    .insurance-type-field select {
        max-width: 100%;
    }

    /* Insurance details inner grid: single column on mobile */
    .insurance-details-container {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding: 16px;
    }

    /* DOB fields mobile adjustments */
    .dob-fields-container {
        gap: 6px;
    }

    #dob_month,
    #dob_day {
        width: 60px;
    }

    #dob_year {
        width: 85px;
    }

    .dob-separator {
        font-size: var(--text-md);
    }

    /* Fix checkbox text cutoff on contact page */
    main * {
        box-sizing: border-box;
    }

    form[action*='/book/contact'] {
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
    }

    main {
        padding: 0;
        overflow-x: hidden;
    }

    main .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
    }

    .form-container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        max-width: 100%;
        width: 100%;
        margin: 0;
        overflow-x: hidden;
    }

    form[action*='/book/contact'] .form-group {
        max-width: 100%;
        width: 100%;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    form[action*='/book/contact'] label.checkbox-container {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    form[action*='/book/contact'] .checkbox-container input[type='checkbox'] {
        flex-shrink: 0;
        width: 18px;
        min-width: 18px;
        margin-top: 2px;
    }

    form[action*='/book/contact'] .checkbox-container .checkbox-text,
    form[action*='/book/contact'] .checkbox-container span.checkbox-text {
        flex: 1;
        min-width: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        line-height: var(--leading-relaxed);
        max-width: 100%;
        display: inline;
        white-space: normal;
    }

    /* Health, support, and tried page mobile adjustments */
    .health-conditions .checkbox-container {
        width: 100%;
        max-width: 100%;
    }

    /* Tried page (siblings layout) - Continue button first, Back button second */
    form[action*='/book/tried/'] .health-button-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    form[action*='/book/tried/'] .button-group {
        width: 100%;
    }

    form[action*='/book/tried/'] .health-back-button {
        width: 100%;
        max-width: 100%;
    }

    form[action*='/book/tried/'] .button-group button[type='submit'] {
        width: 100%;
        max-width: 100%;
    }

    /* Health page (nested layout) - both buttons inside .button-group */
    form[action*='/book/health/'] .button-group {
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
        width: 100%;
    }

    form[action*='/book/health/'] .button-group button[type='submit'],
    form[action*='/book/health/'] .button-group a.btn {
        width: 100%;
        max-width: 100%;
    }

    /* Support page (nested layout) - both buttons inside .button-group */
    form[action*='/book/support/'] .button-group {
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
        width: 100%;
    }

    form[action*='/book/support/'] .button-group button[type='submit'],
    form[action*='/book/support/'] .button-group a.btn {
        width: 100%;
        max-width: 100%;
    }

    /* Tried page (nested layout) - both buttons inside .button-group */
    form[action*='/book/tried/'] .button-group {
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
        width: 100%;
    }

    form[action*='/book/tried/'] .button-group button[type='submit'],
    form[action*='/book/tried/'] .button-group a.btn {
        width: 100%;
        max-width: 100%;
    }

    .contact-title {
        margin-top: 1rem;
    }

    /* Booking error page mobile */
    .booking-error-page .container {
        padding: var(--spacing-md) var(--spacing-sm);
        min-height: auto;
        align-items: flex-start;
    }

    .booking-error-page .booking-error-card {
        padding: var(--spacing-lg) var(--spacing-md);
        border-radius: var(--border-radius-md);
    }

    .booking-error-page h2 {
        font-size: var(--text-xl);
    }

    .booking-error-page .button-group {
        max-width: 100%;
    }
}

/* Tiny screens (≤375px) — go edge-to-edge, no margin/padding */
@media (max-width: 375px) {
    main {
        padding: 0;
    }

    main .container {
        padding: 0 8px;
    }

    .form-container {
        padding: 6px 4px;
    }

    form[action*='/book/contact'] .contact-form-grid {
        padding: 0;
        margin: 0;
        max-width: 100%;
        column-gap: 0;
        row-gap: 12px;
    }

    /* All text inputs and selects go full width (exclude radio/checkbox) */
    form[action*='/book/contact'] .contact-form-grid input[type='text'],
    form[action*='/book/contact'] .contact-form-grid input[type='tel'],
    form[action*='/book/contact'] .contact-form-grid input[type='email'],
    form[action*='/book/contact'] .contact-form-grid select {
        max-width: 100%;
        width: 100%;
        padding-left: 10px;
        padding-right: 36px;
    }

    /* DOB fields: stack vertically and extend to full width */
    form[action*='/book/contact'] .dob-fields-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    form[action*='/book/contact'] .dob_month,
    form[action*='/book/contact'] .dob_day,
    form[action*='/book/contact'] .dob_year {
        width: 100% !important;
        flex-shrink: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    form[action*='/book/contact'] .dob_month input,
    form[action*='/book/contact'] .dob_day input,
    form[action*='/book/contact'] .dob_year input {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px;
        padding-right: 10px;
        font-size: var(--text-md);
    }

    form[action*='/book/contact'] .dob_year input::placeholder {
        font-size: var(--text-md);
    }

    /* Radio buttons: collapse excess spacing between options */
    form[action*='/book/contact'] .radio-group {
        gap: 4px;
    }

    form[action*='/book/contact'] .radio-container {
        margin-bottom: 0;
    }

    /* Ensure radio text is visible */
    form[action*='/book/contact'] .radio-text {
        font-size: var(--text-md);
        flex: 1;
        word-wrap: break-word;
    }

    .contact-header {
        margin-top: 12px;
        padding: 0 4px;
    }

    form[action*='/book/contact'] .contact-button-row {
        flex-wrap: wrap;
    }

    form[action*='/book/contact'] .contact-submit-btn {
        flex: 1 1 auto;
    }

    /* Center required field text at bottom */
    form[action*='/book/contact'] .button-group + div {
        text-align: center;
    }
}

/* Fix input fields border-radius cutoff at 320px */
@media (max-width: 320px) {
    .form-container {
        padding: 0;
    }

    .contact-form-grid {
        max-width: 100%;
        margin: 0;
        padding: 0 4px;
    }

    /* Contact page: ensure nothing overflows the 320px viewport */
    form[action*='/book/contact'],
    main,
    main .container,
    .form-container {
        overflow-x: hidden;
        max-width: 100%;
        min-width: 0;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Only hide overflow on grid form-groups, not radio buttons */
    form[action*='/book/contact'] .contact-form-grid .form-group {
        overflow: hidden;
    }

    /* Reduce font size for text inputs and selects to prevent text cutoff */
    form[action*='/book/contact'] .contact-form-grid input[type='text'],
    form[action*='/book/contact'] .contact-form-grid input[type='tel'],
    form[action*='/book/contact'] .contact-form-grid input[type='email'],
    form[action*='/book/contact'] .contact-form-grid select {
        font-size: var(--text-xs);
    }

    /* Smaller placeholder text for phone and state fields */
    form[action*='/book/contact']
        .contact-form-grid
        input[type='tel']::placeholder,
    form[action*='/book/contact'] .contact-form-grid select option[disabled] {
        font-size: var(--text-xs);
    }

    form[action*='/book/contact']
        .contact-form-grid
        input[type='text']::placeholder,
    form[action*='/book/contact']
        .contact-form-grid
        input[type='email']::placeholder {
        font-size: var(--text-xs);
    }

    /* Reduce font size for better fit on very small screens */
    .health-label {
        font-size: var(--text-md) !important;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .required-asterisk {
        font-size: var(--text-md) !important;
    }

    .form-group {
        max-width: 100%;
        overflow: visible;
    }

    /* Booking error page tiny screens */
    .booking-error-page .container {
        padding: var(--spacing-sm) 8px;
    }

    .booking-error-page .booking-error-card {
        padding: var(--spacing-md) var(--spacing-sm);
    }
}

header {
    background: var(--tertiary-color);
    color: var(--light-text-color);
    padding: 0;
}

header .container {
    padding: 1rem;
}

header .progress {
    background: var(--background-color);
    color: var(--text-color);
}

footer {
    background: transparent;
    color: var(--text-color);
    padding: 0;
    margin-top: 0;
    flex-shrink: 0;
}

footer p {
    margin-bottom: 0;
}

footer p:last-child {
    margin-top: var(--spacing-md);
}

/* Support panel — "Prefer to talk to someone?" footer above 911 */
.support-panel {
    background: var(--background-color);
    border-top: 1px solid var(--book-warm-border);
    border-bottom: 1px solid var(--book-warm-border);
    padding: var(--spacing-sm) 44px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.support-panel-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.support-panel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-color);
    flex-shrink: 0;
}

.support-panel-text {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--book-dark);
    font-weight: 400;
}

.support-panel-cta {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--book-dark);
    padding: 8px 18px;
    border-radius: 99px;
    border: 1px solid var(--book-muted-teal);
    background: var(--surface-color);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.support-panel-cta:hover {
    background: var(--form-bg);
}

.support-panel-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.support-panel-email-inline {
    color: var(--book-dark);
    text-decoration: none;
    font-weight: 500;
}

.support-panel-email-inline:hover {
    text-decoration: underline;
}

/* The 911 line is one short sentence; it took 3rem of air above and below, which
   made the whole footer stack taller than the content it followed. */
.emergency-footer {
    background: var(--background-color);
    padding: var(--spacing-md) 0;
    margin-top: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emergency-content {
    display: flex;
    align-items: center;
    gap: 17px;
}

.emergency-content span {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 400;
    color: var(--book-dark);
}

.emergency-content strong {
    font-weight: 600;
    color: var(--primary-color);
}

/* Sized around a single row of legal links: the bar is chrome, not content, so it
   is only as tall as the line it holds plus a little air. */
.policy-footer {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: var(--spacing-sm) 44px;
    background: var(--tertiary-color);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--light-text-color);
}

/* Inner wrapper keeps the bar full-bleed while the text sits inset from the
   page edges, matching the header's centered content. Wider than the 1100px it
   used to be so the seven controls and the copyright share one row on a laptop
   — at 1100px the last control wrapped onto a ragged second line of its own. */
.policy-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-lg);
    flex: 1;
    max-width: 1360px;
    margin: 0 auto;
}

.policy-footer-copyright {
    white-space: nowrap;
}

/* Ends flush with the right edge of the bar, so the row reads as copyright on one
   side and controls on the other rather than as text trailing off mid-bar. */
.policy-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-sm) var(--spacing-md);
    align-items: center;
}

.policy-footer-links a {
    color: var(--light-text-color);
    text-decoration: none;
    white-space: nowrap;
}

.policy-footer-links a:hover {
    text-decoration: underline;
}

/* Once the two blocks no longer fit side by side they stack, and a stacked block
   centres rather than leaving the shorter row hanging off the left edge. */
@media (max-width: 1200px) {
    .policy-footer-inner {
        justify-content: center;
        text-align: center;
    }

    .policy-footer-links {
        justify-content: center;
    }
}

a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Progress Indicator Styles */
.progress {
    background: var(--tertiary-color);
    padding: var(--spacing-lg) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 0 0 auto;
    text-decoration: none;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-md);
    transition: all 0.3s ease;
    border: 2px solid var(--muted-text-color);
    background: transparent;
    color: var(--muted-text-color);
}

.step-label {
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: center;
    color: var(--muted-text-color);
    transition: color 0.3s ease;
    white-space: nowrap;
}

.progress-line {
    flex: 1;
    height: 2px;
    background: var(--muted-text-color);
    margin: 0 var(--spacing-md);
    position: relative;
    top: -15px; /* Align with circle center */
}

/* Active state styles */
.progress-step.active .step-circle {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--light-text-color);
}

.progress-step.active .step-label {
    color: var(--text-color);
}

/* Completed state styles */
.progress-step.completed .step-circle {
    background-color: var(--muted-text-color);
    color: var(--light-text-color);
}

/* Logged in indicator */
.logged-in-indicator {
    text-align: center;
    font-size: var(--text-sm);
    /* color: var(--light-text-color); */
    opacity: 0.8;
    padding: 0.25rem;
}

/* Responsive adjustments for progress indicator */
@media (max-width: 768px) {
    .progress-indicator {
        padding: 0 var(--spacing-sm);
    }

    .step-circle {
        width: 35px;
        height: 35px;
        font-size: var(--text-md);
    }

    .step-label {
        font-size: var(--text-sm);
    }

    .progress-line {
        margin: 0 var(--spacing-sm);
        top: -12px;
    }
}

/* Existing Client Modal Styles */
.modal-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.modal-overlay .modal-content {
    background: var(--surface-color);
    padding: 40px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.modal-title {
    margin-bottom: 20px;
    color: var(--text-color);
}

.modal-text {
    margin-bottom: 15px;
    color: var(--muted-text-color);
    font-size: var(--text-md);
}

.modal-text-bottom {
    margin-bottom: 30px;
}

.modal-login-btn {
    padding: 14px 32px;
    font-size: var(--text-md);
    font-weight: 600;
    background-color: var(--success-color);
    color: var(--light-text-color);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

@media (max-width: 480px) {
    .step-label {
        font-size: var(--text-xs);
    }

    .step-circle {
        width: 30px;
        height: 30px;
        font-size: var(--text-sm);
    }

    .progress-line {
        margin: 0 var(--spacing-xs);
        top: -10px;
    }
}

@media (max-width: 425px) {
    .progress-indicator {
        padding: 0 0.2rem;
    }

    .progress-step {
        gap: 0.25rem;
    }

    .step-circle {
        width: 28px;
        height: 28px;
        font-size: var(--text-xs);
    }

    .step-label {
        font-size: var(--text-xs);
        max-width: 70px;
        white-space: normal;
        line-height: var(--leading-tight);
        text-align: center;
    }

    .progress-line {
        margin: 0 0.2rem;
        top: -10px;
    }
}

@media (min-width: 375px) and (max-width: 425px) {
    .progress-step[data-step='3'] .step-label {
        white-space: normal !important;
        max-width: 85px !important;
        word-break: keep-all !important;
    }
}

@media (max-width: 375px) {
    .progress-indicator {
        padding: 0 0.1rem !important;
    }

    .step-circle {
        width: 24px !important;
        height: 24px !important;
        font-size: var(--text-xs) !important;
    }

    .step-label {
        font-size: var(--text-xs) !important;
        white-space: normal !important;
        line-height: var(--leading-tight) !important;
        text-align: center !important;
    }

    /* Booking flow steps (data-step) */
    .progress-step[data-step='3'] .step-label {
        white-space: nowrap !important;
        hyphens: none !important;
        word-break: keep-all !important;
        font-size: var(--text-xs) !important;
        max-width: none !important;
    }

    /* Step 1 (Emergency Contact) - narrow to force word wrapping */
    .progress-step[data-page='1'] .step-label {
        max-width: 48px !important;
    }

    /* Step 2 (Care & Services) */
    .progress-step[data-page='2'] .step-label {
        max-width: 50px !important;
    }

    /* Step 3 (Demographics) - wider to fit on one line */
    .progress-step[data-page='3'] .step-label {
        max-width: 70px !important;
    }

    /* Step 4 (Referral Source) */
    .progress-step[data-page='4'] .step-label {
        max-width: 52px !important;
    }

    .progress-line {
        margin: 0 0.08rem !important;
        top: -9px !important;
    }
}

@media (max-width: 320px) {
    .progress-indicator {
        padding: 0 0.05rem !important;
    }

    .step-circle {
        width: 22px !important;
        height: 22px !important;
        font-size: var(--text-xs) !important;
    }

    .step-label {
        font-size: var(--text-xs) !important;
        white-space: normal !important;
        line-height: var(--leading-tight) !important;
        text-align: center !important;
    }

    /* Step 1 (Emergency Contact) - narrow to force word wrapping */
    .progress-step[data-page='1'] .step-label {
        max-width: 45px !important;
    }

    /* Step 2 (Care & Services) */
    .progress-step[data-page='2'] .step-label {
        max-width: 45px !important;
    }

    /* Step 3 (Demographics) - wider to fit on one line */
    .progress-step[data-page='3'] .step-label {
        max-width: 65px !important;
    }

    /* Step 4 (Referral Source) */
    .progress-step[data-page='4'] .step-label {
        max-width: 48px !important;
    }

    /* Booking header - Schedule Appointment */
    .progress-step[data-step='3'] .step-label {
        max-width: 90px !important;
        font-size: var(--text-xs) !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .progress-line {
        margin: 0 0.05rem !important;
        top: -8px !important;
    }
}

/* ============================================================
   Desktop 5-stage progress stepper + mobile wrapper + banner
   ============================================================ */

/* Outer wrapper — contains desktop and mobile variants */
.book-progress {
    /* no styles needed; children handle their own display */
}

/* Mobile 3-step stepper — shown only at <768px, same visual as desktop */
.book-progress-mobile {
    background: var(--book-warm-surface);
    border-bottom: 1px solid var(--book-warm-border);
    padding: 0 16px;
}

/* Desktop 5-stage stepper — shown only at ≥768px */
.book-progress-desktop {
    display: none;
}

@media (min-width: 768px) {
    .book-progress-desktop {
        display: block;
        background: var(--book-warm-surface);
        border-bottom: 1px solid var(--book-warm-border);
        padding: 0 44px;
    }

    .book-progress-mobile {
        display: none;
    }
}

.book-progress-inner {
    display: flex;
    align-items: stretch;
    max-width: 960px;
    margin: 0 auto;
}

/* Each stage cell */
.bp-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 6px 10px;
    position: relative;
}

/* Vertical divider between stages (right edge, stops at mid-height) */
.bp-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 40%;
    background: var(--book-warm-border);
}

/* Stage circle */
.bp-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 500;
    flex-shrink: 0;
    margin-bottom: 4px;
    background: transparent;
    border: 1.5px solid var(--book-muted-teal);
    color: var(--book-muted-teal);
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
}

/* Stage label */
.bp-label {
    font-size: var(--text-xs);
    font-weight: 500;
    text-align: center;
    line-height: var(--leading-snug);
    color: var(--muted-text-color);
    transition: color 0.2s;
}

/* Stage sub-label (e.g. "2 quick questions", insurance status) */
.bp-sub {
    font-size: var(--text-xs);
    color: var(--muted-text-color);
    text-align: center;
    margin-top: 2px;
    font-weight: 400;
}

/* Active stage */
.bp-step.bp-active .bp-circle {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.bp-step.bp-active .bp-label {
    color: var(--primary-color);
}

/* Done (completed) stage */
.bp-step.bp-done .bp-circle {
    background: var(--tertiary-color);
    border-color: var(--tertiary-color);
    color: #fff;
}

.bp-step.bp-done .bp-label {
    color: var(--tertiary-color);
}

/* Step-status strip — rendered server-side when a page supplies progressSteps
   (the confirmation page). It reports which steps are done and which are still
   owed, replacing a banner that announced them all complete unconditionally. */
.book-progress-status {
    background: var(--book-success-bg);
    border-bottom: 1px solid var(--tertiary-color);
    padding: 9px 44px;
}

.book-progress-status-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.book-progress-status-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 500;
}

/* The marker is a filled tick for a finished step and a hollow ring for one
   still owed, so the two are told apart without relying on colour. */
.book-progress-status-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--tertiary-color);
}

.is-done .book-progress-status-marker {
    background: var(--tertiary-color);
    color: var(--book-success-bg);
    border-color: var(--tertiary-color);
}

.book-progress-status-label {
    color: var(--tertiary-color);
    white-space: nowrap;
}

.is-todo .book-progress-status-label {
    font-weight: 600;
    text-decoration: underline;
}

.is-done .book-progress-status-label {
    opacity: 0.75;
}

/* Announced to screen readers only — the visible cue is the marker plus the
   link styling on an outstanding step. */
.book-progress-status-state {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The strip is the only chrome on a narrow confirmation screen, so it drops its
   wide gutters rather than forcing the labels to wrap one per line. */
@media (max-width: 600px) {
    .book-progress-status {
        padding: 9px var(--spacing-md);
    }

    .book-progress-status-list {
        gap: 6px 14px;
    }
}

/* Under-21 Modal Specific Styles */
.under-21-modal .modal-content {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    text-align: left;
}

.under-21-modal .modal-title {
    text-align: center;
    font-size: var(--text-2xl);
    margin-bottom: 24px;
    color: var(--text-color);
}

.under-21-modal .modal-text-container {
    margin-bottom: 24px;
}

.under-21-modal .modal-text {
    margin-bottom: 12px;
    color: var(--muted-text-color);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.under-21-modal .resource-list {
    margin: 12px 0 12px 20px;
    padding: 0;
    color: var(--muted-text-color);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.under-21-modal .resource-list li {
    margin-bottom: 8px;
}

.under-21-modal .modal-primary-btn {
    width: 100%;
    padding: 14px 32px;
    font-size: var(--text-md);
    font-weight: 600;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 8px;
}

.under-21-modal .modal-primary-btn:hover {
    background-color: var(--primary-hover);
}

/* Mobile responsive styles for under-21 modal */
@media (max-width: 768px) {
    .under-21-modal .modal-content {
        padding: 30px 24px;
        max-height: 85vh;
    }

    .under-21-modal .modal-title {
        font-size: var(--text-xl);
        margin-bottom: 20px;
    }

    .under-21-modal .modal-text,
    .under-21-modal .resource-list {
        font-size: var(--text-sm);
    }
}

@media (max-width: 480px) {
    .under-21-modal .modal-content {
        padding: 24px 20px;
        width: 95%;
    }

    .under-21-modal .modal-title {
        font-size: var(--text-lg);
    }

    .under-21-modal .modal-text,
    .under-21-modal .resource-list {
        font-size: var(--text-sm);
    }

    .under-21-modal .resource-list {
        margin-left: 16px;
    }
}

/* Select styling for state dropdown */
/* Style disabled options to match placeholder text color */
select option[disabled] {
    color: var(--muted-text-color);
}

/* Style the select when no option is selected to match placeholder color */
select:invalid {
    color: var(--muted-text-color);
}

/* Ensure selected options are always black */
select:valid {
    color: var(--text-color);
}

/* Ensure all regular options are black */
select option:not([disabled]) {
    color: var(--text-color);
}

/* Specific disabled submit button styling for better visual feedback */
button[type='submit']:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--book-warm-border);
    border-color: var(--book-warm-border);
}

button[type='submit']:disabled:hover {
    background-color: var(--book-warm-border);
    border-color: var(--book-warm-border);
    transform: none;
}

#date_of_birth {
    font-family: var(--font-sans);
}

/* Checkbox styling for terms agreement */
.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--text-md);
    line-height: var(--leading-normal);
}

.checkbox-container input[type='checkbox'] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-top: 2px; /* Align with first line of text */
    flex-shrink: 0;
}

.checkbox-container .checkbox-text {
    flex: 1;
}

.checkbox-container input[type='checkbox']:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-container a {
    color: var(--primary-color);
    text-decoration: underline;
}

.checkbox-container a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Consent checkboxes on /book/contact — pill style matching health/support */
#agreements-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 980px;
    margin: 0 auto;
}

#agreements-section .checkbox-container {
    padding: 2px 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
}

#agreements-section .checkbox-container input[type='checkbox'] {
    width: 0.85rem;
    height: 0.85rem;
    margin: 0 0.5rem 0 0;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

#agreements-section .checkbox-container .checkbox-text {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--book-dark);
    line-height: var(--leading-normal);
    white-space: normal;
    flex: 1;
}

/* Radio button styling */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.radio-container {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--text-md);
    line-height: var(--leading-normal);
}

.radio-container input[type='radio'] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-top: 2px; /* Align with first line of text */
    flex-shrink: 0;
}

.radio-container .radio-text {
    flex: 1;
    font-weight: normal;
}

/* Health conditions checkbox styling */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--spacing-xs);
}

.health-conditions {
    max-width: 610px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* min-height, not height: on narrow screens the longer option labels wrap to two
 * or three lines, and a fixed 54px box let that text spill out over the pill
 * below it. The vertical padding is the wrap allowance — with a single-line
 * label the row is shorter than 54px, so min-height still holds every pill at
 * the original height and only wrapped rows grow. */
.health-conditions .checkbox-container {
    width: 100%;
    min-height: 54px;
    padding: 12px 20px;
    border: 2px solid var(--book-warm-border);
    border-radius: 100px;
    background: var(--surface-color);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.health-conditions .checkbox-container:hover {
    border-color: var(--tertiary-color);
    background: var(--book-warm-white);
}

/* Show the actual checkbox */
.health-conditions .checkbox-container input[type='checkbox'] {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 1.2rem 0 0;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

/* Selected state styling */
.health-conditions
    .checkbox-container
    input[type='checkbox']:checked
    + .checkbox-text {
    font-weight: 500;
}

.health-conditions .checkbox-container input[type='checkbox']:checked {
    & + .checkbox-text {
        color: var(--text-color);
    }

    & ~ .checkbox-container,
    &:checked ~ * {
        background: #f6e8d4;
        border-color: #f6e8d4;
    }
}

/* Apply selected styling to the container when checkbox is checked */
.health-conditions .checkbox-container:has(input[type='checkbox']:checked) {
    background: var(--book-warm-accent);
    border-color: var(--primary-color);
}

.health-conditions
    .checkbox-container:has(input[type='checkbox']:checked)
    .checkbox-text {
    color: var(--book-dark);
}

/* Fallback for browsers that don't support :has() */
.health-conditions .checkbox-container.selected {
    background: var(--book-warm-accent);
    border-color: var(--primary-color);
}

.health-conditions .checkbox-text {
    padding: 0;
    text-align: left;
    flex: 1;
    /* A flex item's default min-width: auto would let a long label push the pill
     * wider than the viewport rather than wrap inside it. */
    min-width: 0;
    overflow-wrap: break-word;
    font-size: var(--text-md);
    font-weight: 400;
    color: var(--book-dark);
}

/* Bold text when checkbox is selected */
.health-conditions
    .checkbox-container:has(input[type='checkbox']:checked)
    .checkbox-text {
    font-weight: 500;
}

/* Fallback for browsers that don't support :has() */
.health-conditions .checkbox-container.selected .checkbox-text {
    font-weight: 700;
}

/* Health page label styling */
.health-label {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--text-md);
    line-height: 150%;
    letter-spacing: 0px;
    color: var(--text-color);
    white-space: normal; /* Allow wrapping for multi-line labels */
}

/* Hide label break on larger screens */
.label-break {
    display: none;
}

.required-asterisk {
    color: var(--primary-color);
    font-family: inherit;
    font-weight: 600;
    font-size: 1em;
    line-height: inherit;
}

/* Health page button styling */
.health-conditions ~ .button-group button[type='submit'],
form[action*='/book/health/'] .button-group button[type='submit'],
form[action*='/book/tried/'] .button-group button[type='submit'] {
    width: 100%;
    max-width: 100%;
    height: 54px;
    padding: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 100px;
    background: var(--primary-color);
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

form[action*='/book/health/'] .button-group button[type='submit']:hover,
form[action*='/book/tried/'] .button-group button[type='submit']:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(250, 114, 104, 0.3);
}

/* Warmup pages (health/support) header styles */
.warmup-page-header {
    max-width: 610px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
}

/* Contact page header — same layout as warmup but wider */
.contact-page-header {
    max-width: 980px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}
.warmup-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-2xl);
    color: var(--tertiary-color);
    margin-bottom: 6px;
    letter-spacing: -0.025em;
    line-height: var(--leading-none);
}
.warmup-subtitle {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--text-md);
    color: var(--book-dark);
    line-height: var(--leading-relaxed);
}
.warmup-disclaimer {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--tertiary-color);
    font-weight: 400;
    max-width: 610px;
    width: 100%;
    margin: 10px auto 0;
}

/* Health page button container */
.health-button-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 610px;
    margin: 16px auto 0;
    padding-top: 14px;
    border-top: 1px solid var(--book-warm-border);
}

/* Generic full-width form action row (back + submit, no max-width cap) */
.form-button-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--book-warm-border);
}

/* Back button on health/support/contact pages - left side */
.health-back-button {
    width: auto;
    min-width: 100px;
    height: auto;
    padding: 10px 20px;
    border: 1px solid var(--book-warm-border);
    border-radius: 99px;
    background: transparent;
    color: var(--book-dark);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 400;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    box-sizing: border-box;
    margin: 0;
    flex-shrink: 0;
}

.health-back-button:hover {
    background: var(--book-warm-surface);
    border-color: var(--book-warm-border);
}

.health-back-button:active {
    background: var(--book-warm-accent);
    border-color: var(--book-warm-border);
}

/* Continue button on warmup pages — mirrors back button shape with primary color */
.health-continue-button {
    width: auto;
    height: auto;
    padding: 10px 28px;
    border: 2px solid var(--primary-color);
    border-radius: 100px;
    background: var(--primary-color);
    color: white;
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: inherit;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    margin: 0;
    flex: 0 0 auto;
}

.health-continue-button:hover:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(250, 114, 104, 0.3);
}

.health-continue-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button group for health, support, and tried pages - right side */
form[action*='/book/health/'] .button-group,
form[action*='/book/support/'] .button-group,
form[action*='/book/tried/'] .button-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
    flex: 1;
}

/* Continue button on support page matches health page styling */
form[action*='/book/support/'] .button-group button[type='submit'] {
    width: 100%;
    max-width: 100%;
    height: 54px;
    padding: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 100px;
    background: var(--primary-color);
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

form[action*='/book/support/'] .button-group button[type='submit']:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(250, 114, 104, 0.3);
}

/* Help link styling - simple white text */
.help-link {
    color: var(--light-text-color);
    text-decoration: none;
    font-size: var(--text-md);
    font-weight: 400;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    height: 100%;
}

.help-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Schedule call button styling - white text, coral border, no hover effects */
.schedule-call-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius-xl);
    color: white;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    margin-left: var(--spacing-md);
    cursor: pointer;
}

.call-text {
    font-size: var(--text-md);
    font-weight: 600;
}

.call-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Responsive adjustments for help elements */
@media (max-width: 768px) {
    .help-link {
        font-size: var(--text-sm);
    }

    .schedule-call-button {
        padding: 0.5rem 1rem;
        gap: 0.25rem;
        margin-left: var(--spacing-sm);
    }

    .call-text {
        font-size: var(--text-sm);
    }

    .call-icon {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .help-link {
        display: none; /* Hide "Need Help?" on very small screens */
    }

    .schedule-call-button {
        padding: 0.4rem 0.8rem;
        margin-left: 0;
    }

    .call-text {
        font-size: var(--text-sm);
    }
}

/* Mobile-specific improvements for 768px and smaller */
@media (max-width: 768px) {
    /* Prevent horizontal scroll globally */
    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Header improvements */
    header {
        width: 100%;
        box-sizing: border-box;
    }

    header .container {
        max-width: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
    }

    /* Emergency footer mobile fixes */
    .emergency-footer {
        width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
        left: auto;
        right: auto;
        position: static;
    }

    .emergency-content {
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 1rem;
    }

    /* Support panel mobile */
    .support-panel {
        flex-direction: column;
        gap: 12px;
        padding: 16px 1rem;
        text-align: center;
    }

    .support-panel-left {
        flex-direction: column;
        gap: 8px;
    }

    .support-panel-dot {
        display: none;
    }

    .support-panel-text {
        font-size: var(--text-xs);
        line-height: var(--leading-normal);
    }

    .support-panel-cta {
        width: 100%;
        text-align: center;
        padding: 12px 18px;
        font-size: var(--text-sm);
    }

    .emergency-footer {
        padding: 1.5rem 1rem;
    }

    .emergency-content {
        gap: 12px;
    }

    .emergency-content span {
        font-size: var(--text-sm);
    }

    .emergency-content svg {
        width: 20px;
        height: 17px;
        flex-shrink: 0;
    }

    .policy-footer {
        padding: var(--spacing-md) 1rem;
        text-align: center;
    }

    .policy-footer-inner {
        flex-direction: column;
        gap: 8px;
    }
}

/* Additional mobile improvements for 425px and smaller */
@media (max-width: 425px) {
    /* Show line break in label text for better readability on mobile */
    .label-break {
        display: block;
    }

    /* Prevent horizontal scroll globally */
    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Header improvements */
    header {
        width: 100%;
        box-sizing: border-box;
    }

    header .container {
        max-width: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
    }

    header nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .nav-links {
        flex: 1;
    }

    .nav-links:first-child {
        justify-content: flex-start;
    }

    .nav-links:last-child {
        justify-content: flex-end;
        font-size: var(--text-sm);
    }

    .nav-links img.logo {
        max-height: 32px;
        width: auto;
    }

    /* Progress indicator mobile fixes - more evenly spaced for 425px-375px */
    .progress {
        width: 100%;
        box-sizing: border-box;
        padding: 0.75rem 0.5rem;
    }

    .progress-indicator {
        justify-content: space-between;
        gap: 0.25rem;
        width: 100%;
        max-width: 100%;
    }

    .progress-step {
        flex: 1;
        min-width: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .step-circle {
        width: 28px;
        height: 28px;
        font-size: var(--text-sm);
    }

    .step-label {
        font-size: var(--text-xs);
        white-space: normal;
        text-align: center;
        line-height: var(--leading-tight);
        word-break: break-word;
    }

    .progress-line {
        flex: 1;
        margin: 0 0.25rem;
        min-width: 10px;
    }

    /* Emergency footer mobile fixes */
    .emergency-footer {
        width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
        left: auto;
        right: auto;
        position: static;
        padding: 1.25rem 0.75rem;
    }

    .emergency-content {
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 0.5rem;
        gap: 10px;
    }

    .emergency-content span {
        font-size: var(--text-sm);
    }

    .support-panel-text {
        font-size: var(--text-xs);
    }

    .support-panel-cta {
        font-size: var(--text-sm);
        padding: 10px 16px;
    }

    /* The links wrap onto two or three ragged, left-aligned rows at this width;
       centering them and giving the rows their own spacing keeps the block tidy. */
    .policy-footer-links {
        justify-content: center;
        gap: var(--spacing-sm) var(--spacing-md);
    }

    .policy-footer-copyright {
        white-space: normal;
    }
}

/* Screen sizes smaller than 375px - adjust header to prevent button cutoff */
@media (max-width: 376px) {
    header .container {
        padding: 0.5rem;
    }

    header nav {
        gap: 0.25rem;
    }

    .nav-links img.logo {
        max-height: 28px;
        width: auto;
    }

    .nav-links:last-child {
        flex-direction: column !important;
        align-items: flex-end !important;
        font-size: var(--text-xs) !important;
        white-space: nowrap !important;
        gap: 0.2rem !important;
    }

    .schedule-call-button {
        padding: 0.35rem 0.6rem !important;
        gap: 0.15rem !important;
        margin-left: 0 !important;
        font-size: var(--text-xs) !important;
        border-width: 1.5px !important;
    }

    .call-text {
        display: inline !important;
    }

    .call-icon {
        font-size: var(--text-md) !important;
    }

    /* Progress indicator for very small screens */
    .progress {
        padding: 0.5rem 0.25rem;
    }

    .progress-indicator {
        gap: 0.15rem;
    }

    .progress-step[data-step='3'] {
        flex: 1.5;
    }

    .step-circle {
        width: 26px;
        height: 26px;
        font-size: var(--text-xs);
    }

    .step-label {
        font-size: var(--text-xs);
        white-space: normal;
        line-height: var(--leading-tight);
        text-align: center;
    }

    .progress-line {
        margin: 0 0.15rem;
        min-width: 8px;
    }

    /* Step 1 - About You */
    .progress-step[data-step='1'] .step-label {
        max-width: 40px;
    }

    /* Step 2 - Verify Insurance */
    .progress-step[data-step='2'] .step-label {
        max-width: 45px;
    }

    /* Step 3 - Schedule Appointment - keep "Appointment" on one line */
    .progress-step[data-step='3'] .step-label {
        max-width: 90px !important;
        font-size: var(--text-xs) !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }
}

/* Care Coordinator specific styles */
.disabled-option {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Schedule Appointment - Date Accordion Styles */
.date-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    align-items: center;
}

.date-item {
    width: 100%;
    border: 2px solid #f6e8d4;
    border-radius: 10px;
    background: white;
    overflow: hidden;
    transition: all 0.3s ease;
}

.date-item:hover {
    border-color: var(--primary-color);
}

.date-item.expanded {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(250, 114, 104, 0.15);
}

/* Highlight collapsed cards that have a selection */
.date-item.has-selection {
    border-color: var(--primary-color);
    background: linear-gradient(to right, #fef9f5, white);
}

.date-button {
    width: 100%;
    padding: 20px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-sans);
    border-radius: 10px;
}

.date-button:hover {
    background: var(--book-warm-surface);
}

.date-item.expanded .date-button {
    background: var(--book-warm-surface);
}

.date-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
}

.day-name {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-color);
}

.slot-count {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--book-dark);
}

.expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.date-item.expanded .expand-icon {
    transform: rotate(180deg);
}

/* Selected slot indicator on collapsed cards */
.selected-slot-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--primary-color);
    color: white;
    border-radius: 10px;
    font-size: var(--text-sm);
    font-weight: 400;
    margin-left: 12px;
    transition: all 0.3s ease;
}

.selected-slot-indicator svg {
    color: white;
}

.selected-slot-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.selected-time {
    font-weight: 500;
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
}

.selected-provider {
    font-size: var(--text-xs);
    font-weight: 400;
    opacity: 0.95;
    line-height: var(--leading-tight);
}

/* Hide indicator when card is expanded */
.date-item.expanded .selected-slot-indicator {
    display: none;
}

/* Hide appointment slots by default */
.appointment-slots-container {
    display: none;
    padding: 20px;
    background: var(--book-warm-surface);
}

/* Show appointment slots when expanded */
.date-item.expanded .appointment-slots-container {
    display: block;
    animation: slideDown 0.3s ease;
}

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

/* Time slots styling */
.time-slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.time-slot {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border: 2px solid #f6e8d4;
    border-radius: 50px;
    background: var(--book-warm-surface);
    cursor: pointer;
    transition: all 0.3s ease;
}

.time-slot:hover {
    border-color: var(--primary-color);
    background: var(--book-warm-white);
}

.time-slot.selected {
    border-color: var(--primary-color);
    background: #f6e8d4;
}

.time-slot input[type='radio'] {
    width: 20px;
    height: 20px;
    margin: 0 12px 0 0;
    cursor: pointer;
    flex-shrink: 0;
}

.time-slot-label {
    flex: 1;
    cursor: pointer;
    font-size: var(--text-md);
    font-weight: 400;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.time-slot.selected .time-slot-label {
    font-weight: 500;
}

/* Submit button for scheduling */
.appointment-slots ~ button[type='submit'],
form[action='/book/schedule'] button[type='submit'] {
    width: 100%;
    max-width: 610px;
    height: 54px;
    margin: 30px auto 0;
    padding: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 100px;
    background: var(--primary-color);
    color: white;
    font-weight: 500;
    font-size: var(--text-md);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

form[action='/book/schedule'] button[type='submit']:hover:not(:disabled) {
    background: #e86055;
    border-color: #e86055;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(250, 114, 104, 0.3);
}

form[action='/book/schedule'] button[type='submit']:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #ccc;
    border-color: #ccc;
}

form[action='/book/schedule'] button[type='submit']:disabled:hover {
    background-color: #ccc;
    border-color: #ccc;
    transform: none;
    box-shadow: none;
}

/* Responsive adjustments for schedule page */
@media (max-width: 768px) {
    .date-button {
        padding: 16px;
    }

    .day-name {
        font-size: var(--text-md);
    }

    .slot-count {
        font-size: var(--text-sm);
    }

    .appointment-slots-container {
        padding: 0 16px 16px 16px;
    }

    .time-slot {
        padding: 14px;
    }

    .time-slot-label {
        font-size: var(--text-sm);
    }

    .selected-slot-indicator {
        padding: 6px 12px;
        font-size: var(--text-sm);
        gap: 8px;
    }

    .selected-time {
        font-size: var(--text-sm);
    }

    .selected-provider {
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .date-button {
        padding: 14px;
        flex-wrap: wrap;
    }

    .day-name {
        font-size: var(--text-sm);
    }

    .slot-count {
        font-size: var(--text-sm);
    }

    .selected-slot-indicator {
        width: 100%;
        margin: 8px 0 0 0;
        padding: 8px 12px;
        justify-content: flex-start;
    }

    .selected-time {
        font-size: var(--text-sm);
    }

    .selected-provider {
        font-size: var(--text-xs);
    }

    .appointment-slots-container {
        padding: 0 12px 12px 12px;
    }

    .time-slot {
        padding: 12px;
        border-radius: 50px;
    }

    .time-slot-label {
        font-size: var(--text-sm);
        flex-wrap: wrap;
    }
}

/**********************************************************************
 * Appointment Confirmation Page Styles
 * --------------------------------------------------------------------
 * Styles specific to the appointment confirmation page. This section
 * is separated from the main booking styles for clarity and maintainability.
 *********************************************************************/
.confirmed-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Add more horizontal padding on larger screens to prevent boxes from touching edges */
@media (min-width: 1024px) {
    .confirmed-content {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        gap: 3rem;
    }
}

.confirmed-header {
    text-align: center;
    margin-bottom: 3rem;
}

.confirmed-header h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #15202c;
    margin-bottom: 1rem;
}

.confirmed-header h2 strong {
    color: var(--primary-color);
}

.confirmed-header p {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 400;
    color: var(--book-dark);
    line-height: var(--leading-relaxed);
}

.confirmed-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Appointment Summary Section */
.appointment-summary-section {
    background: var(--book-warm-surface);
    border: 2px solid #f6e8d4;
    border-radius: 1rem;
    padding: 2rem;
}

.appointment-summary-section h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--tertiary-color);
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
}

.summary-item {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f6e8d4;
}

.summary-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.summary-value {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 400;
    color: #15202c;
    line-height: var(--leading-relaxed);
}

.summary-value strong {
    font-weight: 600;
    color: var(--book-dark);
    margin-right: 0.5rem;
}

/* Calendar Section */
.calendar-section {
    background: var(--book-warm-surface);
    border: 2px solid #f6e8d4;
    border-radius: 1rem;
    padding: 2rem;
}

.calendar-section h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--tertiary-color);
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
}

.calendar-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.calendar-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid #f6e8d4;
    border-radius: 0.75rem;
    background: var(--book-warm-surface);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.calendar-option:hover {
    border-color: var(--primary-color);
    background: var(--book-warm-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(250, 114, 104, 0.15);
}

.calendar-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.calendar-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.calendar-name {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 500;
    color: #15202c;
}

/* Confirmed Actions */
.confirmed-actions {
    text-align: center;
}

.prepare-button {
    width: 100%;
    max-width: 610px;
    height: 54px;
    padding: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 100px;
    background: var(--primary-color);
    color: white;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--text-md);
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prepare-button:hover {
    background: #e86055;
    border-color: #e86055;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(250, 114, 104, 0.3);
}

.login-link {
    margin-top: 1rem;
}

.login-link a {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 400;
    color: var(--primary-color);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.login-link a:hover {
    color: #e86055;
}

/* Responsive Design for Confirmation Page */
@media (max-width: 768px) {
    .confirmed-container {
        padding: 1.5rem 1rem;
    }

    .confirmed-header h2 {
        font-size: var(--text-2xl);
    }

    .confirmed-header p {
        font-size: var(--text-md);
    }

    .confirmed-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .appointment-summary-section,
    .calendar-section {
        padding: 1.5rem;
    }

    .appointment-summary-section h3,
    .calendar-section h3 {
        font-size: var(--text-lg);
    }
}

@media (max-width: 480px) {
    .confirmed-header h2 {
        font-size: var(--text-xl);
    }

    .confirmed-header p {
        font-size: var(--text-sm);
    }

    .appointment-summary-section,
    .calendar-section {
        padding: 1.25rem;
    }

    .calendar-option {
        padding: 0.875rem;
    }

    .calendar-icon {
        width: 32px;
        height: 32px;
    }

    .prepare-button {
        height: 48px;
        padding: 16px;
        font-size: var(--text-sm);
    }
}

/* Mobile fixes for refer page - allow text wrapping */
@media (max-width: 768px) {
    /* Allow labels to wrap on mobile for refer page */
    form[action*='/book/refer/'] .form-group > label {
        white-space: normal;
        word-wrap: break-word;
    }

    /* Ensure checkbox text wraps properly */
    form[action*='/book/refer/'] .checkbox-container {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    form[action*='/book/refer/'] .checkbox-container .checkbox-text {
        flex: 1;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        line-height: var(--leading-normal);
    }

    form[action*='/book/refer/'] .checkbox-container input[type='checkbox'] {
        flex-shrink: 0;
        margin-top: 2px;
    }

    /* Fix PCP knowledge question text wrapping */
    form[action*='/book/refer/'] #pcp-knowledge-question label {
        white-space: normal;
        word-wrap: break-word;
    }
}