/* ── Suppress focus outline on click for all RS interactive elements ── */
.rs-filter-btn:focus,
.rs-tab:focus,
.rs-carousel-btn:focus,
.rs-slot-preset-btn:focus,
.rs-slot-today-btn:focus,
.rs-slot-nav-btn:focus,
.rs-sth-clickable:focus,
.rs-slot-cell:focus,
.rs-hour-chip:focus {
    outline: none;
}

/* ── Room Selection Section ── */
.rs-section {
    margin-top: 32px;
    padding: 24px;
}

.rs-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.rs-filter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-default);
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-secondary-cst);
    cursor: pointer;
    transition: all 0.15s;
}
.rs-filter-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.rs-filter-btn.active {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #fff;
    font-weight: 500;
}

/* ── Room Grid ── */
.rs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* ── Room Card ── */
.rs-card {
    border: 1.5px solid var(--border-default);
    border-radius: 0;
    background: var(--bg-surface);
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
    user-select: none;
}
.rs-card:hover {
    border-color: var(--border-mid, var(--border-default));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
}
.rs-card.rs-selected {
    border-color: var(--accent-gold);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.1), 0 6px 20px rgba(0,0,0,0.07);
    transform: translateY(-2px);
}

/* Card image */
.rs-card-img {
    width: 100%;
    height: 140px;
    position: relative;
    overflow: hidden;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rs-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-muted-cst);
    opacity: 0.4;
}

/* Check badge */
.rs-card-check {
    position: absolute;
    top: 10px; right: 10px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--accent-gold);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.2s;
    z-index: 2;
}
.rs-card.rs-selected .rs-card-check { opacity: 1; transform: scale(1); }
.rs-card-check svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.5; }

/* Availability tag */
.rs-avail-tag {
    position: absolute;
    top: 10px; left: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px 4px 8px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 2;
    letter-spacing: 0.3px;
}
.rs-avail-tag::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: rs-avail-pulse 2s ease-in-out infinite;
}
@keyframes rs-avail-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
    50%       { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}

/* Card body */
.rs-card-body { padding: 14px 16px 16px; }
.rs-card-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted-cst);
    font-weight: 600;
    margin-bottom: 4px;
}
.rs-card-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary-cst);
    margin-bottom: 6px;
    line-height: 1.2;
}
.rs-card-desc {
    font-size: 12.5px;
    color: var(--text-secondary-cst);
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rs-card-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.rs-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--text-secondary-cst);
    border: 1px solid var(--border-subtle);
}
.rs-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}
.rs-card-price { font-size: 15px; font-weight: 600; color: var(--text-primary-cst); }
.rs-card-price span { font-size: 12px; font-weight: 400; color: var(--text-muted-cst); }

/* ── Selection hint ── */
.rs-hint {
    display: none;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-secondary-cst);
}
.rs-hint.rs-hint-visible { display: flex; }
.rs-hint-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-gold);
    flex-shrink: 0;
}

/* ── Selection Panel ── */
.rs-panel {
    border: 1px solid var(--border-default);
    border-radius: 0;
    background: var(--bg-surface);
    display: none;
    animation: rsPanelIn 0.25s ease;
}
.rs-panel.rs-panel-visible { display: block; }

@keyframes rsPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Panel tabs — restyled onto the same compact, token-driven language as
   the room-info/slot UI (pill controls, --accent-gold family, soft
   shadows instead of hard borders) and tightened throughout: shorter
   padding on the label/scroll/tab all stack up to a noticeably shorter
   sticky bar without dropping any of the frosted/floating treatment. */
.rs-panel-tabs {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow: visible;
    padding: 0;
    position: sticky;
    top: 100px;
    z-index: 100;
    /* frosted glass */
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--accent-gold-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 0 var(--accent-gold-border);
}

/* "ROOMS" context label */
.rs-panel-tabs::before {
    content: 'ROOMS';
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--text-muted-cst);
    padding: 8px 12px 8px 16px;
    border-right: 1px solid var(--border-subtle);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

/* Scrollable room tabs inner wrapper */
.rs-tabs-scroll {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
}
.rs-tabs-scroll::-webkit-scrollbar { display: none; }

/* Mobile: two-row layout so tabs get full width */
@media (max-width: 640px) {
    .rs-panel-tabs {
        flex-wrap: wrap;
    }
    .rs-panel-tabs::before {
        display: none; /* reclaim horizontal space */
    }
    .rs-tabs-scroll {
        order: 1;
        width: 100%;
        border-bottom: 1px solid var(--border-subtle);
        padding: 6px 10px;
    }
    .rs-time-filter {
        order: 2;
        width: 100%;
        justify-content: center;
        /* padding/border-left overrides live further down the file, after
           .rs-time-filter's own base rule — same specificity, so source
           order decides, and they need to come after it to win. */
    }
}

.rs-tab {
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary-cst);
    cursor: pointer;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    transition: var(--tr-fast);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    background: var(--bg-surface);
    font-family: inherit;
    letter-spacing: 0.2px;
    /* Same defensive alignment fix already applied to .rs-slot-actions'
       icon+text buttons — collapses the text run to its own font-metric
       box instead of the browser-default line-height, so the dot/label/
       count share one true vertical center reliably. */
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.rs-tab:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: var(--accent-gold-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.18);
}
.rs-tab.rs-tab-active {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #fff;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
    transform: translateY(-1px);
}
.rs-tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    transition: background 0.2s;
}
.rs-tab.rs-tab-active .rs-tab-dot {
    /* !important is load-bearing here, not stylistic: each dot also
       carries a per-room inline style="background:…" (its own identity
       color, set once in JS and never touched by this redesign) which
       this needs to override only once a tab is active — a class alone
       can't beat an inline style. */
    background: rgba(255, 255, 255, 0.65) !important;
}
.rs-tab-num {
    font-size: 10.5px;
    font-weight: 400;
    opacity: 0.6;
    margin-left: 1px;
}

/* Panel body */
.rs-panel-body { padding: 20px 24px 24px; }
.rs-tab-content { display: none; }
.rs-tab-content.rs-tab-active { display: block; }

.rs-no-select {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted-cst);
    font-size: 14px;
    font-style: italic;
}
.rs-no-select strong {
    display: block;
    font-style: normal;
    font-size: 18px;
    color: var(--text-secondary-cst);
    margin-bottom: 6px;
}

/* ── Room Carousel + Room Info — one side-by-side row ──────────────
   Both columns commit to the *same fixed* height via one shared
   variable (not a mutual stretch) — .rs-carousel reads it and never
   reads anything else, so nothing on the room-info side (its content
   length, or the Read More toggle) can ever resize or jump it.
   minmax(0, …) on both tracks is what keeps either side's content
   from ever forcing the row wider than its container. */
.rs-room-top-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    --rs-media-h: 210px;
}
@media (max-width: 640px) {
    /* Same breakpoint the rest of the panel already stacks at
       (.rs-panel-tabs, .rs-slot-actions, …) — below it, a side-by-side
       image + text card gets too cramped, so it drops back to a plain
       vertical stack instead. Still keeps a fixed (just slightly
       shorter) height on each stacked side, same mechanism. */
    .rs-room-top-row { grid-template-columns: 1fr; --rs-media-h: 190px; }
}

/* ── Room Carousel ── */
.rs-carousel {
    /* No padding/border on this element today, so it's a no-op right
       now — kept in lockstep with .rs-room-info's own border-box on
       purpose, so the two stay guaranteed-equal even if either one
       picks up padding/border later. */
    box-sizing: border-box;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-elevated);
    /* Fixed, full stop — this is the one thing in this whole layout
       that's never conditional on anything else's content or state. */
    height: var(--rs-media-h);
}
.rs-carousel-track {
    width: 100%;
    height: 100%;
    position: relative;
}
.rs-carousel-slide {
    position: absolute;
    inset: 0;
    display: none;
}
.rs-carousel-slide.rs-carousel-active { display: block; }
.rs-carousel-slide img {
    width: 100%;
    height: 100%;
    /* contain, not cover — the whole photo stays visible at its own
       aspect ratio instead of being cropped to fill the box; the
       carousel's own background shows through as letterboxing on
       whichever axis doesn't match. */
    object-fit: contain;
    display: block;
}
.rs-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
    z-index: 2;
    padding: 0;
}
.rs-carousel-btn:hover { background: rgba(0,0,0,0.7); }
.rs-carousel-prev { left: 10px; }
.rs-carousel-next { right: 10px; }
.rs-carousel-counter {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 12px;
    color: #fff;
    background: rgba(0,0,0,0.45);
    padding: 2px 8px;
    border-radius: 12px;
}

/* ── Compact room-info card ──────────────────────────────────────
   Replaces what used to be three stacked, separately-headed blocks
   (About this room / Amenities / Pricing) with one tight card: price
   and the "seeing patients" purpose selector share a row, then a
   short description and amenity chips underneath.

   Fixed to the same --rs-media-h as the carousel and clipped
   (overflow:hidden) by default — .rs-room-info-inner is the part that
   actually holds/centers the content and gets measured for overflow;
   .rs-room-info-more (Read More) is a sibling footer row so revealing
   it never fights the inner content for space.

   min-height + max-height (both pinned to --rs-media-h) instead of a
   plain height: height:auto isn't animatable, so a straight
   height→auto swap on expand can only ever jump. Keeping min-height
   fixed (still guarantees the "same height as the carousel even with
   little content" floor) while only max-height changes on expand/
   collapse is what lets that one property transition smoothly. */
.rs-room-info {
    /* No global box-sizing:border-box reset exists in this codebase, so
       this needs its own — otherwise height:var(--rs-media-h) would be
       the *content* box only, and this side's padding+border would
       silently add on top of it, breaking the "same fixed height as
       the carousel" this whole mechanism exists for. */
    box-sizing: border-box;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    min-height: var(--rs-media-h);
    max-height: var(--rs-media-h);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: max-height 0.25s ease;
}
/* Expanding grows this side only, up to the exact height JS measured
   its full content to need (updateRoomInfoOverflow sets this custom
   property) — the fallback only matters before that first measurement
   runs. The carousel next to it never reads this class or variable, so
   it can't be resized or animated by this. */
.rs-room-info.rs-room-info-expanded {
    max-height: var(--rs-room-info-expand-h, 2000px);
}
/* No images for this room → no carousel markup → .rs-room-info is the
   row's only child, so it takes the full width instead of sitting in
   just the first of the two grid tracks. */
.rs-room-top-row .rs-room-info:only-child { grid-column: 1 / -1; }
/* rs-purpose-wrap's dropdown (position:absolute, anchored to the
   trigger) must never be trapped by this card's own clipping — while
   it's open, let the whole card grow past its fixed height and stop
   clipping for as long as it stays open; JS only ever toggles the
   dropdown's own inline display (never a class), so :has() matching
   that directly means closing it (display goes back to none) restores
   the normal fixed/clipped card automatically, with no extra wiring. */
.rs-room-info:has(.rs-purpose-dropdown[style*="display: block"]) {
    max-height: none;
    overflow: visible;
}

.rs-room-info-inner {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Short content (nothing to read more of) centers nicely in the
       fixed box instead of hugging the top with empty space below.
       Once there's more to read, top-align instead — centering would
       clip evenly off both the top *and* bottom, hiding the start of
       the price/description that actually needs to stay visible. */
    /* justify-content: center; */
}
/* Flex items default to flex-shrink:1 — inside a height-bounded column
   that would otherwise squeeze the price row / description / amenity
   chips down to fit instead of the whole block genuinely overflowing,
   which is what actually needs to happen for the overflow check (and
   overflow:hidden's clip) to see real overflow instead of just
   compressed content. */
.rs-room-info-inner > * { flex-shrink: 0; }
.rs-room-info.rs-room-info-has-more .rs-room-info-inner,
.rs-room-info.rs-room-info-expanded .rs-room-info-inner {
    justify-content: flex-start;
}
.rs-room-info.rs-room-info-expanded .rs-room-info-inner,
.rs-room-info:has(.rs-purpose-dropdown[style*="display: block"]) .rs-room-info-inner {
    overflow: visible;
}

/* Compact text-link style — a "footer" row, not a button, so it reads
   as more of the same card rather than a separate control. Hidden by
   default; JS reveals it only for rooms actually measured to overflow. */
.rs-room-info-more {
    display: none;
    align-self: flex-end;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent-gold-dark);
    cursor: pointer;
}
.rs-room-info-more:hover { text-decoration: underline; }
.rs-room-info.rs-room-info-has-more .rs-room-info-more { display: inline-flex; }

.rs-room-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}
.rs-room-price { flex: 0 0 auto; }
.rs-room-price-amt {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary-cst);
}
.rs-room-price-unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted-cst);
    margin-left: 2px;
}
.rs-room-price-muted { font-size: 14px; font-weight: 600; color: var(--text-muted-cst); }

.rs-room-desc {
    font-size: 13px;
    color: var(--text-secondary-cst);
    line-height: 1.5;
    margin: 0 0 var(--space-xs);
    /* display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; */
}
.rs-room-desc-empty { color: var(--text-muted-cst); font-style: italic; }
.rs-room-info-empty { font-size: 12.5px; color: var(--text-muted-cst); }

/* Amenities */
.rs-amenity-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.rs-amenity-chip {
    font-size: 12px;
    color: var(--text-secondary-cst);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}

/* ── Slot Date Picker ── */
.rs-slot-section {
    margin-top: var(--space-sm);
    /* Local control-height token — keeps every button/toolbar element in
       this section (preset bar, view switcher, today/nav) on one rhythm. */
    --rs-ctrl-h: 32px;
}

.rs-slot-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-xs);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted-cst);
    font-weight: 600;
}
.rs-slot-title-icon { width: 14px; height: 14px; color: var(--accent-gold); flex-shrink: 0; }

/* Controls bar: view switcher (left) + slot actions (right). Each cluster
   wraps as a single unit before its buttons wrap individually, so the bar
   stays compact instead of spilling into a long ragged multi-row stack. */
.rs-slot-presets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    margin-bottom: 10px;
}

/* View switcher — Week/Month/Weekdays/Weekends are mutually exclusive,
   so they read as one segmented control rather than four loose buttons.
   Neutral tray: this is a *view* choice, not a committing action. */
.rs-slot-view-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    /* background: var(--bg-elevated); */
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}
.rs-slot-view-group .rs-slot-preset-btn {
    border-color: transparent;
    background: transparent;
    border-radius: calc(var(--radius-md) - 3px);
}
.rs-slot-view-group .rs-slot-preset-btn:hover {
    background: rgba(34,197,94,0.09);
}
.rs-slot-view-group .rs-slot-preset-btn.rs-view-active {
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Slot actions — Select All / Copy Hours / Clear, grouped on the right.
   Blue "supporting action" tray — distinct from the green view switcher
   so the two clusters read as different kinds of control at a glance. */
.rs-slot-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding: 3px;
    background: var(--color-primary-bg);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
}
.rs-slot-actions .rs-slot-preset-btn {
    border-color: transparent;
    background: transparent;
    border-radius: calc(var(--radius-md) - 3px);
    /* Collapses the text run down to its own font-metric box instead of
       the browser's default (larger, and inconsistent across browsers/
       fonts) line-height — with align-items:center already on this same
       flex button, that's what keeps the icon and the text sharing one
       true center reliably, not just in whichever browser happens to
       agree today. Scoped to these three action buttons only, so the
       Week/Month/Weekdays/Weekends view-switcher buttons (no icon, same
       base class) are untouched. */
    line-height: 1;
}
/* No generic hover override here on purpose — Select All / Copy / Clear
   each already carry their own semantic hover color (gold/green/red)
   further down; a tray-level hover would only fight with those. */

.rs-slot-preset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--rs-ctrl-h);
    padding: 0 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1.5px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-secondary-cst);
    cursor: pointer;
    border-radius: 0;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}
.rs-slot-preset-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: rgba(34,197,94,0.04);
}
.rs-slot-preset-btn.rs-preset-active {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #fff;
}
.rs-slot-preset-btn.rs-preset-active:hover {
    background: rgba(34,197,94,0.82);
    color: #fff;
}

/* Shared icon sizing for action buttons. display:block removes the SVG's
   own default inline/baseline box model (an inline-level replaced element
   otherwise reserves descender space and can sit a couple px off-baseline
   depending on the browser) — with that gone, the flex button's own
   align-items:center is the only thing positioning it, so it lines up
   with the text the same way in every browser instead of only the ones
   whose flex implementation happens to already override it. */
.rs-action-icon {
    display: block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Select All — shows icon + live label */
.rs-select-all-btn { font-variant-numeric: tabular-nums; }
.rs-select-all-btn.rs-select-all-partial {
    border-color: var(--accent-gold-border);
    color: var(--accent-gold-dark);
    background: var(--accent-gold-bg);
}
.rs-select-all-btn.rs-select-all-active {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #fff;
}
.rs-select-all-btn.rs-select-all-active:hover {
    background: var(--accent-gold-dark);
    color: #fff;
}

/* Copy Hours button */
.rs-copy-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }

/* Clear button with icon */
.rs-slot-preset-clear:hover {
    border-color: var(--status-error);
    color: var(--status-error);
    background: var(--status-error-bg);
}

.rs-slot-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* Today + prev/next as one connected pill cluster instead of three loose
   rectangular buttons — reads as a single "navigate" control. */
.rs-slot-nav-group {
    display: inline-flex;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}
.rs-slot-today-btn,
.rs-slot-nav-btn {
    border: none;
    border-right: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-secondary-cst);
    font-family: inherit;
    cursor: pointer;
    transition: var(--tr-fast);
}
.rs-slot-nav-btn:last-child { border-right: none; }
.rs-slot-today-btn {
    height: var(--rs-ctrl-h);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.rs-slot-nav-btn {
    width: var(--rs-ctrl-h); height: var(--rs-ctrl-h);
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; padding: 0;
}
.rs-slot-today-btn:hover,
.rs-slot-nav-btn:hover { background: var(--accent-gold-bg); color: var(--accent-gold); }

.rs-slot-week-lbl-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.rs-slot-week-lbl-icon { width: 14px; height: 14px; color: var(--accent-gold); flex-shrink: 0; }
.rs-slot-week-lbl {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary-cst);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-time-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px 16px 10px 14px;
    border-left: 1.5px solid var(--border-default);
}
@media (max-width: 640px) {
    /* Placed here (after the base rule, same specificity) so it actually
       wins — a copy of this earlier in the file would lose the cascade tie. */
    .rs-time-filter { padding: 8px 10px; border-left: none; }
}

.rs-time-filter-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    margin-right: 2px;
}
.rs-time-filter-label svg { width: 13px; height: 13px; }

.rs-time-filter-sep {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted-cst);
}

/* ── Custom time dropdown ── */
.rs-tdd { position: relative; }

.rs-tdd-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 13px;
    background: #fff;
    border: 1.5px solid var(--border-default);
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary-cst);
    cursor: pointer;
    min-width: 104px;
    white-space: nowrap;
    transition: border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}
.rs-tdd-btn:hover,
.rs-tdd.rs-tdd-open .rs-tdd-btn {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(34,197,94,0.13);
}
.rs-tdd-lbl { flex: 1; text-align: left; }
.rs-tdd-arrow {
    width: 12px; height: 12px;
    color: var(--text-muted-cst);
    flex-shrink: 0;
    transition: transform 0.2s, color 0.15s;
}
.rs-tdd.rs-tdd-open .rs-tdd-arrow {
    transform: rotate(180deg);
    color: var(--accent-gold);
}

.rs-tdd-panel {
    display: none;
    position: fixed;
    transform: translateX(-50%);
    background: #fff;
    border: 1.5px solid var(--border-default);
    border-radius: 10px;
    box-shadow: 0 10px 36px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06);
    min-width: 118px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 9999;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}
.rs-tdd-panel::-webkit-scrollbar { width: 4px; }
.rs-tdd-panel::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }

.rs-tdd.rs-tdd-open .rs-tdd-panel {
    display: block;
    animation: rsTddIn 0.13s ease;
}
@keyframes rsTddIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-5px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.rs-tdd-opt {
    padding: 3px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary-cst);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}
/* .rs-sth:not(:first-child) {
        background: var(--bg-elevated);
        border-radius: var(--radius-md);
} */
.rs-tdd-opt:hover {
    background: rgba(34,197,94,0.09);
    color: var(--text-primary-cst);
}
.rs-tdd-opt.rs-tdd-opt-sel {
    background: rgba(34,197,94,0.12);
    color: var(--accent-gold);
    font-weight: 700;
}
.rs-tdd-opt.rs-tdd-opt-sel:hover {
    background: rgba(34,197,94,0.18);
}

/* Matched to .rs-tab's own box model — padding 5px v / 1px border /
   12.5px content line — so both end up at the identical 24.5px rendered
   height; width mirrors that same value for a clean square icon button
   (the icon itself is a fixed 13x13 SVG set in JS, unchanged). Same
   border-radius token as the tabs (--radius-pill) reads as "one
   component" with them, while the square-becomes-circle shape (an SVG
   icon has no pill-shaped text run to fill) is what keeps it reading as
   its own, separate Reset action rather than a fourth tab. */
.rs-time-reset-btn {
    width: 24.5px;
    height: 24.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    color: var(--text-muted-cst);
    cursor: pointer;
    transition: var(--tr-fast);
    flex-shrink: 0;
}
.rs-time-reset-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: var(--accent-gold-bg);
}

/* Week grid — a real <table> (day × hour matrix genuinely needs one), but
   dressed as a spaced grid of rounded chips rather than a bordered
   spreadsheet: border-spacing stands in for cell borders, so every cell
   can carry its own soft, rounded, color-coded state. */
/* table-layout: fixed is the actual fix for horizontal overflow — with the
   default "auto" layout, cell *content* (the time pill's text, a price
   label) can force a column wider than its declared width no matter what
   min-width says. Fixed layout makes the time column's width the only
   input; the seven day columns then always share exactly what's left of
   100%, so the table can never exceed its container. overflow-x is now a
   hard "never" instead of a fallback, since fixed layout already
   guarantees there's nothing to scroll horizontally.
   Vertically, this wrap is the real scroll container: its max-height is
   set in JS (updateWeekTableScroll, run after every grid re-render) to
   exactly fit the header row plus 12 hour rows, measured from the real
   rendered layout rather than hand-computed padding/border arithmetic —
   so it stays correct across the 900px/600px breakpoints below, where
   cell height and border-spacing both change, with nothing to keep in
   sync by hand. .rs-sth's existing `position: sticky; top: 0` (see below)
   is what keeps the header pinned in view once this wrap starts
   scrolling — no extra markup or structural change needed for that. */
.rs-slot-table-wrap {
    overflow-x: hidden;
    overflow-y: auto;
}
.rs-slot-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 3px;
}

/* Header row */
.rs-sth {
    padding: 5px 3px;
    background: var(--bg-surface);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted-cst);
    position: sticky;
    top: 0;
    z-index: 2;
}
.rs-sth-time { width: 120px; }
.rs-sth-today {
    background: #ebf6f1;
    border-radius: var(--radius-md);
}
.rs-sth-clickable {
  cursor: pointer;
  transition: var(--tr-fast);
border-radius: calc(var(--radius-md) - 6px);
  -webkit-border-radius: calc(var(--radius-md) - 6px);
  -moz-border-radius: calc(var(--radius-md) - 6px);
  -ms-border-radius: calc(var(--radius-md) - 6px);
  -o-border-radius: calc(var(--radius-md) - 6px);
}
.rs-sth-clickable:hover {
    background: var(--accent-gold-bg);
}
.rs-sth-day-sel {
    background: rgba(34,197,94,0.2) !important;
    border-radius: var(--radius-md);
}
.rs-sth-day-sel .rs-day-num { color: var(--accent-gold); }
.rs-day-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary-cst);
    line-height: 1;
}
.rs-day-today { color: var(--accent-gold); }
.rs-day-name {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--text-muted-cst);
    margin-top: 1px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.rs-today-dot {
    width: 5px; height: 5px;
    background: var(--accent-gold);
    border-radius: 50%;
    margin: 3px auto 0;
}

/* Non-operating day column */
.rs-sth-closed {
    opacity: 0.4;
    cursor: not-allowed !important;
}
.rs-sth-closed:hover {
    background: transparent !important;
}
.rs-day-closed-lbl {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted-cst);
    margin-top: 3px;
}
.rs-slot-closed {
    background: repeating-linear-gradient(
        -45deg,
        var(--bg-elevated),
        var(--bg-elevated) 5px,
        var(--bg-surface) 5px,
        var(--bg-surface) 10px
    );
    cursor: not-allowed;
}
.rs-slot-closed-icon {
    width: 14px;
    height: 14px;
    color: var(--text-muted-cst);
    opacity: 0.35;
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
}

/* Time label column — a compact one-line pill instead of a bordered
   table column. The separation from the grid comes from the pill's own
   background contrast, not a column rule; a row with a selection in it
   tints the pill and adds a small dot, so the "status" reads inline. */
.rs-stc-time {
    padding: 3px;
    text-align: left;
    vertical-align: middle;
    width: 120px;
    overflow: hidden;
    padding-left: 0;

}
.rs-stc-time-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary-cst);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--tr-fast);
}
.rs-stc-time-active .rs-stc-time-pill {
    background: var(--accent-gold-bg);
    color: var(--accent-gold-dark);
}
.rs-stc-time-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent-gold);
    flex-shrink: 0;
}

/* Slot cells — three-tier state via a single color: a faint tint at rest
   (available), a stronger tint on hover, solid fill once selected. Rounded
   + separated by the table's border-spacing instead of grey grid-lines.
   `overflow: hidden` pins the box to `height` no matter what state or
   content (icon, price) is inside it — selecting a cell can never grow it. */
.rs-slot-cell {
    border: 1px solid var(--border-subtle);
    border-radius: calc(var(--radius-md) - 3px);
    text-align: center;
    height: 34px;
    /* No min-width: with table-layout:fixed the seven day columns already
       share exactly the width left over after the time column — adding a
       floor here would be the one thing that could still force overflow
       on a narrow screen. */
    vertical-align: middle;
    overflow: hidden;
    transition: var(--tr-fast);
}
.rs-slot-avail {
    background: var(--accent-gold-bg);
    border-color: var(--accent-gold-border);
    cursor: pointer;
}
.rs-slot-avail:hover {
    background: rgba(34,197,94,0.16);
    border-color: var(--accent-gold);
}
.rs-slot-avail:hover .rs-slot-cell-lbl { color: var(--accent-gold); }
.rs-slot-sel {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    cursor: pointer;
}
.rs-slot-sel:hover { opacity: 0.88; }
/* Past — de-emphasized to near-invisible rather than a solid grey block:
   no fill, no border, just a quiet muted marker so it recedes without
   reading as "broken" or "disabled". */
.rs-slot-past {
    background: transparent;
    border-color: transparent;
    cursor: not-allowed;
}
.rs-slot-past .rs-slot-cell-lbl { opacity: 0.55; }
.rs-slot-booked {
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
    cursor: not-allowed;
    color: var(--status-error);
}
.rs-slot-cell-lbl {
    font-size: 13px;
    color: var(--text-muted-cst);
    pointer-events: none;
    user-select: none;
}
.rs-slot-price-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary-cst);
    pointer-events: none;
    user-select: none;
    display: block;
}
.rs-slot-avail:hover .rs-slot-price-lbl { color: var(--accent-gold); }
/* Flex row (not stacked, not inline vertical-align) so the checkmark and
   price line up exactly on center — and, being one line, a selected cell
   stays exactly as tall as an available one. */
.rs-slot-sel-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
}
.rs-slot-price-sel {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rs-slot-check {
    width: 13px; height: 13px;
    stroke: #fff;
    flex-shrink: 0;
    pointer-events: none;
}

/* ── Sticky Summary Bar ──────────────────────────────────────────
   A compact toolbar, not an information card: everything that used to
   stack in its own row (headline above pills, label above amount above
   a multi-line fee breakdown above the offer box) is flattened onto as
   few horizontal lines as the content allows — [pills+count] on the
   left, [price+breakdown+offer] and the CTA on the right, each internal
   group now a row instead of a column. Every element below reuses the
   same handful of tokens (--space-xxs/xs for gaps+padding,
   --radius-pill for chips, --radius-md for boxes/buttons) so the whole
   bar reads as one consistent, controlled-palette component instead of
   a stack of separately-designed pieces. */
.rs-summary-bar {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, var(--accent-gold-bg), var(--bg-surface) 70%);
    border-top: 2px solid var(--accent-gold);
    padding: var(--space-xxs) var(--space-md) var(--space-xs) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    z-index: 50;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.14);
    flex-wrap: wrap;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px); 

}
.rs-sum-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px var(--space-xs);
}
.rs-sum-headline {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary-cst);
    flex-shrink: 0;
    white-space: nowrap;
}
.rs-sum-headline strong { font-size: 12.5px; color: var(--accent-gold-dark); }
.rs-sum-headline-sep { margin: 0 4px; color: var(--border-focus); }

.rs-sum-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}
.rs-sum-pill {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 3px 5px 3px 7px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary-cst);
    line-height: 1;
}
.rs-sum-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rs-sum-pill strong { color: var(--text-primary-cst); font-weight: 600; }
.rs-sum-pill-room { color: var(--text-muted-cst); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.rs-sum-pill-count {
    background: var(--bg-surface);
    border-radius: var(--radius-pill);
    min-width: 15px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: var(--text-muted-cst);
}
.rs-sum-pill-more { color: var(--text-muted-cst); font-style: italic; }
.rs-sum-pill-x {
    color: var(--text-muted-cst);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    margin-left: 1px;
    transition: color 0.12s;
}
.rs-sum-pill-x:hover { color: var(--status-error); }

.rs-sum-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}
/* Label + amount now sit on one inline line ("You Pay ₹1,234") instead
   of stacked, and the fee breakdown is a single comma-flowing line
   instead of one line per fee — together these are what actually
   collapse this block from up to 4 stacked rows down to 1-2. */
.rs-sum-total { text-align: right; line-height: 1.15; }
.rs-sum-total-lbl {
    display: inline;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted-cst);
    margin-right: 5px;
}
.rs-sum-breakdown {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0 5px;
    margin-top: 1px;
}
.rs-sum-breakdown span {
    font-size: 10.5px;
    color: var(--text-muted-cst);
}
.rs-sum-breakdown-discount { color: var(--accent-gold-dark) !important; font-weight: 700; }
.rs-sum-total-amt {
    display: inline;
    font-size: 17px;
    font-weight: 700;
    color: var(--accent-gold);
}
.rs-sum-total-amt-muted { color: var(--text-secondary-cst); font-size: 13px; }
.rs-sum-book-btn {
    padding: 7px 16px;
    background: var(--accent-gold);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: var(--tr-fast);
    outline: none;
}
.rs-sum-book-btn:hover { background: var(--accent-gold-dark); transform: translateY(-1px); }
.rs-sum-book-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .rs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .rs-slot-cell { height: 42px; }
}
@media (max-width: 600px) {
    .rs-grid { grid-template-columns: 1fr 1fr; }
    .rs-sth { padding: 7px 2px; }
    .rs-day-num { font-size: 13px; }
    .rs-slot-table { border-spacing: 2px; }
    .rs-slot-price-lbl, .rs-slot-price-sel { font-size: 9.5px; }
    .rs-panel-body { padding: 14px 10px 18px; }
    /* Keeps the sticky Hours row's two dropdowns from being the one thing
       that still forces the page wider than the viewport on narrow phones. */
    .rs-tdd-btn { min-width: 0; padding: 7px 8px; font-size: 12.5px; }

    /* Slot controls: stack the two clusters full-width and let their
       buttons share the row evenly instead of wrapping one at a time. */
    .rs-slot-view-group,
    .rs-slot-actions {
        width: 100%;
        margin-left: 0;
    }
    .rs-slot-view-group .rs-slot-preset-btn { flex: 1 1 0; }
    .rs-slot-actions .rs-slot-preset-btn { flex: 1 1 auto; }

    /* Room info: purpose selector drops under the price instead of
       being squeezed onto the same row. */
    .rs-room-info-row { align-items: stretch; }
    .rs-purpose-wrap { max-width: none; }

    /* Summary bar: stack into full-width rows so the price/offer block
       and the Confirm button never have to share a row that's narrower
       than their combined natural width — still each row is as short
       as the desktop version, just wrapped instead of squeezed. */
    .rs-summary-bar { padding: var(--space-xxs) var(--space-sm); }
    .rs-sum-left { width: 100%; }
    .rs-sum-right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    .rs-sum-total { text-align: left; flex: 1 1 180px; }
    .rs-sum-breakdown { justify-content: flex-start; }
    .rs-sum-book-btn { flex: 1 1 100%; text-align: center; }
}
@media (max-width: 480px) {
    /* Only on the smallest phones does the full "8:00 AM - 9:00 AM" pill
       not fit alongside seven still-usable day columns — here the grid
       (and its prices) stays the priority, and the pill's existing
       text-overflow: ellipsis truncates gracefully instead of cramping
       the rest of the row. Everything from 481px up shows the full range. */
    .rs-sth-time, .rs-stc-time { width: 72px; }
    .rs-stc-time-pill { padding: 3px 5px; font-size: 9px; }
}


/* ── Room purpose multi-select dropdown ──
   Sits inline next to the price on desktop/tablet (flex item in
   .rs-room-info-row) and drops to full width once the row wraps.

   Restyled onto the same token palette as the room-info card around it
   (bg-surface/bg-elevated + the gold accent family, --radius-md,
   --space-*) instead of the generic blue "primary" tokens and hardcoded
   hex/rgba values it used before — that mismatch was the main thing
   making it read as a bolted-on form control rather than part of the
   card. Tightened padding/gaps throughout for the same reason the card
   itself was compacted: less dead space, same click targets. */
.rs-purpose-wrap { position: relative; flex: 1 1 240px; max-width: 360px; }
.rs-purpose-trigger {
    display: flex; align-items: center; gap: 6px;
    width: 100%; text-align: left; cursor: pointer;
    padding: 6px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary-cst);
    transition: var(--tr-fast);
}
.rs-purpose-trigger:hover {
    border-color: var(--accent-gold-border);
    background: var(--accent-gold-bg);
    color: var(--text-primary-cst);
}
.rs-purpose-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-purpose-caret { flex-shrink: 0; width: 11px; height: 11px; color: var(--accent-gold-dark); }
.rs-purpose-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 300;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
    min-width: 230px; max-width: 320px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.rs-purpose-heading {
    font-size: 10px;
    color: var(--text-muted-cst);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin: 0 0 8px;
}
.rs-purpose-option {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--text-secondary-cst); cursor: pointer;
    padding: 4px 0; user-select: none;
    margin-bottom: 0;
}
.rs-purpose-option:hover { color: var(--text-primary-cst); }
.rs-purpose-option input[type="checkbox"] { accent-color: var(--accent-gold); cursor: pointer; flex-shrink: 0; }
.rs-purpose-badge {
    margin-left: auto; font-size: 10px;
    background: var(--accent-gold-bg);
    color: var(--accent-gold-dark);
    border: 1px solid var(--accent-gold-border);
    border-radius: 3px;
    padding: 1px 6px; white-space: nowrap; flex-shrink: 0;
}
.rs-purpose-save-btn {
    display: block; width: 100%; margin-top: 8px;
    background: none;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary-cst);
    font-size: 12px; font-weight: 600;
    padding: 6px; border-radius: calc(var(--radius-md) - 4px); cursor: pointer;
    transition: var(--tr-fast);
}
.rs-purpose-save-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold-dark);
    background: var(--accent-gold-bg);
}

/* ── View mode button active state ── */
.rs-slot-preset-btn.rs-view-active {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #fff;
}
.rs-slot-preset-btn.rs-view-active:hover {
    background: var(--accent-gold-dark);
    color: #fff;
}

/* ── Calendar Month / Weekdays View ──
   A spaced grid of rounded day-cards instead of a bordered spreadsheet —
   the grid `gap` does the separating, so no cell needs its own grey edge. */
.rs-cal-dow-row { margin-bottom: 2px; }
.rs-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.rs-cal-dow {
    text-align: center;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted-cst);
    padding: var(--space-xxs) 2px;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}
.rs-cal-blank {
    opacity: 0.4;
    pointer-events: none;
    min-height: 34px;
}
/* One row of content (date + badge side by side) instead of two stacked
   lines — this is what let the cell (and so the whole calendar) shrink. */
.rs-cal-day {
    min-height: 34px;
    background: var(--bg-elevated);
    border-radius: calc(var(--radius-md) - 3px);
    padding: 0 7px;
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    transition: var(--tr-fast);
}
.rs-cal-day:hover:not(.rs-cal-day-muted):not(.rs-cal-blank) {
    background: rgba(34,197,94,0.12);
}
.rs-cal-day-muted {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
/* Today — a thin accent ring so "today" reads at a glance, same language
   as the week grid's today highlight. */
.rs-cal-day-today { box-shadow: inset 0 0 0 1.5px var(--accent-gold-border); }
.rs-cal-day-active {
    background: var(--accent-gold-bg) !important;
    box-shadow: inset 0 0 0 2px var(--accent-gold);
}
.rs-cal-day-has-sel {
    background: var(--accent-gold-bg);
}
.rs-cal-day-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    min-width: 0;
}
.rs-cal-dnum {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-cst);
    line-height: var(--line-height-tight);
}
.rs-cal-today-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent-gold);
    flex-shrink: 0;
}
/* Compact count badge — replaces the old second "N avail/sel" text row.
   Soft tint = available, solid fill = selected; same accent language as
   the slot cells themselves. */
.rs-cal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--accent-gold-bg);
    color: var(--accent-gold-dark);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}
.rs-cal-badge-sel {
    background: var(--accent-gold);
    color: #fff;
}

/* Day detail panel — replaces the old one-hour-per-row table with a
   one-line heading and a horizontal, wrapping grid of hour chips. */
.rs-cal-detail {
    margin-top: var(--space-sm);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-sm);
}
.rs-cal-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted-cst);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    padding: var(--space-xs) 0;
}
.rs-cal-detail-empty-icon { width: 15px; height: 15px; opacity: 0.5; flex-shrink: 0; }
.rs-day-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}
.rs-day-detail-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary-cst);
}
.rs-day-detail-today { color: var(--accent-gold-dark); }
.rs-day-detail-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary-cst);
}
.rs-day-detail-price span {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted-cst);
    margin-left: 2px;
}
.rs-day-detail-closed {
    text-align: center;
    padding: var(--space-sm) 0;
    font-size: 12.5px;
    color: var(--text-muted-cst);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

/* Hour chips — an even, single-row-when-it-fits grid instead of a
   vertical one-row-per-hour table. Same click target and states as the
   week grid's cells, just sized and grouped as pills instead of rows.
   Every chip shares the row equally (flex-grow) off a modest flex-basis,
   so on any container wide enough for all of them they sit in one line
   with no leftover gap; once a line can't fit any more at their min-width,
   the rest wrap to the next line and that line's chips re-share its width
   evenly — width is never held down by content, so it never scrolls. */
.rs-hour-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Fewer than 10 chips (a shorter Hours window, etc.): each chip keeps the
   exact width a chip would have in a full 10-per-row line at the current
   container width — flex-grow:0 so they don't stretch to fill the leftover
   row space, just sit left-aligned (the container's default flex-start)
   at their natural size, same as .rs-hour-chip's own min-width floor. */
.rs-hour-chips-sparse .rs-hour-chip {
    flex: 0 0 calc((100% - 9 * 6px) / 10);
}
/* 12 or more chips: pin every chip to a strict 12-per-row width instead
   of the default even-share-of-the-row sizing above — flex-grow:0 so a
   leftover partial row (chip 13 onward) sits at that exact same width,
   left-aligned, instead of stretching to fill the row on its own. Same
   mechanism as the sparse rule above, just built around a 12-column
   grid instead of a 10-column one. */
.rs-hour-chips-grid12 .rs-hour-chip {
    flex: 0 0 calc((100% - 11 * 6px) / 12);
}
/* Fixed min-height + overflow:hidden — every state (avail/selected/booked/
   past) renders the same shape (see room-selection.js), so this is a hard
   guarantee on top of an already-symmetric structure: selecting a chip
   changes its color, never its size. min-height is a touch taller than
   before to comfortably fit the time range's own two lines. */
.rs-hour-chip {
    /* Past/booked chips render as <div>, available/selected as <button> —
       Chrome's UA stylesheet defaults <button> to box-sizing:border-box
       while the <div>s stay content-box (no global reset in this codebase),
       so without pinning it explicitly here the two states compute a
       different outer width from the same flex-basis/padding/border, most
       visibly once flex-grow is 0 (the grid12/sparse fixed-width rules
       below) since grow can no longer absorb the mismatch. */
    box-sizing: border-box;
    flex: 1 1 60px;
    min-width: 44px;
    min-height: 46px;
    padding: 6px 6px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary-cst);
    /* Left-aligned, vertically centered column — the time block and the
       price sit on one shared left edge instead of each being centered
       independently against a different content width (which is what
       produced the uneven/diagonal look). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    line-height: 1.3;
    overflow: hidden;
    transition: var(--tr-fast);
}
button.rs-hour-chip { cursor: pointer; }
.rs-hour-chip-main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    max-width: 100%;
}
.rs-hour-check { width: 12px; height: 12px; flex-shrink: 0; }
/* The start–end range, forced onto its own two lines via the <br> in the
   markup (not left to wrap wherever it naturally breaks) — sized down just
   enough to sit comfortably at the chip's usual width. */
.rs-hour-chip-time {
    display: block;
    font-size: 10.5px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-align: left;
}
/* Present but invisible on the available state — reserves the exact same
   space the checkmark occupies once selected, so the time label doesn't
   shift and the chip's content never re-centers on selection. */
.rs-hour-check-reserved { visibility: hidden; }
.rs-hour-chip-sub {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    margin-top: 1px;
}
/* Lines the price up with the time TEXT's own left edge rather than the
   chip's — only the available/selected states carry the reserved
   checkmark (12px icon + 4px gap), so only they need this offset; booked
   and past chips have no icon and their price already starts flush with
   their time text. */
.rs-hour-avail .rs-hour-chip-sub,
.rs-hour-sel .rs-hour-chip-sub {
    margin-left: 16px;
}
.rs-hour-avail {
    background: var(--accent-gold-bg);
    border-color: var(--accent-gold-border);
    color: var(--text-primary-cst);
}
.rs-hour-avail .rs-hour-chip-sub { color: var(--accent-gold-dark); }
.rs-hour-avail:hover { background: rgba(34,197,94,0.16); border-color: var(--accent-gold); }
.rs-hour-sel {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #fff;
}
.rs-hour-sel .rs-hour-chip-sub { color: rgba(255,255,255,0.8); }
.rs-hour-sel:hover { opacity: 0.88; }
.rs-hour-booked {
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
    color: var(--status-error);
    cursor: not-allowed;
}
/* Past — a clearly disabled chip (muted fill + border + dimmed), distinct
   from an ordinary unselected one, but never a heavy dark-grey block. */
.rs-hour-past {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-muted-cst);
    opacity: 0.65;
    cursor: not-allowed;
}
.rs-hour-past .rs-hour-chip-sub { color: var(--text-muted-cst); }

/* ── Weekends View ── A single soft card holding one shared hour-column
   header (sticky, shown once) and, beneath it, two grid rows — Sat, Sun —
   per weekend pair. Every row (header included) is given the exact same
   grid-template-columns, so a fixed date column and N hour columns land
   pixel-for-pixel aligned down the whole card without needing one giant
   shared grid container.
   Column width is pinned to a literal px value computed and applied in
   JS (updateWeekendGridWidths, run right after every render) rather than
   a CSS percentage: every column is always exactly the width it would be
   with 12 columns showing — with 12 or fewer hours the row simply
   doesn't fill the full width (no stretch), and past 12 the 13th+ column
   overflows instead of shrinking everyone else, with this wrap turning
   that overflow into horizontal scroll. A literal px value (not a
   percentage) is what lets .rs-wkend-block below grow to match its own
   row's full width without a circular reference — a percentage-based
   column width would itself grow along with a wider .rs-wkend-block,
   since "100%" would then mean something different. */
/* Left/Right scroll arrows float outside .rs-wkend-shell's own box —
   each sits in its own .rs-wkend-arrow-slot, absolutely positioned
   against .rs-wkend-outer and offset past the shell's edge, so neither
   slot takes any layout width from the shell (position:absolute removes
   it from flow entirely). .rs-wkend-shell itself is left to just hold
   .rs-wkend-blocks and render edge-to-edge — no flex, no gap, no
   reserved gutter of its own; the whole "leave room for the arrows"
   concern lives in the slots instead, entirely outside the shell's box
   model, per "do not compensate with padding/margins inside the shell". */
.rs-wkend-outer { position: relative; }
/* .rs-wkend-shell itself is intentionally left with no rule of its own
   here — a plain block wrapping only .rs-wkend-blocks now needs nothing
   beyond the default box it already gets. */
.rs-wkend-blocks {
    margin-top: var(--space-xxs);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    overflow-x: auto;
}
/* Spans the *full* height of .rs-wkend-outer (top:0 + bottom:0) so the
   sticky arrow inside has the entire Weekend section — not just the
   header row's own height — as its "stick within these bounds"
   containing block; that's what makes it detach and scroll away
   naturally once the section ends, same as .rs-wk-head-row's own
   sticky. pointer-events:none here (re-enabled on the button itself)
   keeps this empty vertical strip from intercepting clicks on whatever
   it happens to sit over. */
.rs-wkend-arrow-slot {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 26px;
    pointer-events: none;
}
.rs-wkend-arrow-slot-left { left: -27px; }
.rs-wkend-arrow-slot-right { right: -27px; }
/* Compact, pill-styled, theme-matched with the rest of the redesigned
   Week/Weekend controls (same accent-gold family as .rs-slot-nav-btn's
   own hover and .rs-slot-avail's rest state) — tinted at rest (not just
   on hover) so they read as "eye-catching" rather than blending into
   the neutral chip background, per the brief's "slightly colorful" ask.
   position:sticky is what makes it float while the page scrolls
   vertically and stop naturally once its slot (see above, full section
   height) scrolls out of view — the same mechanism .rs-wk-head-row
   already uses. It's the *only* positioned property on the button
   itself; the button is otherwise just centered inside its 26px-wide
   slot, so it never needs its own left/right offset.
   Hidden via visibility (not display:none) at ≤12 columns so re-adding
   it later doesn't need a fresh position recalculation — while being
   fully inert (untabbable, unclickable) until .rs-wkend-arrow-active is
   added. */
.rs-wkend-arrow {
    position: sticky;
    top: 150px;
    z-index: 3;
    visibility: hidden;
    pointer-events: none;
    width: 22px;
    height: 22px;
    margin-top: 2px; /* nudges it toward the header row's own vertical center */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    border-radius: var(--radius-pill);
    border: 1px solid var(--accent-gold-border);
    background: var(--accent-gold-bg);
    color: var(--accent-gold-dark);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: var(--tr-fast);
}
.rs-wkend-arrow-active {
    visibility: visible;
    pointer-events: auto;
}
.rs-wkend-arrow:hover:not(:disabled) {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #fff;
}
.rs-wkend-arrow:active:not(:disabled) { transform: scale(0.92); }
.rs-wkend-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}
/* Each weekend pair's title + its date rows are grouped into one pill —
   a soft, fully-rounded card (not a bordered table row) that sits below
   the shared hour header. margin-bottom is the only spacing lever: it
   sits *between* pills, so each pill's own content stays compact.
   min-width is set in JS (updateWeekendGridWidths) to match its own
   .rs-wk-row's full natural width — past 12 columns that's wider than
   this pill would otherwise be, so without it the pill's own background/
   border would stop short of the row's overflowing columns instead of
   fully containing them. No overflow:hidden here (on purpose, even with
   that min-width matching): only the outer .rs-wkend-blocks should ever
   clip/scroll — clipping here too would just double up on the same
   boundary for no benefit. There was never any content actually sitting
   flush against this pill's rounded corners (.rs-wk-row's own padding
   and .rs-wkend-block-title's padding-top already keep everything
   inset), so nothing relied on a clip here for its rounded look. */
.rs-wkend-block {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding-bottom: 4px;
    margin-bottom: var(--space-sm);
}
.rs-wkend-block:last-child { margin-bottom: 0; }
.rs-wkend-block-title {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: var(--accent-gold-dark);
    padding: 8px var(--space-xs) 4px;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}
.rs-wk-row {
    display: grid;
    align-items: stretch;
    gap: 2px;
    padding: 0 4px;
}
.rs-wk-row + .rs-wk-row { margin-top: 2px; }
.rs-wkend-block-title + .rs-wk-row { margin-top: 0; }
/* Shared hour header — one row for the entire view, not per block or per
   date row. Sticky (same pattern as the week table's own .rs-sth) so the
   hour columns stay identifiable while scrolling through many weekends.
   No border here — separation from the content below comes from the
   pill-styled hour cells themselves (.rs-wk-dcol-head) plus a soft shadow,
   not a table-style rule. */
.rs-wk-head-row {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-surface);
    padding-top: 7px;
    padding-bottom: 8px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    /* box-shadow: 0 4px 10px -6px rgba(0,0,0,0.18); */
}
.rs-wk-time {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rs-wk-time-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary-cst);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rs-wk-dcol {
    /* No min-width: each hour column already shares exactly what's left
       of the row's own width after the fixed date column — a floor here
       is the one thing that could force a row (and the whole card) to
       overflow horizontally on a narrow screen with many hour columns —
       same reasoning as the week table's own cells. */
    min-width: 0;
    text-align: center;
    padding: 4px 1px;
    border-radius: calc(var(--radius-md) - 3px);
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    transition: var(--tr-fast);
}
.rs-wk-dcol-head {
    height: auto;
    min-width: 0;
    padding: 4px 8px;
    cursor: default;
    font-size: 10px;
    line-height: 1.25;
    overflow: hidden;
    /* Left-align the two stacked lines instead of the cell's default
       center — overrides the align-items:center it otherwise inherits
       from the base .rs-wk-dcol rule above. */
    /* align-items: flex-start; */
    text-align: center;
    gap: 2px;
    /* Compact pill container — a subtle border + a hair lighter surface
       than the header row it sits on, matching .rs-wk-time-pill's own
       treatment (same background token) so the date pill and the hour
       pills read as one consistent family. */
    background: var(--bg-elevated);
    /* border: 1px solid var(--border-subtle); */
    border-radius: var(--radius-md);
}
/* One flex item per stacked line (inherits display:flex/column from the
   base .rs-wk-dcol rule above). Each line gets its own ellipsis instead
   of clipping the whole block as one unit — on a column too narrow for
   "9:00 AM" to fit, this trims from the end ("9:00 A…"), keeping the
   leading digit that actually matters, instead of losing it to a
   symmetric center-clip. A light/bold two-tone pairing (muted start time,
   accent-colored end time + period) gives the range some presence
   without needing a table rule to read as two distinct lines. */
.rs-wk-hr-line {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rs-wk-hr-line {
    font-weight: 600;
    color: var(--text-secondary-cst);
}

/* Quiet, not "disabled grey" — consistent with .rs-slot-past. */
.rs-wk-na { background: transparent; color: var(--text-muted-cst); cursor: default; }
.rs-wk-na .rs-slot-cell-lbl { opacity: 0.55; }
.rs-wk-booked { background: var(--status-error-bg); color: var(--status-error); cursor: not-allowed; }
.rs-wk-sel { background: var(--accent-gold); color: #fff; cursor: pointer; }
.rs-wk-sel:hover { opacity: 0.88; }
.rs-wk-avail { background: var(--accent-gold-bg); cursor: pointer; }
.rs-wk-avail:hover { background: rgba(34,197,94,0.16); color: var(--accent-gold); }
/* At the narrowest phone widths, a dozen shared hour columns leaves very
   little room per column — trim the header text, date pill and gaps a
   touch further here only; everything from 401px up already fits with
   the base sizes above. */
@media (max-width: 400px) {
    .rs-wk-dcol-head { font-size: 7.5px; gap: 1px; padding: 1px 2px; }
    .rs-wk-time-pill { font-size: 8px; padding: 2px 4px; }
    .rs-wk-row { gap: 0; padding: 0 2px; }
}

/* ── Offer / Coupon Code Container in Booking Summary ──
   Same radius token as the summary bar's pills/button (--radius-md) —
   these used to be a mix of hardcoded 4px/6px values (effectively a
   near-square 2px in the box's case, since --radius-sm resolved before
   its "6px" fallback ever had a chance to apply), which is exactly the
   kind of inconsistent-corners look the rest of this redesign is
   moving away from. Margins trimmed so an active offer/coupon prompt
   adds one compact row instead of visibly padding the bar out. */
.rs-offer-box {
    margin-top: 3px;
    padding: 4px 8px;
    background: var(--accent-gold-bg);
    border: 1px dashed var(--accent-gold);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
}
.rs-offer-info {
    font-size: 11px;
    color: var(--accent-gold-dark);
    font-weight: 600;
}
.rs-offer-code-tag {
    background: var(--accent-gold);
    color: #fff;
    font-family: monospace;
    padding: 1px 6px;
    border-radius: var(--radius-md);
    font-size: 10.5px;
    letter-spacing: 0.5px;
}
.rs-offer-remove-btn {
    background: none;
    border: none;
    color: var(--status-error);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    font-weight: bold;
    padding: 0 2px;
}
.rs-offer-input-wrap {
    display: flex;
    gap: 5px;
    margin-top: 3px;
}
.rs-offer-input {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 11.5px;
    text-transform: uppercase;
}
.rs-offer-apply-btn {
    background: var(--text-primary-cst);
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 11.5px;
    cursor: pointer;
    font-weight: 600;
}