/* ============================================================
   ANPTH Website Booking — v3.70 visual redesign
   "Clinical intake" direction: crisp, high-contrast, trustworthy.
   No selectors used by the JS were removed — see README for the
   list this file must keep supporting.
   ============================================================ */

:root {
  /* Brand (kept) */
    --brand: #EB6835;
    --brand-deep: #C84E24;
    --brand-tint: #FDECE3;
    --brand-tint-strong: #FAD3BE;
  /* Neutrals — cool slate instead of warm cream, for a clinical feel */
    --ink: #121A22;
    --ink-soft: #52606D;
    --ink-faint: #8A96A3;
    --surface: #FFFFFF;
    --surface-alt: #F6F8FA;
    --surface-sunken: #EEF1F4;
    --line: #E2E7EB;
    --line-strong: #CBD3DA;
  /* Semantic (refined — teal/green success, clear red error, distinct from brand orange) */
    --success-bg: #ECF8F1;
    --success-text: #146C43;
    --success-border: #BCE3CC;
    --danger-bg: #FDF0EF;
    --danger-text: #B3261E;
    --danger-border: #F3C6C2;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 9px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(18,26,34,0.04), 0 16px 40px -20px rgba(18,26,34,0.20);
    --shadow-soft: 0 1px 2px rgba(18,26,34,0.05);
}

.anpth-booking-embed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--surface-alt);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.anpth-booking-embed * {
    box-sizing: border-box;
}

.anpth-booking-embed .is-hidden {
    display: none !important;
}

.anpth-booking-embed .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Shell / two-pane layout ---------- */

.booking-shell {
    width: 100%;
    margin: 0;
    padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 40px) 72px;
    display: flex;
    justify-content: center;
}

.booking-frame {
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

/* ---------- Left rail: intro + stepper ---------- */

.booking-rail {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--brand-deep);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

h1, h2, h3 {
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
}

h1 {
    margin-bottom: 10px;
    font-size: clamp(1.5rem, 2vw, 1.7rem);
    letter-spacing: -0.02em;
    font-weight: 800;
}

h2 {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    font-weight: 800;
}

h3 {
    margin-bottom: 6px;
    font-size: 1.05rem;
    font-weight: 800;
}

.intro {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.6;
}

.intro p {
    margin: 0 0 8px;
}

.intro p:last-child {
    margin-bottom: 0;
}

.stepper {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.progress-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 0 22px;
}

.progress-step::before {
  /* connecting line */
    content: '';
    position: absolute;
    top: 26px;
    left: 12px;
    width: 1px;
    height: calc(100% - 4px);
    background: var(--line-strong);
}

.progress-step:last-child::before {
    display: none;
}

.step-index {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink-faint);
    font-size: 0.72rem;
    font-weight: 800;
}

.step-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}

.step-label strong {
    color: var(--ink-faint);
    font-size: 0.88rem;
    font-weight: 700;
    transition: color 0.15s ease;
}

.step-label small {
    color: var(--ink-faint);
    font-size: 0.76rem;
    opacity: 0.85;
}

/* current + completed state (data-progress <= currentStep gets .is-active) */
.progress-step.is-active .step-index {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.progress-step.is-active .step-label strong {
    color: var(--ink);
}

.progress-step.is-active .step-label small {
    color: var(--ink-soft);
}

/* the last .is-active in the list = the current step; earlier ones = completed */
.progress-step.is-active:has(~ .progress-step.is-active) .step-index {
    background: var(--surface);
    border-color: var(--brand);
    color: transparent;
}

.progress-step.is-active:has(~ .progress-step.is-active) .step-index::after,
.progress-step.is-complete .step-index::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 900;
}

.progress-step.is-complete .step-index {
    background: var(--surface);
    border-color: var(--brand);
    color: transparent;
}

.rail-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.rail-contact-label {
    color: var(--ink-faint);
    font-size: 0.78rem;
    font-weight: 700;
}

.rail-contact-link {
    color: var(--brand-deep);
    font-weight: 800;
    font-size: 0.98rem;
    text-decoration: none;
}

.rail-contact-link:hover {
    text-decoration: underline;
}

/* ---------- Main content ---------- */

.booking-main {
    min-width: 0;
}

.form-step {
    display: none;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.form-step.is-active {
    display: block;
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.section-kicker {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--brand-deep);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.section-copy {
    max-width: 320px;
    margin: 0;
    color: var(--ink-soft);
    text-align: right;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* ---------- Provider list (directory-style, not cards-in-a-grid) ---------- */

.provider-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.provider-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 46px 14px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.provider-card:hover {
    border-color: var(--line-strong);
    background: var(--surface-alt);
}

.provider-card:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-tint);
}

.provider-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.provider-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 800;
}

.provider-card:has(input:checked) .provider-avatar {
    background: var(--brand);
    color: #fff;
}

.provider-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.provider-name {
    font-weight: 800;
    color: var(--ink);
    font-size: 0.96rem;
}

.provider-card small {
    color: var(--ink-soft);
    font-size: 0.84rem;
}

.field-group > .field-error {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
}

.provider-check {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
}

.provider-card:has(input:checked) .provider-check {
    border-color: var(--brand);
    background: var(--brand);
}

.provider-card:has(input:checked) .provider-check::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) translate(-1px, -1px);
}

/* ---------- Form fields ---------- */

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

label span,
legend {
    display: block;
    margin-bottom: 7px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ink);
}

.optional-label {
    color: var(--ink-faint);
    font-size: 0.8rem;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}

textarea {
    resize: vertical;
}

.radio-field {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.radio-field legend {
    width: 100%;
    margin-bottom: 4px;
}

.radio-field label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
    cursor: pointer;
}

.radio-field input {
    width: auto;
    accent-color: var(--brand);
}

/* ---------- Buttons ---------- */

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.button.primary {
    background: var(--brand);
    color: #fff;
}

.button.primary:hover:not(:disabled) {
    background: var(--brand-deep);
}

.button.secondary {
    border-color: var(--line-strong);
    background: var(--surface);
    color: var(--ink);
}

.button.secondary:hover:not(:disabled) {
    border-color: var(--brand);
    color: var(--brand-deep);
}

.button.wide {
    width: 100%;
    margin-top: 22px;
}

.button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- Status / notice / panels ---------- */

.notice,
.status,
.request-only,
.slot-section,
.acknowledgement,
.result-panel {
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

.notice a {
    color: var(--brand-deep);
    font-weight: 800;
    text-decoration: none;
}

.notice a:hover {
    text-decoration: underline;
}

.status.success,
.result-panel.success {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
}

.status strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.96rem;
}

.status.error,
.result-panel.error {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger-border);
}

.request-only {
    background: var(--surface);
}

.acknowledgement {
    background: var(--surface);
}

.ack-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.ack-row input {
    width: auto;
    margin-top: 3px;
    accent-color: var(--brand);
}

.result-panel {
    font-size: 1rem;
    color: var(--ink);
}

.result-panel.success {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.result-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--success-text);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 900;
}

.result-copy strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.result-copy p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.55;
}

/* ---------- Slot picker ---------- */

.slot-section {
    background: var(--surface);
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.slot-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.slot-card:hover {
    border-color: var(--line-strong);
}

.slot-card:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-tint);
}

.slot-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.slot-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.slot-card strong {
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-size: 0.94rem;
}

.slot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--brand-tint);
    color: var(--brand-deep);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.slot-card small {
    color: var(--ink-faint);
    font-size: 0.78rem;
}

.slot-controls {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.slot-controls .button {
    min-width: 170px;
}

/* ---------- Loading ---------- */

.loading-appointments {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    color: var(--ink-soft);
    font-weight: 700;
    font-size: 0.92rem;
}

.loading-spinner {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2.5px solid var(--brand-tint-strong);
    border-top-color: var(--brand);
    animation: anpth-spin 0.8s linear infinite;
    flex: 0 0 auto;
}

@keyframes anpth-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- New-injury call panel ---------- */

.new-injury-call-panel {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);
    background: var(--danger-bg);
    color: var(--danger-text);
}

.new-injury-call-panel h3 {
    color: var(--danger-text);
    font-size: 1.1rem;
}

.new-injury-call-panel p {
    margin: 0 0 16px;
    color: var(--danger-text);
    opacity: 0.9;
    line-height: 1.55;
}

.new-injury-call-panel .call-clinic-button,
.new-injury-call-panel .email-clinic-button {
    display: inline-flex;
    width: auto;
    background: var(--danger-text);
    color: #fff;
}

.new-injury-call-panel .call-clinic-button:hover,
.new-injury-call-panel .email-clinic-button:hover {
    opacity: 0.9;
}

.new-injury-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.new-injury-actions .button {
    width: auto;
}

.email-clinic-button {
    text-decoration: none;
}


/* ---------- Field errors ---------- */

.has-error input,
.has-error select,
.has-error textarea {
    border-color: var(--danger-text) !important;
    box-shadow: 0 0 0 3px var(--danger-bg) !important;
}

.field-error {
    display: block;
    margin-top: 6px;
    color: var(--danger-text);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.radio-field.has-error {
    border-color: var(--danger-border) !important;
    background: var(--danger-bg) !important;
}

.radio-field .field-error {
    width: 100%;
    margin-top: 4px;
}

.slot-grid.has-error,
.slot-section.has-error {
    border-color: var(--danger-border) !important;
}

.slot-grid .field-error,
.slot-section .field-error {
    grid-column: 1 / -1;
    font-size: 0.86rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .booking-frame {
        grid-template-columns: 1fr;
    }

    .booking-rail {
        position: static;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 18px;
    }

    .booking-rail .rail-top .intro {
        display: none;
    }

    .booking-rail .rail-top h1 {
        font-size: 1.15rem;
        margin-bottom: 2px;
    }

    .booking-rail .rail-top .eyebrow {
        margin-bottom: 4px;
    }

    .stepper {
        flex-direction: row;
        border-top: none;
        padding-top: 0;
        gap: 2px;
    }

    .progress-step {
        padding: 0;
    }

    .progress-step::before {
        display: none;
    }

    .step-label {
        display: none;
    }

    .rail-contact {
        display: none;
    }
}

@media (max-width: 640px) {
    .booking-shell {
        padding: 16px 12px 48px;
    }

    .booking-rail {
        flex-wrap: wrap;
        border-radius: var(--radius-md);
    }

    .form-step {
        padding: 18px;
        border-radius: var(--radius-md);
    }

    .field-grid,
  .slot-grid {
        grid-template-columns: 1fr;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-copy {
        max-width: none;
        text-align: left;
    }

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

    .button, .slot-controls .button {
        width: 100%;
    }
}


/* ---------- v3.15 Shira feedback updates ---------- */

.contact-method-error {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger-text);
    font-size: 0.84rem;
    font-weight: 700;
}

.button.compact {
    min-height: 40px;
    padding: 0 16px;
    margin-bottom: 16px;
}

#secondPreferenceFields {
    margin-top: 4px;
}


/* ---------- v3.20 slot validation and request-copy cleanup ---------- */

.slot-validation-error {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger-text);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.4;
}

.slot-section.has-error {
    border-color: var(--danger-border) !important;
}

.request-status > div {
    margin-bottom: 6px;
}

.request-status > div:last-child {
    margin-bottom: 0;
}


/* ---------- v3.21 provider images + troubleshooting field ---------- */
.provider-avatar {
    overflow: hidden;
    padding: 0;
}

.provider-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.provider-card:has(input:checked) .provider-avatar {
    background: var(--brand-tint);
}

.matched-patient-debug {
    width: 100%;
    margin: 18px 0 0;
    padding: 10px 16px;
    min-height: 28px;
    color: #FFFFFF;
    background: #FFFFFF;
    font-size: 10px;
    line-height: 1.4;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

.matched-patient-debug::selection {
    background: #1F2937;
    color: #FFFFFF;
}



/* ---------- v3.23 provider-specific acute-pain question ---------- */

#acutePainField {
    margin-top: 18px;
}

#acutePainField.is-hidden,
#newInjuryCallPanel.is-hidden {
    display: none !important;
}




/* ---------- v3.25 Noterro link + confirmation messages ---------- */

.noterro-booking-card {
    margin-top: 20px;
    padding: 22px;
    border: 1px solid var(--brand-tint-strong);
    border-radius: var(--radius-lg);
    background: var(--brand-tint);
}

.noterro-booking-card.is-hidden {
    display: none !important;
}

.noterro-booking-button {
    display: inline-flex;
    width: auto;
    text-decoration: none;
}

.booking-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 24px;
    padding: 22px;
    border: 1px solid rgba(235, 104, 53, 0.34);
    border-radius: var(--radius-lg);
    background: #FFF1EB;
    color: #8F3D1F;
}

.booking-confirmation .result-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #EB6835;
    color: #FFFFFF;
    font-weight: 900;
}

.booking-confirmation .result-copy {
    display: flex;
    flex-direction: column;
    gap: 7px;
    line-height: 1.5;
    font-weight: 650;
}

@media (max-width: 767px) {
    .noterro-booking-button {
        width: 100%;
    }

    .booking-confirmation {
        padding: 18px;
    }
}


/* ---------- v3.28 separate acute-pain page + layout repair ---------- */

#acutePainStep.is-hidden,
#acutePainProgress.is-hidden {
    display: none !important;
}

#acutePainStep .radio-field {
    margin-top: 8px;
}

#acutePainStep .new-injury-call-panel {
    margin-top: 18px;
}

.provider-grid,
.slot-grid {
    align-items: stretch;
}

.slot-card,
.provider-card {
    min-width: 0;
}

.slot-card-top,
.provider-info {
    min-width: 0;
}

.slot-card-top strong,
.provider-name {
    overflow-wrap: anywhere;
}


/* ---------- v3.29 layout containment and slot-selection repair ---------- */

.anpth-booking-embed,
.anpth-booking-embed *,
.anpth-booking-embed *::before,
.anpth-booking-embed *::after {
    box-sizing: border-box;
}

.anpth-booking-embed {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.booking-shell,
.booking-main,
.form-step,
.form-actions,
.provider-grid,
.slot-grid,
.slot-section,
.request-only,
.noterro-booking-card {
    min-width: 0;
    max-width: 100%;
}

.form-actions {
    width: 100%;
    flex-wrap: wrap;
}

.button,
.form-actions .button,
.noterro-booking-button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.slot-card,
.provider-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.slot-card-top,
.provider-info {
    min-width: 0;
}

.slot-card-top strong,
.provider-name {
    overflow-wrap: anywhere;
}

.slot-badge {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .form-step {
        padding: 20px 16px;
    }

    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .form-actions .button,
  .button.primary,
  .button.secondary,
  .noterro-booking-button {
        width: 100%;
    }

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

    .slot-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .slot-controls .button {
        width: 100%;
        min-width: 0;
    }
}


/* ---------- v3.30 centred page, compact slot dates, Step 2 action state ---------- */

/*
 * GHL can place the Code element inside a narrower column. Make the booking
 * component span the viewport, then centre the inner frame within it.
 */
.anpth-booking-embed {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
}

.booking-shell {
    width: 100%;
    justify-content: center;
}

.booking-frame {
    margin-left: auto;
    margin-right: auto;
}

/* Keep the compact appointment label on one line on desktop. */
.slot-card-top strong {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    font-size: 0.9rem;
}

/* The Continue control is removed from Step 2 when "Yes" is selected. */
#acutePainContinueBtn.is-hidden {
    display: none !important;
}

@media (max-width: 767px) {
    .slot-card-top strong {
        white-space: normal;
    }
}


/* ---------- v3.31 larger provider portraits + credential display ---------- */

.provider-card {
    min-height: 118px;
    gap: 20px;
    padding: 14px 54px 14px 18px;
}

.provider-avatar {
    width: 92px;
    height: 92px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(18, 26, 34, 0.08);
}

.provider-info {
    gap: 5px;
}

.provider-name {
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: normal;
    word-break: normal;
}

.provider-card small {
    font-size: 0.86rem;
    line-height: 1.4;
}

.provider-check {
    right: 18px;
}

@media (max-width: 767px) {
    .provider-card {
        min-height: 98px;
        gap: 14px;
        padding: 12px 46px 12px 12px;
    }

    .provider-avatar {
        width: 72px;
        height: 72px;
        border-radius: 14px;
    }

    .provider-name {
        font-size: 0.94rem;
        line-height: 1.3;
    }

    .provider-card small {
        font-size: 0.8rem;
    }
}


/* ---------- v3.32 provider-state reset + refresh validation repair ---------- */

.new-injury-call-panel p:first-child {
    margin-top: 0;
}

#acutePainContinueBtn.is-hidden {
    display: none !important;
}


/* ---------- v3.33 placeholders, date alignment, larger provider portraits ---------- */

input[type="date"] {
    text-align: left;
}

input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

/* Provider portraits restored to the previous balanced size. */
.provider-card {
    min-height: 118px;
    gap: 20px;
    padding: 14px 54px 14px 18px;
}

.provider-avatar {
    width: 92px;
    height: 92px;
    border-radius: 18px;
}

@media (max-width: 767px) {
    .provider-card {
        min-height: 98px;
        gap: 14px;
        padding: 12px 46px 12px 12px;
    }

    .provider-avatar {
        width: 72px;
        height: 72px;
        border-radius: 14px;
    }
}


/* ---------- v3.37 production UX enhancements ---------- */
.provider-credentials {
    display: block;
    color: var(--brand-deep);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.25;
}

.provider-card-note {
    margin-left: auto;
    padding-right: 22px;
    color: var(--ink-faint);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.provider-card:has(input:checked) .provider-card-note {
    color: var(--brand-deep);
}

.slot-expiry-notice {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger-text);
    font-size: .86rem;
    font-weight: 800;
}

.booking-confirmation-summary .result-copy {
    width: 100%;
}

.confirmation-title {
    margin-bottom: 14px;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 900;
}

.confirmation-details {
    display: grid;
    gap: 10px;
    margin: 0;
}

.confirmation-details>div {
    display: grid;
    grid-template-columns: minmax(120px,.42fr) minmax(0,1fr);
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(235,104,53,.18);
}

.confirmation-details dt {
    color: var(--ink-soft);
    font-size: .8rem;
    font-weight: 800;
}

.confirmation-details dd {
    margin: 0;
    color: var(--ink);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.confirmation-note {
    margin-top: 14px;
    color: var(--ink-soft);
    line-height: 1.55;
}

@media (max-width:767px) {
    .provider-card-note {
        display: none;
    }

    .confirmation-details>div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}


/* ---------- v3.38 Shira location step + confirmation address ---------- */

#shiraLocationStep.is-hidden,
#shiraLocationProgress.is-hidden {
    display: none !important;
}

.shira-location-panel {
    margin-top: 8px;
    padding: 20px;
    border: 1px solid var(--brand-tint-strong);
    border-radius: var(--radius-md);
    background: var(--brand-tint);
    color: var(--ink);
}

.shira-location-panel p {
    margin: 0 0 16px;
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.65;
}

.shira-north-call-button {
    width: auto;
}

.confirmation-address-link {
    color: var(--brand-deep);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.confirmation-address-link:hover {
    color: var(--ink);
}

.shira-location-panel p + p {
    margin-top: 6px;
}

.shira-north-link {
    display: inline-block;
    margin-top: 4px;
    color: var(--brand-deep);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.shira-north-link:hover {
    color: var(--ink);
}

@media (max-width: 767px) {
    .new-injury-actions {
        flex-direction: column;
    }

    .new-injury-actions .button,
  .noterro-booking-button {
        width: 100%;
    }
}


/* ---------- v3.42 confirmation address and consistent time formatting ---------- */

.confirmation-note > div {
    margin-bottom: 6px;
}

.confirmation-note > div:last-child {
    margin-bottom: 0;
}


/* ---------- v3.52 contact lookup loading experience ---------- */
.contact-lookup-loading {
    margin-top: 14px;
}

/* v4.1 — pin the contact/group-record lookup indicator to the viewport so
   it stays visible while checking, no matter how far the form is scrolled
   (relevant to both single and group bookings since they share this element). */
#contactLookupLoading.contact-lookup-loading {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    margin-top: 0;
    width: max-content;
    max-width: calc(100% - 32px);
    box-shadow: 0 10px 34px rgba(18, 26, 34, 0.22);
}


/* ---------- v3.56 zero slot spacing + matching urgent contact buttons ---------- */
.new-injury-call-panel .email-clinic-button {
    border-color: var(--danger-text);
    background: var(--danger-text);
    color: #fff;
}


/* ---------- v3.68 multiline assessment status ---------- */
.status > div {
    margin-bottom: 8px;
}

.status > div:last-child {
    margin-bottom: 0;
}


/* ---------- v3.68 appointment-request confirmation spacing ---------- */
.confirmation-note-spacer {
    height: 10px;
}


/* v3.68 review and flow corrections */
#appointmentTopMessage {
    margin-bottom: 20px;
}

#acknowledgementBox {
    margin-bottom: 20px;
}

.review-summary {
    display: grid;
    gap: 0;
    margin: 4px 0 24px;
    border: 1px solid #d9e0e7;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.review-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.35fr) minmax(0, 1fr);
    gap: 18px;
    padding: 16px 18px;
    border-bottom: 1px solid #e5e9ee;
}

.review-row:last-child {
    border-bottom: 0;
}

.review-row.confirmation-group-time {
    display: block;
    font-size: .96rem;
}

.review-row span {
    color: #5c6876;
}

.review-row strong {
    color: #17202a;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .review-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}


/* v3.68 fee acknowledgment placement */
#submitStep #acknowledgementBox {
    margin: 0 0 24px;
}

#submitStep #acknowledgementBox .form-check {
    align-items: flex-start;
}

#submitStep #acknowledgementBox.has-error,
#submitStep #acknowledgementBox .has-error {
    scroll-margin-top: 24px;
}


/* v3.68 fee acknowledgment visibility */
#submitStep #acknowledgementBox:not(.is-hidden) {
    display: block !important;
    margin: 0 0 24px;
}

#submitStep #acknowledgementBox .form-check {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
}

#submitStep #acknowledgementBox .form-check-label {
    display: block !important;
    line-height: 1.5;
}


/* ---------- v3.70 final-page notice + acknowledgment accessibility ---------- */
.submit-reschedule-notice {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid var(--brand-tint-strong);
    border-radius: var(--radius-md);
    background: var(--brand-tint);
    color: var(--ink);
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.5;
}

#acknowledgementBox:not(.is-hidden) {
    display: block !important;
}

#acknowledgementBox .form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

#acknowledgementBox .form-check-input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--brand);
    cursor: pointer;
}

#acknowledgementBox .form-check-label {
    display: block;
    margin: 0;
    color: var(--ink);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.5;
}


/* ---------- v3.70 review-title notice + request submission repair ---------- */
#submitStep .submit-reschedule-notice {
    display: none !important;
}

#submitStep .submit-reschedule-message {
    margin: 10px 0 0;
    max-width: 760px;
    color: var(--ink-soft);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.5;
}


/* ---------- v3.91 request-tier submit repair + divider cleanup ---------- */
/* The reason field is controlled by JavaScript patient-tier rules. Do not hide it globally. */
#submitStep .section-head {
    border-bottom: 0;
    padding-bottom: 0;
}

#submitStep .form-actions {
    border-top: 0;
    padding-top: 0;
}

#submitStep .review-summary:empty {
    display: none !important;
}

#submitStep .review-summary {
    margin-top: 0;
}


/* v3.91 — request-only appointment refresh controls */
.request-only-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

/* v3.91 — preserve the Step 3 / Step 4 page boundary */
#acutePainStep:not(.is-active),
#appointmentStep:not(.is-active) {
    display: none !important;
}


/* v3.91 — conditional acute-care details */
.acute-care-reason-field {
    display: block;
    margin-top: 18px;
}

.acute-care-reason-field > span {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.acute-care-reason-field textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
}

.acute-care-reason-field small {
    display: block;
    margin-top: 7px;
}

.acute-care-reason-field.is-hidden {
    display: none !important;
}


/* v3.91 — appointment greeting and unified review/confirmation summary */
.appointment-patient-greeting {
    margin: -2px 0 20px;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.45;
}

.appointment-patient-greeting.is-hidden {
    display: none !important;
}

#providerStep #shiraLocationNotice {
    margin-top: 20px;
}

#providerStep #shiraLocationNotice.is-hidden {
    display: none !important;
}

.booking-confirmation .result-copy {
    width: 100%;
    min-width: 0;
}

.booking-confirmation .confirmation-summary-table {
    width: 100%;
    margin: 14px 0 0;
    color: var(--ink);
    font-weight: 400;
}

.booking-confirmation .confirmation-summary-table .review-row {
    text-align: left;
}


/* v3.91 — greetings on Acute Injury and Appointment Date screens */
#acutePainPatientGreeting,
#appointmentPatientGreeting {
    margin-top: -2px;
}

/* v3.91 — sentence-per-line confirmation message above shared table */
.booking-confirmation .confirmation-message {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--ink-soft);
    line-height: 1.55;
    font-weight: 650;
}

.booking-confirmation .confirmation-message > div {
    margin: 0;
}

.booking-confirmation .confirmation-summary-table {
    margin-top: 0;
}

.group-assessment-names {
    color: var(--ink);
    font-weight: 800;
}


/* v3.91 — deterministic patient greeting visibility */
#acutePainPatientGreeting:empty,
#appointmentPatientGreeting:empty {
    display: none !important;
}

#acutePainPatientGreeting:not(:empty),
#appointmentPatientGreeting:not(:empty) {
    display: block !important;
}


/* v3.91 — conditional 6-18 month visit-reason step */
#basicAssessmentReasonStep:not(.is-active) {
    display: none !important;
}

#basicAssessmentPatientGreeting:empty {
    display: none !important;
}

#basicAssessmentPatientGreeting:not(:empty) {
    display: block !important;
}

#acknowledgementBox .form-check + .form-check {
    margin-top: 14px;
}

/* ---------- v4.0 — group / family booking (additive, 2026-08-07) ---------- */
/* Group mode is opt-in via #groupModeToggle on the Details step; none of
   the rules below are reachable unless a shopper checks that box, so they
   have no effect on the default single-person layout above. */

.group-toggle-field {
    margin-bottom: 20px;
}

.group-toggle-field .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.group-toggle-field .form-check input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--brand, #EB6835);
}

.group-toggle-field .form-check-label {
    margin: 0;
    font-weight: 700;
    color: var(--ink, #121A22);
}

#primaryMemberLabel {
    margin-bottom: 10px;
}

#familyMembersSection {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-member-block {
    padding: 16px 18px;
    border: 1px solid var(--line, #E2E7EB);
    border-radius: 12px;
    background: var(--surface-alt, #F6F8FA);
}

.group-member-block + .group-member-block {
    margin-top: 12px;
}

.group-member-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.group-member-number {
    font-weight: 800;
    font-size: .92rem;
    color: var(--ink, #121A22);
}

.group-member-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.member-count-label {
    color: var(--ink-soft, #52606D);
    font-size: .86rem;
    font-weight: 700;
}

.family-member-cap-notice {
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid var(--danger-border, #F3C6C2);
    border-radius: 9px;
    background: var(--danger-bg, #FDF0EF);
    color: var(--danger-text, #B3261E);
    font-size: .84rem;
    font-weight: 700;
}

.button.danger-text {
    background: none;
    border: none;
    color: var(--danger-text, #B3261E);
    font-weight: 700;
    padding: 0 4px;
    min-height: auto;
}

.block-card {
    padding-bottom: 14px;
}

.block-segment-list {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.block-segment-row {
    padding: 8px 0;
    border-top: 1px dashed var(--line-strong, #CBD3DA);
}

.block-segment-row:first-child {
    border-top: none;
    padding-top: 0;
}

.block-segment-name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink, #121A22);
    margin-bottom: 3px;
}

.block-segment-time {
    font-size: .82rem;
    color: var(--ink-soft, #52606D);
}

.block-segment-fee {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-sunken, #EEF1F4);
    color: var(--ink-soft, #52606D);
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

.review-group-time {
    padding: 12px 18px;
    font-size: .96rem;
    color: #17202a;
    border-bottom: 1px solid #e5e9ee;
}

.review-member-block {
    padding: 14px 18px;
    border-bottom: 1px solid #e5e9ee;
    background: var(--surface-alt, #F6F8FA);
}

.review-member-header {
    font-weight: 800;
    font-size: .96rem;
    color: #17202a;
    margin-bottom: 6px;
}

.review-member-detail {
    font-size: .92rem;
    color: #17202a;
    line-height: 1.5;
}

.review-member-detail.muted {
    color: #5c6876;
    font-size: .88rem;
}

@media (max-width: 640px) {
    .group-member-block .field-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- v4.2 — staging environment banner (2026-08-07) ---------- */
/* Only ever shown when IS_STAGING evaluates true (VPS staging hostname) --
   invisible on the real GHL page by construction, no manual toggle needed. */
.staging-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding: 10px 16px;
    background: #FFF3CD;
    color: #664D03;
    border-bottom: 1px solid #FFE69C;
    font-weight: 800;
    font-size: 0.86rem;
    text-align: center;
}

body.is-staging-env {
    padding-top: 40px;
}

body.is-staging-env #contactLookupLoading.contact-lookup-loading {
    top: 58px;
}

/* v3.92 — keep the widget inside host-page iframe bounds. The page-builder
   wrapper supplies its own width; the older 100vw breakout created a narrow
   horizontal scrollbar at the bottom of some GHL staging layouts. */
html.anpth-booking-embedded,
html.anpth-booking-embedded body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

html.anpth-booking-embedded .anpth-booking-embed {
    left: auto;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}