/* ═══════════════════════════════════════════════════════════════════════════
   components.css: desktop surface shared components (docs/plans/desktop/ai-search.md)

   Linked after shell.css (and BEFORE libs/tom-select/tom-select.min.css, which
   is why the Tom Select skin carries extra specificity). Consumes the tokens
   from desktop.css (--rt-*, --accent, --surface*, --line*, --text*, --step-*,
   --radius*, --shadow-*, --font-*) and the .pl spinner block from shell.css.

   Sections:
     1. RESULT CARD (shared)      the RT.ResultCard markup, mobile rules ported
     2. RESULTS BOARD             the grid, head, pager, empty / supply / error
     3. SEARCH COLUMN CONTROLS    desktop designs on the tokens
     4. RT CALENDAR               the rt-calendar.js modal, ported onto the tokens
     5. NARROW (<= 900px)
     6. NEARBY                    the map search surface: list, place card, markers, place panel

   Soehne has no weight axis: nothing here sets a weight, emphasis swaps the
   family (mobile's ._600 becomes soehne-halbfett). No em-dashes in copy.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 1. RESULT CARD (shared) ─────────────────────────────────────────────── */
/* RT.ResultCard.build() (assets/js/v2/result-card.js) is NOT forked: the same
   markup renders here, so every mobile rule the markup depends on is ported
   from assets/css/style.css + app.css and scoped under .results-grid so none
   of it leaks into the shell. Dropped on purpose: .tinder--card's deck sizing
   (position absolute, 90vw / max-width 500px, min-height 60vh) and mobile's
   forced 100% width on `#results-cont .searchResult`, since the grid cell
   sizes the card. The 380.65px card height is kept as a min-height only so the
   footer never clips a long headline. The card was designed on mobile's .8rem
   body, so the card pins that base; its badges are rem-sized and unaffected. */

/* The v1 tokens the ported rules read, resolved to the desktop palette. The
   mobile --box-shadow-cont values carry an embedded priority flag; written
   out here as plain values. */
.results-grid {
    --card-outline:      2px solid rgba(255, 255, 255, .5);   /* v1 --default-outline */
    --card-shadow:       0 50px 100px -20px rgba(50, 50, 93, .25), 0 30px 60px -30px rgba(0, 0, 0, .3);
    --card-shadow-small: 0 20px 40px -10px rgba(50, 50, 93, .25), 0 20px 20px -15px rgba(0, 0, 0, .5);
    --primary-color-lt:  #66a6ff;
    --brand-color:       var(--rt-pink);
    --brand-color-lt:    #ff99bd;
    --brand-color-dk:    var(--rt-crimson);
    --text-dark:         var(--rt-ink);
}

/* The col-12 mb-4 wrapper the renderer emits: neutralised so the grid cell,
   not Bootstrap's column, sizes the card. */
.results-grid > .col-12 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0;
}

/* Utilities the card markup uses that Bootstrap 4 does not provide (mobile
   defines them in style.css / v1-app.css). ._600 was a numeric weight there;
   here it is the halbfett family. */
.results-grid .p-relative { position: relative; }
.results-grid .min-w-0    { min-width: 0; }
.results-grid .text-xs    { font-size: .7rem; }
.results-grid .text-sm    { font-size: .75rem; }
.results-grid ._600       { font-family: var(--font-head); }

/* Bootstrap's .text-muted is a hard, prioritised grey (#6c757d); mobile's is
   "inherit at 60%", which is what the card's white-on-photo and price
   sub-labels rely on. The priority flag is required to outrank Bootstrap's. */
.results-grid .text-muted {
    color: inherit !important;
    opacity: .6;
}

.results-grid .text-primary-lt {
    color: var(--primary-color-lt);
}

.results-grid .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The card box */
.results-grid .tinder--card.full.result.searchResult {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 380.65px;
    height: auto;
    background-color: var(--text-dark);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    overflow: hidden;
    outline: var(--card-outline);
    box-shadow: var(--card-shadow);
    will-change: transform;
    pointer-events: auto;
    cursor: pointer;
    font-size: .8rem;      /* mobile's body base: the card was designed on it */
    line-height: 1.6;
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

/* Desktop has a pointer: a restrained lift, never a colour change */
.results-grid .tinder--card.full.result.searchResult:hover {
    transform: translateY(-2px);
    box-shadow: 0 60px 110px -20px rgba(50, 50, 93, .3), 0 34px 64px -30px rgba(0, 0, 0, .34);
}

/* Children are inert so the card is one tap target; the heart re-enables
   itself below (mobile did this with #results-cont's id specificity). */
.results-grid .tinder--card img,
.results-grid .tinder--card h3,
.results-grid .tinder--card p,
.results-grid .tinder--card div {
    pointer-events: none;
}

.results-grid .tinder--card label,
.results-grid .tinder--card select {
    pointer-events: all;
}

.results-grid .tinder--card h3 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: .5rem;
}

.results-grid .tinder--card p {
    margin-top: 0;
}

/* Photo (or video) area */
.results-grid .tinder--card.full.result .result-img {
    flex: 1 1 auto;
    width: 100%;
    background-size: cover;
    background-position: center center;
}

/* Footer: headline + price on a dark gradient */
.results-grid .tinder--card.result .result-title2 {
    width: 100%;
    margin-top: auto;
    background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .35) 100%);
    z-index: 0;
}

.results-grid .tinder--card.result .result-title2 i,
.results-grid .tinder--card.result .imgColors-content h3 i {
    color: color-mix(in srgb, var(--itemColor) 100%, #FFFFFF 100%);
    transition: color 4s ease-out;
}

/* Outranks .text-primary-lt above by specificity alone (mobile used priority) */
.results-grid .tinder--card.result .result-title2 h3 {
    color: color-mix(in srgb, var(--itemColor) 100%, #FFFFFF 100%);
}

/* Location pill (top-left) with the white circle icon */
.results-grid .booking-date {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: inline;
    background: var(--accent);
    color: white;
    padding: .25rem .75rem .25rem 2.5rem;
    border-radius: 20px;
    font-size: 1rem;
    outline: 2px solid rgba(255, 255, 255, .5);
}

.results-grid .booking-date.cards {
    background: var(--itemColorBG);
    top: .8rem;
    left: .8rem;
    transition: all 4s ease-out;
}

.results-grid .booking-date.cards i {
    transition: all 4s ease-out;
}

.results-grid .booking-date-circle {
    position: absolute;
    top: .2rem;
    left: .2rem;
    right: calc(100% - 1.8rem);
    bottom: .2rem;
    background-color: white;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rating pill (under the location pill) */
.results-grid .booking-time {
    position: absolute;
    top: 2.25rem;
    left: 2.25rem;
    display: inline;
    background: var(--rt-blue);
    color: white;
    padding: .25rem .75rem;
    border-radius: 20px;
    font-size: .75rem;
}

.results-grid .booking-time.cards {
    background: var(--itemColorBG);
    top: 2.55rem;
    left: 2.55rem;
    transition: all 4s ease-out;
}

/* Save heart (top-right). Re-enabled for pointer events with (0,3,0) so it
   beats the `.results-grid .tinder--card div` inert rule at (0,2,1). */
.results-grid .img-fav {
    position: absolute;
    right: 1rem;
    top: 1rem;
    height: 2.5rem;
    width: 2.5rem;
    background: white;
    border-radius: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    outline: var(--card-outline);
    box-shadow: var(--card-shadow-small);
    font-size: 1rem;
    z-index: 9999;
    transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
}

.results-grid .tinder--card .img-fav {
    pointer-events: all;
    cursor: pointer;
}

.results-grid .img-fav.isSaved {
    background: linear-gradient(-20deg, var(--brand-color-dk) 0%, var(--brand-color) 100%);
    outline-color: var(--brand-color-lt);
    color: white;
}

.results-grid .img-fav.isAiSearch {
    height: 2rem;
    width: 2rem;
    top: .8rem;
    right: .8rem;
    outline-width: 2px;
}

/* Headline highlights: inline chips separated by a half rem */
.results-grid .highlights-cont > span {
    display: inline-block;
    margin-right: .5rem;
}

.results-grid .highlights-cont > span:last-of-type {
    margin-right: 0;
}

/* Colour blobs + title overlay along the photo's bottom edge. The renderer
   positions .imgColors-cont absolutely (inline style); the five blobs fan out
   from the card's palette and the title sits on a soft dark gradient. */
.results-grid .imgColors-cont {
    display: flex;
    position: relative;
    margin-top: -4rem;
    overflow: visible;
}

.results-grid .imgColors-item {
    --base-y: -12%;
    --offset-amount: 2.5%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 100%;
    background-color: var(--itemColor);
    position: absolute;
    transform: translateX(-50%);
    transition: all 800ms ease-out;
}

.results-grid .imgColors-item.cards {
    width: 130%;
    aspect-ratio: 1;
    border-radius: 100%;
    background: radial-gradient(circle at center, var(--itemColorF) 45%, var(--itemColor0) 70%);
    position: absolute;
    transform: translateX(-50%);
    transition:
        --itemColor0 4s ease-out,
        --itemColorF 4s ease-out,
        transform 800ms ease-out;
}

.results-grid .imgColors-item.c1 {
    left: 0;
    transform: translate(-35%, calc(var(--base-y) + 0 * var(--offset-amount)));
    animation-delay: .5s;
}

.results-grid .imgColors-item.c2 {
    left: 25%;
    transform: translate(-35%, calc(var(--base-y) + 1 * var(--offset-amount)));
}

.results-grid .imgColors-item.c3 {
    left: 50%;
    transform: translate(-35%, calc(var(--base-y) + 2 * var(--offset-amount)));
    animation-delay: 1.5s;
}

.results-grid .imgColors-item.c4 {
    left: 75%;
    transform: translate(-35%, calc(var(--base-y) + 3 * var(--offset-amount)));
    animation-delay: 3s;
}

.results-grid .imgColors-item.c5 {
    left: 100%;
    transform: translate(-35%, calc(var(--base-y) + 4 * var(--offset-amount)));
    animation-delay: 1s;
}

.results-grid .imgColors-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.results-grid .imgColors-content.cards {
    position: relative;
    z-index: 2;
    width: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 100%);
    padding: .5rem;
    line-height: normal;
}

/* The animated blob colours are registered <color> properties so the 4s
   transitions above interpolate (mobile registers the same two). */
@property --itemColor0 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(0, 0, 0, 0);
}

@property --itemColorF {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(0, 0, 0, 1);
}


/* ─── 2. RESULTS BOARD ─────────────────────────────────────────────────────── */
/* The board to the right of the search column: a count + spinner + pager
   head, the card grid, and the pager repeated in the foot. The JS toggles
   .results-board.is-loading (grid dims) and #loading-icon-cont.active. */

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    transition: opacity .2s;
}

.results-board.is-loading .results-grid {
    opacity: .6;
    pointer-events: none;
}

.board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.board-count {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-head);
    font-size: var(--step-1);
    color: var(--text);
}

.board-count strong {
    font-family: var(--font-display);
}

/* Inline spinner beside the count: uses shell.css's .pl block (--pl-* live on
   :root; .pl--mono is already defined there). .pl--inline / .pl--sm are
   mobile's utilities, not in shell.css, so they are defined here. */
.pl--inline {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

.pl--sm {
    --pl-size: 1.75rem;
}

.board-spinner {
    display: inline-flex;
    align-items: center;
    opacity: 0;
    color: var(--text-faint);
    transition: opacity .25s ease-out;
}

.board-spinner.active {
    opacity: 1;
}

/* Pager: prev / "1-24 of 87" / next. [hidden] when the total is 0. */
.board-pager {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.board-pager[hidden] {
    display: none;
}

.pager-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-soft);
    transition: border-color .2s, color .2s, background .2s;
}

.pager-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pager-btn[disabled] {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

.pager-range {
    font-family: var(--font-head);
    font-size: var(--step--1);
    color: var(--text-soft);
    white-space: nowrap;
}

.board-foot {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* Empty state: mobile's renderNoResults markup is a bare .searchResult.col-12
   (an .rbox with the photo + colour blobs + copy + Ask {Hoku}). It renders as
   the grid's only child, so it takes the full row, capped at a readable width. */
.results-grid > .col-12:only-child,
.results-grid .searchResult.noresults {
    grid-column: 1 / -1;
    max-width: 720px;
}

.results-grid .rbox {
    width: 100%;
    background-color: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.results-grid .rbox-body.rbox-with-imgColors {
    overflow: hidden;
    padding-bottom: 1rem;
}

.results-grid .resultItem-img {
    background-size: cover;
    background-position: center center;
    width: 100%;
    padding-top: 45%;
}

/* The empty state's blobs sit on their own margin-top (no absolute wrapper),
   with the copy on the same dark gradient the cards use */
.results-grid .rbox .imgColors-content {
    background: linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .05) 100%);
    padding: .75rem .5rem .25rem;
}

.results-grid .rbox .imgColors-content h3 {
    font-family: var(--font-head);
    font-size: var(--step-1);
    margin-bottom: .5rem;
}

.results-grid .rbox .imgColors-content .row {
    margin-left: 0;
    margin-right: 0;
}

/* The Ask {Hoku} button: mobile's .j-button.brand as the solid accent pill */
.results-grid .j-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .62em 1.15em;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-head);
    font-size: var(--step-0);
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.results-grid .j-button:hover {
    background: var(--rt-crimson);
    border-color: var(--rt-crimson);
    color: var(--on-accent);
}

/* Supply bridge banner (renderSupplyBridge): .col-12#supply-bridge > .alertBox
   .bg-brand.text-white. Spans every column above the cards. */
.results-grid > #supply-bridge {
    grid-column: 1 / -1;
}

.results-grid #supply-bridge .alertBox {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.4rem;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-md);
    margin-bottom: 0;
}

.results-grid #supply-bridge .alertBox .h6 {
    font-family: var(--font-head);
    font-size: var(--step-0);
}

.results-grid #supply-bridge .btn.light {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .5em 1em;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .6);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.2;
    transition: background .2s;
}

.results-grid #supply-bridge .btn.light:hover {
    background: var(--surface);
    color: var(--text);
}

/* Fetch failure: a crimson card across the board */
.results-grid > .ai-search-error {
    grid-column: 1 / -1;
    padding: clamp(1.1rem, 2.2vw, 1.7rem);
    border: 1px solid color-mix(in srgb, var(--rt-crimson) 30%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--rt-crimson) 8%, transparent);
    color: var(--rt-crimson);
    font-family: var(--font-head);
}


/* ─── 3. SEARCH COLUMN CONTROLS ───────────────────────────────────────────── */
/* Desktop designs on the tokens, not ports: every mobile control was built
   for a one-at-a-time accordion under a thumb. Here they all sit open in a
   320px column, so each is a compact white-on-paper control: --surface-2
   fill, 1px --line, --radius-sm corners, --font-head labels. The ids and
   state classes are the mobile ones (the JS is a port, not a rewrite). */

.search-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.search-section {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* The eyebrow atom in the soft text colour */
.search-section-title {
    font-family: var(--font-head);
    font-size: var(--step--1);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin: 0 0 .6rem;
}

.search-section-title + .search-section-title {
    margin-top: .5rem;
}

.field-label {
    display: block;
    font-family: var(--font-head);
    font-size: var(--step--1);
    color: var(--text-soft);
    margin: 0 0 .35rem;
}

/* Search box: a pill with the go button on the left, the clear on the right,
   and the autocomplete floating under it (position: relative for that). */
.search-box {
    position: relative;
}

.search-box-query {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .3rem .3rem .35rem;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: 1.75rem;
    transition: border-color .2s, box-shadow .2s;
}

.search-box-query:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.search-box-go,
.search-box-clear {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: var(--step-0);
    transition: background .2s, color .2s, opacity .2s;
}

.search-box-go {
    background: var(--accent);
    color: var(--on-accent);
}

.search-box-go:hover {
    background: var(--rt-crimson);
}

/* Ghost until the input has text (.active, set by the JS as mobile does) */
.search-box-clear {
    color: var(--text-faint);
    opacity: 0;
    pointer-events: none;
}

.search-box-clear.active {
    opacity: 1;
    pointer-events: auto;
}

.search-box-clear:hover {
    background: var(--surface);
    color: var(--text);
}

.search-box-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    padding: .4em .2em;
    font-family: var(--font-text);
    font-size: var(--step-1);
    color: var(--text);
    text-transform: capitalize;   /* as mobile */
}

.search-box-input::placeholder {
    color: var(--text-faint);
    text-transform: none;
}

/* Floating suggestions: overlays the section below rather than pushing it */
.search-box-autocomplete {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 40vh;
    overflow: auto;
    padding: .35rem 0;
}

.search-box-autocomplete[hidden] {
    display: none;
}

.search-box-autocomplete-item {
    padding: .6rem .9rem;
    font-size: var(--step-0);
    color: var(--text);
    cursor: pointer;
    transition: background .15s;
}

.search-box-autocomplete-item:hover {
    background: var(--surface);
}

/* Discovery mode: two segments in one track. The active segment fills with
   the mode's palette colour (experiences blue, services purple, mobile's). */
.discovery-mode-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .25rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.discovery-mode-item {
    flex: 1;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--text-soft);
    cursor: pointer;
    transition: background .25s, color .25s;
}

.discovery-mode-item:hover {
    color: var(--text);
}

.discovery-mode-item .dm-label {
    display: block;
    font-family: var(--font-head);
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    line-height: 1;
}

.discovery-mode-item .dm-subtitle {
    display: none;   /* the mobile hero subtitle has no room in the column */
}

.discovery-mode-item.dm-experiences.dm-active {
    background: var(--rt-blue);
    color: var(--on-accent);
}

.discovery-mode-item.dm-services.dm-active {
    background: var(--rt-purple);
    color: var(--on-accent);
}

/* Day chips: ALL is the FIRST CELL of a 4 x 2 grid (ALL + 7 days = 8 cells,
   two even rows), not a full-width row. */
.day-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
}

.daySlot-all {
    grid-column: auto;   /* one cell, deliberately (see above) */
}

.daySlot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .5rem .25rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}

.daySlot:hover {
    border-color: var(--line-strong);
    color: var(--text);
}

.daySlot i {
    font-size: .9rem;
    color: var(--text-faint);
    transition: color .2s;
}

.daySlot-Title {
    font-family: var(--font-head);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.1;
}

.daySlot-Date {
    font-size: var(--step--1);
    color: var(--text-faint);
    line-height: 1.1;
}

.daySlot-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    color: var(--accent);
}

.daySlot-selected i,
.daySlot-selected .daySlot-Date {
    color: var(--accent);
}

/* Mobile's JS also toggles .text-muted on the chips; Bootstrap's grey would
   fight the selected paint, so it is neutralised here. */
.day-slots .text-muted {
    color: inherit !important;
}

/* Calendar button (future booking only): the .pill atom look, full width */
.cal-row {
    margin-top: .25rem;
}

.cal-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .62em 1.15em;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-head);
    font-size: var(--step-0);
    line-height: 1.2;
    transition: border-color .2s, color .2s;
}

.cal-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.cal-btn-label {
    font-family: var(--font-text);
    font-size: var(--step--1);
    color: var(--text-faint);
}

/* Where: the GPS button is the solid pill in the brand pink */
.gps-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .62em 1.15em;
    margin-bottom: .9rem;
    border-radius: 999px;
    border: 1px solid var(--rt-pink);
    background: var(--rt-pink);
    color: var(--on-accent);
    font-family: var(--font-head);
    font-size: var(--step-0);
    line-height: 1.2;
    transition: background .2s, border-color .2s;
}

.gps-btn:hover {
    background: var(--rt-crimson);
    border-color: var(--rt-crimson);
}

/* The native select is NOT hidden here: Tom Select hides it itself (.ts-hidden-accessible)
   and, gotcha, copies the select's classes onto the wrapper it builds, so a
   .city-select { display:none } hid the whole control (Joel's walk, 2026-09-08). */

/* Tom Select skin. tom-select.min.css is linked AFTER this file, so every
   rule here carries .desktop-surface .search-column (0,4,0) to outrank the
   library's own .ts-wrapper.single .ts-control (0,3,0) regardless of order. */
.desktop-surface .search-column .ts-wrapper .ts-control {
    display: flex;
    align-items: center;
    padding: .7em .95em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    box-shadow: none;
    font-family: var(--font-text);
    font-size: var(--step-0);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

.desktop-surface .search-column .ts-wrapper.focus .ts-control {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.desktop-surface .search-column .ts-wrapper .ts-control > .item {
    margin: 0;
    color: var(--text);
}

.desktop-surface .search-column .ts-wrapper .ts-control > input {
    font-family: var(--font-text);
    font-size: var(--step-0);
    color: var(--text);
}

.desktop-surface .search-column .ts-wrapper .ts-control > input::placeholder {
    color: var(--text-faint);
}

/* The caret the library draws on single selects, in the soft text colour */
.desktop-surface .search-column .ts-wrapper.single .ts-control::after {
    border-color: var(--text-soft) transparent transparent transparent;
    right: 1rem;
}

.desktop-surface .search-column .ts-wrapper.single.dropdown-active .ts-control::after {
    border-color: transparent transparent var(--text-soft) transparent;
}

.desktop-surface .search-column .ts-wrapper .ts-dropdown {
    margin-top: .35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    font-family: var(--font-text);
    font-size: var(--step-0);
    color: var(--text);
    z-index: 30;
}

.desktop-surface .search-column .ts-wrapper .ts-dropdown-content {
    max-height: 45vh;
    padding: .35rem 0;
}

.desktop-surface .search-column .ts-wrapper .ts-dropdown .optgroup-header {
    padding: .75rem .85rem .35rem;
    font-family: var(--font-head);
    font-size: var(--step--1);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
    background: transparent;
}

.desktop-surface .search-column .ts-wrapper .ts-dropdown .optgroup::before {
    margin: .25rem .85rem;
    border-top-color: var(--line);
}

.desktop-surface .search-column .ts-wrapper .ts-dropdown .option {
    padding: .6rem .85rem .6rem 1.5rem;
    line-height: 1.3;
    cursor: pointer;
}

.desktop-surface .search-column .ts-wrapper .ts-dropdown .active {
    background-color: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--text);
}

.desktop-surface .search-column .ts-wrapper .ts-dropdown .highlight {
    background: color-mix(in srgb, var(--rt-blue) 18%, transparent);
    border-radius: 2px;
}

/* Radius slider (shown once a city is picked; [hidden] otherwise) */
.radius {
    margin-top: .9rem;
}

.radius[hidden] {
    display: none;
}

.radius input[type="range"] {
    display: block;
    width: 100%;
    margin: .25rem 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

#radius-value {
    color: var(--text-soft);
    font-family: var(--font-text);
}

/* Who: a title on the left, minus / count / plus on the right */
.stepper {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.stepper + .stepper {
    margin-top: -.25rem;
}

.stepper-title {
    flex: 1 1 auto;
    font-family: var(--font-head);
    font-size: var(--step-0);
    color: var(--text);
}

.stepper-title small {
    display: block;
    font-family: var(--font-text);
    font-size: var(--step--1);
    color: var(--text-faint);
    line-height: 1.2;
}

.stepper-btn {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-soft);
    font-size: .8rem;
    transition: border-color .2s, color .2s;
}

.stepper-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.stepper-num {
    min-width: 2ch;
    text-align: center;
    font-family: var(--font-head);
    font-size: var(--step-1);
    color: var(--text);
}

/* Sort: a three-way segmented control. The active segment lifts to white
   with accent text and a soft inset ring. */
.sort-seg {
    display: flex;
    padding: .25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.sorting-option {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    padding: .5em .4em;
    border-radius: calc(var(--radius-sm) - 4px);
    font-family: var(--font-head);
    font-size: var(--step--1);
    color: var(--text-soft);
    transition: background .2s, color .2s, box-shadow .2s;
}

.sorting-option i {
    color: var(--text-faint);
    transition: color .2s;
}

.sorting-option:hover {
    color: var(--text);
}

.sorting-option.active {
    background: var(--surface-2);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(21, 56, 105, .08);
}

.sorting-option.active i {
    color: var(--accent);
}

/* Show: outlined chips, two per row, ALL across the top. The ON state is the
   MOBILE class .hover (the JS toggles it), painted in each chip's own colour.
   A real pointer hover is a light tint only and never the ON look: the
   :hover:not(.hover) guard is what keeps the class collision harmless. */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}

.filterBTN {
    --chip: var(--text);
    --chip-text: var(--text);
    display: inline-flex;
    align-items: center;
    gap: .5em;
    width: 100%;
    padding: .55em .8em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.25;
    text-align: left;
    transition: border-color .2s, background .2s, color .2s;
}

.filterBTN i {
    flex: 0 0 auto;
    color: var(--chip);
    transition: color .2s;
}

.filterBTN.filter-all {
    grid-column: 1 / -1;
}

.filterBTN:hover:not(.hover) {
    border-color: var(--chip);
    background: color-mix(in srgb, var(--chip) 6%, var(--surface-2));
}

.filterBTN.hover {
    border-color: var(--chip);
    background: color-mix(in srgb, var(--chip) 12%, var(--surface-2));
    color: var(--chip-text);
}

.filterBTN.hover i {
    color: var(--chip-text);
}

/* Each chip's colour (the mobile palette on the desktop tokens) */
.filter-all         { --chip: var(--accent);    --chip-text: var(--accent); }
.filter-experiences { --chip: var(--rt-blue);   --chip-text: var(--rt-blue); }
.filter-goods       { --chip: var(--rt-purple); --chip-text: var(--rt-purple); }
.filter-day         { --chip: var(--rt-amber);  --chip-text: var(--rt-amber); }
.filter-night       { --chip: #1D4E91;          --chip-text: #1D4E91; }
.filter-indoors     { --chip: var(--rt-pink);   --chip-text: var(--rt-pink); }
.filter-outdoors    { --chip: var(--rt-green);  --chip-text: var(--rt-green); }
.filter-family      { --chip: var(--rt-teal);   --chip-text: #459696; }   /* teal text needs the darker step for contrast */
.filter-adults      { --chip: var(--rt-purple); --chip-text: var(--rt-purple); }

/* Foot: the reset link, right-aligned */
.search-column-foot {
    display: flex;
    justify-content: flex-end;
}

.search-column-foot .link {
    font-size: var(--step--1);
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: .18em;
}

.search-column-foot .link:hover {
    color: var(--rt-crimson);
}


/* ─── 4. RT CALENDAR ──────────────────────────────────────────────────────── */
/* rt-calendar.js builds .rtcal-overlay > .rtcal-card > .rtcal-topbar /
   .rtcal-header / .rtcal-months / .rtcal-continue into <body>, so this block
   is NOT scoped under the page and the class names are kept exactly. Ported
   from assets/css/app.css onto the tokens: the mobile bottom sheet becomes a
   centred modal (full radius, padding all round); the v1 warn palette (the
   purple family) resolves to --rt-purple and its steps here. */

.rtcal-overlay {
    --cal:      var(--rt-purple);
    --cal-dk:   #634AA8;
    --cal-lt:   #bca3ff;
    --cal-slt:  #e8dfff;
    --cal-ring: #ff99bd;   /* v1 --brand-color-lt: the today ring */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(22, 24, 29, .55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overscroll-behavior: contain;
    touch-action: none;   /* the JS guard lets only .rtcal-months pan */
    transition: opacity 300ms cubic-bezier(0.77, 0, 0, 1), visibility 0s linear 300ms;
}

.rtcal-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 300ms cubic-bezier(0.77, 0, 0, 1);
}

.rtcal-card {
    display: flex;
    flex-direction: column;
    width: min(100%, 26rem);
    max-height: min(100%, 44rem);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg), var(--shadow-md);
    overflow: hidden;
    color: var(--text);
    font-family: var(--font-text);
    transform: translateY(1.5rem) scale(.97);
    transition: transform 400ms cubic-bezier(0.77, 0, 0, 1);
}

.rtcal-overlay.show .rtcal-card {
    transform: none;
}

/* Top bar: Close (X) + Clear, row-reversed so the X sits right */
.rtcal-topbar {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-direction: row-reverse;
    padding: .75rem .75rem 0;
}

.rtcal-close,
.rtcal-clear {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    cursor: pointer;
    transition: background 200ms ease-in-out, color 200ms ease-in-out;
}

.rtcal-close {
    font-size: 1.15rem;
    color: var(--text-soft);
    background: var(--surface);
}

.rtcal-close:hover,
.rtcal-close:active {
    background: var(--line);
    color: var(--text);
}

.rtcal-clear {
    padding: 0 .75rem;
    border-radius: 5rem;
    font-family: var(--font-head);
    font-size: .8rem;
    color: var(--cal-dk);
    background: transparent;
}

.rtcal-clear:hover,
.rtcal-clear:active {
    background: var(--cal-slt);
}

/* Header readout: Start date to End date */
.rtcal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: .25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--line);
}

.rtcal-date,
.rtcal-start,
.rtcal-end {
    text-align: center;
    min-width: 6.5rem;
}

.rtcal-date span {
    display: block;
    font-size: .65rem;
    color: var(--text-faint);
    margin-bottom: .1rem;
}

.rtcal-date div {
    font-family: var(--font-head);
    font-size: 1rem;
    color: var(--cal-dk);
    transition: color 400ms ease-in-out;
}

.rtcal-arrow {
    color: var(--cal-lt);
    font-size: 1rem;
}

/* Single mode: one centred date, no arrow / end */
.rtcal-card.single .rtcal-arrow,
.rtcal-card.single .rtcal-end {
    display: none;
}

/* Months: one continuous vertical scroll (no paging) */
.rtcal-months {
    position: relative;   /* offsetParent for the open()-scroll targeting */
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 0 1rem .75rem;
}

.rtcal-month-name {
    font-family: var(--font-head);
    font-size: .95rem;
    color: var(--text);
    padding: 1.25rem .5rem .5rem;
}

.rtcal-weekdays,
.rtcal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.rtcal-weekdays > div {
    text-align: center;
    font-size: .7rem;
    padding: .25rem 0;
    font-family: var(--font-head);
    color: var(--cal);
}

.rtcal-day {
    position: relative;
    z-index: 1;   /* stacking context so the -z pseudo layers sit behind the number */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    font-size: .9rem;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rtcal-day.blank {
    cursor: auto;
}

.rtcal-day.inactive {
    color: var(--line-strong);
    pointer-events: none;
}

/* Pointer hover on a pickable day: a faint ring, under the selected paint */
.rtcal-day:not(.blank):not(.inactive):not(.selected):hover::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 100%;
    background: var(--cal-slt);
}

/* Today: subtle ring (the selected paint takes over when picked) */
.rtcal-day.today:not(.selected)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 100%;
    border: 2px solid var(--cal-ring);
    opacity: .6;
}

/* In-range days: a light tint bar */
.rtcal-day.range::before {
    content: "";
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    left: 0;
    right: 0;
    z-index: -2;
    background: var(--cal-slt);
}

/* Range endpoints: half-width bars so the tint meets the selected circle */
.rtcal-day.bar-right::before {
    content: "";
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    left: 50%;
    right: 0;
    z-index: -2;
    background: var(--cal-slt);
}

.rtcal-day.bar-left::before {
    content: "";
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    left: 0;
    right: 50%;
    z-index: -2;
    background: var(--cal-slt);
}

/* Selected (start or end): solid circle, white number */
.rtcal-day.selected {
    color: white;
    font-family: var(--font-head);
}

.rtcal-day.selected::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 100%;
    background: var(--cal);
    border: 2px solid var(--cal-lt);
    box-shadow: 0 .375rem .875rem rgba(145, 109, 246, .35);
}

/* Per-day metadata (future-booking-mode.md D2): a small price line under the
   day number on days whose rate differs from base. .has-meta (set by the JS
   while any label exists) stacks the cells and gives the rows room. */
.rtcal-day-meta {
    display: block;
    font-size: .55rem;
    line-height: 1;
    font-family: var(--font-head);
    color: var(--text-faint);
    margin-top: .15rem;
}

.rtcal-day-meta.up {
    color: var(--cal-dk);
}

.rtcal-card.has-meta .rtcal-day {
    flex-direction: column;
    min-height: 3.1rem;
}

.rtcal-day.selected .rtcal-day-meta {
    display: none;   /* redundant once picked; unreadable on the solid circle */
}

/* Continue */
.rtcal-continue {
    margin: .75rem 1.25rem 1.25rem;
    padding: .7rem;
    text-align: center;
    font-family: var(--font-head);
    font-size: 1rem;
    color: white;
    background: var(--cal);
    border-radius: 5rem;
    outline: 3px solid var(--cal-lt);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background 200ms ease-out, transform 400ms cubic-bezier(0.77, 0, 0, 1);
}

.rtcal-continue:hover {
    background: var(--cal-dk);
}

.rtcal-continue:active {
    background: var(--cal-dk);
    transform: scale(.98);
}


/* ─── 5. NARROW (<= 900px) ────────────────────────────────────────────────── */
/* Narrow desktop windows and small tablets only (phones never reach this
   surface): tighter card cells; the filter grid stays two-up and the day
   chips stay four-up because the column is full width there. */

@media (max-width: 900px) {
    .results-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.25rem;
    }

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

    .day-slots {
        grid-template-columns: repeat(4, 1fr);
    }

    .board-head {
        flex-wrap: wrap;
    }

    .rtcal-overlay {
        padding: 1rem;
    }
}


/* ─── 6. NEARBY (docs/plans/desktop/nearby.md) ────────────────────────────── */
/* The map search surface: the list column on the left, the map on the right.
   The page-scoped <style> in desktop/pages/Nearby.php owns the grid and the
   column's padding; everything else on the page is here. The Where / Show
   controls reuse section 3 as-is. Markers are scoped under .page-nearby and
   the place sheet (api/place-details.php, injected into the shell's side
   panel) under .nearby-place-panel, so nothing leaks into the shell.

   The mobile marker rules (assets/css/style.css) read v1 variables that do
   not exist on desktop; resolved here as:
     --brand-color     -> var(--rt-pink)    the user's centre dot
     --primary-color   -> var(--rt-blue)    a listing pin
     --warn-color-dk   -> var(--rt-amber)   a place pin
     --success-color   -> var(--rt-green)   the active pin
     --default-outline -> 3px solid rgba(255, 255, 255, .7)
   The keyframes are renamed nearbyRipple / nearbyBounce so a later port of
   another mobile map surface cannot collide with them. */

/* 6a. Column head: eyebrow (desktop.css atom) + "42 nearby" in the display
   face + the location label + the inline spinner in the top-right corner. */
.nearby-column .column-head {
    position: relative;
    margin-bottom: 1.5rem;
    padding-right: 2rem;   /* room for the spinner */
}

.nearby-column .column-head .eyebrow {
    margin-bottom: .5rem;
}

.column-count {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--text);
    margin: 0 0 .35rem;
}

.column-where {
    display: flex;
    align-items: center;
    gap: .4em;
    font-family: var(--font-text);
    font-size: var(--step--1);
    color: var(--text-faint);
    margin: 0;
}

.column-where i {
    color: var(--accent);
}

.column-spinner {
    position: absolute;
    top: .1rem;
    right: 0;
    font-size: 1.1rem;
    color: var(--text-faint);
}

/* 6b. The list: one column of cards inside the shared grid. Section 2's grid
   and section 5's narrow override are both (0,1,0); this selector is (0,2,0)
   so it wins at every width without a priority flag. */
.nearby-list.results-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: .25rem 0 1rem;
}

/* The wrapper around each card: the hover lift, the active ring, and the
   anchor for the distance chip. The single card keeps the shared card's 10px
   corners so the ring hugs it; the place card uses the surface radius. */
.nearby-item {
    position: relative;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.nearby-item[data-kind="single"] {
    border-radius: 10px;
}

.nearby-item:hover {
    transform: translateY(-2px);
}

/* The shared card lifts on its own hover (section 1); the wrapper lifts
   instead here so the two never stack. Same specificity, later in the file. */
.nearby-list .tinder--card.full.result.searchResult:hover {
    transform: none;
}

/* Active: a 2px accent ring set 2px off the card so the shared card's white
   outline (drawn in the first 2px outside its box) does not tint it. */
.nearby-item.is-active {
    box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent);
}

/* The renderer's col-12 mb-4 wrapper is a grandchild here (inside
   .nearby-item), so section 1's `.results-grid > .col-12` reset misses it. */
.nearby-item > .col-12 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0;
}

/* Distance chip: a glass pill over the card media, top-left. The card is a
   stacking context (will-change), so z 2 on the chip paints it above. */
.nearby-distance {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .3em .75em;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(21, 56, 105, .16);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
    pointer-events: none;
}

.nearby-distance i {
    color: var(--accent);
}

/* 6c. Place card: a white surface with a 3-up thumb strip and a body. The
   distance chip sits inline in the body here, not over the thumbs. */
.nearby-place-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.npc-thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
    padding: .5rem .5rem 0;
}

.npc-thumbs:empty {
    display: none;
}

.npc-thumb {
    position: relative;
    height: 92px;
    border-radius: var(--radius-sm);
    background: var(--surface) center / cover no-repeat;
    overflow: hidden;
}

.npc-thumb::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
}

.npc-thumb-title {
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .4rem;
    z-index: 1;
    font-family: var(--font-head);
    font-size: .72rem;
    line-height: 1.25;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.npc-body {
    padding: 1rem;
}

.npc-title {
    display: flex;
    align-items: center;
    gap: .4em;
    font-family: var(--font-head);
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--text);
    margin: 0 0 .3rem;
}

.npc-verified {
    flex: none;
    font-size: .8em;
    color: var(--rt-green);
}

.npc-meta {
    font-family: var(--font-text);
    font-size: var(--step--1);
    color: var(--text-faint);
    margin: 0;
}

.nearby-place-card .nearby-distance {
    position: static;
    margin-top: .6rem;
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

/* 6d. Loading / empty state inside the list */
.nearby-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1rem;
    text-align: center;
    font-family: var(--font-text);
    font-size: var(--step-0);
    line-height: 1.5;
    color: var(--text-faint);
}

.nearby-empty > i {
    font-size: 1.5rem;
    color: var(--accent);
}

.nearby-empty .pl {
    margin: 0;
}

/* 6e. The map fills the main; the left corners are rounded (the right edge
   runs to the viewport). The recentre button floats bottom-right. */
.page-nearby #map {
    position: absolute;
    inset: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.map-recentre {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .62em 1.15em;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.2;
    color: var(--text);
    cursor: pointer;
    transition: transform .2s ease-out, box-shadow .2s ease-out, color .2s;
}

.map-recentre i {
    color: var(--accent);
}

.map-recentre:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(21, 56, 105, .18);
}

.map-recentre:active {
    transform: translateY(0) scale(.97);
}

/* 6f. Markers (AdvancedMarkerElement content). Google anchors the content
   element's bottom-centre on the coordinate; mobile's top/left offsets are
   kept exactly as they ship. */
.page-nearby .custom-marker-user {
    position: absolute;
    left: 0;
    top: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--rt-pink);
    outline: 3px solid rgba(255, 255, 255, .7);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%);   /* centre on lat/lng */
    pointer-events: none;               /* keep map clicks clean */
}

.page-nearby .custom-marker-user::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5rem;    /* size of the outward pulse */
    height: 5rem;
    border-radius: 100%;
    background: var(--rt-pink);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    animation: nearbyRipple 3s infinite;
}

.page-nearby .custom-marker-user,
.page-nearby .custom-marker-user::after {
    animation-play-state: paused;
}

.page-nearby .custom-marker-user.run,
.page-nearby .custom-marker-user.run::after {
    animation-play-state: running;
}

.page-nearby .custom-marker-location,
.page-nearby .custom-marker-place {
    position: absolute;
    top: -.5rem;
    left: -.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    background: var(--rt-blue);
    color: #fff;
    outline: 3px solid rgba(255, 255, 255, .7);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    font-family: var(--font-head);
    font-size: .75rem;
    line-height: 1;
    pointer-events: auto;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background .2s;
}

.page-nearby .custom-marker-place {
    top: -.75rem;
    left: -.75rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rt-amber);
}

.page-nearby .custom-marker-place .marker-count {
    pointer-events: none;
}

.page-nearby .custom-marker-location.is-active,
.page-nearby .custom-marker-place.is-active {
    top: -.75rem;
    left: -.75rem;
    background: var(--rt-green);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}

.page-nearby .custom-marker-location.is-active::after,
.page-nearby .custom-marker-place.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    background: var(--rt-green);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    animation: nearbyRipple 3s infinite;
    pointer-events: none;
}

.page-nearby .custom-marker-location.bounce,
.page-nearby .custom-marker-place.bounce {
    animation: nearbyBounce .6s ease-in-out 2;
}

@keyframes nearbyBounce {
    0%,
    100% {
        transform: translate(-50%, -110%) scale(1.1);
    }

    50% {
        transform: translate(-50%, -125%) scale(1.1);
    }
}

@keyframes nearbyRipple {
    10% {
        opacity: .5;
        transform: translate(-50%, -50%) scale(.2);
    }

    70% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 6g. Place panel: the place sheet's HTML (api/place-details.php) inside the
   shell's side panel (clamp(420px, 35vw, 600px) wide, 1.4rem body padding).
   Only the classes the sheet emits are styled. Bootstrap is loaded on
   desktop, so .container / .row / .col-* / .badge / .text-muted / .text-white
   / .text-success / .text-warning / .text-danger and the spacing utilities
   already exist; the v1-only classes are ported here. Mobile's blurred
   .imgColors-item blobs never paint on the sheet's tiles (their --itemColor is
   unset; only the .cards variant reads --itemColor0/F), so they are dropped
   rather than carried as five empty circles. */
.nearby-place-panel {
    --primary-color-lt: #66a6ff;
    --accent-lt:        #ff99bd;
    --blue-dk:          color-mix(in srgb, var(--rt-blue) 72%, black);
    --warn-dk:          color-mix(in srgb, var(--rt-amber) 78%, black);
    font-family: var(--font-text);
    font-size: var(--step-0);
    line-height: 1.5;
    color: var(--text);
}

.nearby-place-panel ._600 {
    font-family: var(--font-head);
}

.nearby-place-panel .text-sm {
    font-size: .75rem;
}

.nearby-place-panel a {
    color: inherit;
    text-decoration: none;
}

/* Bootstrap's .text-primary / .bg-primary are prioritised #007bff; the
   priority flag is required to land the desktop blue on the same selectors. */
.nearby-place-panel .text-primary {
    color: var(--rt-blue) !important;
}

.nearby-place-panel .text-primary-lt {
    color: var(--primary-color-lt);
}

.nearby-place-panel .text-accent-lt {
    color: var(--accent-lt);
}

.nearby-place-panel .text-brand {
    color: var(--accent);
}

.nearby-place-panel .text-warning-dk {
    color: var(--warn-dk);
}

.nearby-place-panel .bg-primary {
    background: linear-gradient(10deg, var(--blue-dk) 0%, var(--rt-blue) 100%) !important;
    color: #fff;
}

.nearby-place-panel .bg-accent {
    background: linear-gradient(10deg, var(--rt-crimson) 0%, var(--accent) 100%);
    color: #fff;
}

/* Headline */
.nearby-place-panel .details-title {
    margin: 0 0 1rem;
}

.nearby-place-panel .details-title h1 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--text);
    margin: 0;
    overflow-wrap: anywhere;
}

.nearby-place-panel [data-pd-act="rename"] {
    cursor: pointer;
    color: var(--text-faint);
    transition: color .2s;
}

.nearby-place-panel [data-pd-act="rename"]:hover {
    color: var(--accent);
}

/* Bootstrap's .container is a centred max-width box with 15px gutters; in
   the panel it is just the flow. The rows keep their gutters (col-8 / col-4
   need them) but drop the outer negative margin. */
.nearby-place-panel .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

.nearby-place-panel .row {
    margin-left: 0;
    margin-right: 0;
}

.nearby-place-panel .row > .col-12:first-child,
.nearby-place-panel .row > .col-8 {
    padding-left: 0;
}

.nearby-place-panel .row > .col-12:first-child,
.nearby-place-panel .row > .col-4 {
    padding-right: 0;
}

.nearby-place-panel .row > .col-12 {
    padding-left: 0;
    padding-right: 0;
}

.nearby-place-panel .highlights-cont > span {
    display: inline-block;
    margin-right: .5rem;
}

.nearby-place-panel .highlights-cont > span:last-of-type {
    margin-right: 0;
}

.nearby-place-panel .text-success {
    color: var(--rt-green) !important;   /* Bootstrap's is prioritised */
}

/* The owner rename form (#pd-rename-form, display toggled by the JS): the
   v1 md-input float-label group rendered as desktop.css's .field atom (label
   above, paper input, accent focus ring). The label follows the input in
   the markup, so the group is a reversed column. */
.nearby-place-panel .md-form-group {
    display: flex;
    flex-direction: column-reverse;
    gap: .35rem;
    margin-bottom: 1rem;
}

.nearby-place-panel .md-form-group label {
    font-family: var(--font-head);
    font-size: var(--step--1);
    color: var(--text-soft);
    margin: 0;
}

.nearby-place-panel .md-input {
    width: 100%;
    font: inherit;
    font-family: var(--font-head);
    padding: .75em .95em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.nearby-place-panel .md-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Buttons: every .btn on the sheet is a pill. .primary is the solid blue
   (Save Name), .btn-outline draws in its own colour (Cancel, the claim CTAs). */
.nearby-place-panel .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .62em 1.15em;
    border-radius: 999px;
    border: 2px solid transparent;
    background: none;
    box-shadow: none;
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.2;
    color: inherit;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, opacity .2s;
}

.nearby-place-panel .btn.primary {
    background: var(--rt-blue);
    border-color: var(--rt-blue);
    color: #fff;
}

.nearby-place-panel .btn.primary:hover {
    background: var(--blue-dk);
    border-color: var(--blue-dk);
}

.nearby-place-panel .btn-outline {
    border-color: currentColor;
}

.nearby-place-panel .btn-outline.b-primary {
    border-color: var(--rt-blue);
}

.nearby-place-panel .btn-outline.b-primary:hover {
    background: color-mix(in srgb, var(--rt-blue) 8%, transparent);
}

.nearby-place-panel .btn-outline.b-warning-dk {
    border-color: var(--warn-dk);
}

.nearby-place-panel .btn-outline.b-warning-dk:hover {
    background: color-mix(in srgb, var(--rt-amber) 10%, transparent);
}

.nearby-place-panel .btn:disabled {
    opacity: .6;
    cursor: default;
}

/* The Owner badge over a claimer's section (inline positioning ships with
   the markup). Bootstrap's .badge sets a 700 weight, which Soehne would
   synthesise; pinned to normal as desktop.css does on its base rules. */
.nearby-place-panel .badge {
    font-family: var(--font-head);
    font-weight: normal;
    font-size: .72rem;
    padding: .35em .7em;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}

/* Keeper section: the round hero portrait overlapping the gradient header.
   The sheet pulls the .rbox up 3.5rem inline when a portrait exists; with
   no portrait the box gets a plain top margin and a normal header inset. */
.nearby-place-panel .rbox {
    width: 100%;
    background: var(--surface-2);
    outline: 2px solid rgba(255, 255, 255, .6);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.nearby-place-panel .rbox.with-hero {
    margin-top: 1rem;
}

.nearby-place-panel .rbox-hero {
    position: relative;
    z-index: 1;
    width: 5rem;
    height: 5rem;
    margin: 1.25rem 0 0 1rem;
    border-radius: 100%;
    overflow: hidden;
    outline: 3px solid rgba(255, 255, 255, .7);
    box-shadow: var(--shadow-sm);
}

.nearby-place-panel .rbox-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nearby-place-panel .rbox-header {
    padding: 1rem;
    border-radius: var(--radius);
    border-bottom-left-radius: 0;
    color: #fff;
}

.nearby-place-panel a:has(> .rbox-hero) .rbox-header {
    padding-left: calc(6rem + 14px);
}

.nearby-place-panel .rbox-header > * {
    padding: 0;
    margin: 0;
}

.nearby-place-panel .rbox-header h5 {
    font-family: var(--font-head);
    font-size: var(--step-0);
    line-height: 1.3;
}

.nearby-place-panel .rbox-header p {
    font-size: var(--step--1);
    line-height: 1.4;
    margin-top: .2rem;
}

/* Listing tiles: mobile's horizontal snap strip becomes a 2-up grid in the
   panel's width. The tile is a cover photo with the title on a dark
   gradient at its foot; the last cell is the View Storefront tile. The
   sheet's pl-3 is a prioritised Bootstrap utility, hence the flag. */
.nearby-place-panel .img-cont-recent {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    padding: 0 !important;
    margin: .75rem 0 1.75rem;
}

.nearby-place-panel .img-cont-recent > a {
    display: block;
    min-width: 0;
}

.nearby-place-panel .recentViewedItem.tiles {
    position: relative;
    width: 100%;
    background: var(--surface);
    outline: 2px solid rgba(255, 255, 255, .6);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform .2s ease-out;
}

.nearby-place-panel .recentViewedItem.tiles:hover {
    transform: translateY(-2px);
}

.nearby-place-panel .recentViewedItem.tiles > div:nth-child(1) {
    width: 100%;
    aspect-ratio: 1 / 1.1;
    background-position: center;
    background-size: cover;
}

.nearby-place-panel .recentViewedItem.tiles > div:nth-child(2) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    background: transparent;
}

.nearby-place-panel .imgColors-cont-tile {
    display: flex;
    position: relative;
    margin-top: 0;
    overflow: visible;
}

.nearby-place-panel .imgColors-item {
    display: none;
}

.nearby-place-panel .imgColors-content-tile {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 1.5rem .6rem .6rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, 0) 100%);
    line-height: normal;
    text-transform: capitalize;
}

.nearby-place-panel .imgColors-content-tile p {
    margin: 0;
    font-family: var(--font-head);
    font-size: .85rem;
    line-height: 1.3;
    color: #fff;
}

.nearby-place-panel .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The View Storefront tile: the icon over the text, on the surface for a
   plain Keeper and on the accent gradient for the owner. */
.nearby-place-panel .recentViewedItem.tiles > div:nth-child(1) .fa-store {
    width: 100%;
    text-align: center;
    margin-bottom: .5rem;
}

.nearby-place-panel .recentViewedItem.tiles > div:nth-child(1) > p {
    width: 100%;
    text-align: center;
    font-size: var(--step--1);
}

/* 6h. Narrow (<= 900px): the page style stacks the map over the column;
   the map keeps a usable height and the recentre button tucks in. Markers
   are unchanged. */
@media (max-width: 900px) {
    .nearby-map {
        min-height: 42vh;
    }

    .map-recentre {
        right: 1rem;
        bottom: 1rem;
    }

    .nearby-list.results-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
}


/* ─── 7. DETAILS (docs/plans/desktop/details.md) ─────────────────────────── */
/* The listing page: a header and a gallery grid over a two-column body (the
   story on the left, the sticky transactional panel on the right), plus the
   Pricing Details modal and the share popover. desktop/pages/Details.php owns
   the page grid in its own <style>; everything else is here, scoped under
   .page-details (the modal, the backdrop and the popover live inside
   #content-main.page-details too, so the scope covers them).

   The transactional controls keep the MOBILE ids and classes (the JS is a
   port) and the mobile FEEL: warm amber (--rt-amber) for date / time / party
   selection, blue for the CTA, pink / crimson for the brand touches. Section
   3's unscoped .daySlot / .cal-btn rules (AI-Search's column chips) are
   overridden below at (0,2,0) and up.

   The v1 utilities the shared markup reads (headline chips, review cards,
   the savings strip, the mobile JS class swaps) are defined once in 7a; the
   three that collide with a prioritised Bootstrap utility carry the flag and
   say so inline. Soehne: family is weight, nothing here sets one except the
   pins to normal against Bootstrap's bold. No em-dashes in copy. */

.page-details {
    --d-muted:    var(--text-faint);
    --d-soft:     var(--text-soft);
    --d-line:     rgba(30, 40, 53, .1);
    --d-hair:     rgba(30, 40, 53, .08);
    --d-amber-dk: color-mix(in srgb, var(--rt-amber) 80%, var(--rt-ink));
    --d-amber-lt: color-mix(in srgb, var(--rt-amber) 50%, var(--rt-white));
    --d-teal-dk:  color-mix(in srgb, var(--rt-teal) 55%, var(--rt-ink));
    --d-ease:     cubic-bezier(0.77, 0, 0, 1);
}

/* 7a. v1 utilities the shared markup reads. The headline output, the review
   cards and the savings strip carry these class names; mobile's JS also
   swaps `_600 text-dark` onto the policy titles. */
.page-details ._600          { font-family: var(--font-head); }
.page-details .text-xs       { font-size: .7rem; }
.page-details .text-sm       { font-size: .75rem; }
.page-details .text-brand    { color: var(--rt-pink); }
.page-details .text-warn     { color: var(--rt-amber); }
.page-details .text-warn-dk  { color: var(--d-amber-dk); }
.page-details .text-accent   { color: var(--d-teal-dk); }
.page-details .text-accent-dk { color: var(--d-teal-dk); }
.page-details .text-white-dk { color: var(--d-muted); }
.page-details .text-theme    { color: var(--d-soft); }
.page-details .text-dark     { color: var(--rt-ink); }     /* Bootstrap's prioritised value is the same ink (#1e2835): no flag needed */
.page-details .text-white    { color: var(--rt-white); }   /* same: Bootstrap's is #ffffff */

/* Bootstrap's .text-muted is a prioritised near-black (rgba(0,0,0,.85)),
   .text-primary a prioritised #53a6fa and .text-success a prioritised
   #22b66e; the flag is required to land the desktop values on them. */
.page-details .text-muted    { color: var(--d-muted) !important; }
.page-details .text-primary  { color: var(--rt-blue) !important; }
.page-details .text-success  { color: var(--rt-green) !important; }

.page-details .scrollbar-hide { scrollbar-width: none; }
.page-details .scrollbar-hide::-webkit-scrollbar { display: none; }

/* 7b. Not found */
.page-details .details-notfound {
    max-width: 480px;
    margin: 4rem auto;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--d-soft);
}

.page-details .details-notfound > i {
    display: block;
    font-size: 4rem;
    color: var(--rt-blue);
    margin-bottom: 1rem;
}

.page-details .details-notfound h2 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    letter-spacing: -.02em;
    color: var(--rt-crimson);
    margin: 0 0 .5rem;
}

.page-details .details-notfound p {
    margin: 0 0 1.5rem;
}

.page-details .details-notfound-cta {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .62em 1.15em;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--rt-ink);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.2;
    transition: border-color .2s, color .2s;
}

.page-details .details-notfound-cta:hover {
    border-color: var(--rt-blue);
    color: var(--rt-blue);
}

/* 7c. Header: title + meta + highlight chips on the left, Share / Save on
   the right. The share popover hangs under its button. */
.page-details .details-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
}

.page-details .details-head-main {
    flex: 1 1 auto;
    min-width: 0;
}

.page-details .details-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--rt-ink);
    margin: 0 0 .5rem;
    overflow-wrap: anywhere;
}

.page-details .details-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    font-size: var(--step--1);
    color: var(--d-muted);
    margin: 0 0 .75rem;
}

.page-details .details-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .4em;
}

.page-details .details-meta-item i {
    color: var(--rt-blue);
}

.page-details .details-meta-rating {
    color: var(--rt-ink);
    font-family: var(--font-head);
}

.page-details .details-meta-rating i {
    color: var(--rt-pink);
}

.page-details .details-meta-new,
.page-details .details-meta-new i {
    color: var(--d-muted);
}

.page-details .details-meta small {
    font-size: .7em;
    color: var(--d-muted);
}

.page-details .details-meta-count {
    font-family: var(--font-text);
    color: var(--d-muted);
}

/* Highlight chips: each headline item is a <span> with an <i> */
.page-details .details-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
}

.page-details .highlights-cont > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    background: var(--surface);
    font-size: .85rem;
    line-height: 1.2;
    color: var(--rt-ink);
    white-space: nowrap;
}

.page-details .details-actions {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.page-details .details-action {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--rt-ink);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}

.page-details .details-action:hover {
    border-color: var(--rt-ink);
}

.page-details .details-save i {
    transition: color .2s, transform .3s var(--d-ease);
}

.page-details .details-save.isSaved {
    color: var(--rt-pink);
    border-color: var(--rt-pink);
}

.page-details .details-save.isSaved i {
    color: var(--rt-pink);
    transform: scale(1.12);
}

.page-details .share-wrap {
    position: relative;
}

.page-details .share-pop {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 20;
    width: 260px;
    padding: 1rem;
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--d-line);
    border-radius: 16px;
    box-shadow: var(--shadow-md), 0 2px 8px rgba(21, 56, 105, .08);
}

.page-details .share-pop[hidden] {
    display: none;
}

.page-details .share-qr {
    display: block;
    width: 180px;
    height: 180px;
    margin: 0 auto .75rem;
    border-radius: 8px;
    background: var(--surface);
}

.page-details .share-pop-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    font-family: var(--font-head);
    font-size: .85rem;
    color: var(--rt-ink);
    margin: 0 0 .35rem;
}

.page-details .share-pop-title i {
    color: var(--rt-blue);
}

.page-details .share-pop-url {
    font-family: var(--font-mono);
    font-size: .7rem;
    line-height: 1.4;
    color: var(--d-muted);
    word-break: break-all;
    margin: 0 0 .75rem;
}

.page-details .share-copy {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .6rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--rt-blue);
    background: var(--rt-blue);
    color: var(--rt-white);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.page-details .share-copy:hover {
    background: color-mix(in srgb, var(--rt-blue) 85%, var(--rt-ink));
    border-color: color-mix(in srgb, var(--rt-blue) 85%, var(--rt-ink));
}

/* 7d. Gallery grid: the hero plus up to four thumbnails (gallery-1 to -5,
   gallery-empty). Every photo renders (the lightbox needs them); CSS shows
   the first five. The hero-swap flash paints on an ::after overlay so it
   sits above the photo (an inset box-shadow on the <a> would hide behind
   its <img>). */
.page-details .details-gallery {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
    height: 460px;
    margin-bottom: 2rem;
    border-radius: 20px;
    overflow: hidden;
    background: var(--surface);
}

.page-details .details-gallery > a {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--surface);
    cursor: pointer;
}

.page-details .details-gallery > a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    box-shadow: inset 0 0 0 0 var(--rt-pink);
    pointer-events: none;
    transition: box-shadow 600ms var(--d-ease);
}

.page-details .details-gallery > a.is-hero-swap::after {
    box-shadow: inset 0 0 0 4px var(--rt-pink);
    transition-duration: 150ms;
}

.page-details .details-gallery .img-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.page-details .details-gallery img,
.page-details .details-gallery video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--d-ease);
}

.page-details .details-gallery > a:hover img,
.page-details .details-gallery > a:hover video {
    transform: scale(1.03);
}

.page-details .details-gallery > a:nth-child(n+6) {
    display: none;
}

.page-details .gallery-1 {
    grid-template-columns: minmax(0, 1fr);
}

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

.page-details .gallery-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.page-details .gallery-3 > a:first-child {
    grid-row: 1 / span 2;
}

/* Four photos: hero on the left, a wide thumb top-right, two small below it */
.page-details .gallery-4 {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.page-details .gallery-4 > a:first-child {
    grid-row: 1 / span 2;
}

.page-details .gallery-4 > a:nth-child(2) {
    grid-column: 2 / span 2;
}

/* Five or more: the Airbnb grid, hero spanning both rows on the left */
.page-details .gallery-5 {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.page-details .gallery-5 > a:first-child {
    grid-row: 1 / span 2;
}

.page-details .gallery-empty {
    background: var(--surface);
    border: 1px dashed var(--line-strong);
}

.page-details .gallery-empty-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    height: 100%;
    color: var(--d-muted);
    font-family: var(--font-head);
}

.page-details .gallery-empty-tile i {
    font-size: 2.5rem;
}

.page-details .gallery-all {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--rt-ink);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.2;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: border-color .2s, transform .2s ease-out;
}

.page-details .gallery-all:hover {
    border-color: var(--rt-ink);
    transform: translateY(-1px);
}

/* 7e. Story sections (the main column) */
.page-details .details-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--d-hair);
}

.page-details .details-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.page-details .section-title {
    font-family: var(--font-head);
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--rt-ink);
    margin: 0 0 .35rem;
}

.page-details .section-sub {
    color: var(--d-muted);
    margin: 0 0 1rem;
}

.page-details .section-sub strong {
    color: var(--rt-ink);
}

.page-details .section-link {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    margin-top: .5rem;
    font-family: var(--font-head);
    font-size: var(--step--1);
    color: var(--rt-blue);
    transition: color .2s;
}

.page-details .section-link:hover {
    color: color-mix(in srgb, var(--rt-blue) 75%, var(--rt-ink));
}

.page-details .section-link i {
    font-size: .75em;
}

.page-details .section-cta {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-top: 1rem;
    padding: .62em 1.15em;
    border-radius: 999px;
    border: 1px solid var(--rt-blue);
    background: var(--surface-2);
    color: var(--rt-blue);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.2;
    transition: background .2s, color .2s;
}

.page-details .section-cta:hover {
    background: var(--rt-blue);
    color: var(--rt-white);
}

.page-details .details-prose {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--rt-ink);
    overflow-wrap: anywhere;
}

.page-details .details-prose p {
    margin: 0 0 1rem;
}

.page-details .details-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.page-details .details-prose ul,
.page-details .details-prose ol {
    padding-left: 1.25rem;
    margin: 0 0 1rem;
}

.page-details .details-review-line {
    display: flex;
    align-items: center;
    gap: .4em;
    font-family: var(--font-head);
    color: var(--rt-ink);
    margin: 1rem 0 0;
}

.page-details .details-review-line i {
    color: var(--rt-pink);
}

/* Owner tools: amber outline pills, Create BLOOM in ink */
.page-details .owner-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}

.page-details .owner-tool {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .55em 1.05em;
    border-radius: 999px;
    border: 1px solid var(--rt-amber);
    background: var(--surface-2);
    color: var(--d-amber-dk);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.2;
    transition: background .2s, color .2s, border-color .2s;
}

.page-details .owner-tool:hover {
    background: var(--rt-amber);
    color: var(--rt-white);
}

.page-details .owner-tool-dark {
    border-color: var(--rt-ink);
    background: var(--rt-ink);
    color: var(--rt-white);
}

.page-details .owner-tool-dark:hover {
    background: var(--rt-night);
    border-color: var(--rt-night);
    color: var(--rt-white);
}

/* 7f. Add-on rows (the panel) and linked component rows (the main column)
   share one row look. The controls keep the mobile markup: the
   .partySizeSlot stepper (ml-auto) and the .ui-switch toggle. */
.page-details .addon-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    border: 1px solid var(--d-line);
    border-radius: 14px;
    background: var(--surface-2);
    transition: opacity .3s, border-color .2s;
}

.page-details .addon-row:last-child {
    margin-bottom: 0;
}

.page-details .addon-row-passthrough {
    padding-left: 2.5rem;
    background: var(--surface);
}

.page-details .addon-row.addon-auto-idle {
    opacity: .55;
}

.page-details .addon-auto-switch {
    pointer-events: none;
    opacity: .65;
}

.page-details .addon-text {
    flex: 1 1 auto;
    min-width: 0;
}

.page-details .addon-name {
    font-family: var(--font-head);
    color: var(--rt-ink);
    margin: 0;
    line-height: 1.35;
}

.page-details .addon-name > i {
    color: var(--d-teal-dk);
    margin-right: .25em;
}

.page-details .addon-sub {
    display: block;
    font-family: var(--font-text);
    font-size: .8rem;
    line-height: 1.4;
    color: var(--d-muted);
    margin: .1rem 0 0;
}

.page-details .addon-sub strong {
    color: var(--rt-ink);
}

.page-details .addon-auto-note {
    display: block;
    font-size: .75rem;
    line-height: 1.35;
    color: var(--d-muted);
    margin: .15rem 0 0;
}

.page-details .linked-rows {
    margin-top: .25rem;
}

.page-details .linked-thumb {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: var(--surface);
    background-size: cover;
    background-position: center;
}

.page-details .linked-ico {
    margin-left: auto;
    color: var(--rt-blue);
}

/* The add-on quantity stepper inside a row: a compact pill, pinned width so
   the buttons never walk sideways as the digit count changes */
.page-details .addon-row .partySizeSlot {
    flex: none;
    width: 6.5rem;
    margin: 0 0 0 auto;
    gap: .25rem;
}

.page-details .addon-row .partySizeBTN {
    width: 28px;
    height: 28px;
    flex: none;
    font-size: .7rem;
}

.page-details .addon-row .partySizeCount {
    flex: 1;
    min-width: 2rem;
    text-align: center;
}

.page-details .addon-row .addon-qty-num {
    margin: 0;
    min-width: 0;
    font-size: 1rem;
    color: var(--rt-ink);
}

/* The toggle: <label class="ui-switch"><input type="checkbox"><i></i></label>.
   Bootstrap's label margin is zeroed; the input is present but invisible. */
.page-details .ui-switch {
    position: relative;
    display: inline-block;
    flex: none;
    width: 44px;
    height: 24px;
    margin: 0;
    cursor: pointer;
}

.page-details .ui-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.page-details .ui-switch i {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 999px;
    background: rgba(30, 40, 53, .2);
    transition: background .25s;
}

.page-details .ui-switch i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rt-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .25s var(--d-ease);
}

.page-details .ui-switch input:checked + i {
    background: var(--rt-blue);
}

.page-details .ui-switch input:checked + i::after {
    transform: translateX(20px);
}

.page-details .ui-switch input:disabled + i {
    opacity: .7;
}

/* 7g. Map + address, the verified badges, the pin. Section 6's markers are
   scoped under .page-nearby, so the user pin is re-declared here (same look,
   same nearbyRipple keyframes). */
.page-details .details-map {
    height: 320px;
    margin-bottom: .75rem;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
}

.page-details .map-address-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-head);
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--rt-ink);
    margin: 0;
}

.page-details .map-address-line {
    color: var(--d-muted);
    margin: 0;
}

.page-details .badge-verified,
.page-details .badge-unverified {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--font-text);
    font-size: .72rem;
    line-height: 1.3;
    color: var(--d-soft);
    white-space: nowrap;
    vertical-align: middle;
}

.page-details .badge-verified i {
    color: var(--rt-green);
}

.page-details .badge-unverified i {
    color: var(--rt-pink);
}

.page-details .custom-marker-user {
    position: absolute;
    left: 0;
    top: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--rt-pink);
    outline: 3px solid rgba(255, 255, 255, .7);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.page-details .custom-marker-user::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    background: var(--rt-pink);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    animation: nearbyRipple 3s infinite;
}

.page-details .custom-marker-user,
.page-details .custom-marker-user::after {
    animation-play-state: paused;
}

.page-details .custom-marker-user.run,
.page-details .custom-marker-user.run::after {
    animation-play-state: running;
}

/* 7h. Open hours + At this place (place mode) */
.page-details .hours-list {
    max-width: 420px;
}

.page-details .hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    color: var(--d-muted);
}

.page-details .hours-row.is-today {
    color: var(--rt-ink);
    font-family: var(--font-head);
}

.page-details .hours-row.is-closed .hours-time {
    color: var(--d-muted);
}

.page-details .hours-day {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.page-details .today-pill {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--rt-blue);
    color: var(--rt-white);
    font-family: var(--font-head);
    font-size: .65rem;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.page-details .place-tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
}

.page-details .place-tile {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .75rem 1rem;
    border: 1px solid var(--d-line);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--rt-ink);
    text-decoration: none;
    transition: border-color .2s, transform .2s ease-out;
}

.page-details .place-tile:hover {
    border-color: var(--rt-blue);
    color: var(--rt-ink);
    transform: translateY(-1px);
}

.page-details .place-tile-thumb {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: var(--surface);
    background-size: cover;
    background-position: center;
}

.page-details .place-tile-text {
    flex: 1 1 auto;
    min-width: 0;
}

.page-details .place-tile-text strong {
    display: block;
    font-family: var(--font-head);
    line-height: 1.3;
}

.page-details .place-tile-text small {
    display: block;
    font-size: .8rem;
    color: var(--d-muted);
}

.page-details .place-tile > i {
    margin-left: auto;
    color: var(--rt-blue);
}

.page-details .place-tiles-divider {
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--d-muted);
    margin: .5rem 0 .25rem;
}

/* 7i. Meet your Keeper */
.page-details .keeper-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem;
    border: 1px solid var(--d-line);
    border-radius: 20px;
    background: var(--surface-2);
}

.page-details .keeper-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 3px solid var(--rt-white);
    box-shadow: var(--shadow-md);
    background-color: var(--surface);
    background-size: cover;
    background-position: center;
}

.page-details .keeper-info {
    min-width: 0;
}

.page-details .keeper-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-head);
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--rt-ink);
    margin: 0 0 .25rem;
}

.page-details .keeper-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .35rem;
    font-size: .9rem;
    color: var(--rt-ink);
}

.page-details .keeper-status i {
    font-size: .6rem;
}

.page-details .keeper-status i.is-active {
    color: var(--rt-green);
}

.page-details .keeper-status i.is-away {
    color: var(--rt-amber);
}

.page-details .keeper-responds {
    font-size: .85rem;
    color: var(--d-muted);
}

.page-details .keeper-speaks {
    font-size: .85rem;
    color: var(--d-muted);
    margin: 0;
}

.page-details .keeper-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.page-details .keeper-btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .62em 1.15em;
    border-radius: 999px;
    border: 1px solid var(--rt-blue);
    background: var(--surface-2);
    color: var(--rt-blue);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.2;
    transition: background .2s, color .2s;
}

.page-details .keeper-btn:hover {
    background: var(--rt-blue);
    color: var(--rt-white);
}

.page-details .keeper-btn-store {
    border-color: var(--rt-amber);
    color: var(--d-amber-dk);
}

.page-details .keeper-btn-store:hover {
    background: var(--rt-amber);
    color: var(--rt-white);
}

/* 7j. Reviews: the score head, four conic rings (--pct / --ring inline), the
   badges, then rt_review_card() rows. */
.page-details .reviews-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.page-details .reviews-score {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--rt-pink);
}

.page-details .reviews-score small {
    font-size: .5em;
    color: var(--d-muted);
}

.page-details .reviews-label {
    display: flex;
    align-items: center;
    gap: .4em;
    font-family: var(--font-head);
    color: var(--rt-ink);
    margin: 0 0 .5rem;
}

.page-details .reviews-label i {
    color: var(--rt-pink);
}

.page-details .score-rings {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.page-details .score-ring {
    text-align: center;
}

.page-details .score-ring-dial {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    margin: 0 auto .5rem;
    border-radius: 50%;
    background: conic-gradient(var(--ring, var(--rt-pink)) calc(var(--pct, 0) * 1%), rgba(30, 40, 53, .08) 0);
}

.page-details .score-ring-dial::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--surface-2);
}

.page-details .score-ring-value {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--rt-ink);
}

.page-details .score-ring-value small {
    font-size: .55em;
    color: var(--d-muted);
}

.page-details .score-ring-label {
    display: block;
    font-family: var(--font-head);
    font-size: .85rem;
    color: var(--d-muted);
}

.page-details .reviews-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.page-details .review-badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .35rem .8rem;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    background: var(--surface);
    font-size: .85rem;
    line-height: 1.2;
    color: var(--rt-ink);
}

.page-details .review-badge i.fa-rotate-right {
    color: var(--rt-green);
}

.page-details .review-badge i.fa-heart {
    color: var(--rt-pink);
}

.page-details .reviews-list {
    margin-top: .5rem;
}

/* rt_review_card() emits `.row.reviewItem > .col + .col-9` then an <hr>;
   the row becomes a 64px / 1fr grid with its own hairline, so the <hr> is
   hidden. Bootstrap's column flex / width / gutters are released. */
.page-details .reviews-list > hr {
    display: none;
}

.page-details .reviewItem {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.25rem 0;
    margin: 0;
    border-top: 1px solid var(--d-hair);
}

.page-details .reviewItem:first-child {
    border-top: 0;
    padding-top: .5rem;
}

.page-details .reviewItem > .col,
.page-details .reviewItem > .col-9 {
    flex: none;
    max-width: none;
    width: auto;
    padding: 0;
}

.page-details .reviewItem p {
    margin-bottom: 0;
}

.page-details .reviewItem .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface);
    margin-bottom: .35rem;
}

.page-details .reviewItem .w-40 {
    width: 48px;
    height: 48px;
}

.page-details .reviewItem .small {
    font-size: .72rem;
    color: var(--d-muted);
}

.page-details .reviewItem h6 {
    font-family: var(--font-head);
    font-size: 1rem;
    margin: 0 0 .15rem;
}

.page-details .review-text {
    line-height: 1.55;
    color: var(--rt-ink);
}

.page-details .review-text i {
    font-size: .8em;
}

.page-details .review-gallery {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.page-details .review-gallery a {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

.page-details .review-gallery img,
.page-details .review-gallery video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Helpful / Report chips and the tiny helpful count */
.page-details .rt-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border: 0;
    border-radius: 999px;
    background: var(--surface);
    color: var(--d-soft);
    font-family: var(--font-head);
    font-size: .78rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.page-details .rt-chip:hover {
    background: color-mix(in srgb, var(--rt-blue) 10%, var(--surface));
    color: var(--rt-ink);
}

.page-details .rt-chip.active {
    background: var(--rt-blue);
    color: var(--rt-white);
}

.page-details .rt-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--d-soft);
    font-family: var(--font-head);
    font-size: .68rem;
    line-height: 1.2;
}

.page-details .rt-pill.helpfulCountPill i {
    color: var(--rt-blue);
}

/* The Read more / Edit / Respond buttons: Bootstrap's .btn base applies,
   compacted into a small outline pill. .primary (Submit) fills blue. */
.page-details .reviewItem .btn {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3rem .75rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--d-soft);
    font-family: var(--font-head);
    font-size: .75rem;
    line-height: 1.3;
    box-shadow: none;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.page-details .reviewItem .btn:hover {
    border-color: var(--rt-ink);
    color: var(--rt-ink);
}

.page-details .reviewItem .btn.btn-outline-primary {
    border-color: var(--rt-blue);
    color: var(--rt-blue);
}

.page-details .reviewItem .btn.btn-outline-primary:hover {
    background: var(--rt-blue);
    color: var(--rt-white);
}

.page-details .reviewItem .btn.btn-outline-warning {
    border-color: var(--rt-amber);
    color: var(--d-amber-dk);
}

.page-details .reviewItem .btn.btn-outline-warning:hover {
    background: var(--rt-amber);
    color: var(--rt-white);
}

.page-details .reviewItem .btn.primary {
    border-color: var(--rt-blue);
    background: var(--rt-blue);
    color: var(--rt-white);
}

.page-details .reviewItem .btn.primary:hover {
    background: color-mix(in srgb, var(--rt-blue) 85%, var(--rt-ink));
}

.page-details .keeper-respond-cont {
    margin-top: .5rem;
}

.page-details .respond-form {
    margin-top: .5rem;
}

.page-details .respond-textarea {
    display: block;
    width: 100%;
    padding: .6rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface-2);
    font: inherit;
    color: var(--rt-ink);
    resize: vertical;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.page-details .respond-textarea:focus {
    border-color: var(--rt-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-blue) 22%, transparent);
}

.page-details .reviews-empty {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 14px;
    background: var(--surface);
}

.page-details .reviews-empty img {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.page-details .reviews-empty h4 {
    font-family: var(--font-head);
    font-size: 1rem;
    color: var(--d-muted);
    margin: 0;
}

.page-details .reviews-empty p {
    margin: 0;
    color: var(--rt-ink);
}

/* 7k. The panel: one white card holding the whole transactional layer in
   mobile order, blocks separated by hairlines, the CTA row at the foot. The
   sticky aside scrolls internally; its bottom padding keeps the card's
   shadow from being clipped by that scroll box. */
.page-details .details-panel {
    padding-bottom: 1.25rem;
    scrollbar-width: thin;
}

.page-details .panel-card {
    background: var(--surface-2);
    border: 1px solid var(--d-line);
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 20px 50px -30px rgba(30, 40, 53, .35);
}

.page-details .panel-block {
    padding: 1.15rem 0;
    border-top: 1px solid var(--d-hair);
}

.page-details .panel-card > .panel-block:first-child {
    border-top: 0;
    padding-top: 0;
}

.page-details .panel-block-title {
    font-family: var(--font-head);
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--rt-ink);
    margin: 0 0 .2rem;
}

.page-details .panel-block-sub {
    font-size: .85rem;
    line-height: 1.45;
    color: var(--d-muted);
    margin: 0 0 .9rem;
}

.page-details .panel-block-sub strong {
    color: var(--rt-ink);
}

.page-details .panel-hint {
    font-size: .8rem;
    color: var(--d-muted);
    margin: .5rem 0 0;
}

.page-details .panel-spinner {
    width: 100%;
    text-align: center;
    color: var(--d-muted);
    padding: 1rem 0;
    margin: 0;
}

.page-details .accent-warn {
    color: var(--d-amber-dk);
}

.page-details .accent-dk {
    color: var(--d-teal-dk);
    font-family: var(--font-head);
}

.page-details .accent-primary {
    color: var(--rt-blue);
}

.page-details .panel-unavailable {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--surface);
    text-align: center;
}

.page-details .panel-unavailable i {
    font-size: 1.5rem;
    color: var(--rt-pink);
}

.page-details .panel-unavailable h4 {
    font-family: var(--font-head);
    font-size: 1rem;
    color: var(--rt-pink);
    margin: .35rem 0;
}

.page-details .panel-unavailable p {
    font-size: .85rem;
    color: var(--d-muted);
    margin: 0;
}

/* Price head */
.page-details .panel-price {
    font-family: var(--font-display);
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--rt-ink);
    padding-bottom: .9rem;
}

.page-details .panel-price-sym {
    font-size: .55em;
    color: var(--d-muted);
    vertical-align: top;
    letter-spacing: 0;
}

.page-details .panel-price-unit {
    font-family: var(--font-text);
    font-size: .5em;
    color: var(--d-muted);
    letter-spacing: 0;
}

.page-details .panel-price-note {
    font-family: var(--font-text);
    font-size: .85rem;
    letter-spacing: 0;
    color: var(--d-muted);
    margin: .35rem 0 0;
}

/* Goods: option values + fulfillment as amber outline pills */
.page-details .option-values {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.page-details .option-value-btn,
.page-details .fulfillment-btn {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .45rem .9rem;
    border: 2px solid color-mix(in srgb, var(--rt-amber) 50%, transparent);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--d-amber-dk);
    font-family: var(--font-head);
    font-size: .9rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.page-details .option-value-btn:hover,
.page-details .fulfillment-btn:hover {
    border-color: var(--rt-amber);
}

.page-details .option-price {
    font-family: var(--font-text);
    font-size: .8em;
    color: var(--d-muted);
}

.page-details .option-value-btn.active,
.page-details .fulfillment-btn.active {
    background: var(--rt-amber);
    border-color: var(--d-amber-lt);
    color: var(--rt-white);
}

.page-details .option-value-btn.active .option-price {
    color: rgba(255, 255, 255, .85);
}

.page-details .option-value-btn.out-of-stock {
    opacity: .4;
    text-decoration: line-through;
}

.page-details .option-value-btn:disabled,
.page-details .fulfillment-btn:disabled {
    opacity: .4;
    cursor: default;
}

/* Available dates: the 7-day strip. Overrides section 3's card-style chips
   (unscoped .daySlot, .daySlot-Title, .daySlot-selected) with the mobile
   circle-under-a-label look, in amber. */
.page-details .day-strip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .25rem;
    margin-bottom: .75rem;
}

.page-details .daySlot {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--d-muted);
    cursor: pointer;
    transition: opacity .3s;
}

.page-details .daySlot > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid rgba(30, 40, 53, .15);
    border-radius: 50%;
    color: transparent;
    transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}

.page-details .daySlot i {
    font-size: .8rem;
    color: inherit;
}

.page-details .daySlot-Title {
    font-family: var(--font-head);
    font-size: .8rem;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--d-muted);
    transition: color .3s;
}

.page-details .daySlot-Date {
    font-size: .65rem;
    line-height: 1.2;
    color: var(--d-muted);
}

.page-details .daySlot-available .daySlot-Title {
    color: var(--d-amber-dk);
}

.page-details .daySlot-available > div {
    border-color: var(--d-amber-lt);
    color: var(--rt-amber);
}

.page-details .daySlot-available:hover > div {
    border-color: var(--rt-amber);
}

.page-details .daySlot-selected {
    background: none;
    border: 0;
    color: var(--d-amber-dk);
}

.page-details .daySlot-selected > div {
    background: var(--rt-amber);
    border-color: var(--d-amber-lt);
    color: var(--rt-white);
    box-shadow: 0 5px 15px -5px color-mix(in srgb, var(--rt-amber) 60%, var(--rt-ink));
}

.page-details .daySlot-selected .daySlot-Date {
    color: var(--d-amber-dk);
}

.page-details .daySlot.text-muted {
    opacity: .5;
    cursor: default;
}

/* The Calendar button (future booking): section 3's unscoped .cal-btn is
   the base; this is its amber variant for the dates block. */
.page-details .cal-row {
    margin-top: .25rem;
}

.page-details .cal-btn {
    border-color: var(--d-amber-lt);
    color: var(--d-amber-dk);
}

.page-details .cal-btn:hover {
    border-color: var(--rt-amber);
    color: var(--d-amber-dk);
}

.page-details .cal-btn i {
    color: var(--rt-amber);
}

.page-details .cal-btn-label {
    color: var(--d-muted);
}

/* Start / Duration / End readout (3 cells; the days variant has 2) */
.page-details .display-times {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    text-align: center;
    margin-bottom: .9rem;
}

.page-details .display-times:where(#Display-NumDays) {
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* :where keeps this at (0,2,0) so the generic .inactive hide below still wins */
}

.page-details .display-cell {
    padding: .5rem .25rem;
    border-radius: 10px;
    background: var(--surface);
}

.page-details .display-cell small {
    display: block;
    font-size: .68rem;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--d-muted);
}

.page-details .display-cell strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--d-amber-dk);
    margin: .1rem 0;
}

/* Time slots (JS-rendered): pills for per-booking, a scrolling strip of
   joined cells for per-hour. The slot markup is the mobile one. */
.page-details .timeSlot-Wrapper {
    position: relative;
}

.page-details .timeSlot-Cont {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
}

.page-details .timeSlot {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: .45rem .8rem;
    border: 2px solid rgba(30, 40, 53, .15);
    border-radius: 999px;
    background: var(--surface-2);
    font-family: var(--font-head);
    font-size: .85rem;
    line-height: 1.3;
    color: var(--d-amber-dk);
    cursor: pointer;
    transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}

.page-details .timeSlot > i {
    margin-right: .25rem;
    color: var(--rt-amber);
}

.page-details .timeSlot:hover {
    border-color: var(--d-amber-lt);
}

/* .check is the JS's resting state for a pickable slot: the default look */
.page-details .timeSlot.check {
    color: var(--d-amber-dk);
}

.page-details .timeSlot .remaining-label {
    flex: 1 1 100%;
    text-align: center;
    font-family: var(--font-text);
    font-size: .7rem;
    line-height: 1.2;
    color: var(--d-muted);
}

.page-details .timeSlot.selected,
.page-details .timeSlot.hover {
    background: var(--rt-amber);
    border-color: var(--d-amber-lt);
    color: var(--rt-white);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--rt-amber) 70%, var(--rt-ink));
}

.page-details .timeSlot.selected > i,
.page-details .timeSlot.hover > i,
.page-details .timeSlot.selected .remaining-label,
.page-details .timeSlot.hover .remaining-label {
    color: var(--rt-white);
}

/* Per hour: the strip scrolls sideways with faded edges; the cells butt up
   against each other and round off at each donut's ends (timeSlot-first /
   timeSlot-last, or the strip's own first / last cell). */
.page-details .timeSlot-Wrapper.perHour {
    position: relative;
    margin: 0 -.5rem;
    min-height: 5rem;
}

.page-details .timeSlot-Wrapper.perHour::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--rt-white) 0%, transparent 8%, transparent 92%, var(--rt-white) 100%);
    pointer-events: none;
}

.page-details .timeSlot-Cont.perHour {
    display: block;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 .5rem .5rem;
    scrollbar-width: thin;
}

.page-details .timeSlot.perHour {
    display: inline-block;
    vertical-align: bottom;
    width: 5.25rem;
    margin: 0 -2px .5rem 0;
    padding: .45rem .25rem;
    border-radius: 0;
    border-color: rgba(30, 40, 53, .15);
    text-align: center;
    white-space: normal;
}

.page-details .timeSlot.perHour:first-child,
.page-details .timeSlot.perHour.timeSlot-first {
    border-radius: 999px 0 0 999px;
    margin-left: .25rem;
}

.page-details .timeSlot.perHour:last-child,
.page-details .timeSlot.perHour.timeSlot-last {
    border-radius: 0 999px 999px 0;
    margin-right: .25rem;
}

.page-details .timeSlot.perHour.timeSlot-first.timeSlot-last {
    border-radius: 999px;
}

.page-details .timeSlot.perHour.selected,
.page-details .timeSlot.perHour.range {
    position: relative;
    z-index: 1;
    background: var(--rt-amber);
    border-color: var(--d-amber-lt);
    color: var(--rt-white);
    box-shadow: none;
}

.page-details .timeSlot.perHour.range .remaining-label {
    color: var(--rt-white);
}

.page-details .timeSlot.perHour.minLock {
    opacity: .6;
    pointer-events: none;
}

.page-details .timeSlot.perHour.dashGap {
    position: relative;
    width: 3rem;
    border-style: dashed;
    border-color: rgba(30, 40, 53, .2);
    background: var(--surface);
    color: transparent;
    overflow: hidden;
    pointer-events: none;
}

.page-details .timeSlot.perHour.dashGap::before {
    content: "- - -";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--d-muted);
}

.page-details .timeSlot.perHour.dashGap > * {
    display: none;
}

/* Flexible schedule segments (Morning / Afternoon / Evening): the JS wraps
   them in .rt-seg.rt-seg-warn; here they are amber outline cards that fill
   when active, greyed when the day's schedule can't offer them. */
.page-details .rt-seg {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.page-details .rt-seg-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem .9rem;
    margin: .25rem;
    border: 2px solid var(--d-amber-lt);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--d-amber-dk);
    font-family: var(--font-head);
    font-size: .9rem;
    line-height: 1.25;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.page-details .rt-seg-btn:hover {
    border-color: var(--rt-amber);
}

.page-details .rt-seg-hint {
    display: block;
    font-family: var(--font-text);
    font-size: .7rem;
    line-height: 1.2;
    color: var(--d-muted);
}

.page-details .rt-seg-btn.active {
    background: var(--rt-amber);
    border-color: var(--d-amber-lt);
    color: var(--rt-white);
}

.page-details .rt-seg-btn.active .rt-seg-hint {
    color: rgba(255, 255, 255, .85);
}

.page-details .rt-seg-btn.rt-seg-off,
.page-details .rt-seg-btn:disabled {
    opacity: .45;
    cursor: default;
}

/* Steppers: Quantity / Days / Adults / Children */
.page-details .partySize-Cont {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.page-details .partySizeItem {
    flex: 1 1 0;
    min-width: 0;
}

.page-details .stepper-label {
    text-align: center;
    font-family: var(--font-head);
    font-size: .85rem;
    color: var(--d-amber-dk);
    margin: 0 0 .35rem;
}

.page-details .partySizeSlot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.page-details .partySizeBTN {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid rgba(30, 40, 53, .15);
    border-radius: 50%;
    color: var(--rt-ink);
    font-size: .8rem;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s, background .2s;
}

.page-details .partySizeBTN:hover {
    border-color: var(--rt-ink);
}

.page-details .partySizeBTN:active {
    background: var(--surface);
}

.page-details .partySizeCount {
    text-align: center;
}

.page-details .partySizeCount h5 {
    min-width: 2.5rem;
    margin: 0;
    text-align: center;
    font-family: var(--font-head);
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--d-amber-dk);
}

.page-details .partySizeCount #NumChildren {
    color: var(--rt-ink);
}

.page-details .timeSlot-Qty-Cont {
    margin-top: .75rem;
}

.page-details .addon-rows {
    margin-top: .25rem;
}

/* Cancellation policy */
.page-details .panel-policy .policy-list {
    display: grid;
    gap: .6rem;
}

.page-details .policy-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.page-details .policy-item > i {
    flex: none;
    margin-top: .3rem;
    font-size: .6rem;
    color: var(--rt-blue);
}

.page-details .policy-title {
    font-size: .95rem;
    line-height: 1.35;
    color: var(--d-muted);
    margin: 0;
    transition: color .3s;
}

.page-details .policy-title.is-current {
    font-family: var(--font-head);
    color: var(--rt-ink);
}

.page-details .policy-item small {
    display: block;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--d-muted);
}

/* Total + the CTA foot */
.page-details .panel-total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0 0;
    border-top: 1px solid var(--d-hair);
}

.page-details .panel-total-title {
    font-family: var(--font-head);
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--rt-ink);
    margin: 0;
}

.page-details .panel-total-sub {
    font-size: .8rem;
    color: var(--d-muted);
    margin: 0;
}

.page-details .panel-total-amount {
    flex: none;
    text-align: right;
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--rt-ink);
}

.page-details .panel-total-amount .panel-price-sym {
    font-size: .6em;
}

.page-details .panel-link {
    display: block;
    width: auto;
    margin: .2rem 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-head);
    font-size: .85rem;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--rt-blue);
    cursor: pointer;
    transition: color .2s;
}

.page-details .panel-link:hover {
    color: color-mix(in srgb, var(--rt-blue) 75%, var(--rt-ink));
}

.page-details .panel-link i {
    font-size: .7em;
}

.page-details .panel-foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--d-hair);
}

.page-details .panel-foot-price {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--rt-ink);
}

.page-details .panel-foot-price h4 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--rt-ink);
    margin: 0;
}

.page-details .panel-foot-price p {
    font-family: var(--font-text);
    font-size: .8rem;
    letter-spacing: 0;
    color: var(--d-muted);
    margin: 0;
}

.page-details .panel-foot-price .panel-link {
    margin-left: 0;
}

.page-details .panel-foot-cta {
    flex: none;
}

.page-details .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--rt-blue);
    color: var(--rt-white);
    font-family: var(--font-head);
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--rt-blue) 70%, transparent);
    transition: background .2s, box-shadow .2s, transform .2s ease-out, color .2s;
}

.page-details .cta-btn:hover {
    background: color-mix(in srgb, var(--rt-blue) 85%, var(--rt-ink));
    color: var(--rt-white);
    transform: translateY(-1px);
}

.page-details .cta-btn:active {
    transform: translateY(0) scale(.98);
}

.page-details .cta-btn.locked,
.page-details .cta-btn:disabled {
    background: rgba(30, 40, 53, .25);
    color: var(--rt-white);
    box-shadow: none;
    cursor: default;
    transform: none;
}

.page-details .cta-btn-ghost {
    background: var(--surface);
    color: var(--rt-ink);
    box-shadow: none;
}

.page-details .cta-btn-ghost:hover {
    background: color-mix(in srgb, var(--rt-ink) 10%, var(--surface));
    color: var(--rt-ink);
}

.page-details .panel-recurring {
    display: block;
    text-align: center;
    font-family: var(--font-head);
    font-size: .85rem;
    color: var(--rt-blue);
    margin-top: .9rem;
    transition: color .2s;
}

.page-details .panel-recurring:hover {
    color: color-mix(in srgb, var(--rt-blue) 75%, var(--rt-ink));
}

/* 7l. Backdrop + the Pricing Details modal (mobile's bottom sheet, centred).
   The savings strip (rt_savings_strip) renders `.row > .col-12.rt-save-strip`
   inside the lines; Bootstrap's row gutters are released. */
.page-details #bg-shader {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, .55);
    transition: opacity 300ms var(--d-ease);
}

.page-details .pricing-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 41;
    width: min(520px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow: auto;
    padding: 1.5rem 1.75rem 1.75rem;
    background: var(--surface-2);
    border-radius: 24px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
    transform: translate(-50%, -50%);
    transition: opacity 300ms var(--d-ease), transform 300ms var(--d-ease);
}

.page-details .pricing-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-details .pricing-modal-head h3 {
    display: flex;
    align-items: center;
    gap: .5em;
    font-family: var(--font-head);
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--rt-ink);
    margin: 0;
}

.page-details .pricing-modal-head h3 i {
    color: var(--rt-blue);
}

.page-details .pricing-modal-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    color: var(--d-soft);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.page-details .pricing-modal-x:hover {
    background: var(--rt-ink);
    color: var(--rt-white);
}

.page-details .pricing-warn {
    text-align: center;
    font-family: var(--font-head);
    color: var(--rt-pink);
    margin: 1rem 0 1.25rem;
}

.page-details .pricing-policy {
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: var(--surface);
}

.page-details .pricing-policy h4 {
    font-family: var(--font-head);
    font-size: 1rem;
    margin: 0;
}

.page-details .pricing-policy p {
    font-size: .85rem;
    color: var(--d-muted);
    margin: 0;
}

.page-details .pricing-lines {
    color: var(--rt-ink);
}

.page-details .pricing-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
}

.page-details .pricing-line-amount {
    flex: none;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.page-details .pricing-line-amount small {
    font-size: .75em;
    color: var(--d-muted);
    margin-right: .1rem;
}

.page-details .pricing-strike {
    text-decoration: line-through;
    font-size: .8rem;
    color: var(--d-muted);
    margin-right: .4rem;
}

.page-details .pricing-line-group {
    display: block;
}

.page-details .pricing-sublist {
    font-size: .78rem;
    color: var(--d-muted);
    padding-left: .75rem;
}

.page-details .pricing-components {
    margin-bottom: .5rem;
}

.page-details .pricing-components p,
.page-details .pricing-components div {
    font-size: .9rem;
}

.page-details .pricing-components p {
    margin: 0 0 .25rem;
}

.page-details .pricing-note {
    font-size: .85rem;
    color: var(--d-muted);
    margin: .25rem 0 .5rem;
}

.page-details .pricing-line-deposit {
    color: var(--d-teal-dk);
}

.page-details .pricing-line-deposit small {
    font-size: .75em;
    color: var(--d-muted);
}

.page-details .pricing-line-total {
    margin-top: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--d-hair);
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--rt-ink);
}

.page-details .pricing-line-total .pricing-line-amount {
    font-family: var(--font-mono);
}

/* The savings strip */
.page-details #pD-savings-strip {
    margin-left: 0;
    margin-right: 0;
}

.page-details .rt-save-strip {
    flex: none;
    max-width: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .25rem 0 .5rem;
    padding: 0;
    font-size: .78rem;
}

.page-details .rt-save-strip > span,
.page-details .rt-save-strip > a {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.page-details .badge-solid,
.page-details .badge-outlined-success,
.page-details .badge-outlined-warning {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .28rem .7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: .78rem;
    line-height: 1.3;
    white-space: nowrap;
}

.page-details .badge-solid {
    color: var(--rt-white);
}

/* Bootstrap's .bg-success (#22b66e) and .bg-warning (#fdab29) are
   prioritised background-colors; the flag lands the desktop green / amber. */
.page-details .bg-success {
    background: var(--rt-green) !important;
}

.page-details .bg-warning {
    background: var(--rt-amber) !important;
}

.page-details .badge-outlined-success,
.page-details .btn-ghost-success {
    border-color: var(--rt-green);
    color: var(--rt-green);
    background: color-mix(in srgb, var(--rt-green) 6%, transparent);
}

.page-details .badge-outlined-warning,
.page-details .btn-ghost-warning {
    border-color: var(--rt-amber);
    color: var(--d-amber-dk);
    background: color-mix(in srgb, var(--rt-amber) 8%, transparent);
}

.page-details .rt-save-incidence {
    white-space: normal;
}

.page-details a.rt-save-badge:hover {
    color: var(--rt-white);
    filter: brightness(1.08);
}

.page-details .rt-save-badge i.fa-chevron-right {
    font-size: .7em;
    margin-left: .15em;
}

.page-details .pricing-modal-foot {
    margin-top: 1.25rem;
}

.page-details .pricing-modal-foot .cta-btn {
    width: 100%;
}

/* 7m. State: mobile's .inactive semantic. The generic rule hides the block
   wrappers (#timeSlots, #UnavailableCont, #numQty, #numDays, #partySize,
   #Display-Times, #Display-NumDays, #PricingDetails-warning,
   #PricingDetails-pricing). Declared AFTER every display-setting rule above
   so it wins on equal specificity. Three exceptions follow it: the backdrop
   and the modal animate instead of vanishing, and the panel foot never hides
   (mobile hid its sticky bar under the sheet; here the modal covers it). */
.page-details .inactive {
    display: none;
}

.page-details .panel-foot.inactive {
    display: flex;
}

.page-details #bg-shader.inactive {
    display: block;
    opacity: 0;
    pointer-events: none;
}

.page-details #PricingDetails-Cont.inactive {
    display: block;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -46%);
}

/* 7n. Narrow (<= 900px): the header stacks, the gallery shortens and folds
   to two columns, the panel is a normal block under the story (the page
   grid already collapses), the rings go two-up, the Keeper card stacks. */
@media (max-width: 900px) {
    .page-details .details-head {
        flex-direction: column;
        gap: 1rem;
    }

    .page-details .details-actions {
        width: 100%;
    }

    .page-details .details-gallery {
        height: 300px;
    }

    .page-details .gallery-3,
    .page-details .gallery-4,
    .page-details .gallery-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .page-details .gallery-3 > a:first-child,
    .page-details .gallery-4 > a:first-child,
    .page-details .gallery-5 > a:first-child {
        grid-row: auto;
    }

    .page-details .gallery-4 > a:nth-child(2) {
        grid-column: auto;
    }

    .page-details .details-gallery > a:nth-child(n+3) {
        display: none;
    }

    .page-details .details-panel {
        padding-bottom: 0;
        margin-top: 2rem;
    }

    .page-details .score-rings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .page-details .keeper-card {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .page-details .panel-foot {
        flex-wrap: wrap;
    }

    .page-details .panel-foot-cta {
        flex: 1 1 100%;
    }

    .page-details .panel-foot-cta .cta-btn {
        width: 100%;
    }
}

/* ─── 8. BOOKING + SIGN-IN (docs/plans/desktop/booking.md) ────────────────── */
/* The booking request page (desktop/pages/Booking.php: the header, the step
   cards on the left, the sticky panel with the listing card, the price
   details and the compact Keeper card on the right), the Sign-In card
   (desktop/pages/Sign-In.php) and the Booking-Details stub
   (desktop/pages/Booking-Details.php). Booking.php owns its two-column grid
   in its own <style>; everything else is here, scoped under .page-booking,
   .page-signin and .page-booking-details.

   The classes shared with Details (.panel-card, .panel-block-title, .cta-btn
   and its .locked / .cta-btn-ghost, the .pricing-line family, the
   .keeper-card family, .section-link, .badge-verified, the v1 utilities and
   the savings-strip classes) are RE-DECLARED here with section 7's values so
   the pages match; section 7 is not touched. Bootstrap's prioritised
   utilities carry the flag and say so inline, nothing else does. Soehne:
   family is weight, nothing here sets one except the pins to normal against
   Bootstrap's bold. No em-dashes in copy. */

.page-booking,
.page-signin,
.page-booking-details {
    --d-muted:    var(--text-faint);
    --d-soft:     var(--text-soft);
    --d-line:     rgba(30, 40, 53, .1);
    --d-hair:     rgba(30, 40, 53, .08);
    --d-amber-dk: color-mix(in srgb, var(--rt-amber) 80%, var(--rt-ink));
    --d-amber-lt: color-mix(in srgb, var(--rt-amber) 50%, var(--rt-white));
    --d-teal-dk:  color-mix(in srgb, var(--rt-teal) 55%, var(--rt-ink));
    --d-ease:     cubic-bezier(0.77, 0, 0, 1);
}

/* 8a. v1 utilities the shared markup reads (the savings strip's badges, the
   address widget's range note, mobile JS class swaps). Same values as 7a. */
.page-booking ._600,          .page-signin ._600,          .page-booking-details ._600          { font-family: var(--font-head); }
.page-booking .text-xs,       .page-signin .text-xs,       .page-booking-details .text-xs       { font-size: .7rem; }
.page-booking .text-sm,       .page-signin .text-sm,       .page-booking-details .text-sm       { font-size: .75rem; }
.page-booking .text-brand,    .page-signin .text-brand,    .page-booking-details .text-brand    { color: var(--rt-pink); }
.page-booking .text-warn,     .page-signin .text-warn,     .page-booking-details .text-warn     { color: var(--rt-amber); }
.page-booking .text-warn-dk,  .page-signin .text-warn-dk,  .page-booking-details .text-warn-dk  { color: var(--d-amber-dk); }
.page-booking .text-accent,   .page-signin .text-accent,   .page-booking-details .text-accent   { color: var(--d-teal-dk); }
.page-booking .text-accent-dk, .page-signin .text-accent-dk, .page-booking-details .text-accent-dk { color: var(--d-teal-dk); }
.page-booking .text-white-dk, .page-signin .text-white-dk, .page-booking-details .text-white-dk { color: var(--d-muted); }
.page-booking .text-theme,    .page-signin .text-theme,    .page-booking-details .text-theme    { color: var(--d-soft); }
.page-booking .text-dark,     .page-signin .text-dark,     .page-booking-details .text-dark     { color: var(--rt-ink); }     /* Bootstrap's prioritised value is the same ink: no flag needed */
.page-booking .text-white,    .page-signin .text-white,    .page-booking-details .text-white    { color: var(--rt-white); }   /* same: Bootstrap's is #ffffff */

/* Bootstrap's .text-muted (rgba(0,0,0,.85)), .text-primary (#53a6fa),
   .text-success (#22b66e) and .text-warning (#fdab29) are prioritised; the
   flag is required to land the desktop values on them. .text-warning is new
   to this section: the address widget's range note reads it and wants the
   dark amber, not Bootstrap's light one. */
.page-booking .text-muted,    .page-signin .text-muted,    .page-booking-details .text-muted    { color: var(--d-muted) !important; }
.page-booking .text-primary,  .page-signin .text-primary,  .page-booking-details .text-primary  { color: var(--rt-blue) !important; }
.page-booking .text-success,  .page-signin .text-success,  .page-booking-details .text-success  { color: var(--rt-green) !important; }
.page-booking .text-warning,  .page-signin .text-warning,  .page-booking-details .text-warning  { color: var(--d-amber-dk) !important; }

/* The elements this section lays out with flex / grid still honour the
   hidden attribute (Bootstrap's [hidden] rule does too; this keeps the
   promise without leaning on it). */
.page-booking [hidden],
.page-signin [hidden],
.page-booking-details [hidden] {
    display: none;
}

/* 8b. State cards: missing id, listing not found, session expired, the
   sign-in and not-found states of the stub, and the stub's own wide card. */
.page-booking .booking-state,
.page-booking-details .booking-state {
    max-width: 520px;
    margin: 4rem auto;
    padding: 2.5rem;
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--d-line);
    border-radius: 22px;
    color: var(--d-soft);
}

.page-booking .booking-state > i,
.page-booking-details .booking-state > i {
    display: block;
    font-size: 2.5rem;
    color: var(--rt-blue);
}

.page-booking .booking-state h2,
.page-booking-details .booking-state h2 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--rt-ink);
    margin: .75rem 0 .35rem;
}

.page-booking .booking-state p,
.page-booking-details .booking-state p {
    color: var(--d-muted);
    margin: 0;
}

.page-booking .booking-state .cta-btn,
.page-booking-details .booking-state .cta-btn {
    margin-top: 1.25rem;
}

.page-booking-details .booking-state-wide {
    max-width: 760px;
    text-align: left;
}

.page-booking-details .booking-state-wide .gate-actions {
    margin-top: 1.5rem;
}

.page-booking-details .booking-state-wide .gate-actions .cta-btn {
    margin-top: 0;
}

.page-booking-details .booking-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1.5rem 0 0;
    padding: .9rem 1rem;
    border-radius: 12px;
    background: var(--surface);
    color: var(--d-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.page-booking-details .booking-note i {
    color: var(--rt-blue);
    margin-top: .2rem;
}

/* 8c. Header: kicker + title */
.page-booking .booking-head {
    margin-bottom: 1.5rem;
}

.page-booking .booking-kicker,
.page-booking-details .booking-kicker {
    font-family: var(--font-head);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rt-pink);
    margin: 0 0 .25rem;
}

.page-booking .booking-title,
.page-booking-details .booking-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--rt-ink);
    margin: 0;
    overflow-wrap: anywhere;
}

/* 8d. Alerts, notes, the loading and error lines. One shape, three tints:
   pink for errors, blue for information, amber for the gate notes. */
.page-booking .booking-alert,
.page-signin .booking-alert,
.page-booking .booking-info,
.page-booking .gate-note {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--rt-pink) 35%, var(--rt-white));
    border-radius: 14px;
    background: color-mix(in srgb, var(--rt-pink) 12%, var(--rt-white));
    color: var(--rt-crimson);
    line-height: 1.45;
}

.page-booking .booking-alert i,
.page-signin .booking-alert i,
.page-booking .booking-info i,
.page-booking .gate-note i {
    flex: none;
    font-size: 1.1rem;
    margin-top: .1rem;
}

.page-booking .booking-alert p,
.page-signin .booking-alert p,
.page-booking .booking-info p,
.page-booking .gate-note p {
    margin: 0;
}

.page-booking .booking-info {
    border-color: color-mix(in srgb, var(--rt-blue) 35%, var(--rt-white));
    background: color-mix(in srgb, var(--rt-blue) 10%, var(--rt-white));
    color: var(--rt-ink);
}

.page-booking .booking-info i {
    color: var(--rt-blue);
}

.page-booking .gate-note {
    border-color: color-mix(in srgb, var(--rt-amber) 45%, var(--rt-white));
    background: color-mix(in srgb, var(--rt-amber) 12%, var(--rt-white));
    color: var(--rt-ink);
}

.page-booking .gate-note i {
    color: var(--d-amber-dk);
}

.page-booking .gate-note strong {
    font-family: var(--font-head);
    color: var(--rt-ink);
}

.page-booking .booking-error {
    font-family: var(--font-head);
    color: var(--rt-crimson);
    margin: 1rem 0;
}

.page-booking .booking-loading {
    padding: 2rem 0;
    text-align: center;
    color: var(--d-muted);
    margin: 0;
}

.page-booking .booking-loading i {
    color: var(--rt-blue);
    margin-right: .35rem;
}

/* 8e. Steps: numbered cards down the main column */
.page-booking .booking-steps {
    display: grid;
    gap: 1.5rem;
}

.page-booking .booking-step {
    background: var(--surface-2);
    border: 1px solid var(--d-line);
    border-radius: 22px;
    padding: 1.5rem 1.75rem;
}

.page-booking .booking-step-gate {
    border-color: color-mix(in srgb, var(--rt-blue) 30%, var(--rt-white));
}

.page-booking .step-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--font-head);
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--rt-ink);
    margin: 0 0 1rem;
}

.page-booking .step-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rt-blue);
    color: var(--rt-white);
    font-family: var(--font-head);
    font-size: .85rem;
    line-height: 1;
}

.page-booking .step-optional {
    font-family: var(--font-text);
    font-size: .75rem;
    color: var(--d-muted);
    margin-left: .35rem;
}

.page-booking .step-sub {
    color: var(--d-muted);
    margin: -.5rem 0 1rem;
}

/* 8f. Selection grid: the seeker's choices (and the stub's essentials) */
.page-booking .selection-grid,
.page-booking-details .selection-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}

.page-booking .selection-box,
.page-booking-details .selection-box {
    background: var(--surface);
    border-radius: 14px;
    padding: .75rem 1rem;
    min-width: 0;
}

.page-booking .selection-box-wide,
.page-booking-details .selection-box-wide {
    grid-column: 1 / -1;
}

.page-booking .sel-label,
.page-booking-details .sel-label {
    display: block;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--d-muted);
}

.page-booking .sel-value,
.page-booking-details .sel-value {
    display: block;
    font-family: var(--font-head);
    font-size: 1rem;
    line-height: 1.35;
    color: var(--rt-ink);
    margin-top: .15rem;
    overflow-wrap: anywhere;
}

/* 8g. Fulfillment: the mode pills (the JS marks the selected one with
   .hover, mobile's class), the pickup notes, the prompt and hint lines. */
.page-booking .ff-modes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.page-booking .ff-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border: 2px solid color-mix(in srgb, var(--rt-blue) 45%, var(--rt-white));
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--rt-blue);
    font-family: var(--font-head);
    font-size: .9rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.page-booking .ff-mode-btn:hover {
    border-color: var(--rt-blue);
}

.page-booking .ff-mode-btn.hover {
    background: var(--rt-blue);
    border-color: var(--rt-blue);
    color: var(--rt-white);
}

.page-booking .ff-pickup {
    margin-bottom: 1rem;
}

.page-booking .ff-note {
    font-size: .9rem;
    line-height: 1.45;
    color: var(--d-amber-dk);
    margin: 0 0 .35rem;
}

.page-booking .ff-note i {
    margin-right: .35rem;
}

.page-booking .ff-prompt {
    font-family: var(--font-head);
    color: var(--rt-ink);
    margin: 0 0 .6rem;
}

.page-booking .ff-hint {
    font-size: .85rem;
    color: var(--d-muted);
    margin: .25rem 0 1rem;
}

.page-booking .ff-hint i {
    color: var(--rt-blue);
    margin-right: .25rem;
}

/* 8h. Fields: labels, inputs, the passcode input, the address row and the
   save checkbox. Bootstrap's label margin and textarea defaults are
   overridden at (0,2,0). */
.page-booking .field-label,
.page-signin .field-label {
    display: block;
    font-family: var(--font-head);
    font-size: .85rem;
    line-height: 1.3;
    color: var(--rt-ink);
    margin: 0 0 .35rem;
}

.page-booking .field-input,
.page-signin .field-input {
    display: block;
    width: 100%;
    margin: 0 0 .6rem;
    padding: .7rem .9rem;
    border: 1px solid rgba(30, 40, 53, .18);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--rt-ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    outline: 0;
    transition: border-color .2s, box-shadow .2s;
}

.page-booking .field-input::placeholder,
.page-signin .field-input::placeholder {
    color: var(--d-muted);
}

.page-booking .field-input:focus,
.page-signin .field-input:focus {
    border-color: var(--rt-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-blue) 18%, transparent);
}

.page-booking textarea.field-input,
.page-signin textarea.field-input {
    resize: vertical;
    min-height: 4.5rem;
}

.page-signin .field-input-code {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    letter-spacing: .3em;
    text-align: center;
}

.page-booking .field-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: .5rem;
}

.page-booking .field-row .field-input {
    min-width: 0;
}

.page-booking .field-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--d-muted);
    margin: .25rem 0 .5rem;
    cursor: pointer;
}

.page-booking .field-check input {
    margin: 0;
    accent-color: var(--rt-blue);
}

/* 8i. Address widget: saved-address chips, the did-you-mean box and the
   range note. Ids come from the shared widget contract (rt-address.js and
   Booking.js read them); the box and the note keep their inline display
   toggles, so nothing here sets display on them. */
.page-booking #ff-address-widget {
    margin-bottom: .75rem;
}

.page-booking #ff-saved-addrs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.page-booking #ff-saved-addrs:empty {
    display: none;
}

.page-booking .ff-addr-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border: 1px solid color-mix(in srgb, var(--rt-blue) 40%, var(--rt-white));
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--rt-blue);
    font-family: var(--font-head);
    font-size: .8rem;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.page-booking .ff-addr-chip:hover {
    border-color: var(--rt-blue);
    background: color-mix(in srgb, var(--rt-blue) 6%, var(--rt-white));
}

.page-booking .ff-addr-chip .ff-addr-del {
    margin-left: .35rem;
    color: var(--d-muted);
    transition: color .2s;
}

.page-booking .ff-addr-chip .ff-addr-del:hover {
    color: var(--rt-crimson);
}

.page-booking .ff-suggest {
    padding: .6rem .9rem;
    margin: -.2rem 0 .6rem;
    border: 1px solid color-mix(in srgb, var(--rt-amber) 45%, var(--rt-white));
    border-radius: 12px;
    background: color-mix(in srgb, var(--rt-amber) 12%, var(--rt-white));
    color: var(--rt-ink);
    font-size: .85rem;
    line-height: 1.45;
}

.page-booking .ff-suggest-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    cursor: pointer;
}

.page-booking .ff-suggest-label input {
    margin: 0;
    accent-color: var(--rt-blue);
}

.page-booking #ff-range-note {
    font-size: .85rem;
    line-height: 1.45;
    margin: .25rem 0 .75rem;
}

/* 8j. The CTA family (section 7's values), the gate actions, the submit and
   the terms line. */
.page-booking .cta-btn,
.page-signin .cta-btn,
.page-booking-details .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--rt-blue);
    color: var(--rt-white);
    font-family: var(--font-head);
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--rt-blue) 70%, transparent);
    transition: background .2s, box-shadow .2s, transform .2s ease-out, color .2s;
}

.page-booking .cta-btn:hover,
.page-signin .cta-btn:hover,
.page-booking-details .cta-btn:hover {
    background: color-mix(in srgb, var(--rt-blue) 85%, var(--rt-ink));
    color: var(--rt-white);
    transform: translateY(-1px);
}

.page-booking .cta-btn:active,
.page-signin .cta-btn:active,
.page-booking-details .cta-btn:active {
    transform: translateY(0) scale(.98);
}

.page-booking .cta-btn.locked,
.page-booking .cta-btn:disabled,
.page-signin .cta-btn.locked,
.page-signin .cta-btn:disabled,
.page-booking-details .cta-btn.locked,
.page-booking-details .cta-btn:disabled {
    background: rgba(30, 40, 53, .25);
    color: var(--rt-white);
    box-shadow: none;
    cursor: default;
    transform: none;
}

.page-booking .cta-btn-ghost,
.page-signin .cta-btn-ghost,
.page-booking-details .cta-btn-ghost {
    background: var(--surface);
    color: var(--rt-ink);
    box-shadow: none;
}

.page-booking .cta-btn-ghost:hover,
.page-signin .cta-btn-ghost:hover,
.page-booking-details .cta-btn-ghost:hover {
    background: color-mix(in srgb, var(--rt-ink) 10%, var(--surface));
    color: var(--rt-ink);
}

.page-booking .cta-btn-warn {
    background: var(--rt-amber);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--rt-amber) 70%, transparent);
}

.page-booking .cta-btn-warn:hover {
    background: var(--d-amber-dk);
}

.page-booking .cta-btn-submit {
    width: 100%;
    margin-top: .5rem;
}

.page-booking .cta-btn-block,
.page-signin .cta-btn-block,
.page-booking-details .cta-btn-block {
    display: flex;
    width: 100%;
}

.page-booking .gate-actions,
.page-booking-details .gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.page-booking .booking-terms {
    font-size: .8rem;
    line-height: 1.45;
    color: var(--d-muted);
    text-align: center;
    margin: .9rem 0 0;
}

.page-booking .booking-terms a {
    color: var(--rt-blue);
}

.page-booking .booking-terms a:hover {
    color: color-mix(in srgb, var(--rt-blue) 75%, var(--rt-ink));
}

/* 8k. The panel: the card (section 7's values), the listing card with its
   palette-tinted cover (--c1..--c5 are set inline on .booking-listing), the
   price details and the made-to-order schedule. */
.page-booking .panel-card {
    background: var(--surface-2);
    border: 1px solid var(--d-line);
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 20px 50px -30px rgba(30, 40, 53, .35);
}

.page-booking .panel-block-title {
    font-family: var(--font-head);
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--rt-ink);
    margin: 0 0 .2rem;
}

.page-booking .booking-listing {
    margin: -.25rem -.25rem 1.25rem;
}

.page-booking .booking-listing-photo {
    position: relative;
    height: 150px;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--surface);
    background-size: cover;
    background-position: center;
}

.page-booking .booking-listing-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--c1, var(--rt-ink)) 90%, transparent) 0%, transparent 65%);
    pointer-events: none;
}

.page-booking .booking-listing-text {
    padding: .9rem .25rem 0;
}

.page-booking .booking-listing-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-head);
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--rt-ink);
    overflow-wrap: anywhere;
}

.page-booking .booking-listing-id {
    display: block;
    font-size: .8rem;
    color: var(--d-muted);
    margin: .25rem 0 .35rem;
}

.page-booking .booking-listing-id i {
    color: var(--rt-blue);
    margin-right: .15rem;
}

.page-booking .booking-listing .section-link {
    margin-top: 0;
}

.page-booking .booking-price {
    border-top: 1px solid var(--d-hair);
    padding-top: 1.15rem;
}

.page-booking .booking-price .panel-block-title {
    margin-bottom: .75rem;
}

/* The pricing lines (section 7's values) plus the two desktop sub-lines */
.page-booking .pricing-lines {
    color: var(--rt-ink);
}

.page-booking .pricing-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
}

.page-booking .pricing-line-amount {
    flex: none;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.page-booking .pricing-line-amount small {
    font-size: .75em;
    color: var(--d-muted);
    margin-right: .1rem;
}

.page-booking .pricing-strike {
    text-decoration: line-through;
    font-size: .8rem;
    color: var(--d-muted);
    margin-right: .4rem;
}

.page-booking .pricing-line-group {
    display: block;
}

.page-booking .pricing-sublist {
    font-size: .78rem;
    color: var(--d-muted);
    padding-left: .75rem;
}

.page-booking .pricing-note {
    font-size: .85rem;
    color: var(--d-muted);
    margin: .25rem 0 .5rem;
}

.page-booking .pricing-line-sub {
    font-size: .9rem;
    color: var(--d-muted);
}

.page-booking .pricing-line-addon {
    font-size: .8rem;
    color: var(--d-muted);
    padding-left: .75rem;
}

.page-booking .pricing-line-deposit {
    color: var(--d-teal-dk);
}

.page-booking .pricing-line-deposit small,
.page-booking .pricing-line small {
    font-size: .75em;
    color: var(--d-muted);
}

.page-booking .pricing-line-total {
    margin-top: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--d-hair);
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--rt-ink);
}

.page-booking .pricing-line-total .pricing-line-amount {
    font-family: var(--font-mono);
}

.page-booking .pricing-schedule {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px dashed rgba(30, 40, 53, .15);
}

.page-booking .pricing-schedule-title {
    font-family: var(--font-head);
    color: var(--rt-ink);
    margin: 0 0 .5rem;
}

.page-booking .pricing-schedule-title i {
    color: var(--rt-blue);
    margin-right: .25rem;
}

/* The savings strip (section 7's values). rt_savings_strip() wraps the strip
   in Bootstrap's .row / .col-12; the row's negative gutters are zeroed here
   so it sits flush inside the panel. */
.page-booking .pricing-lines .row {
    margin-left: 0;
    margin-right: 0;
}

.page-booking .rt-save-strip {
    flex: none;
    max-width: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .25rem 0 .5rem;
    padding: 0;
    font-size: .78rem;
}

.page-booking .rt-save-strip > span,
.page-booking .rt-save-strip > a {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.page-booking .badge-solid,
.page-booking .badge-outlined-success,
.page-booking .badge-outlined-warning {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .28rem .7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: .78rem;
    line-height: 1.3;
    white-space: nowrap;
}

.page-booking .badge-solid {
    color: var(--rt-white);
}

/* Bootstrap's .bg-success (#22b66e) and .bg-warning (#fdab29) are
   prioritised background-colors; the flag lands the desktop green / amber. */
.page-booking .bg-success {
    background: var(--rt-green) !important;
}

.page-booking .bg-warning {
    background: var(--rt-amber) !important;
}

.page-booking .badge-outlined-success,
.page-booking .btn-ghost-success {
    border-color: var(--rt-green);
    color: var(--rt-green);
    background: color-mix(in srgb, var(--rt-green) 6%, transparent);
}

.page-booking .badge-outlined-warning,
.page-booking .btn-ghost-warning {
    border-color: var(--rt-amber);
    color: var(--d-amber-dk);
    background: color-mix(in srgb, var(--rt-amber) 8%, transparent);
}

.page-booking .rt-save-incidence {
    white-space: normal;
}

.page-booking a.rt-save-badge:hover {
    color: var(--rt-white);
    filter: brightness(1.08);
}

.page-booking .rt-save-badge i.fa-chevron-right {
    font-size: .7em;
    margin-left: .15em;
}

/* The Keeper card (section 7's values) and its compact panel variant */
.page-booking .keeper-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem;
    border: 1px solid var(--d-line);
    border-radius: 20px;
    background: var(--surface-2);
}

.page-booking .keeper-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 3px solid var(--rt-white);
    box-shadow: var(--shadow-md);
    background-color: var(--surface);
    background-size: cover;
    background-position: center;
}

.page-booking .keeper-info {
    min-width: 0;
}

.page-booking .keeper-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-head);
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--rt-ink);
    margin: 0 0 .25rem;
}

.page-booking .keeper-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .35rem;
    font-size: .9rem;
    color: var(--rt-ink);
}

.page-booking .keeper-status i {
    font-size: .6rem;
}

.page-booking .keeper-status i.is-active {
    color: var(--rt-green);
}

.page-booking .keeper-status i.is-away {
    color: var(--rt-amber);
}

.page-booking .keeper-responds {
    font-size: .85rem;
    color: var(--d-muted);
}

.page-booking .keeper-speaks {
    font-size: .85rem;
    color: var(--d-muted);
    margin: 0;
}

.page-booking .keeper-card-compact {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: .9rem;
    padding: 1rem;
    margin-top: 1.25rem;
}

.page-booking .keeper-card-compact .keeper-photo {
    width: 56px;
    height: 56px;
}

.page-booking .keeper-card-compact .keeper-name {
    font-size: 1rem;
}

/* 8l. Links and badges shared with Details (section 7's values) */
.page-booking .section-link,
.page-booking-details .section-link {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    margin-top: .5rem;
    font-family: var(--font-head);
    font-size: var(--step--1);
    color: var(--rt-blue);
    transition: color .2s;
}

.page-booking .section-link:hover,
.page-booking-details .section-link:hover {
    color: color-mix(in srgb, var(--rt-blue) 75%, var(--rt-ink));
}

.page-booking .section-link i,
.page-booking-details .section-link i {
    font-size: .75em;
}

.page-booking .badge-verified,
.page-booking-details .badge-verified {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--font-text);
    font-size: .72rem;
    line-height: 1.3;
    color: var(--d-soft);
    white-space: nowrap;
    vertical-align: middle;
}

.page-booking .badge-verified i,
.page-booking-details .badge-verified i {
    color: var(--rt-green);
}

/* 8m. Sign-In: a centered card, two steps that toggle hidden, and the
   intl-tel-input skin. The library's own rule pads the phone input 52px for
   a 46px flag container (8 + 20 flag + 6 + 6 arrow + 6); the flag box below
   is widened to about 56px (.9rem + 20 + 6 + 6 + .6rem), so the input pads
   4.25rem (68px) and the digits never run under the flag. */
.page-signin {
    min-height: calc(100vh - 5rem);
    display: grid;
    place-items: center;
}

.page-signin .signin-card {
    width: min(460px, 100%);
    background: var(--surface-2);
    border: 1px solid var(--d-line);
    border-radius: 24px;
    padding: 2.25rem 2.5rem;
    box-shadow: 0 24px 60px -36px rgba(30, 40, 53, .45);
}

.page-signin .signin-title {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--rt-ink);
    margin: 0 0 1.5rem;
}

.page-signin .signin-step-title {
    font-family: var(--font-head);
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--rt-ink);
    margin: 0 0 .25rem;
}

.page-signin .signin-sub,
.page-booking-details .signin-sub {
    color: var(--d-muted);
    margin: 0 0 1.25rem;
}

.page-signin .signin-form {
    display: grid;
    gap: .35rem;
}

.page-signin .signin-form .cta-btn {
    margin-top: .75rem;
}

.page-signin .signin-card .cta-btn-ghost {
    margin-top: .75rem;
}

.page-signin .intlTel {
    margin-bottom: .6rem;
}

.page-signin .iti {
    width: 100%;
}

.page-signin .iti input.field-input {
    margin-bottom: 0;
    padding-left: 4.25rem;
}

.page-signin .iti__selected-flag {
    padding: 0 .6rem 0 .9rem;
    border-radius: 12px 0 0 12px;
}

.page-signin .iti__arrow {
    border-top-color: var(--d-muted);
}

.page-signin .iti__arrow--up {
    border-bottom-color: var(--d-muted);
}

.page-signin .iti__dropdown-content {
    border: 1px solid var(--d-line);
    border-radius: 12px;
    box-shadow: var(--shadow-md), 0 2px 8px rgba(21, 56, 105, .08);
    overflow: hidden;
    font-family: var(--font-text);
}

.page-signin .iti__country-list {
    border-radius: 12px;
    font-family: var(--font-text);
    font-size: .9rem;
    color: var(--rt-ink);
}

.page-signin .iti__country {
    padding: .5rem .75rem;
}

.page-signin .iti__country.iti__highlight {
    background: color-mix(in srgb, var(--rt-blue) 8%, var(--rt-white));
}

.page-signin .iti__dial-code {
    color: var(--d-muted);
}

.page-signin .iti__search-input {
    font: inherit;
    padding: .5rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--d-line);
    outline: 0;
}

/* 8n. Narrow (<= 900px): the cards tighten (Booking.php's grid already
   collapses the two columns); at 600px the selection grid goes one-up. */
@media (max-width: 900px) {
    .page-booking .booking-step {
        padding: 1.25rem;
    }

    .page-booking .booking-state,
    .page-booking-details .booking-state {
        margin: 2rem auto;
    }

    .page-signin .signin-card {
        padding: 1.75rem;
    }
}

@media (max-width: 600px) {
    .page-booking .selection-grid,
    .page-booking-details .selection-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-booking .field-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-booking .keeper-card {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }
}

/* 8z. Booking-Details stub: the listing cover above the kicker (builder A emitted it; styled here so
   the page carries no inline style). */
.page-booking-details .booking-state-photo {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 1.25rem;
}