/* =====================================================
   SLOT BOOKING — calendar date picker + Razorpay checkout
   Consumes the --td-* tokens from trip-detail.css
   ===================================================== */

:root {
    --sb-teal:        #0f766e;
    --sb-teal-dark:   #115e59;
    --sb-ok:          #16a34a;
    --sb-ok-bg:       #ecfdf5;
    --sb-few:         #ea580c;
    --sb-few-bg:      #fff7ed;
    --sb-out:         #cbd5e1;
}

.sb { display: flex; flex-direction: column; gap: 14px; }

/* ---------- price header ---------- */
.sb-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sb-price__now  { font-size: 1.75rem; font-weight: 800; color: var(--td-text); line-height: 1; }
.sb-price__was  { font-size: 1rem; color: var(--td-muted); text-decoration: line-through; }
.sb-price__off  {
    margin-left: auto; font-size: .75rem; font-weight: 700; color: var(--sb-ok);
    background: var(--sb-ok-bg); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.sb-price__unit { width: 100%; font-size: .8rem; color: var(--td-muted); }

/* ---------- room sharing ---------- */
.sb-rooms {
    border: 1px solid var(--td-border); border-radius: 14px; padding: 14px;
    background: var(--td-surface);
}
.sb-rooms__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.sb-rooms__title {
    font-weight: 700; color: var(--td-text); font-size: 1rem;
    display: inline-flex; align-items: center; gap: 8px;
}
.sb-rooms__title i { color: var(--td-text-soft); font-size: .95rem; }
.sb-rooms__pill {
    background: var(--td-bg); color: var(--td-text-soft); border-radius: 999px;
    padding: 5px 12px; font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.sb-rooms__list { display: flex; flex-direction: column; gap: 10px; }

.sb-room {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    border: 1.5px solid var(--td-border); border-radius: 12px; padding: 12px 14px;
    background: var(--td-surface); cursor: pointer; font: inherit; transition: .15s;
}
.sb-room:hover { border-color: #94a3b8; }
.sb-room--on {
    border-color: var(--sb-teal); background: var(--sb-ok-bg);
    box-shadow: 0 0 0 1px var(--sb-teal);
}

.sb-room__tick {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--td-border); display: grid; place-items: center;
    color: transparent; font-size: .72rem; transition: .15s;
}
.sb-room--on .sb-room__tick {
    background: var(--sb-teal); border-color: var(--sb-teal); color: #fff;
}

.sb-room__main  { flex: 1 1 auto; min-width: 0; }
.sb-room__label { font-weight: 700; color: var(--td-text); line-height: 1.25; }
.sb-room__occ   {
    font-size: .8rem; color: var(--td-muted); margin-top: 2px;
    display: inline-flex; align-items: center; gap: 5px;
}
.sb-room__right { flex: 0 0 auto; text-align: right; }
.sb-room__price { font-weight: 800; color: var(--td-text); font-size: 1.05rem; }
.sb-room__was   { font-size: .85rem; color: var(--td-muted); text-decoration: line-through; margin-left: 6px; }
.sb-room__off   { display: block; font-size: .8rem; font-weight: 700; color: var(--sb-ok); margin-top: 2px; }

/* ---------- calendar ---------- */
.sb-cal__nav {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px;
}
.sb-cal__month { font-weight: 700; font-size: 1rem; color: var(--td-text); }
.sb-cal__arrow {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--td-border);
    background: var(--td-surface); color: var(--td-text-soft); cursor: pointer;
    display: grid; place-items: center; transition: .15s;
}
.sb-cal__arrow:hover:not(:disabled) { border-color: var(--sb-teal); color: var(--sb-teal); }
.sb-cal__arrow:disabled { opacity: .35; cursor: not-allowed; }

.sb-cal__dow, .sb-cal__grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.sb-cal__dow span {
    text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    color: var(--td-muted); padding-bottom: 6px;
}

.sb-day {
    aspect-ratio: 1 / 1; min-height: 40px; border: 1px solid transparent; border-radius: 10px;
    background: transparent; cursor: default; padding: 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: .9rem; color: var(--td-muted); transition: .12s;
}
.sb-day__n    { font-weight: 600; line-height: 1.1; }
.sb-day__meta { font-size: .6rem; font-weight: 700; line-height: 1.1; margin-top: 1px; }

.sb-day--empty { visibility: hidden; }

/* no departure configured on this date */
.sb-day--none { color: var(--td-muted); opacity: .45; }

.sb-day--available,
.sb-day--few { cursor: pointer; }

.sb-day--available { background: var(--sb-ok-bg);  color: var(--sb-ok);  }
.sb-day--few       { background: var(--sb-few-bg); color: var(--sb-few); }

.sb-day--available:hover,
.sb-day--few:hover { transform: translateY(-1px); box-shadow: var(--td-shadow-sm); }

.sb-day--sold_out,
.sb-day--closed {
    color: var(--sb-out); text-decoration: line-through; cursor: not-allowed; opacity: .8;
}

.sb-day--selected {
    border-color: var(--sb-teal); box-shadow: 0 0 0 2px rgba(15,118,110,.15);
}

/* ---------- legend ---------- */
.sb-legend {
    display: flex; flex-wrap: wrap; gap: 12px; font-size: .72rem; color: var(--td-text-soft);
    padding-top: 4px;
}
.sb-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.sb-legend .is-ok  { background: var(--sb-ok); }
.sb-legend .is-few { background: var(--sb-few); }
.sb-legend .is-out { background: var(--sb-out); }

/* ---------- selected date banner ---------- */
.sb-selected {
    border: 1.5px solid var(--sb-teal); background: var(--sb-ok-bg);
    border-radius: 12px; padding: 12px 14px;
}
.sb-selected__date { font-weight: 700; color: var(--sb-teal-dark); }
.sb-selected__seats { font-size: .8rem; color: var(--sb-few); margin-top: 2px; }
.sb-selected--empty {
    border-style: dashed; border-color: var(--td-border); background: var(--td-bg);
    color: var(--td-muted); text-align: center; font-size: .85rem;
}

/* ---------- traveler stepper ---------- */
.sb-trav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sb-trav__label { font-weight: 600; color: var(--td-text); }
.sb-trav__cap   { display: block; font-size: .74rem; color: var(--td-muted); font-weight: 400; }
.sb-step { display: flex; align-items: center; gap: 6px; border: 1px solid var(--td-border); border-radius: 999px; padding: 4px; }
.sb-step button {
    width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--td-bg);
    font-size: 1.1rem; line-height: 1; color: var(--td-text); cursor: pointer;
}
.sb-step button:disabled { opacity: .35; cursor: not-allowed; }
.sb-step__n { min-width: 26px; text-align: center; font-weight: 700; }

/* ---------- guest form ---------- */
.sb-form { display: flex; flex-direction: column; gap: 10px; }
.sb-field label { display: block; font-size: .78rem; font-weight: 600; color: var(--td-text-soft); margin-bottom: 4px; }
.sb-field input {
    width: 100%; padding: 11px 13px; border: 1px solid var(--td-border); border-radius: 10px;
    font: inherit; font-size: .92rem; color: var(--td-text); background: var(--td-surface);
}
.sb-field input:focus { outline: 0; border-color: var(--sb-teal); box-shadow: 0 0 0 3px rgba(15,118,110,.1); }
.sb-field--err input { border-color: var(--td-danger); }
.sb-field__err { display: none; font-size: .74rem; color: var(--td-danger); margin-top: 3px; }
.sb-field--err .sb-field__err { display: block; }

/* ---------- totals ---------- */
.sb-totals { background: var(--td-bg); border-radius: 12px; padding: 12px 14px; font-size: .88rem; }
.sb-totals__row { display: flex; justify-content: space-between; gap: 10px; }
.sb-totals__row + .sb-totals__row { margin-top: 6px; }
.sb-totals__row--main { font-weight: 700; color: var(--sb-teal-dark); }
.sb-totals__row--muted { color: var(--td-muted); font-size: .82rem; }

/* ---------- CTA ---------- */
.sb-cta {
    width: 100%; padding: 15px 18px; border: 0; border-radius: 12px;
    background: var(--sb-teal); color: #fff; font: inherit; font-size: 1rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: .15s;
}
.sb-cta:hover:not(:disabled) { background: var(--sb-teal-dark); }
.sb-cta:disabled { background: #a7c4c0; cursor: not-allowed; }
.sb-cta__spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: sb-spin .7s linear infinite; }
.sb-cta.is-busy .sb-cta__spin { display: inline-block; }
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* ---------- messages ---------- */
.sb-msg { display: none; border-radius: 10px; padding: 10px 12px; font-size: .84rem; }
.sb-msg.is-on { display: block; }
.sb-msg--err  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.sb-msg--test { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; font-weight: 600; }

.sb-loading { text-align: center; padding: 22px; color: var(--td-muted); font-size: .85rem; }

/* ---------- mobile bottom sheet ---------- */
.sb-sheet__backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.55); opacity: 0; visibility: hidden;
    transition: .22s; z-index: 1200;
}
.sb-sheet__backdrop.is-open { opacity: 1; visibility: visible; }

.sb-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201;
    background: var(--td-surface); border-radius: 20px 20px 0 0;
    max-height: 92vh; overflow-y: auto; padding: 8px 18px 26px;
    transform: translateY(100%); transition: transform .26s cubic-bezier(.32,.72,0,1);
    box-shadow: var(--td-shadow-lg);
}
.sb-sheet.is-open { transform: translateY(0); }
.sb-sheet__grip { width: 42px; height: 4px; border-radius: 999px; background: var(--td-border); margin: 8px auto 14px; }
.sb-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sb-sheet__title { font-size: 1.25rem; font-weight: 800; color: var(--td-text); }
.sb-sheet__close {
    width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--td-bg);
    color: var(--td-text-soft); font-size: 1.1rem; cursor: pointer;
}

/* Desktop: sheet never shows. Mobile: sidebar widget never shows. */
@media (min-width: 993px) {
    .sb-sheet, .sb-sheet__backdrop { display: none; }

    /* ---------- sticky sidebar with its own scroll ----------
       Once a date is selected the card grows (calendar + stepper + form +
       totals + CTA) and easily exceeds the viewport. Sticky alone is not
       enough — the Pay button would sit below the fold with no way to reach
       it. Capping the height and letting the card scroll internally keeps
       the CTA reachable at any window size.

       88px matches .td-side's sticky offset (navbar + sub-nav); the extra
       24px is breathing room so the card never touches the viewport edge. */
    .td-side {
        max-height: calc(100vh - 88px - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;   /* don't chain to the page mid-card */
        padding-right: 6px;             /* keep content clear of the scrollbar */
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

    .td-side::-webkit-scrollbar        { width: 8px; }
    .td-side::-webkit-scrollbar-track  { background: transparent; }
    .td-side::-webkit-scrollbar-thumb  {
        background: #cbd5e1; border-radius: 999px;
        border: 2px solid transparent; background-clip: content-box;
    }
    .td-side:hover::-webkit-scrollbar-thumb { background: #94a3b8; background-clip: content-box; }
}

/* Short viewports (laptops, zoomed-in browsers) get the least room, so tighten
   the calendar rather than making the card scroll more than it has to.

   Written as one combined condition rather than nesting this inside the
   min-width block above: a nested @media parses into the CSSOM and even
   reports as matching, but is not reliably applied by the renderer. */
@media (min-width: 993px) and (max-height: 800px) {
    .sb-day { min-height: 34px; font-size: .84rem; }
    .sb-cal__dow span { font-size: .64rem; }
    .sb { gap: 11px; }
}

@media (max-width: 992px) {
    .sb--desktop { display: none; }
}

/* ---------- adults / children / infants steppers ---------- */
.sb-travs { display: flex; flex-direction: column; gap: 10px; }
.sb-travs .sb-trav + .sb-trav { border-top: 1px solid var(--td-border); padding-top: 10px; }
.sb-trav__cap { display: block; font-size: .74rem; color: var(--td-muted); font-weight: 400; margin-top: 1px; }

/* ---------- next-departure hint ---------- */
.sb-nexthint {
    display: flex; align-items: center; gap: 8px;
    background: #EFF6FF; color: #0369A1;
    border: 1px solid #cfe4fb; border-radius: 10px;
    padding: 9px 12px; font-size: .84rem; font-weight: 600;
    margin-bottom: 10px;
}
.sb-nexthint i { color: #0EA5E9; }
.sb-nexthint strong { color: #0f172a; }

/* ---------- price breakdown ---------- */
.sb-totals__break { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.sb-totals__break:empty { display: none; }
.sb-totals__break .sb-break-row {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: .82rem; color: var(--td-text-soft);
}
.sb-totals__break .sb-break-row span:last-child { color: var(--td-text); font-weight: 600; }