/* ==========================================================================
   DrHejazian — Nutrition Booking Experience
   Isolated visual layer for booking/review/success.
   Booking behavior remains in resources/js/app.js.
   ========================================================================== */

.booking-experience {
    --booking-surface: rgba(255, 255, 255, 0.68);
    --booking-surface-strong: rgba(255, 255, 255, 0.86);
    --booking-border: rgba(255, 255, 255, 0.82);
    --booking-outline: rgba(23, 109, 123, 0.14);
    --booking-accent: var(--public-accent, #176d7b);
    --booking-accent-strong: var(--public-accent-strong, #0f5662);
    --booking-text: var(--public-text, #0d1b24);
    --booking-muted: var(--public-text-muted, #697984);
    --booking-shadow: 0 28px 80px rgba(16, 66, 79, 0.10);
    position: relative;
    isolation: isolate;
    padding-bottom: clamp(64px, 8vw, 110px);
}

.booking-experience::before,
.booking-experience::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(10px);
}

.booking-experience::before {
    width: 520px;
    height: 520px;
    inset: 12vh auto auto -220px;
    background: radial-gradient(circle, rgba(56, 167, 180, 0.12), transparent 66%);
}

.booking-experience::after {
    width: 460px;
    height: 460px;
    inset: 52vh -190px auto auto;
    background: radial-gradient(circle, rgba(63, 111, 145, 0.10), transparent 66%);
}

.booking-experience .container,
.booking-shell {
    width: min(calc(100% - 40px), 1120px);
    margin-inline: auto;
}

.booking-topbar {
    padding-top: 20px;
}

.booking-topbar .nutrition-nav {
    margin-top: 0;
}

.booking-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    color: var(--booking-muted);
    font-size: 0.82rem;
}

.booking-breadcrumb a {
    transition:
        color var(--motion-fast, 160ms) ease,
        transform var(--motion-fast, 160ms) ease;
}

.booking-breadcrumb a:hover {
    color: var(--booking-accent);
}

.booking-breadcrumb span[aria-hidden="true"] {
    opacity: 0.42;
}

.booking-eyebrow,
.booking-step-chip,
.booking-experience .section-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid rgba(23, 109, 123, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--booking-accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.booking-hero {
    padding: clamp(58px, 8vw, 108px) 0 clamp(44px, 6vw, 76px);
}

.booking-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    gap: clamp(34px, 6vw, 80px);
    align-items: center;
}

.booking-hero__copy h1,
.booking-review-hero h1,
.booking-success-card h1 {
    margin: 14px 0 14px;
    color: var(--booking-text);
    font-size: clamp(2.3rem, 5.2vw, 4.8rem);
    line-height: 1.12;
    letter-spacing: -0.055em;
}

.booking-hero__copy > p,
.booking-review-hero > .booking-shell > p,
.booking-success-description {
    max-width: 690px;
    margin: 0;
    color: var(--public-text-soft, #2f414c);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 2;
}

.booking-doctor-line {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 28px;
    padding: 12px 16px;
    border: 1px solid rgba(23, 109, 123, 0.10);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.booking-doctor-line__mark {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--booking-accent);
    box-shadow: 0 0 0 7px rgba(23, 109, 123, 0.09);
}

.booking-doctor-line small,
.booking-flow small {
    display: block;
    color: var(--booking-muted);
    font-size: 0.75rem;
}

.booking-doctor-line strong {
    display: block;
    margin-top: 2px;
    color: var(--booking-text);
    font-size: 0.92rem;
}

.booking-flow-card,
.booking-card,
.schedule-panel,
.booking-summary,
.visit-details-card,
.patient-form-card,
.booking-notice-content,
.booking-review-card,
.booking-review-aside,
.booking-success-card {
    position: relative;
    border: 1px solid var(--booking-border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.49)),
        rgba(255, 255, 255, 0.52);
    box-shadow:
        var(--booking-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
}

.booking-flow-card {
    overflow: hidden;
    padding: clamp(24px, 3vw, 34px);
    border-radius: 32px;
}

.booking-flow-card::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    top: -120px;
    left: -70px;
    border-radius: 50%;
    background: rgba(56, 167, 180, 0.11);
    filter: blur(4px);
}

.booking-flow-card__label {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 20px;
    color: var(--booking-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.booking-flow {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.booking-flow li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 13px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(23, 109, 123, 0.08);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.42);
}

.booking-flow li > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(23, 109, 123, 0.13), rgba(56, 167, 180, 0.06));
    color: var(--booking-accent-strong);
    font-size: 0.82rem;
    font-weight: 800;
}

.booking-flow strong {
    display: block;
    color: var(--booking-text);
    font-size: 0.9rem;
}

.booking-intro {
    padding: 10px 0 6px;
}

.booking-section-heading,
.booking-experience .section-heading {
    max-width: 720px;
    margin-bottom: 28px;
}

.booking-section-heading h2,
.booking-experience .section-heading h2,
.booking-notice h2,
.booking-success-next-step h2 {
    margin: 12px 0 8px;
    color: var(--booking-text);
    font-size: clamp(1.45rem, 2.5vw, 2.1rem);
    line-height: 1.45;
    letter-spacing: -0.035em;
}

.booking-section-heading p,
.booking-experience .section-heading p,
.booking-notice p,
.booking-success-next-step p {
    margin: 0;
    color: var(--booking-muted);
    line-height: 1.95;
}

.booking-options,
.booking-step,
.booking-notice,
.booking-review-section {
    scroll-margin-top: 110px;
    padding: clamp(24px, 4vw, 48px) 0;
}

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

.booking-card {
    overflow: hidden;
    padding: clamp(24px, 3.5vw, 38px);
    border-radius: 30px;
    transition:
        transform var(--motion-normal, 280ms) var(--ease-emphasized, ease),
        border-color var(--motion-normal, 280ms) ease,
        box-shadow var(--motion-normal, 280ms) ease,
        background var(--motion-normal, 280ms) ease;
}

.booking-card::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    inset: auto -80px -100px auto;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 167, 180, 0.13), transparent 68%);
    transition: transform var(--motion-slow, 480ms) ease;
}

.booking-card:hover {
    transform: translateY(-5px);
    border-color: rgba(23, 109, 123, 0.19);
    box-shadow: 0 30px 78px rgba(16, 66, 79, 0.14);
}

.booking-card:hover::after {
    transform: scale(1.15);
}

.booking-card.is-selected {
    border-color: rgba(23, 109, 123, 0.38);
    background:
        linear-gradient(145deg, rgba(248, 254, 255, 0.92), rgba(231, 246, 248, 0.70)),
        rgba(255, 255, 255, 0.72);
    box-shadow:
        0 28px 80px rgba(16, 90, 103, 0.16),
        inset 0 0 0 1px rgba(23, 109, 123, 0.06);
}

.booking-card-featured {
    background:
        linear-gradient(145deg, rgba(247, 253, 255, 0.82), rgba(232, 244, 249, 0.58)),
        rgba(255, 255, 255, 0.56);
}

.booking-card-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(23, 109, 123, 0.09);
    color: var(--booking-accent-strong);
    font-size: 0.72rem;
    font-weight: 700;
}

.booking-card-icon {
    display: grid;
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
    place-items: center;
    border: 1px solid rgba(23, 109, 123, 0.12);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(223,240,242,.68));
    color: var(--booking-accent-strong);
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 10px 28px rgba(23, 109, 123, 0.08);
}

.booking-type {
    display: block;
    margin-bottom: 8px;
    color: var(--booking-accent);
    font-size: 0.78rem;
    font-weight: 800;
}

.booking-card h2 {
    margin: 0 0 10px;
    color: var(--booking-text);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    letter-spacing: -0.035em;
}

.booking-card p {
    margin: 0;
    color: var(--booking-muted);
    line-height: 1.9;
}

.booking-card ul {
    display: grid;
    gap: 9px;
    margin: 23px 0 26px;
    padding: 0;
    list-style: none;
}

.booking-card li {
    position: relative;
    padding-right: 21px;
    color: var(--public-text-soft, #2f414c);
    font-size: 0.9rem;
}

.booking-card li::before {
    content: "";
    position: absolute;
    top: .75em;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--booking-accent);
    box-shadow: 0 0 0 5px rgba(23, 109, 123, 0.07);
}

.primary-button,
.secondary-button,
.table-action-link {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 15px;
    padding: 11px 18px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 750;
    text-decoration: none;
    transition:
        transform var(--motion-fast, 160ms) ease,
        box-shadow var(--motion-normal, 280ms) ease,
        background var(--motion-normal, 280ms) ease,
        border-color var(--motion-normal, 280ms) ease;
}

.primary-button {
    background: linear-gradient(135deg, var(--booking-accent), var(--booking-accent-strong));
    color: #fff;
    box-shadow: 0 13px 28px rgba(23, 109, 123, 0.18);
}

.primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 34px rgba(23, 109, 123, 0.24);
}

.primary-button:active,
.secondary-button:active {
    transform: translateY(0) scale(.985);
}

.primary-button:disabled {
    cursor: not-allowed;
    opacity: .48;
    transform: none;
    box-shadow: none;
}

.secondary-button {
    border-color: rgba(23, 109, 123, 0.16);
    background: rgba(255, 255, 255, 0.60);
    color: var(--booking-accent-strong);
}

.secondary-button:hover {
    transform: translateY(-2px);
    border-color: rgba(23, 109, 123, 0.26);
    background: rgba(255, 255, 255, 0.86);
}

.booking-select-button {
    width: 100%;
}

.booking-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.booking-service-option,
.date-option,
.time-option,
.contact-method-option {
    border: 1px solid rgba(23, 109, 123, 0.11);
    background: rgba(255, 255, 255, 0.62);
    color: var(--booking-text);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
    transition:
        transform var(--motion-fast, 160ms) ease,
        border-color var(--motion-normal, 280ms) ease,
        box-shadow var(--motion-normal, 280ms) ease,
        background var(--motion-normal, 280ms) ease;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.booking-service-option {
    min-height: 138px;
    padding: 20px;
    border-radius: 22px;
    text-align: right;
}

.booking-service-option strong,
.booking-service-option span {
    display: block;
}

.booking-service-option strong {
    margin-bottom: 7px;
    font-size: 1rem;
}

.booking-service-option span {
    color: var(--booking-muted);
    font-size: 0.84rem;
    line-height: 1.8;
}

.booking-service-option:hover,
.date-option:hover,
.time-option:hover,
.contact-method-option:hover {
    transform: translateY(-3px);
    border-color: rgba(23, 109, 123, 0.25);
    box-shadow: 0 14px 30px rgba(16, 66, 79, 0.09);
}

.booking-service-option.is-selected,
.date-option.is-selected,
.time-option.is-selected,
.contact-method-option.is-selected {
    border-color: rgba(23, 109, 123, 0.40);
    background: linear-gradient(145deg, rgba(230, 247, 249, 0.90), rgba(255, 255, 255, 0.76));
    color: var(--booking-accent-strong);
    box-shadow:
        0 15px 35px rgba(23, 109, 123, 0.11),
        inset 0 0 0 1px rgba(23, 109, 123, 0.05);
}

.schedule-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: clamp(20px, 3vw, 30px);
    border-radius: 28px;
}

.schedule-column {
    min-width: 0;
}

.schedule-column h3 {
    margin: 0 0 14px;
    color: var(--booking-text);
    font-size: 0.96rem;
}

.date-options,
.time-options,
.contact-method-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.date-option {
    min-width: 112px;
    padding: 12px 15px;
    border-radius: 17px;
}

.date-option span,
.date-option strong {
    display: block;
}

.date-option span {
    margin-bottom: 2px;
    color: var(--booking-muted);
    font-size: 0.76rem;
}

.time-option {
    min-width: 82px;
    min-height: 48px;
    padding: 10px 13px;
    border-radius: 15px;
    direction: ltr;
}

.booking-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: 22px;
}

.booking-summary span {
    display: block;
    margin-bottom: 4px;
    color: var(--booking-muted);
    font-size: .76rem;
}

.booking-summary strong {
    display: block;
    color: var(--booking-text);
    line-height: 1.8;
}

.visit-details-card {
    padding: clamp(22px, 4vw, 38px);
    border-radius: 30px;
}

.clinic-information,
.online-information {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.clinic-information-item,
.online-information-item {
    padding: 16px;
    border: 1px solid rgba(23, 109, 123, 0.08);
    border-radius: 18px;
    background: rgba(255,255,255,.48);
}

.clinic-information-item span,
.online-information-item span {
    display: block;
    margin-bottom: 4px;
    color: var(--booking-muted);
    font-size: .75rem;
}

.clinic-information-item strong,
.online-information-item strong {
    display: block;
    color: var(--booking-text);
    line-height: 1.8;
}

.contact-method-options {
    margin-top: 24px;
}

.contact-method-option {
    min-width: 110px;
    min-height: 50px;
    padding: 11px 16px;
    border-radius: 16px;
}

.contact-fields {
    display: grid;
    gap: 16px;
    margin-top: 20px;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid rgba(23, 109, 123, 0.09);
    border-radius: 23px;
    background: rgba(255,255,255,.45);
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-field label {
    color: var(--booking-text);
    font-size: .84rem;
    font-weight: 700;
}

.form-field label span {
    color: var(--booking-muted);
    font-size: .72rem;
    font-weight: 500;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(23, 109, 123, 0.12);
    border-radius: 15px;
    outline: none;
    background: rgba(255,255,255,.72);
    color: var(--booking-text);
    padding: 12px 14px;
    transition:
        border-color var(--motion-fast,160ms) ease,
        box-shadow var(--motion-fast,160ms) ease,
        background var(--motion-fast,160ms) ease;
}

.form-field textarea {
    min-height: 118px;
    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: rgba(23, 109, 123, 0.42);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(23, 109, 123, 0.08);
}

.contact-consent {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 11px;
    align-items: start;
    padding: 14px;
    border-radius: 16px;
    background: rgba(23, 109, 123, 0.055);
    color: var(--public-text-soft, #2f414c);
    font-size: .84rem;
    line-height: 1.85;
}

.contact-consent input {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    accent-color: var(--booking-accent);
}

.contact-confirmation,
.patient-form-message {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(42, 123, 100, 0.08);
    color: #246c58;
    font-size: .84rem;
}

.patient-form-card {
    padding: clamp(22px, 4vw, 36px);
    border-radius: 30px;
}

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

.form-field-full {
    grid-column: 1 / -1;
}

.patient-submit-button {
    width: 100%;
    margin-top: 24px;
}

.booking-empty-state,
.server-validation-errors {
    padding: 18px;
    border: 1px solid rgba(23, 109, 123, 0.10);
    border-radius: 18px;
    background: rgba(255,255,255,.58);
    color: var(--booking-muted);
}

.server-validation-errors {
    margin-bottom: 20px;
    border-color: rgba(169, 75, 75, 0.18);
    background: rgba(169, 75, 75, 0.055);
    color: #864040;
}

.server-validation-errors strong {
    display: block;
    margin-bottom: 8px;
}

.server-validation-errors ul {
    margin: 0 0 14px;
    padding-right: 20px;
}

.patient-form-message.is-error {
    background: rgba(169, 75, 75, 0.07);
    color: #8e4040;
}

.patient-form-message.is-success {
    background: rgba(42, 123, 100, 0.08);
    color: #246c58;
}

.booking-notice-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 23px 26px;
    border-radius: 24px;
}

.booking-notice-content span {
    flex: 0 0 auto;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(160, 107, 34, 0.08);
    color: #865d22;
    font-size: .76rem;
    font-weight: 700;
}



.contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.visit-details-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

.patient-step-button,
.online-patient-button {
    min-width: 220px;
}

/* Review ------------------------------------------------------------------ */

.booking-review-hero {
    padding: clamp(58px, 8vw, 104px) 0 22px;
}

.booking-review-hero h1 {
    max-width: 760px;
}

.booking-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

.booking-review-card {
    padding: clamp(22px, 4vw, 38px);
    border-radius: 30px;
}

.booking-review-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(23, 109, 123, 0.09);
}

.booking-review-card__head span {
    color: var(--booking-muted);
    font-size: .8rem;
}

.booking-review-card__head strong {
    color: var(--booking-text);
}

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

.review-row {
    padding: 15px 16px;
    border: 1px solid rgba(23, 109, 123, 0.075);
    border-radius: 17px;
    background: rgba(255,255,255,.44);
}

.review-row span,
.booking-success-details span {
    display: block;
    margin-bottom: 4px;
    color: var(--booking-muted);
    font-size: .74rem;
}

.review-row strong,
.booking-success-details strong {
    display: block;
    color: var(--booking-text);
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.review-row-full {
    grid-column: 1 / -1;
}

.review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.review-actions form {
    margin: 0;
}

.booking-review-aside {
    padding: 24px;
    border-radius: 25px;
}

.booking-review-aside__icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    place-items: center;
    border-radius: 16px;
    background: rgba(42, 123, 100, 0.10);
    color: #2a7b64;
    font-weight: 900;
}

.booking-review-aside strong {
    display: block;
    margin-bottom: 8px;
    color: var(--booking-text);
}

.booking-review-aside p {
    margin: 0;
    color: var(--booking-muted);
    font-size: .85rem;
    line-height: 1.9;
}

/* Success ----------------------------------------------------------------- */

.booking-success-section {
    padding: clamp(58px, 8vw, 104px) 0;
}

.booking-success-card {
    max-width: 880px;
    margin-inline: auto;
    padding: clamp(26px, 5vw, 52px);
    border-radius: 36px;
    text-align: center;
}

.booking-success-icon {
    display: grid;
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    place-items: center;
    border: 1px solid rgba(42, 123, 100, .16);
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(236, 250, 246, .95), rgba(255,255,255,.72));
    color: #2a7b64;
    box-shadow: 0 18px 45px rgba(42, 123, 100, .12);
}

.booking-success-icon span {
    font-size: 1.7rem;
    font-weight: 900;
}

.booking-success-card h1 {
    font-size: clamp(2.1rem, 4vw, 3.7rem);
}

.booking-success-description {
    margin-inline: auto;
}

.booking-success-code {
    max-width: 520px;
    margin: 28px auto 0;
    padding: 19px;
    border: 1px solid rgba(23,109,123,.11);
    border-radius: 22px;
    background: rgba(255,255,255,.55);
}

.booking-success-code span,
.booking-success-code small {
    display: block;
    color: var(--booking-muted);
}

.booking-success-code span {
    font-size: .76rem;
}

.booking-success-code strong {
    display: block;
    margin: 5px 0;
    color: var(--booking-accent-strong);
    font-size: clamp(1.3rem, 3vw, 2rem);
    letter-spacing: .08em;
}

.booking-success-code small {
    font-size: .72rem;
}

.booking-success-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
    text-align: right;
}

.booking-success-details > div {
    padding: 15px 16px;
    border: 1px solid rgba(23,109,123,.075);
    border-radius: 17px;
    background: rgba(255,255,255,.43);
}

.booking-success-notice,
.booking-success-next-step {
    margin-top: 18px;
    padding: 21px;
    border: 1px solid rgba(23,109,123,.09);
    border-radius: 22px;
    background: rgba(255,255,255,.48);
    text-align: right;
}

.booking-success-notice strong {
    display: block;
    margin-bottom: 7px;
    color: var(--booking-text);
}

.booking-success-notice p {
    margin: 0;
    color: var(--booking-muted);
    line-height: 1.9;
}

.booking-success-next-step {
    margin-top: 24px;
}

.booking-success-actions,
.booking-success-footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.booking-success-footer-actions {
    padding-top: 20px;
    border-top: 1px solid rgba(23,109,123,.08);
}

.table-action-link {
    min-height: auto;
    padding: 7px 10px;
    color: var(--booking-accent-strong);
    background: transparent;
}

.table-action-link:hover {
    background: rgba(23,109,123,.06);
}

/* State ------------------------------------------------------------------- */

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

/* newly revealed booking sections */
.booking-step:not(.is-hidden) {
    animation: booking-reveal .54s var(--ease-emphasized, ease) both;
}

@keyframes booking-reveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (max-width: 980px) {
    .booking-hero__grid,
    .booking-review-layout {
        grid-template-columns: 1fr;
    }

    .booking-flow-card {
        max-width: 680px;
    }

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

    .booking-review-aside {
        order: -1;
    }
}

@media (max-width: 760px) {
    .booking-experience .container,
    .booking-shell {
        width: min(calc(100% - 28px), 1120px);
    }

    .booking-topbar {
        padding-top: 12px;
    }

    .booking-hero {
        padding-top: 42px;
    }

    .booking-hero__copy h1,
    .booking-review-hero h1 {
        font-size: clamp(2.05rem, 11vw, 3.4rem);
    }

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

    .booking-flow li {
        grid-template-columns: 36px 1fr;
        padding: 10px;
    }

    .booking-flow li > span {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .booking-grid,
    .schedule-panel,
    .clinic-information,
    .online-information,
    .patient-form-grid,
    .review-grid,
    .booking-success-details {
        grid-template-columns: 1fr;
    }

    .booking-services-grid,
    .contact-methods-grid {
        grid-template-columns: 1fr 1fr;
    }

    .booking-service-option {
        min-height: auto;
    }

    .booking-summary,
    .booking-notice-content,
    .booking-review-card__head {
        align-items: stretch;
        flex-direction: column;
    }

    .booking-summary .primary-button {
        width: 100%;
    }

    .booking-notice-content span {
        align-self: flex-start;
        white-space: normal;
    }

    .review-row-full,
    .form-field-full {
        grid-column: auto;
    }

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

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

    .date-option {
        flex: 1 1 118px;
    }

    .time-option {
        flex: 1 1 76px;
    }
}

@media (max-width: 520px) {
    .booking-breadcrumb {
        font-size: .74rem;
    }

    .booking-flow {
        grid-template-columns: 1fr;
    }

    .booking-card,
    .visit-details-card,
    .patient-form-card,
    .booking-review-card,
    .booking-success-card {
        border-radius: 25px;
    }

    .booking-card {
        padding: 22px;
    }

    .booking-card-badge {
        position: static;
        display: inline-flex;
        margin-bottom: 14px;
    }

    .contact-methods-grid {
        grid-template-columns: 1fr;
    }

    .contact-method-option {
        width: 100%;
        min-width: 0;
    }

    .visit-details-action,
    .patient-step-button,
    .online-patient-button {
        width: 100%;
    }

    .booking-success-section {
        padding-top: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .booking-card,
    .booking-service-option,
    .date-option,
    .time-option,
    .contact-method-option,
    .primary-button,
    .secondary-button,
    .booking-step:not(.is-hidden) {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* Stage 12 — Minimal booking flow */
.booking-experience--minimal .booking-hero--minimal {
    padding-block: clamp(28px, 5vw, 58px) 18px;
}

.booking-experience--minimal .booking-hero__grid--minimal {
    display: block;
}

.booking-experience--minimal .booking-hero__copy {
    max-width: 680px;
}

.booking-experience--minimal .booking-hero__copy h1 {
    margin-bottom: 14px;
}

.booking-experience--minimal .booking-doctor-line {
    width: fit-content;
    padding: 10px 14px;
}

.booking-options--minimal {
    padding-top: 10px;
}

.booking-card--minimal {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(22px, 3vw, 32px);
}

.booking-card--minimal .booking-type {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
}

.booking-card--minimal .booking-select-button {
    width: 100%;
}

.booking-section-heading--minimal {
    margin-bottom: 20px;
}

.booking-section-heading--minimal h2 {
    margin: 0;
}

.booking-service-option--minimal {
    min-height: 82px;
    justify-content: center;
}

.booking-service-option--minimal strong {
    font-size: 1rem;
}

.booking-experience--minimal .booking-step {
    padding-block: clamp(34px, 6vw, 64px);
}

.booking-experience--minimal .schedule-panel,
.booking-experience--minimal .patient-form-card,
.booking-experience--minimal .visit-details-card,
.booking-review-page--minimal .booking-review-card,
.booking-success-page--minimal .booking-success-card {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.visit-details-card--minimal {
    max-width: 720px;
    margin-inline: auto;
}

.booking-review-layout--minimal {
    display: block;
    max-width: 900px;
}

.booking-review-page--minimal .booking-review-section {
    padding-top: clamp(32px, 6vw, 72px);
}

.booking-review-page--minimal .booking-review-card__head {
    align-items: center;
}

.booking-review-page--minimal .booking-review-card__head h1 {
    margin: 0;
}

.booking-success-card--minimal {
    max-width: 760px;
}

.booking-success-card--minimal > h1 {
    margin-top: 8px;
}

.booking-success-details--minimal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-success-actions--minimal {
    margin-top: 24px;
}

.booking-experience--minimal .booking-notice,
.booking-experience--minimal .booking-flow-card,
.booking-experience--minimal .booking-breadcrumb,
.booking-experience--minimal .booking-eyebrow,
.booking-review-page--minimal .booking-review-aside,
.booking-success-page--minimal .booking-success-description,
.booking-success-page--minimal .booking-success-notice,
.booking-success-page--minimal .booking-success-next-step,
.booking-success-page--minimal .booking-success-footer-actions {
    display: none !important;
}

@media (max-width: 720px) {
    .booking-card--minimal {
        min-height: 140px;
    }

    .booking-success-details--minimal {
        grid-template-columns: 1fr;
    }
}