/* Booking wizard, layered on the existing Jalali calendar */
#booking-flow {max-width:1240px;font-family:inherit}
#booking-flow [hidden] {display:none!important}
.booking-page-heading {margin-bottom:1.8rem}
.booking-page-heading p {color:var(--clinic-muted);margin:0}
.booking-progress {max-width:970px;margin:0 auto 2.2rem}
.booking-progress ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.45rem;
}

.booking-progress li {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    color: #8ba29a;
    font-size: 0.83rem;
    font-weight: 750;
}
.booking-progress__number {display:grid;place-items:center;width:39px;height:39px;border:1px solid #d3e7de;border-radius:13px;background:#fff;color:#869c93;font-weight:900;font-size:1rem;transition:background .2s}
.booking-progress li.is-done .booking-progress__number {background:#e0f2e9;border-color:#b3ddcb;color:#10715f}
.booking-progress li.is-current {color:#0e6659}
.booking-progress li.is-current .booking-progress__number {background:var(--clinic-primary);border-color:var(--clinic-primary);color:white;box-shadow:0 8px 20px #137d6d2c}
.booking-content-panel {min-height:420px;background:#fff;border:1px solid var(--clinic-line);border-radius:24px;box-shadow:var(--clinic-shadow);padding:clamp(1.2rem,3vw,2.2rem)}
.booking-stage__heading {margin-bottom:1.55rem;text-align:right}
.booking-stage__eyebrow {font-size:.81rem;color:var(--clinic-primary);font-weight:800}
.booking-stage__heading h2 {font-size:clamp(1.35rem,2.5vw,1.75rem);font-weight:850;margin:.35rem 0}
.booking-stage__heading p {color:var(--clinic-muted);margin:0;font-size:.92rem}
.booking-branches {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.booking-branch-card {display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;min-height:290px;width:100%;padding:1.4rem;text-align:right;background:#fff;color:var(--clinic-ink);border:1.5px solid #d8e6e0;border-radius:19px;transition:background .2s,border-color .2s,transform .2s;cursor:pointer}
.booking-branch-card:hover {background:#f8fcfa;border-color:#95c8b9;transform:translateY(-2px)}
.booking-branch-card.selected {background:#edf8f3;border-color:var(--clinic-primary);box-shadow:0 0 0 3px #137d6d1a}
.booking-branch-card__top {display:flex;align-items:center;width:100%;justify-content:space-between}
.booking-branch-card__icon {display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--clinic-mint);color:var(--clinic-primary);font-size:2rem;line-height:1}
.booking-branch-card strong {font-weight:850;font-size:1.32rem}
.booking-branch-card__tag {font-size:.83rem;background:#e5f5ec;color:#206956;font-weight:700;border-radius:999px;padding:.27rem .65rem}
.booking-branch-card small {line-height:1.9;color:var(--clinic-muted);flex:1}
.booking-branch-card__cta {font-weight:800;color:var(--clinic-primary);font-size:.87rem}
.branch-checked, .branch-unchecked {font-size:1.3rem;color:var(--clinic-primary)}
.booking-hint {background:#f6faf8;border-radius:12px;padding:.7rem 1rem;color:#6e847c;font-size:.86rem}
.booking-services-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.booking-choice {display:flex;align-items:center;min-width:0;text-align:right;gap:1rem;background:#fff;color:var(--clinic-ink);border:1.5px solid #dce9e3;border-radius:15px;padding:1rem;min-height:86px;cursor:pointer;transition:border-color .2s,background .2s}
.booking-choice:hover {border-color:#a4d0c0;background:#f8fcfa}
.booking-choice.selected {background:#e9f7f0;border-color:var(--clinic-primary);color:var(--clinic-ink)}
.booking-choice__icon {flex-shrink:0;display:grid;place-items:center;width:43px;height:43px;background:var(--clinic-mint);color:var(--clinic-primary);border-radius:12px;font-size:1.35rem}
.booking-choice.selected .booking-choice__icon {background:#ceeade}
.booking-choice__name {display:grid;gap:.1rem;flex:1;min-width:0}
.booking-choice__name strong {font-weight:800;font-size:.95rem}
.booking-choice__name small {color:var(--clinic-muted);font-size:.75rem}
.check-icon-booking {color: var(--clinic-primary);}
.uncheck-icon-booking {color:#92b9a8;font-size:1.3rem}
.booking-action-row {width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1.8rem}
.booking-action-row .clinic-btn {min-width:135px}
#booking-flow .jalali-calendar,#booking-flow .booking-time-panel,#booking-flow .booking-review {width:min(100%,550px);box-shadow:none}
#booking-flow .jalali-calendar__month {color:var(--clinic-ink)}
.booking-time-date {display:inline-block;margin-top:.25rem!important;background:#eef7f2;padding:.35rem .75rem;border-radius:9px;color:#326e60!important}
.booking-summary {padding:1.55rem;position:sticky;top:26px}
.booking-summary__header {display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem;gap:1rem}
.booking-summary h2 {font-size:1.16rem;font-weight:850;margin:.2rem 0 0}
.booking-summary__symbol {display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:var(--clinic-primary);background:var(--clinic-mint);font-size:1.5rem}
.booking-summary dl {margin:0}
.booking-summary dl > div {border-bottom:1px solid var(--clinic-line);padding:.95rem 0;display:grid;gap:.25rem}
.booking-summary dt {color:#7b9288;font-size:.84rem;font-weight:500}
.booking-summary dd {margin:0;font-weight:750;line-height:1.85;word-break:break-word}
.booking-summary__note {font-size:.82rem;color:#627a71;line-height:1.8;background:#f6f9f7;border-radius:12px;padding:.8rem;margin-top:1.2rem}
#booking-flow .booking-review dd {text-align:left;overflow-wrap:anywhere}
#booking-flow .booking-review__notice {line-height:1.9}
@media(max-width:991px){.booking-summary{position:static}.booking-layout {flex-direction:column}.booking-summary dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}}
@media(max-width:600px){
 .booking-progress li {font-size:.67rem}.booking-progress__number {width:33px;height:33px;border-radius:11px}
 .booking-progress ol {gap:.1rem}
 .booking-content-panel {padding:1.05rem;border-radius:18px}
 .booking-branches,.booking-services-grid {grid-template-columns:1fr}
 .booking-branch-card {min-height:0}
 .booking-summary dl{grid-template-columns:1fr}
 .booking-action-row .clinic-btn {padding:.6rem .75rem;min-width:0;flex:1}
 #booking-aside{
    display: none;
 }
}


/* Six-step progress indicator */
.booking-progress ol {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Authentication panel */
.booking-auth-card {
    width: min(100%, 500px);
    padding: 1.8rem;
    background: #ffffff;
    border: 1px solid #d8e6e0;
    border-radius: 20px;
}

.booking-auth-card .form-label {
    font-weight: 700;
    color: #244b40;
    margin-bottom: 0.5rem;
}

.booking-auth-card .form-control {
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid #d6e4de;
    padding: 0.7rem 1rem;
}

.booking-auth-card .form-control:focus {
    border-color: #148575;
    box-shadow: 0 0 0 3px rgba(20, 133, 117, 0.12);
}

.booking-auth-hint {
    font-size: 0.85rem;
    color: #71857d;
    margin-bottom: 1.2rem;
}

.booking-otp-input {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
    direction: ltr;
}

.booking-auth-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 1.2rem;
    background: #e0f2e9;
    color: #148575;
    font-size: 2rem;
    font-weight: bold;
}

@media (max-width: 600px) {
    .booking-auth-card {
        padding: 1.2rem;
        border-radius: 16px;
    }

    .booking-progress li > span:last-child {
        display: none;
    }

    .booking-progress ol {
        gap: 0.25rem;
    }
}


/* --- Phone booking wizard: viewport-sized, with stationary step actions. --- */
@media (max-width: 767.98px), (max-width: 991.98px) and (orientation: landscape) {
    /* Show the normal top navbar on the booking page; keep the footer hidden. */
    body:has(#booking-flow) > .clinic-header {
        display: block !important;
        flex: 0 0 auto;
    }
    body:has(#booking-flow) > .clinic-footer {
        display: none !important;
    }

    body:has(#booking-flow) {
        /* Leave room for the fixed bottom navigation; flex fits the header. */
        --booking-tab-space: calc(77px + env(safe-area-inset-bottom, 0px));
        height: calc(100dvh - var(--booking-tab-space));
        min-height: 0 !important;
        overflow: hidden;
        padding-bottom: 0 !important;
    }

    /* Constrain the real layout.html wrapper between the header and bottom tabs.
       Without this, the wizard grows with its content and the action bar moves. */
    body:has(#booking-flow) > #main-content {
        display: flex;
        flex: 1 1 0%;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    #booking-flow {
        --booking-tab-space: calc(77px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        flex: 1 1 0%;
        height: 0; /* Grow only into the space left beneath the top navbar. */
        min-height: 0;
        overflow: hidden;
        padding: .45rem .65rem .4rem !important;
    }

    /* Each step already names its purpose; the large page title is redundant here. */
    #booking-flow .booking-page-heading {display: none;}
    #booking-flow .booking-progress {
        width: 100%;
        flex: 0 0 auto;
        margin: 1rem 0 0.8rem;
    }
    #booking-flow .booking-progress ol {gap: .3rem;}
    #booking-flow .booking-progress li {gap: .1rem;}
    #booking-flow .booking-progress__number {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: .85rem;
    }

    #booking-flow .booking-layout {
        flex: 1 1 auto;
        min-height: 0;
        margin-top: 0;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }
    #booking-flow .booking-layout > .col-lg-8 {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        padding: 0;
    }
    #booking-flow #booking-aside {display: none;}
    #booking-flow .booking-content-panel {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        width: 100%;
        padding: .7rem .8rem .55rem;
        border-radius: 16px;
        overflow: hidden;
    }
    /* The existing wizard script assigns display:block inline; override it only
       for the currently visible stage at phone sizes. */
    #booking-flow .booking-stage:not([hidden]) {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        width: 100%;
    }
    #booking-flow .booking-stage__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding: 0 .15rem .5rem;
    }
    #booking-flow .booking-stage__heading {margin: 0 0 .55rem;}
    #booking-flow .booking-stage__eyebrow {font-size: .68rem;}
    #booking-flow .booking-stage__heading h2 {
        font-size: 1.08rem;
        line-height: 1.55;
        margin: .1rem 0;
    }
    #booking-flow .booking-stage__heading p {font-size: .76rem;line-height: 1.6;}
    /* Action bar stays in the same place regardless of content height,
       number of services, or validation messages. */
    #booking-flow .booking-stage > .booking-action-row {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        min-height: 54px;
        margin: auto 0 0 !important;
        padding: .5rem 0 .1rem;
        border-top: 1px solid #e9f0ec;
        background: #fff;
        gap: .55rem;
    }
    #booking-flow .booking-stage > .booking-action-row .clinic-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 43px;
        padding: .5rem .35rem;
        font-size: .85rem;
        line-height: 1.5;
    }
    #booking-flow .booking-branches {grid-template-columns: 1fr;gap: .5rem;}
    #booking-flow .booking-branch-card {
        min-height: 0;
        gap: .27rem;
        padding: .65rem .8rem;
        border-radius: 13px;
    }
    #booking-flow .booking-branch-card__icon {width: 32px;height: 32px;font-size: 1.2rem;}
    #booking-flow .booking-branch-card__icon svg {width: 20px;height: 20px;}
    #booking-flow .booking-branch-card strong {font-size: 1rem;}
    #booking-flow .booking-branch-card__tag {font-size: .72rem;padding: .1rem .5rem;}
    #booking-flow .booking-branch-card small {font-size: .74rem;line-height: 1.55;}
    #booking-flow .booking-branch-card__cta {font-size: .75rem;}
    #booking-flow .booking-hint {padding: .4rem .6rem;font-size: .75rem;}

    /* Two compact columns are usable on common 320-430px phone screens. */
    #booking-flow .booking-services-grid {grid-template-columns: repeat(2,minmax(0,1fr));gap: .45rem;}
    #booking-flow .booking-choice {
        min-height: 61px;
        gap: .35rem;
        padding: .4rem .45rem;
        border-radius: 11px;
    }
    #booking-flow .booking-choice__icon {width: 28px;height: 28px;font-size: 1rem;border-radius: 8px;}
    #booking-flow .booking-choice__name strong {font-size: .75rem;line-height: 1.35;}
    #booking-flow .booking-choice__name small {font-size: .62rem;line-height: 1.25;}
    #booking-flow .check-icon-booking,
    #booking-flow .uncheck-icon-booking {font-size: .95rem;}
    #booking-flow .check-icon-booking svg {width: 16px;height: 16px;}

    #booking-flow .jalali-calendar,
    #booking-flow .booking-time-panel,
    #booking-flow .booking-review {
        width: 100%;
        padding: .6rem;
        border-radius: 12px;
    }
    #booking-flow #date,
    #booking-flow #time,
    #booking-flow #checkout {padding: 0;}
    #booking-flow .jalali-calendar__top {
        grid-template-columns: 34px minmax(0,1fr) 34px;
        gap: .35rem;
        margin-bottom: .45rem;
    }
    #booking-flow .jalali-calendar__nav {width: 34px;height: 34px;}
    #booking-flow .jalali-calendar__month {font-size: 1rem;}
    #booking-flow .jalali-calendar__weekdays {margin-bottom: .2rem;}
    #booking-flow .jalali-calendar__weekdays > span {padding: .1rem 0;font-size: .8rem;}
    #booking-flow .jalali-calendar__grid,
    #booking-flow .jalali-calendar__weekdays {gap: 3px;}
    #booking-flow .jalali-calendar__day,
    #booking-flow .jalali-calendar__empty {min-height: 34px;}
    #booking-flow .jalali-calendar__day {font-size: .86rem;border-radius: 8px;}
    #booking-flow .jalali-calendar__legend {margin-top: .55rem;font-size: .7rem;gap: .8rem;}
    #booking-flow .booking-status {font-size: .76rem;margin: .4rem 0 .1rem;}
    #booking-flow .jalali-calendar__selection {padding: .4rem .5rem;margin-top: .4rem;font-size: .75rem;}

    #booking-flow .time-slots-grid {gap: .4rem;}
    #booking-flow .time-booking-button {padding: .55rem .3rem;}
    #booking-flow .booking-review dl > div {padding: .5rem 0;gap: .4rem;}
    #booking-flow .booking-review dt,
    #booking-flow .booking-review dd {font-size: .82rem;}
    #booking-flow .booking-auth-card {
        width: 100%;
        padding: .75rem;
        border-radius: 13px;
    }
    #booking-flow .booking-auth-card .form-label {font-size: .8rem;margin-bottom: .2rem;}
    #booking-flow .booking-auth-card .form-control {
        min-height: 43px;
        padding: .4rem .7rem;
        font-size: 16px; /* Avoid iOS autofocusing zoom. */
    }
    #booking-flow .booking-auth-card .mb-3 {margin-bottom: .6rem !important;}
    #booking-flow .booking-auth-card .booking-auth-hint {margin-bottom: .65rem;}
    #booking-flow .booking-auth-success-icon {width: 48px;height: 48px;margin-bottom: .45rem;}
    #booking-flow .booking-auth-success-icon svg {width: 27px;height: 27px;}

    #booking-flow .booking-progress li > span:last-child {
        display: block;
        font-size: 0.65rem;
        line-height: 1.4;
        text-align: center;
        white-space: normal;
    }

    #booking-flow .booking-progress li {
        gap: 0.25rem;
    }

    /* Making body content center vertically Start */
    
    .booking-stage__body {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .booking-branches,
    .booking-services-grid,
    #appointment-calendar,
    .booking-time-panel,
    .booking-review,
    #auth-phone-view {
        margin-top: auto;
        margin-bottom: auto;
    }

    /* #booking-flow .booking-stage__body {
        flex: 0 1 auto;
        min-height: 0;
        margin-block: auto;
        overflow-y: auto;
    }

    #booking-flow .booking-stage > .booking-action-row {
        margin: 0 !important;
    } */

    /* Making body content center vertically End */
}