/* ============================================================
   ParkoLow Design System
   ============================================================ */

@font-face { font-family: "Outfit"; src: url("../font/Outfit-Regular-9xQXoJY.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../font/Outfit-Medium-6MgdAZu.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../font/Outfit-SemiBold-uSRjQFc.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../font/Outfit-Bold-tgy4LPk.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../font/Outfit-ExtraBold-ibgxfot.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


:root {
    --blue: #1a56db;
    --blue-dark: #1a4fd6;
    --blue-gradient: linear-gradient(160deg, #1a4fd6 0%, #1a56db 60%, #2563eb 100%);
    --orange: #f59e0b;
    --dark: #1e293b;
    --muted: #64748b;
    --border: #e2e8f0;
    --light-bg: #f8faff;
    --white: #ffffff;
    --body-bg: #1a3a8a;
    --green: #10b981;
    --red: #ef4444;
    /* Footer is a dark navy band (the white logo asset is the only one we
       have, so the surface has to be dark under it). Links/labels are the
       light-on-dark tiers for that band. */
    --footer-bg: #16276b;
    --footer-heading: #ffffff;
    --footer-link: #c3cee8;
    --footer-muted: #8e9dc4;

    /* Success badge pair (green pill bg + text) — distinct from --green
       (a solid fill used elsewhere), this is the light-bg/dark-text pairing
       used for "available"/"confirmed"-type badges. */
    --status-success-bg: #dcfce7;
    --status-success-text: #15803d;

    /* The same pairing for the other outcome — used by the lot page's "full
       for these dates" note, which has to read as a stop, not an aside. */
    --status-alert-bg: #fef2f2;
    --status-alert-border: #fecaca;
    --status-alert-text: #991b1b;

    /* One accent per winner category, shared by the home cards
       (.home-winner--*) and the badges marking the same three lots in the
       price grid (.prices-lot-badge--*), so the two can't drift apart. Both
       tint their pill background from it with the same color-mix.
       Kept a hue family apart each: violet "closest" once sat too close to
       the blue of "best" at pill size, and the deep-orange that replaced it
       read as a warning rather than a positive "closest" signal. */
    --winner-cheapest: #15803d;
    --winner-best: var(--blue);
    --winner-closest: #0d9488;

    /* Resting/hover shadow shared by every interactive card
       (.pick-card, .lot-card, .home-winner, .faq-item, ...). */
    --shadow-card: 0 0px 5px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 0px 5px rgba(0, 0, 0, 0.2);

    /* ── Type scale ─────────────────────────────────────────────
       Calibrated for the 420px app frame. The micro tier (12px) is the floor
       for normal text; the nano tier (10px) is reserved for the Google ratings
       attribution only. Icon glyphs and one-off display numerals keep literal px. */
    --fs-nano:  10px;  /* Google ratings attribution ONLY */
    --fs-micro: 12px;  /* UPPERCASE micro-labels, badges/pills, footer copy, fine print */
    --fs-xs:    13px;  /* fine print, hints, captions, secondary text */
    --fs-sm:    14px;  /* secondary body */
    --fs-base:  16px;  /* body, form inputs, reading content, section titles */
    --fs-lg:    18px;  /* sub-headings, total labels, prominent buttons/CTAs */
    --fs-xl:    22px;  /* section / lot-page headings */
    --fs-2xl:   28px;  /* large headings, hero h1, prices */
}

html,
body {
    height: 100%;
    background: var(--body-bg);
    font-family: "Outfit", sans-serif;
    color: var(--dark);
    -webkit-font-smoothing: antialiased;
}

/* ── Phone Frame ──────────────────────────────────────────── */
/* Below the desktop breakpoint (< 820px, see desktop.css) this fills the
   viewport outright — no max-width/max-height "phone mockup" letterboxing. */
.phone-frame {
    width: 100%;
    height: 100svh;
    background: var(--white);
    margin: 0 auto;
    position: relative;
    overflow: hidden; /* frame never scrolls */
    display: flex;
    flex-direction: column;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
}

/* ── Legal Pages ──────────────────────────────────────────── */
.legal-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    /* The page itself scrolls so the footer flows under the content instead of being
       pinned to the viewport bottom. overflow-x:hidden is explicit so the visible→auto
       promotion can't introduce a horizontal scrollbar. */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Legal pages reuse .results-topbar (logo + lang switcher) and
   .lot-page-header/.lot-page-name-row (back arrow + h1) — same header as the
   /top landing pages — instead of their own white sticky bar. .legal-page is
   its own scroll container (unlike .results-root/.page-scroll elsewhere), so
   the topbar needs its own sticky rule to stay pinned while it scrolls. */
.legal-page > .results-topbar {
    position: sticky;
    top: 0;
}

.legal-body {
    /* natural content height; .legal-page is the scroll container now (footer flows under) */
    overflow: visible;
    padding: 24px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legal-body h2 {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 8px;
}

.legal-body h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--dark);
    margin-top: 8px;
    margin-bottom: 2px;
}

.legal-body h4 {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--muted);
    margin-top: 6px;
    margin-bottom: 2px;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
    margin-top: 8px;
}

.legal-table th,
.legal-table td {
    border: 1px solid var(--border);
    padding: 6px 8px;
    vertical-align: top;
    line-height: 1.5;
    color: var(--muted);
}

.legal-table th {
    font-weight: 600;
    color: var(--dark);
    background: #f8fafc;
}

.legal-body p {
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--muted);
}

.legal-body ul {
    margin: 4px 0 0 0;
    padding-left: 18px;
}

.legal-body ol {
    /* The universal reset zeroes padding; ordered lists need it restored or the
       outside-positioned number markers spill out to the left of the content box.
       Slightly wider than ul to fit multi-digit markers ("10."). */
    margin: 4px 0 0 0;
    padding-left: 24px;
}

.legal-body li {
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--muted);
}

.legal-body a {
    color: var(--blue);
    text-decoration: none;
    word-break: break-word;
}

.legal-body a:hover {
    text-decoration: underline;
}

/* ── Error Pages ──────────────────────────────────────────── */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 32px 24px;
    text-align: center;
    gap: 16px;
}

.error-icon {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    box-shadow: 0 6px 24px rgba(26, 86, 219, 0.18);
    margin-bottom: 4px;
}

.error-code {
    font-size: 80px;
    font-weight: 800;
    color: var(--blue);
    line-height: 1;
    letter-spacing: -2px;
}

.error-label {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--dark);
    margin-top: -4px;
}

.error-message {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--muted);
    max-width: 270px;
}

.error-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    background: var(--blue);
    color: var(--white);
    text-decoration: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-size: var(--fs-base);
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    transition: opacity 0.15s;
    box-shadow: 0 4px 14px rgba(26, 86, 219, 0.3);
}

.error-home-btn:hover {
    opacity: 0.9;
    text-decoration: none;
}

.legal-updated {
    font-size: var(--fs-micro);
    color: #94a3b8;
    margin-bottom: 4px;
}


.section-divider {
    border: none;
    border-top: 1px solid #9999;
    margin: 20px 30px;
}

/* ── Site Footer ──────────────────────────────────────────────
   Logo + link columns. Mobile stacks everything (logo, then one column per
   row); desktop.css turns it into logo-left / columns-right on one row. */
.site-footer {
    margin-top: 32px;
    flex-shrink: 0;
    padding: 24px 20px 14px;
    background: var(--footer-bg);
    color: var(--footer-link);
}

.site-footer__top {
    display: grid;
    gap: 24px;
}

.site-footer__brand-col {
    display: grid;
    justify-items: start;
    gap: 14px;
}

.site-footer__brand {
    display: block;
}

.site-footer__about {
    margin: 0;
    max-width: 42ch;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--footer-link);
}

.site-footer__brand img {
    display: block;
    width: 140px;
    height: auto;
}

/* One column per row on mobile — desktop.css lays them side by side. */
.site-footer__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

.site-footer__col-title {
    margin: 0 0 10px;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--footer-heading);
}

.site-footer__list {
    list-style: none;
    display: grid;
    gap: 9px;
}

.site-footer__list a {
    font-size: var(--fs-xs);
    color: var(--footer-link);
    text-decoration: none;
    /* Long values (the email address) wrap instead of widening the column. */
    overflow-wrap: anywhere;
}

.site-footer__list a:hover {
    color: var(--white);
    text-decoration: underline;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 10px;
    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer__copy {
    font-size: var(--fs-micro);
    color: var(--footer-muted);
    margin: 0;
}

.site-footer__version {
    font-size: var(--fs-micro);
    color: var(--footer-muted);
    margin: 0;
}

/* The inner scrollable region used by both pages */
.page-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    background: #eef2ff;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* ── Hero Section ─────────────────────────────────────────── */
.hero {
    background: var(--blue-gradient);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Top Bar ──────────────────────────────────────────────── */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo-icon {
    color: #fff;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.logo-text {
    color: var(--white);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* A globe + current-locale-code + chevron trigger that reveals a dropdown menu
   on click, at every width — the chevron is what tells you the code is a menu
   and not just a label. */
.lang-switcher {
    position: relative;
}

.lang-switcher-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: var(--white);
    font-family: "Outfit", sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.lang-switcher-trigger:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lang-switcher-globe {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lang-switcher-chev {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.8;
    transition: transform 0.15s;
}

.lang-switcher-trigger[aria-expanded="true"] .lang-switcher-chev {
    transform: rotate(180deg);
}

.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 36, 96, 0.18);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 96px;
    z-index: 20;
}

.lang-opt {
    color: rgba(255, 255, 255, 0.6);
    font-family: "Outfit", sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 12px;
    transition:
        color 0.15s,
        background 0.15s;
}

.lang-opt:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
}

.lang-opt--active {
    color: var(--white);
    background: rgba(255, 255, 255, 0.2);
}

/* Inside the white dropdown menu the links need dark text instead of the
   translucent-white styling meant for the blue topbar background. */
.lang-switcher-menu .lang-opt {
    color: var(--dark);
    text-align: center;
}

.lang-switcher-menu .lang-opt:hover {
    color: var(--dark);
    background: var(--light-bg);
}

.lang-switcher-menu .lang-opt--active {
    color: var(--white);
    background: var(--blue);
}

/* ── Tagline ──────────────────────────────────────────────────
   Fluid rather than fixed: the hero copy has to hold together from a 320px
   phone up through the 2-column desktop hero, where it only gets half the
   rail. The clamps top out at the tier the fixed sizes used to be, so nothing
   grows past the old design; desktop.css re-clamps for its own range. The
   bottom margin separates it from the stats panel below (a plain sibling —
   no flex gap in that wrapper). */
.tagline {
    text-align: center;
    margin-bottom: 16px;
}

/* Both levels carry a soft drop shadow: the copy sits directly on
   --blue-gradient, whose lighter end leaves white text a little weak. Tight
   offset and blur, so it reads as depth rather than as a glow — and low enough
   alpha that it never turns into a visible outline on the darker end. */
.tagline h1 {
    color: var(--white);
    font-size: clamp(22px, 6.8vw, var(--fs-2xl));
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.tagline p,
.tagline h2 {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(16px, 4.4vw, var(--fs-lg));
    font-weight: 500;
    margin-top: 6px;
    /* Lighter than the h1's: this text is already at 92% alpha, and a shadow
       at the same strength would read as blur at this weight. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

/* ── Search Card ──────────────────────────────────────────── */
.search-card {
    background: var(--white);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.date-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

.field-label {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-transform: uppercase;
}

.stepper-col .field-label {
    margin-bottom: 6px;
}

.date-pill {
    background: var(--blue);
    color: var(--white);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    width: 100%;
    font-family: "Outfit", sans-serif;
    transition: background 0.15s;
}

.date-pill:hover {
    background: #1a4fd6;
}

input[type="date"].date-input-hidden,
input[type="time"].date-input-hidden {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

/* ── Days Chip ────────────────────────────────────────────── */
/* Hidden for now, pending a decision on whether the computed night count
   belongs in the search card at all. The markup and the days() logic stay in
   _search_form.html.twig — every include of that partial (hero, results edit
   modal, lot page, prices booking modal) loses the chip together, and putting
   it back is this one rule. */
.days-chip {
    display: none;
    justify-content: center;
}

.days-chip-inner {
    background: #e8f0fe;
    color: var(--blue);
    border-radius: 20px;
    padding: 5px 16px;
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* ── Stepper Pair ─────────────────────────────────────────── */
.stepper-pair {
    display: flex;
    gap: 10px;
}

.stepper-col {
    flex: 1;
    min-width: 0;
}

.stepper-hint {
    margin-top: 5px;
    font-size: var(--fs-micro);
    color: var(--text-muted, #888);
    text-align: center;
}

/* ── Vehicle Stepper ──────────────────────────────────────── */
.stepper-row {
    background: var(--light-bg);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stepper-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.stepper-btn {
    width: 34px;
    height: 34px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    color: var(--blue);
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: "Outfit", sans-serif;
    transition: background 0.15s;
}

.stepper-btn:hover {
    background: #e8f0fe;
}

.stepper-count {
    flex: 1;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 32px;
    justify-content: center;
}

.stepper-count .x{
    font-size: var(--fs-xs);
    color: var(--muted);
}
.stepper-count .car,
.stepper-count .person {
    font-size: 24px;
}

.stepper-count .cnt{
    font-family: monospace;
}

/* ── Search Button ────────────────────────────────────────── */
.search-btn {
    width: 100%;
    text-shadow: 0 0 1px #000;

    background: var(--orange);
    color: var(--white);
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: var(--fs-lg);
    font-weight: 800;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
    transition: all 0.5s;
}

.search-btn:hover:not(:disabled) {
    opacity: 0.93;
       box-shadow: 0 4px 14px rgba(245, 158, 16, 0.8);
    /* transform: translateY(1px); */
}

.search-btn:disabled {
    background: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
}

/* ── Trust Badges ─────────────────────────────────────────── */
/* Hero: search card + stats panel. Inert here on purpose — the mobile hero is
   byte-for-byte what it was, card then panel stacked. desktop.css turns this
   into the two-column split. */
.hero-cols {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Solid white panel, not the translucent overlay it used to be: three figures
   across the top, then the freshness/source footnotes. Same card treatment as
   .search-card next to it, so the hero reads as two panels rather than a card
   and a wash. */
.hero-stats {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    padding: 16px;
}

/* minmax(0, 1fr), not 1fr: a grid track's default min-width is min-content, so
   the longest label ("összehasonlítási") would otherwise set a floor that makes
   the whole page scroll sideways on a narrow phone. */
.hero-stats__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.2;
}

.hero-stat__value {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--blue);
}

.hero-stat__label {
    margin-top: 2px;
    font-size: var(--fs-micro);
    line-height: 1.25;
    color: var(--muted);
    overflow-wrap: break-word;
    hyphens: auto;
}

.hero-stats__foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.hero-stats__fresh {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--dark);
}

/* The freshness dot breathes slowly — enough to read as "live", not enough to
   pull the eye off the search card next to it. */
.hero-stats__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    animation: hero-dot-pulse 2.6s ease-in-out infinite;
}

@keyframes hero-dot-pulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
    }
    50% {
        opacity: 0.6;
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
    }
}

/* @media (prefers-reduced-motion: reduce) {
    .hero-stats__dot {
        animation: none;
    }
} */

/* Tinted strip closing the card. Negative margins cancel .hero-stats' padding
   so it runs edge to edge, and the bottom corners repeat the card's radius —
   keep the two in step if either changes (desktop.css overrides both). */
.hero-stats__source-bar {
    margin: 12px -16px -16px;
    padding: 9px 16px;
    background: var(--light-bg);
    border-top: 1px solid var(--border);
    border-radius: 0 0 16px 16px;
}

.hero-stats__source {
    margin: 0;
    font-size: var(--fs-micro);
    color: var(--muted);
}

/* Cheapest / best-rated / closest. Photo left, category + figure right; the
   accent colour is the only thing that varies between the three. */
/* Generous gap because each cell ends in its toplist link, not the card edge —
   8px left the link crowding the next card instead of reading as part of its
   own. Desktop replaces this with --section-gap once the cells sit side by side. */
.home-winners {
    display: grid;
    gap: 20px;
    padding: 0 16px;
}

/* The card and its toplist link are two separate anchors (a link inside a link
   would be invalid), so each grid cell wraps the pair. */
.home-winner-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-winner {
    --accent: var(--winner-best);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: box-shadow 0.15s;
}

.home-winner:hover {
    box-shadow: var(--shadow-card-hover);
}

.home-winner--cheapest {
    --accent: var(--winner-cheapest);
}

.home-winner--closest {
    --accent: var(--winner-closest);
}

/* Square thumbnail: cover photo by default, logo and the striped placeholder
   are fallbacks (same chain as the results cards). */
/* Sized to roughly the height of the text column beside it (label + name +
   value + meta, unwrapped). Fixed rather than align-self: stretch so a lot name
   that wraps to two lines can't inflate the image along with the card. */
.home-winner__media {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.home-winner__media--icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--light-bg);
}

/* Scaled up with the box it sits in — the shared --sm size was proportioned
   for the old 64px media and reads as a dot inside the larger one. */
.home-winner__media .p-icon--sm {
    width: 52px;
    height: 52px;
    font-size: 24px;
}

.home-winner__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Pill, tinted from the card's own accent. align-self keeps it hugging its
   text inside the flex column instead of stretching the full body width. */
.home-winner__label {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--light-bg);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

.home-winner__icon {
    font-size: 12px;
    line-height: 1;
}

.home-winner__value {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

.home-winner__name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--dark);
}

.home-winner__meta {
    font-size: var(--fs-xs);
    color: var(--muted);
}

/* Secondary route out of the card: the top-3 landing page for this category.
   Kept visually lighter than the card so it reads as a footnote to it. */
.home-winner__toplist {
    display: flex;
    align-items: center;
    /* Left-aligned on mobile, where the cards are a single stacked column and a
       centred link reads as detached from the card it belongs to. Desktop
       centres it again under each of the three columns. */
    justify-content: flex-start;
    gap: 5px;
    padding: 2px 4px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

.home-winner__toplist:hover {
    text-decoration: underline;
}

.home-winner__arrow {
    transition: transform 0.15s;
}

.home-winner__toplist:hover .home-winner__arrow {
    transform: translateX(2px);
}

/* The winners grid carries its own horizontal padding, so the heading matches
   that rather than sitting on section padding (same split as .home-prices). */
.home-winners-section {
    padding: 20px 0 0;
}

.home-winners-section .section-title {
    padding: 0 16px;
}

.home-prices {
    padding: 20px 0 0;
}

.home-prices .section-title {
    padding: 0 16px;
}

/* Trust badges, inside .search-card below the search button. Deliberately
   understated — plain icon + label, no pill chrome — so they reassure without
   pulling attention off the CTA directly above them. */
.search-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 4px 14px;
    padding-top: 2px;
}

.search-badge {
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

/* ── How It Works ─────────────────────────────────────────── */
.how-it-works {
    padding: 0 20px 28px;
}

.section-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 14px;
}

.step-row {
    display: flex;
    /* align-items: center; */
    gap: 14px;
    margin-bottom: 14px;
}

.step-icon {
    width: 38px;
    height: 38px;
    background: var(--blue);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    margin: 10px 0 0 0;
}

.step-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 4px;
    padding-bottom: 4px;
}

.step-text strong {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--dark);
}

.step-text span {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-top: 2px;
}

/* ============================================================
   Results Page
   ============================================================ */

.results-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Top Bar (blue gradient, never scrolls) ───────────────── */
.results-topbar {
    background: var(--blue);
    flex-shrink: 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
    z-index: 10;
}

.results-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}

.results-logo-icon {
    color: #fff;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.results-logo-text {
    color: var(--white);
    font-size: var(--fs-sm);
    font-weight: 700;
}

/* Wrapper around the summary bar + its edit modal. Transparent to layout —
   its two children (.results-summary-bar, .modal-overlay) become direct
   participants in .page-scroll's own layout (see .results-sidebar below for
   the same trick, and desktop.css section 4 for the grid placement). */
.results-search-widget {
    /* display: contents; */
    background: var(--blue);
    padding: 6px;
}

.results-summary-bar {
    background: var(--white);
    border: none;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--dark);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    text-align: left;
    transition: border-color 100ms;
}

.results-summary-bar:hover {
    border-color: var(--blue);
}

.rsb-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.rsb-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rsb-meta {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.rsb-meta span {
    background: var(--light-bg);
    border: 1.5px solid #d3dae6;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--dark);
}

.rsb-edit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--blue);
    color: var(--white);
    border-radius: 20px;
    padding: 7px 12px;
    font-size: var(--fs-xs);
    font-weight: 700;
    transition: background 0.15s;
}

.results-summary-bar:hover .rsb-edit {
    background: #1a4fd6;
}

/* Sidebar wrapper around sort+filter bars. Transparent to layout on mobile;
   the desktop layer (≥1024px) promotes it to the sticky left column. */
.results-sidebar {
    display: contents;
}

/* ── Meta bar: found count + sort pills ───────────────────── */
.results-meta-bar {
    padding: 14px 16px 10px;
    background: var(--white);
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    gap: 10px;
    overflow: auto;
}

.found-count {
    font-size: var(--fs-sm);
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
}

.meta-bar-label {
    font-size: var(--fs-sm);
    /* color: var(--muted); */
    font-weight: 500;
    white-space: nowrap;
}

.sort-pills {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

.flex-grow {
    flex-grow: 1;
    text-align: center;
}


.sort-pill {

    padding: 7px 13px;
    border-radius: 20px;
    font-size: var(--fs-xs);
    line-height: var(--fs-xs);

    font-weight: 600;
    text-decoration: none;
    /* Was var(--border)/var(--white) — same white as the bar it sits in,
       so the pill only showed as a faint outline. light-bg fill + a darker
       border give it real contrast against that white background. */
    border: 1.5px solid #d3dae6;
    color: var(--muted);
    background: var(--light-bg);
    white-space: nowrap;
    transition: all 0.15s;
    font-family: "Outfit", sans-serif;
}

.sort-pill.active {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

.results-meta-bar.results-meta-bar--filters {
    background: transparent;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: visible;
    align-items: flex-start;
}

.results-meta-bar--filters .sort-pills {
    flex-wrap: wrap;
}

.results-meta-bar--filters .meta-bar-label {
    padding: 6px 0;
}

/* ── Results content area ─────────────────────────────────── */
.results-content {
    /* padding-bottom: 32px; */
}

/* .results-content + .site-footer{
    padding-top: 32px;
} */

/* ── Diagonal stripe mixin (shared) ───────────────────────── */
.stripe-bg {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.22) 0,
        rgba(255, 255, 255, 0.22) 9px,
        transparent 9px,
        transparent 20px
    );
}

/* ── Top Picks section ────────────────────────────────────── */
.top-picks-section {
    padding: 20px 0 14px;
}

.top-picks-header {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--dark);
    padding: 0 16px 14px;
}

.top-picks-scroll {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding: 10px 16px 10px;
    scrollbar-width: none;
}

.top-picks-scroll::-webkit-scrollbar {
    display: none;
}

@media (min-width: 820px) {
    .top-picks-scroll {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
        padding-bottom: 20px;
    }

    .top-picks-scroll::-webkit-scrollbar {
        display: block;
        height: 5px;
    }

    .top-picks-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .top-picks-scroll::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.22);
        border-radius: 99px;
    }
}

/* ── Top Pick card ────────────────────────────────────────── */
.pick-card {
    width: 280px;
    flex-shrink: 0;
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    /* box-shadow: 0 3px 16px rgba(0, 0, 0, 0.09); */
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pick-card--clickable {
    cursor: pointer;
}

.pick-card--clickable:hover {
    /* box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15); */
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.top-picks-scroll .pick-card:nth-child(1) {
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.55), var(--shadow-card);
}

.top-picks-scroll .pick-card:nth-child(1).pick-card--clickable:hover {
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.55), var(--shadow-card-hover);
}

.top-picks-scroll .pick-card:nth-child(2) {
    box-shadow: 0 0 0 1px rgba(161, 168, 176, 0.55), var(--shadow-card);
}

.top-picks-scroll .pick-card:nth-child(2).pick-card--clickable:hover {
    box-shadow: 0 0 0 1px rgba(161, 168, 176, 0.55), var(--shadow-card-hover);
}

/* ── Pick card — vertical list (Reservable Lots section) ──── */
.pick-card-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 16px 8px;
}

.pick-card-list .pick-card {
    width: 100%;
    flex-shrink: initial;
}

/* Tablet range (below the desktop.css breakpoint at 820px): a single
   full-width card stretches into an oddly wide banner once the phone-frame
   is no longer capped at 420px. auto-fit/minmax grids as many ~260px+
   columns as fit instead of forcing a fixed count that could squeeze
   cards too narrow for their price + button row. */
@media (min-width: 600px) {
    .pick-card-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
    }

    .pick-card-list .pick-card {
        width: auto;
    }

    /* Top Picks is a curated 2-card row, not a wrap-friendly list — stays a
       horizontally-scrolling carousel (same as mobile) rather than the
       Reservable Lots grid above. Card width matches those grid columns when
       there's room, clamped to the same 260px floor with horizontal scroll
       taking over below that, same treatment as desktop.css's ≥820px rule. */
    .top-picks-scroll {
        gap: 16px;
    }

    .top-picks-scroll .pick-card {
        width: max(260px, calc(50% - 8px));
    }
}

.pick-card-image {
    height: 158px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pick-card-image--photo {
    background-size: cover;
    background-position: center;
}

.p-icon {
    width: 48px;
    height: 48px;
    background: #1a1a1a;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 22px;
    font-weight: 800;
    font-family: "Outfit", sans-serif;
    flex-shrink: 0;
}

.p-icon--sm {
    width: 40px;
    height: 40px;
    font-size: 19px;
    border-radius: 10px;
}
.p-icon--lg {
    width: 52px;
    height: 52px;
    font-size: 26px;
    border-radius: 14px;
}

.pick-card-image-name {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--white);
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    padding: 0 12px;
}

.pick-card-body {
    padding: 14px 16px 16px;
}

.green-badge {
    display: inline-block;
    background: var(--status-success-bg);
    color: var(--status-success-text);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: var(--fs-micro);
    font-weight: 700;
    margin-bottom: 8px;
}

.pick-card-name {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
}

.stars-row {
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    background: var(--light-bg);
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 3px 6px;
    display: inline-flex;
}

.GMP-info-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: default;
}

.GMP-info-icon {
    font-size: var(--fs-micro);
    color: #9e9e9e;
    line-height: 1;
    user-select: none;
}

.GMP-tooltip {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: var(--fs-micro);
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
}

.GMP-info-wrap:hover .GMP-tooltip,
.GMP-info-wrap:focus-within .GMP-tooltip {
    opacity: 1;
}

.GMP-attribution {
    font-family: Roboto, Sans-Serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-nano);
    letter-spacing: normal;
    white-space: nowrap;
    color: #5e5e5e;
}

.stars {
    color: var(--orange);
    font-size: var(--fs-xs);
}
.rating-num {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--dark);
}

.review-count {
    font-size: var(--fs-xs);
    color: #6b7280;
}

.meta-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Hidden everywhere by default — only the desktop Reservable-Lots horizontal
   card (see desktop.css) has room for it next to the square image. */
.pick-card-desc {
    display: none;
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: var(--fs-xs);
    font-weight: 600;
    background: #f1f5f9;
    color: var(--dark);
}

.meta-pill.avail-green {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}
.meta-pill.avail-amber {
    background: #fef3c7;
    color: #b45309;
}
.meta-pill.avail-red {
    background: #fee2e2;
    color: #b91c1c;
}

.pick-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pick-price {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--blue);
    line-height: 1;
}

.pick-days {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-top: 3px;
}

.pick-book-btn {
    background: var(--blue);
    color: var(--white);
    border-radius: 12px;
    padding: 10px 15px;
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
    display: inline-block;
}

.pick-book-btn--unavailable {
    background: #94a3b8;
}

/* ── All Results section ──────────────────────────────────── */
.all-results-section {
    padding: 20px 0 8px;
}

.all-results-header {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--dark);
    padding: 0 16px 14px;
}

/* ── Lot list card (horizontal) ───────────────────────────── */
.lot-card {
    background: var(--white);
    border-radius: 18px;
    margin: 0 16px 12px;
    overflow: hidden;
    display: flex;
    /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); */
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lot-card--clickable {
    cursor: pointer;
}

.lot-card--dimmed {
    opacity: 0.8;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lot-card--dimmed:hover {
    opacity: 1;
}

.lot-card--clickable:hover {
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); */
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.lot-card-left {
    width: 96px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 8px;
}

.lot-card-left--icon {
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

.lot-card-left--photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lot-left-name {
    font-size: var(--fs-micro);
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    color: var(--white);
}

.lot-card-right {
    flex: 1;
    padding: 13px 13px 13px 11px;
    min-width: 0;
}

.lot-card-name {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}

.lot-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.lot-price-inline {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (min-width: 380px) {
    .lot-price-inline {
        /* flex-direction: row; */
        align-items: baseline;
        gap: 6px;
    }
}

.lot-price {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--blue);
    line-height: 1;
}

.lot-price--na {
    font-size: var(--fs-xs);
    color: #94a3b8;
}

.lot-days-label {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: 500;
}

.book-btn {
    background: var(--blue);
    color: var(--white);
    border-radius: 10px;
    padding: 10px 15px;
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
    display: inline-block;
}

.book-btn:not(.book-btn--unavailable):hover {
    /* transform: translateY(1px); */
}

.book-btn--unavailable {
    background: #94a3b8;
}

/* ============================================================
   Booking Modal
   ============================================================ */

body.modal-open {
    overflow: hidden;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.modal-sheet {
    background: var(--white);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 430px;
    max-height: min(92vh, 840px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    animation: slideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ── Handle + step dots ───────────────────────────────────── */
.modal-handle-area {
    padding: 12px 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: var(--white);
}

.modal-handle,
.terms-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
}

.modal-step-dots {
    display: flex;
    gap: 6px;
}

.step-dot {
    width: 18px;
    height: 5px;
    border-radius: 3px;
    background: var(--border);
    transition: background 0.2s;
}

.step-dot.filled {
    background: var(--blue);
}

/* ── Preview step ─────────────────────────────────────────── */
.modal-preview-step {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-preview-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.modal-preview-footer {
    flex-shrink: 0;
    background: var(--white);
    box-shadow: 0 -5px 5px rgba(0, 0, 0, .2);
    padding: 16px;
}

.modal-preview-header {
    padding: 10px 16px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.modal-lot-name {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--dark);
}

.modal-x-btn,
.modal-back-btn {
    width: 34px;
    height: 34px;
    background: var(--light-bg);
    border: 1.5px solid var(--border);
    border-radius: 9px;
    font-size: var(--fs-sm);
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: "Outfit", sans-serif;
    transition: background 0.15s;
}

.modal-x-btn:hover,
.modal-back-btn:hover {
    background: var(--border);
}

/* ── Search-edit modal (results page) ─────────────────────── */
.modal-search-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    /* The included _search_form.html.twig partial normally relies on
       .search-card's flex column + gap for spacing between its rows
       (.date-row, .days-chip, .stepper-pair) — replicate that here since
       this wrapper stands in for .search-card inside the modal. */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-search-footer {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 12px 16px 16px;
}

.modal-search-footer .search-btn {
    width: auto;
    flex: 1;
}

.modal-cancel-btn {
    flex: 1;
    background: var(--light-bg);
    color: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 15px;
    font-size: var(--fs-lg);
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}

.modal-cancel-btn:hover {
    background: var(--border);
}

/* Lot media swiper */
.modal-lot-swiper {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0 16px 16px;
    border-radius: 16px;
    overflow: hidden;
    background: #f0f0f0;
}

.modal-swiper-slide {
    position: absolute;
    inset: 0;
}

.modal-swiper-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-swiper-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.83), rgba(255, 255, 255, 0.83)),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.45) 0,
            rgba(255, 255, 255, 0.45) 10px,
            transparent 10px,
            transparent 22px
        );
}

.modal-swiper-dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.modal-swiper-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.modal-swiper-dot--active {
    background: #fff;
}

.modal-swiper-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* opacity: 0; */
    /* transition: opacity 0.15s, background 0.15s; */
    z-index: 2;
    padding: 0;
}

.modal-swiper-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}
.modal-swiper-arrow--prev { left: 10px; }
.modal-swiper-arrow--next { right: 10px; }

.video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}

.video-play-overlay-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.52);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.15s, transform 0.15s;
    padding-left: 4px; /* optical shift for play triangle */
}

.video-play-overlay:hover .video-play-overlay-icon {
    background: rgba(0, 0, 0, 0.72);
    transform: scale(1.1);
}

.modal-image-name {
    font-size: var(--fs-base);
    font-weight: 700;
    /* color set inline to lot.color */
}

/* Feature pills row */
.modal-feat-pills {
    padding: 0 16px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--light-bg);
    color: var(--dark);
    border: 1px solid var(--border);
}

.feat-pill-suffix {
    font-weight: 400;
}

.feat-pill.feat-shuttle {
    background: #e8f0fe;
    color: var(--blue);
    border-color: #c7d7fc;
}

/* Desc + features */
.modal-desc {
    padding: 0 16px 14px;
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.55;
}

.modal-features {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    color: var(--dark);
}

.modal-legal {
    padding: 0 16px 16px;
}

.modal-legal-card {
    background: var(--light-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--muted);
}

.modal-legal-title {
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 2px;
}

.modal-legal-name {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--dark);
    line-height: 1.3;
}

.modal-legal-table {
    border-collapse: collapse;
}

.modal-legal-key {
    padding-right: 12px;
    white-space: nowrap;
    vertical-align: top;
}

.modal-legal-val {
    color: var(--dark);
    vertical-align: top;
}

.feature-check {
    width: 22px;
    height: 22px;
    background: var(--green);
    border-radius: 50%;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-micro);
    font-weight: 800;
    flex-shrink: 0;
}

/* Price breakdown */
.modal-price-area {
    padding: 12px 0;
}

.price-per-day-label {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-bottom: 6px;
}

.price-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-total-label {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--dark);
}

.price-total-amount {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--blue);
}

.modal-avail-wrap {
    padding: 0 16px 14px;
}

.modal-address {
    padding: 0 16px 12px;
    font-size: var(--fs-xs);
    color: var(--muted);
}

.modal-cta-wrap {
    padding: 0;
}

/* CTA orange button */
.modal-cta-btn {
    display: block;
    width: 100%;
    min-height: 60px;
    background: var(--orange);
    color: var(--white);
    border: none;
    border-radius: 14px;
    padding: 17px;
    font-size: var(--fs-lg);
    font-weight: 800;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.38);
    transition: opacity 0.15s;
    text-align: center;
}

.modal-cta-btn:hover {
    opacity: 0.93;
}

.modal-payment-note {
    text-align: center;
    font-size: var(--fs-sm);
    color: black;
    padding: 12px 0 0;
}

.modal-not-reservable {
    padding: 4px 16px 8px;
    text-align: center;
}

.modal-not-reservable-text {
    font-size: var(--fs-sm);
    color: #6b7280;
    line-height: 1.5;
    /* margin: 0 0 12px; */
}

/* ── Form step ────────────────────────────────────────────── */
.modal-form-step {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-form-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 16px;
    gap: 8px;
    flex-shrink: 0;
    background: var(--white);
}

.modal-form-title {
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--dark);
    text-align: center;
    flex: 1;
}

/* Lot summary pill (name left, price right) */
.modal-lot-summary {
    background: var(--light-bg);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 0 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.modal-summary-name {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--dark);
}

.modal-summary-price {
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--blue);
    white-space: nowrap;
}

.modal-divider {
    height: 1px;
    background: var(--border);
    margin: 0 16px 20px;
}

.modal-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-form-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-form-footer {
    flex-shrink: 0;
    padding: 16px;
    background: var(--white);
    box-shadow: 0 -5px 5px rgba(0, 0, 0, .2);
}


.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-label {
    font-size: var(--fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dark);
}

.form-required {
    color: var(--red);
    margin-left: 2px;
}

.form-input {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: var(--fs-base);
    font-family: "Outfit", sans-serif;
    color: var(--dark);
    width: 100%;
    transition: border-color 0.15s;
    outline: none;
}

.form-input--plates {
    text-transform: uppercase;
}

.form-input--comment {
    resize: none;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.form-input::placeholder {
    color: var(--muted);
    opacity: 0.5;
}

.form-input:focus {
    border-color: var(--blue);
}

.form-check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    /* align-items: center; */
}

.form-checkbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 4px;
    accent-color: var(--blue);
    cursor: pointer;
}

.form-check-text {
    font-size: var(--fs-base);
    /* color: var(--muted); */
    line-height: 1.5;
}

.form-check-body {
    flex: 1;
}
.form-terms-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: var(--fs-base);
    color: var(--muted);
    line-height: 1.4;
    margin-top: 10px;
    background: var(--border);
    padding: 5px 10px;
    border-radius: 10px;
}
.form-terms-label {
    color: #000;
}
.form-terms-link {
    color: var(--blue);
    text-decoration: none;
}
.form-terms-link:hover {
    text-decoration: underline;
}
.form-terms-icon {
    display: inline-block;
    margin-right: 0.3em;
    text-decoration: none;
}
.form-terms-link[target="_blank"]::after {
    content: '';
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.2em;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z'/%3E%3C/svg%3E") no-repeat center;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Billing block — only shown for online payment. Re-create the form's column gap so the
   wrapper (a single flex child of .modal-form-scroll) keeps the same spacing as loose fields. */
.billing-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-label--legend {
    margin-bottom: -2px;
    color: var(--blue);
}

/* Blue datetime pill (date from search + editable time) */
.datetime-pill {
    background: var(--blue);
    border-radius: 14px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

.datetime-pill-date {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.datetime-pill-time--placeholder {
    opacity: 0.45;
}

.datetime-pill-time {
    background: transparent;
    border: none;
    color: var(--white);
    font-family: "Outfit", sans-serif;
    font-size: var(--fs-lg);
    font-weight: 700;
    outline: none;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    padding: 0;
}

/* Firefox and Safari: no time picker popup (inline stepper control instead) → hide the fake span, show a real styled input instead */
@supports (-moz-appearance: none) {
    .datetime-pill .datetime-pill-time {
        display: none;
    }
    .datetime-pill input[type="time"].date-input-hidden {
        position: static;
        width: auto;
        height: auto;
        opacity: 1;
        background: transparent;
        border: none;
        color: var(--white);
        font-family: "Outfit", sans-serif;
        font-size: var(--fs-lg);
        font-weight: 700;
        outline: none;
        cursor: pointer;
        flex: 1;
        min-width: 0;
        padding: 0;
        color-scheme: dark;
    }
}

/* Safari (desktop + iOS): same story as Firefox above, but -webkit-touch-callout isn't a
   reliable @supports gate on macOS desktop Safari, so this is set via UA-sniffing JS
   instead (see base.html.twig, .is-safari class on <html>). */
html.is-safari .datetime-pill .datetime-pill-time {
    display: none;
}
html.is-safari .datetime-pill input[type="time"].date-input-hidden {
    position: static;
    width: auto;
    height: auto;
    opacity: 1;
    background: transparent;
    border: none;
    -webkit-appearance: textfield;
    appearance: textfield;
    color: var(--white);
    font-family: "Outfit", sans-serif;
    font-size: var(--fs-lg);
    font-weight: 700;
    outline: none;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    padding: 0;
    color-scheme: dark;
}
/* Safari renders the hour/minute/separator as internal shadow parts that don't fully
   inherit color/font from the input itself — style them explicitly to match the pill. */
html.is-safari .datetime-pill input[type="time"].date-input-hidden::-webkit-datetime-edit,
html.is-safari .datetime-pill input[type="time"].date-input-hidden::-webkit-datetime-edit-fields-wrapper,
html.is-safari .datetime-pill input[type="time"].date-input-hidden::-webkit-datetime-edit-hour-field,
html.is-safari .datetime-pill input[type="time"].date-input-hidden::-webkit-datetime-edit-text,
html.is-safari .datetime-pill input[type="time"].date-input-hidden::-webkit-datetime-edit-minute-field,
html.is-safari .datetime-pill input[type="time"].date-input-hidden::-webkit-datetime-edit-ampm-field {
    color: var(--white);
    font-family: "Outfit", sans-serif;
    font-size: var(--fs-lg);
    font-weight: 700;
}
html.is-safari .datetime-pill input[type="time"].date-input-hidden::-webkit-clear-button,
html.is-safari .datetime-pill input[type="time"].date-input-hidden::-webkit-inner-spin-button {
    display: none;
}

.modal-submit {
    width: 100%;
    min-height: 60px;
    background: #38c406;
    color: var(--white);
    border: none;
    border-radius: 14px;
    padding: 17px;
    font-size: var(--fs-lg);
    font-weight: 800;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    /* Was rgba(245, 158, 11, ...) — the old orange glow, left over from when
       this button was orange. Background is green now; shadow wasn't updated
       to match. */
    box-shadow: 0 4px 16px rgba(56, 196, 6, 0.38);
    transition: opacity 0.15s;
}

.modal-submit:hover {
    opacity: 0.93;
}
.modal-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Success State ────────────────────────────────────────── */
.modal-success {
    padding: 40px 20px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.success-tick {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 4px;
}

.success-title {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--dark);
}

.success-sub {
    font-size: var(--fs-base);
    color: var(--muted);
    margin-bottom: 6px;
}

.success-summary {
    width: 100%;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 16px;
    padding: 16px 18px;
    text-align: left;
    margin: 6px 0 10px;
}

.success-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
}

.success-label {
    font-size: var(--fs-xs);
    color: #166534;
    white-space: nowrap;
    flex-shrink: 0;
}

.success-value {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--status-success-text);
    text-align: right;
}

.success-value--name {
    font-size: var(--fs-sm);
    font-weight: 700;
}

.success-value--id {
    font-size: var(--fs-base);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.success-value--price {
    font-size: var(--fs-base);
    font-weight: 700;
}

.success-value--blue {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.success-divider {
    border-top: 1px solid #bbf7d0;
    margin: 6px 0;
}

.success-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 99px;
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

.success-badge--confirmed {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.success-badge--pending {
    background: #fef3c7;
    color: #b45309;
}

.success-email-btn {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--blue);
    border: 1.5px solid var(--blue);
    border-radius: 14px;
    padding: 13px 24px;
    font-size: var(--fs-base);
    font-weight: 600;
    font-family: "Outfit", sans-serif;
    text-align: center;
    text-decoration: none;
    margin-top: 6px;
    margin-bottom: 4px;
    transition: background 0.15s, color 0.15s;
}

.success-email-btn:hover {
    background: var(--blue);
    color: var(--white);
}

.success-close-btn {
    background: var(--blue);
    color: var(--white);
    border: none;
    border-radius: 10px;
    padding: 14px 48px;
    font-size: var(--fs-base);
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    margin-top: 6px;
    transition: opacity 0.15s;
    text-decoration: none;
}

.success-close-btn:hover {
    opacity: 0.9;
}

.success-close-btn--inline {
    display: inline-block;
    margin-top: 24px;
}

/* ── Payment (Barion) ─────────────────────────────────────── */
label.form-radio-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
label.form-radio-row input[type="radio"] {
    margin-top: 5px;
}

.form-barion-logo {
    display: block;
    margin-top: 6px;
    
}

.payment-return {
    padding: 40px 20px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    overflow: auto;
}

.payment-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 8px;
}

.payment-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: payment-spin 0.8s linear infinite;
}

@keyframes payment-spin {
    to { transform: rotate(360deg); }
}

.payment-pending-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--dark);
}

.payment-pending-note {
    font-size: var(--fs-sm);
    color: var(--muted);
    max-width: 320px;
}

.payment-failed {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 32px 8px;
}

.payment-failed-title {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: #b91c1c;
}

.payment-failed-note {
    font-size: var(--fs-base);
    color: var(--muted);
    max-width: 340px;
    margin-bottom: 6px;
}

.payment-txn {
    width: 100%;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 18px;
    text-align: left;
    margin: 6px 0 10px;
}

.payment-txn-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
}

.payment-txn-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
}

.payment-txn-label {
    font-size: var(--fs-xs);
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.payment-txn-value {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--dark);
    text-align: right;
    word-break: break-all;
}

.payment-barion-logo {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

/* ── Error Banner ─────────────────────────────────────────── */
.error-banner {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #b91c1c;
    margin-bottom: 12px;
}

/* ── Empty State ──────────────────────────────────────────── */
.empty-state {
    padding: 60px 20px;
    text-align: center;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.empty-state-sub {
    font-size: var(--fs-sm);
    color: var(--muted);
}

/* ── Utility ──────────────────────────────────────────────── */
[x-cloak] {
    display: none !important;
}

/* ── Floating support contact ─────────────────────────────── */
.support-widget {
    position: fixed;
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(150px + env(safe-area-inset-bottom));
    z-index: 160;
    width: 56px;
    height: 56px;
}

.support-widget__trigger {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: #64748b;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.24);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.support-widget__overlay {
    position: fixed;
    z-index: 1;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.support-widget[data-open="true"] .support-widget__overlay {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.support-widget[data-state="online"] .support-widget__trigger {
    background: var(--blue-gradient);
    box-shadow: 0 5px 18px rgba(26, 86, 219, 0.32);
}

.support-widget__trigger:hover {
    box-shadow: 0 0 0 2px var(--white), 0 8px 24px rgba(15, 23, 42, 0.34);
}

.support-widget[data-state="online"] .support-widget__trigger:hover,
.support-widget[data-open="true"] .support-widget__trigger {
    box-shadow: 0 0 0 2px var(--white), 0 8px 24px rgba(26, 86, 219, 0.42);
}

.support-widget__trigger:focus-visible {
    outline: 3px solid var(--white);
    box-shadow: 0 0 0 5px var(--blue), 0 5px 18px rgba(15, 23, 42, 0.24);
}

.support-widget__headset {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.support-widget__badge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 21px;
    height: 21px;
    border: 2px solid var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: #475569;
}

.support-widget[data-state="online"] .support-widget__badge {
    background: var(--green);
    animation: support-phone-pulse 2.4s ease-out infinite;
}

.support-widget__action {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.support-widget__action--phone {
    display: none;
    fill: currentColor;
    stroke: none;
}

.support-widget[data-state="online"] .support-widget__action--phone {
    display: block;
}

.support-widget[data-state="online"] .support-widget__action--email {
    display: none;
}

@keyframes support-phone-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.32);
    }
    55% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}

.support-widget__popup {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(300px, calc(100vw - 32px));
    padding: 14px 44px 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--dark);
    background: var(--white);
    box-shadow: var(--shadow-card-hover);
    font-size: var(--fs-sm);
    line-height: 1.45;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.support-widget[data-open="true"] .support-widget__popup {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.support-widget__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 22px;
    line-height: 1;
}

.support-widget__close:hover {
    color: var(--dark);
    background: #f1f5f9;
}

.support-widget__close:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
}

.support-widget__message {
    margin: 0 0 8px;
    font-weight: 600;
}

.support-widget__contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
    font-size: var(--fs-sm);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.support-widget__contact,
.support-widget__contact:hover {
    text-decoration: none;
}

/* ── Cookie consent banner ────────────────────────────────── */
/* Lives inside .phone-frame (position: relative) so it stays anchored to the bottom of the app
   frame on both mobile and the desktop two-panel layout, like the booking/terms sheets. */
.cookie-consent {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.12);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cookie-consent__text {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--muted);
}

.cookie-consent__link {
    color: var(--blue);
    text-decoration: underline;
}

.cookie-consent__actions {
    display: flex;
    gap: 10px;
}

.cookie-consent__btn {
    flex: 1 1 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: background 0.15s, border-color 0.15s;
}

.cookie-consent__btn--reject {
    background: var(--white);
    color: var(--dark);
}

.cookie-consent__btn--reject:hover {
    background: var(--light-bg);
}

.cookie-consent__btn--accept {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

.cookie-consent__btn--accept:hover {
    background: var(--blue-dark);
}

/* ============================================================
   App / Phone-Frame Wrapper  (mobile-first base)
   ------------------------------------------------------------
   desktop.css fully overrides .desktop-layout / .phone-frame-wrapper /
   .phone-frame at ≥820px — this is the <820px behavior only. The old
   two-panel marketing layout that used to live here (.desktop-panel,
   .mp-* content, and the scale-transform rules) has been retired.
   ============================================================ */

.desktop-layout {
    display: flex;
    width: 100%;
    min-height: 100svh;
    align-items: stretch;
}

.phone-frame-wrapper {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--body-bg);
    min-height: 100svh;

    width: 100%;
}

/* ── FAQ ─────────────────────────────────────── */
.faq-section {
    padding: 0 20px 28px;
}

.faq-header {
    position: relative;
    margin: 24px -20px 16px;
    overflow: hidden;
}

.faq-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.faq-header__title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: #fff;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.faq-item:hover {
    box-shadow: var(--shadow-card-hover);
}

.faq-item summary {
    list-style: none;
    padding: 14px 16px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.2s;
    line-height: 1;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 16px 14px;
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.6;
}

.faq-page-body {
    padding: 0;
}

.faq-page-body .faq-section {
    padding: 0 20px 28px;
}

.faq-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 12px;
    background: var(--blue);
    border: 1px solid var(--white);
    border-radius: 12px;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
    transition: background 0.15s;
}

.faq-see-all:hover {
    background: var(--blue-dark);
}

/* ── Terms/Privacy overlay modal ──────────────────────── */
.terms-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.terms-sheet {
    background: var(--white);
    border-radius: 20px 20px 0 0;
    width: 100%;
    /* height: 60vh; */
    height: min(60vh, 640px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.terms-sheet-handle-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px 12px;
    gap: 8px;
    flex-shrink: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.terms-sheet-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.terms-iframe {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: none;
    display: block;
}

/* ── Link reset for card anchors ─────────────────────────── */
a.lot-card,
a.pick-card {
    text-decoration: none;
    color: inherit;
}

/* ── Lot landing page ──────────────────────────────────────── */
/* The page is a stack of white cards, so the scroller itself goes light —
   on a white background .lot-panel's border was the only thing separating one
   block from the next. .landing-page/.legal-page keep their own backgrounds. */
.lot-page .page-scroll {
    background: var(--light-bg);
}

.lot-page-header {
    padding: 12px 16px 0;
}

.lot-page-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lot-page-header .stars-row {
    display: inline-flex;
    margin: 12px 0;
    padding: 3px 6px;
}

.landing-intro {
    padding: 16px;
}

.results-disclaimer {
    padding: 16px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.lot-page-search {
    background: var(--blue-gradient);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lot-search-label {
    font-weight: 600;
    font-size: var(--fs-xl);
    color: var(--white);
}

.lot-page-search .search-card {
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid var(--border);
    padding: 12px;
}

.lot-page-search .field-label {
    margin-bottom: 6px;
}

.lot-topbar-spacer {
    width: 34px;
    flex-shrink: 0;
}

.lot-page-success {
    position: static;
    padding-bottom: 32px;
}

/* Reservation result (not-reservable note or the booking form) below the search section */
.lot-search-result {
    margin-top: 16px;
    scroll-margin-top: 12px;
}

/* ── Lot page: shared card shell ───────────────────────────── */
/* Every lot-page block that isn't the blue booking card sits in one of these.
   Deliberately not .search-card: that class belongs to the search widget and
   is also worn by home, landing and the blog widgets, so it can't carry
   lot-page-only spacing. */
.lot-panel {
    margin: 16px;
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

.lot-section-title {
    margin: 0 0 10px;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--dark);
}

/* Second and later headings inside a panel (services under the description)
   need air above them; the first one sits flush with the panel padding. */
.lot-panel > .lot-section-title:not(:first-child) {
    margin-top: 20px;
}

/* ── Lot page: gallery ─────────────────────────────────────── */
/* Adapted from .modal-lot-swiper rather than sharing it — the modal's carousel
   is a 16/9 strip with no thumbnails, and the two are free to drift now. */
.lot-gallery-card {
    padding: 16px 16px 0;
}

.lot-gallery {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    background: #dbe4f7;
    /* Horizontal swipe is ours (swiperTouchStart/End); vertical stays the page's. */
    touch-action: pan-y;
}

.lot-gallery__media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lot-gallery__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lot-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--dark);
    font-size: 13px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    z-index: 3;
}

.lot-gallery__arrow--prev { left: 10px; }
.lot-gallery__arrow--next { right: 10px; }

.lot-gallery__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 3;
}

.lot-gallery__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: width 0.15s, background 0.15s;
}

.lot-gallery__dot--active {
    width: 18px;
    background: var(--white);
}

/* Thumbnails scroll horizontally on the phone; desktop.css turns them into a
   fixed grid. No thumbnailing exists server-side (MediaStorageService stores
   originals), so these are the full images drawn small — hence loading="lazy"
   on every one of them in the template. */
.lot-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.lot-thumbs::-webkit-scrollbar {
    display: none;
}

.lot-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    height: 66px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #dbe4f7;
    cursor: pointer;
    scroll-snap-align: start;
}

.lot-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lot-thumb--active {
    border-color: var(--blue);
}

/* The "+N" tile: the next image, dimmed, with the remaining count on top. */
.lot-thumb--more img {
    filter: brightness(0.45);
}

.lot-thumb__count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: var(--fs-sm);
    font-weight: 700;
}

/* ── Lot page: booking column ──────────────────────────────── */
/* Wrapper around the (untouched) search widget and its assurances so desktop.css
   can stick the pair as one unit. On the phone it only supplies the gap. */
.lot-booking-col {
    display: flex;
    flex-direction: column;
}

/* "Full for these dates" — the only not-reservable answer the visitor can do
   something about, so it gets alert chrome instead of .modal-not-reservable's
   grey centred line (which the "not a partner yet" case still uses). */
.lot-full-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 16px;
    padding: 14px 16px;
    background: var(--status-alert-bg);
    border: 1px solid var(--status-alert-border);
    border-left: 4px solid var(--red);
    border-radius: 12px;
}

.lot-full-note__icon {
    flex: 0 0 auto;
    font-size: var(--fs-lg);
    line-height: 1.4;
}

.lot-full-note__body {
    min-width: 0;
}

.lot-full-note__text {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.45;
    color: var(--status-alert-text);
}

/* The way out of the dead end: same dates, only bookable lots. Styled in the
   alert's own palette so it reads as part of the message, not a stray button. */
.lot-full-note__cta {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--white);
    border: 1px solid var(--status-alert-border);
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--status-alert-text);
    text-decoration: none;
}

.lot-full-note__cta:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

/* ── Lot page: description + services ──────────────────────── */
.lot-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lot-address {
    margin: 12px 0 0;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.lot-desc {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--dark);
}

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

.lot-service {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    color: var(--dark);
}

.lot-service__icon {
    flex: 0 0 auto;
    font-size: var(--fs-base);
    line-height: 1;
}

/* Home's how-it-works block, reused verbatim; it only needs its own vertical
   rhythm here (the home copy leans on the section above it) and the heading
   pulled up to the lot page's section-title size. */
.lot-how-it-works {
    padding: 8px 20px;
}

.lot-how-it-works .section-title {
    font-size: var(--fs-lg);
}

/* Side panel: assurances over the full pricelist. Reference material rather
   than a call to action, so it wears the plain .lot-panel shell instead of the
   booking card's blue frame, which the two used to compete over. Column
   layout because desktop.css stretches it to the gallery card's height and
   lets the scroll area take up the slack.
   .lot-prices-table shares its rules with the blog price widget's table. */
.lot-side-panel {
    display: flex;
    flex-direction: column;
}

/* The whole list is always in the DOM — the wrapper scrolls instead of the
   page growing by thirty rows, and the header row stays put while it does.
   tabindex="0" in the markup is what makes a scroll container reachable by
   keyboard; without it the rows below the fold are unreachable without a mouse. */
.lot-prices-scroll {
    max-height: 300px;
    overflow-y: auto;
    /* Reaching the end of the list shouldn't start scrolling the page. */
    overscroll-behavior: contain;
}

.lot-prices-scroll thead th {
    position: sticky;
    top: 0;
    background: var(--white);
    /* The table is border-collapse, so the header's border-bottom belongs to
       the table and stays behind while the cell sticks. An inset shadow is
       painted by the cell itself and travels with it. */
    box-shadow: inset 0 -1px 0 var(--border);
}

/* Closes the panel with the same freshness note the home hero runs. */
.lot-prices-updated {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* Same recipe as .hero-stats__fresh — kept as its own class rather than shared
   because that one is bound to the hero card's spacing. */
.lot-prices-fresh {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--dark);
}

/* Reuses the hero's pulse: slow enough to read as "live" without pulling the
   eye off the page. */
.lot-prices-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    animation: hero-dot-pulse 2.6s ease-in-out infinite;
}

.lot-price-loading {
    color: var(--text-muted, #999);
    font-size: var(--fs-sm);
}

/* ── Blog ─────────────────────────────────────────────────── */
/* List + latest-on-home share the .blog-card markup. Article body reuses
   .legal-body typography; .blog-body adds only what legal pages don't need. */
.blog-empty {
    padding: 24px 20px;
    font-size: var(--fs-xs);
    color: var(--muted);
}

.blog-list {
    /* natural height; .legal-page scrolls so the footer flows under the cards */
    padding: 16px 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blog-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.blog-card:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.blog-card__media {
    aspect-ratio: 16 / 9;
    background: var(--light-bg);
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blog-card__date {
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blog-card__title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
}

.blog-card__excerpt {
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--muted);
}

.blog-card__more {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--blue);
}

/* Latest-posts block on the home page */
.blog-latest {
    padding: 8px 20px 4px;
}

.blog-latest__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
}

.blog-latest__all {
    display: inline-block;
    margin-top: 12px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

/* Article page */
.blog-article__meta {
    /* padding: 12px 0; */
    font-size: var(--fs-xs);
    color: var(--muted);
}

.blog-article__cover {
    /* padding: 12px 0; */
}

.blog-article__cover img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.blog-body h1,
.blog-body h2,
.blog-body h3 {
    color: var(--dark);
    line-height: 1.3;
}

/* Tables authored in the body (bare <table>, no class) — styled + responsive by default.
   blog.js wraps each table in .table-wrapper on turbo:load so a wide table scrolls
   horizontally inside the article instead of widening the page, while the table keeps its
   normal layout. Scoped to .blog-body so legal pages (.legal-table) are untouched. */
.blog-body .table-wrapper {
    max-width: 100%;
    /* As a scroll container its min-height:auto becomes 0, so the flex column (.legal-body)
       would shrink it to 0 height. flex-shrink:0 keeps it at the table's height. */
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.blog-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-xs);
}

.blog-body th,
.blog-body td {
    border: 1px solid var(--border);
    padding: 6px 8px;
    vertical-align: top;
    line-height: 1.5;
    color: var(--muted);
    text-align: left;
}

.blog-body th {
    font-weight: 600;
    color: var(--dark);
    background: #f8fafc;
}

.blog-body tbody tr:nth-child(even) td {
    background: #fbfcfe;
}

/* ── Blog: embedded lot widget (linked lot → search form, handoff to lot page)
      and the matching price table (<!-- lot-pricelist --> marker) ── */
.blog-booking-widget,
.blog-lot-prices {
    /* Full-bleed inside the padded .legal-body flex column; flex-shrink for the same
       reason as .table-wrapper above (flex column would collapse it). */
    flex-shrink: 0;
    margin: 20px -20px;
}

/* Same heading look as on the lot page: undo the .legal-body h2 article styling
   (dark, uppercase) that would otherwise override .lot-search-label here. */
.blog-booking-widget .lot-search-label,
.blog-lot-prices .lot-search-label {
    color: var(--white);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 0;
}

/* Inside the white .search-card the article-table borders/zebra (.blog-body th|td)
   are too heavy — a row-separator rule is enough. blog.js wraps this table in
   .table-wrapper like any other article table; harmless at two columns. */
.lot-prices-table,
.blog-prices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.lot-prices-table th,
.lot-prices-table td,
.blog-prices-table th,
.blog-prices-table td {
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    padding: 8px 4px;
    text-align: left;
    font-weight: 400;
    color: var(--dark);
}

.lot-prices-table thead th,
.blog-prices-table thead th {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lot-prices-table tbody tr:last-child th,
.lot-prices-table tbody tr:last-child td,
.blog-prices-table tbody tr:last-child th,
.blog-prices-table tbody tr:last-child td {
    border-bottom: 0;
}

.lot-prices-table td,
.blog-prices-table td {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

/* Carries .search-btn for the look; these are only the <a>-vs-<button> deltas
   (an anchor is inline and picks up the blue .legal-body link color). Tag +
   class matches `.legal-body a`'s specificity and wins on source order —
   a bare .blog-prices-cta would lose to it. */
a.blog-prices-cta {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: var(--white);
}

a.blog-prices-cta:hover {
    color: var(--white);
    text-decoration: none;
}

/* Two-per-row cards once there's horizontal room (tablet/desktop overlay) */
@media (min-width: 720px) {
    .blog-list,
    .blog-latest__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* ── Prices comparison grid (homepage #prices) ────────────────
   Rows = lots, columns = the lot name, one per 1–10 day stay, then identity
   (rating, distance) and the details CTA; day cells = total price. Prices
   come first because they're what the table is for — the identity columns
   are there to qualify a row you've already found.
   .prices-scroll is the single scroll container for BOTH axes so the
   sticky header (top:0) and sticky lot column (left:0) work against the
   same box and the page body never scrolls horizontally. The table must
   keep border-collapse:separate — sticky cells detach under collapse. */
.prices-grid {
    padding: 12px 16px 28px;
    scroll-margin-top: 12px;
}

/* Duration chips. Pill styling matches .sort-pill on the results page so the
   two controls read as the same component. */
.prices-days {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
}

.prices-days-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--muted);
    margin-right: 2px;
}

.prices-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.prices-day-chip:hover {
    box-shadow: var(--shadow-card-hover);
}

.prices-day-chip.is-active {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

/* The badge always inverts against the chip it sits on, so "popular" reads at
   the same strength in both states: a light pill on the blue active chip,
   and the active chip's own blue-on-white treatment on the white inactive one
   (below). Matching the chip in either direction would wash it out. */
.prices-day-chip__badge {
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--light-bg);
    color: var(--blue);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.prices-day-chip:not(.is-active) .prices-day-chip__badge {
    background: var(--blue);
    color: var(--white);
}

/* Mobile base: picking a duration isolates that column. Desktop overrides this
   to keep the whole matrix visible (see desktop.css) — one JS pass, two
   behaviours, and 820px stays declared in exactly one place. */
.is-day-hidden {
    display: none;
}

/* Non-partner lots ship in the HTML but stay folded away until asked for, so
   crawlers see every lot while visitors see the bookable ones first. */
.prices-grid.is-folded tr[data-partner="0"] {
    display: none;
}

.prices-reveal {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--blue);
    cursor: pointer;
}

.prices-reveal:hover {
    background: var(--light-bg);
}

/* The fold's counterpart. Muted, because folding back is the undo of a choice
   the visitor already made — it shouldn't compete with the table above it.
   It scrolls back to .prices-grid (pricesGrid.collapse), hence the
   scroll-margin on the grid itself. */
.prices-reveal--less {
    color: var(--muted);
}

/* Matches .section-title's inset — neither .home-prices nor .home-winners-section
   has horizontal padding of its own on mobile, so the intro carries the rail. */
.prices-intro,
.winners-intro {
    font-size: var(--fs-base);
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 14px;
    padding: 0 16px;
}

/* No max-height: the table sits mid-document on the homepage, so it grows to
   its content and the page scrolls. (A viewport-based cap only made sense back
   when this table *was* the whole page.) Horizontal scroll still lives here so
   the sticky header/lot column have a single box to stick against. */
.prices-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    scrollbar-width: thin;
}

.prices-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: var(--fs-sm);
}

.prices-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--light-bg);
    border-bottom: 1.5px solid var(--border);
    padding: 0;
}

.prices-sort-btn {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: var(--dark);
    white-space: nowrap;
    text-align: left;
}

/* Floated ::before so the arrow shares the first line — an ::after would
   wrap below the block-level .prices-days-unit and grow the header row. */
.prices-sort-btn.is-asc::before,
.prices-sort-btn.is-desc::before {
    float: right;
    font-size: 9px;
    line-height: 1.6;
    color: var(--blue);
}

.prices-sort-btn.is-asc::before {
    content: "▲";
}

.prices-sort-btn.is-desc::before {
    content: "▼";
}

.prices-days-unit {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
}

/* Sticky first column; backgrounds live on the cells (opaque), never on
   the <tr>, or content scrolls visibly behind the pinned column. */
.prices-col-lot {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--white);
    min-width: 136px;
    max-width: 170px;
    text-align: left;
    box-shadow: 2px 0 6px -2px rgba(15, 36, 96, 0.12);
}

.prices-table thead .prices-col-lot {
    z-index: 3;
    background: var(--light-bg);
}

.prices-table tbody .prices-col-lot {
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark);
}

.prices-lot-name {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.25;
    color: var(--dark);
}

/* The three lots the winner cards single out, marked again in the table so the
   cards and the grid agree. Category colours match .home-winner--*. */
.prices-lot-badge {
    --accent: var(--winner-best);
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    /* Same accent and same 12% tint as .home-winner__label, so a lot's badge
       here is the exact colour of its card above. */
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--accent);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.prices-lot-badge--cheapest {
    --accent: var(--winner-cheapest);
}

.prices-lot-badge--best {
    --accent: var(--winner-best);
}

.prices-lot-badge--closest {
    --accent: var(--winner-closest);
}

/* Freshness stamp under the lot name. Explicit weight/size so it doesn't
   inherit the bold name above it; the date itself must stay whole. */
.prices-row-dates {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--muted);
}

.prices-row-date time {
    white-space: nowrap;
}

.prices-col-lot a {
    color: var(--blue);
    text-decoration: none;
}

/* Rating + distance: identity columns, so they sit between the lot name and
   the price matrix and stay out of the heat/stripe rules (which only ever
   match .prices-cell). */
.prices-col-rating,
.prices-col-dist {
    background: var(--white);
    padding: 10px;
    text-align: left;
    white-space: nowrap;
    font-size: 12px;
    color: var(--muted);
}

.prices-rating {
    font-weight: 700;
    color: var(--dark);
}

.prices-star {
    margin-right: 3px;
    color: var(--orange);
}

.prices-reviews {
    margin-left: 4px;
    font-size: 10px;
}

/* Google Maps attribution under each score. Its own line so it never competes
   with the number for the cell's width, and the ⓘ + label stay together on it —
   the cell's white-space: nowrap already rules out a break inside the label. */
.prices-gmp {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    line-height: 1.2;
}

/* Details CTA: the explicit route to the lot page, next to the row's own
   implicit one (clicking a price opens the booking modal). */
.prices-col-cta {
    background: var(--white);
    padding: 8px 10px;
    text-align: center;
}

.prices-cta-head {
    display: block;
    padding: 8px 10px;
    font-weight: 700;
    color: var(--dark);
}

.prices-details-btn {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 8px;
    background: var(--blue);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.prices-details-btn:hover {
    background: var(--blue-dark);
}

.prices-cell {
    background: var(--white);
    text-align: right;
    white-space: nowrap;
    min-width: 72px;
    padding: 10px;
}

/* Cell grid: gray hairlines between all cells (right + bottom), visible on
   top of the heat fills since borders aren't backgrounds. */
.prices-table thead th,
.prices-table tbody td,
.prices-table tbody .prices-col-lot {
    border-right: 1px solid #dfe4ee;
}

.prices-table tr > :last-child {
    border-right: 0;
}

.prices-table tbody td,
.prices-table tbody .prices-col-lot {
    border-bottom: 1px solid #dfe4ee;
}

.prices-table tbody tr:last-child td,
.prices-table tbody tr:last-child .prices-col-lot {
    border-bottom: 0;
}

.prices-row:nth-child(even) .prices-cell,
.prices-row:nth-child(even) .prices-col-lot,
.prices-row:nth-child(even) .prices-col-rating,
.prices-row:nth-child(even) .prices-col-dist,
.prices-row:nth-child(even) .prices-col-cta {
    background: #f8faff;
}

/* Column stripes on top of the row zebra; the checkerboard stays readable
   because every second-axis tint is only a step darker. Day columns are
   the <td>s (the sticky lot <th> is child 1 and stays un-striped). */
.prices-table tbody .prices-cell:nth-child(odd) {
    background: #f4f7fd;
}

.prices-row:nth-child(even) .prices-cell:nth-child(odd) {
    background: #eef3fb;
}

.prices-row {
    cursor: pointer;
}

.prices-row:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
}

/* Row hover: a wash laid over whatever each cell already has, so it reads the
   same across the zebra stripes, the sticky lot column and the heat fills
   instead of flattening them. It has to be background-IMAGE — every cell owns
   an opaque background-color (a tint on the <tr> would never show through) and
   the heat rule sets its color per cell; a gradient composites on top of both.
   The .prices-grid/.prices-table/tbody/tr chain is only there to outweigh that
   heat rule, which would otherwise reset background-image to none — matching
   its specificity isn't enough, since it is declared further down the file.
   (hover: hover) keeps it off touch, where a tap would leave it stuck on. */
@media (hover: hover) {
    .prices-grid .prices-table tbody tr.prices-row:hover > * {
        background-image: linear-gradient(rgba(26, 86, 219, 0.055), rgba(26, 86, 219, 0.055));
    }
}

/* Price heatmap: green (cheap) → red (expensive), lightness strictly falling
   along the ramp so the direction survives red-green colorblindness; one shade
   per 300 Ft band above the column minimum (PriceGridBuilder::HEAT_BAND_HUF).
   The color arrives per cell as an inline --heat custom property — the
   background is still set HERE, so the (0,4,1) specificity keeps beating the
   stripe rules and the .is-hl-is-hl-* highlight below still wins (an inline
   background: would beat everything). Text contrast is safe by construction:
   every shade lies on the validated ramp (--dark text ≥ 7.2:1). */
.prices-grid .prices-table tbody .prices-cell.heat {
    background: var(--heat, var(--white));
}

/* Two-step tap: the first tap on a cell highlights its row + column, a
   second tap on the same cell opens the lot page / popup (pricesGrid.js).
   The .prices-grid prefix keeps these above the stripe rules AND the
   desktop :hover tint (desktop.css loads later, so it needs to lose on
   specificity, not order). */
/* Border-only marking (inset box-shadows, so no 2px layout shift and the
   heat colors stay visible): row = top+bottom bars, column = left+right
   bars, the clicked cell = full ring. Every .prices-col-lot variant must
   re-state the sticky column's separator shadow, because box-shadow
   overrides replace it. */
/* .prices-grid .prices-table .prices-row.is-hl-row .prices-cell {
    box-shadow: inset 0 1px 0 0 rgba(30, 41, 59, 0.3), inset 0 -1px 0 0 rgba(30, 41, 59, 0.3);
}

.prices-grid .prices-table .prices-row.is-hl-row .prices-col-lot {
    box-shadow: inset 0 1px 0 0 rgba(30, 41, 59, 0.3), inset 0 -1px 0 0 rgba(30, 41, 59, 0.3),
        2px 0 6px -2px rgba(15, 36, 96, 0.12);
} */

.prices-grid .prices-table .prices-row .prices-cell.is-hl-col,
.prices-grid .prices-table thead th.is-hl-col {
    box-shadow: inset 1px 0 0 0 rgba(30, 41, 59, 0.3), inset -1px 0 0 0 rgba(30, 41, 59, 0.3);
}

.prices-grid .prices-table .prices-row .prices-col-lot.is-hl-col,
.prices-grid .prices-table thead th.prices-col-lot.is-hl-col {
    box-shadow: inset 1px 0 0 0 rgba(30, 41, 59, 0.3), inset -1px 0 0 0 rgba(30, 41, 59, 0.3),
        2px 0 6px -2px rgba(15, 36, 96, 0.12);
}

/* .prices-grid .prices-table .prices-row.is-hl-row .prices-cell.is-hl-col {
    box-shadow: inset 0 0 0 1.5px rgba(30, 41, 59, 0.5);
    font-weight: 700;
}

.prices-grid .prices-table .prices-row.is-hl-row .prices-col-lot.is-hl-col {
    box-shadow: inset 0 0 0 1.5px rgba(30, 41, 59, 0.5), 2px 0 6px -2px rgba(15, 36, 96, 0.12);
} */

.prices-cell--empty {
    color: #b6c0cf;
}

.prices-row--muted .prices-col-lot {
    color: var(--muted);
    font-weight: 500;
}

/* Non-reservable lots read as disabled: price cells washed out and mostly
   desaturated (heat tint stays faintly visible). Only the <td>s — the
   sticky lot cell must keep an opaque background because content scrolls
   beneath it, so it just mutes its text above. */
.prices-row--muted .prices-cell {
    filter: grayscale(0.75);
    opacity: 0.55;
}

/* Not-reservable popup: the generic .modal-overlay is position:absolute
   (sized to the results root elsewhere); here it must cover the viewport
   and center the card. */
.prices-grid .modal-overlay {
    position: fixed;
    align-items: center;
    padding: 20px;
}

.prices-popup {
    max-width: 340px;
    border-radius: 20px;
    padding: 24px 20px 20px;
    gap: 16px;
    text-align: center;
    animation: none;
}

.prices-popup-text {
    font-size: var(--fs-md);
    color: var(--dark);
    line-height: 1.5;
    margin: 0;
}

/* The booking modal reuses the shared search-widget styles (modal-sheet,
   date-pill, stepper-*, search-btn) — no page-specific field styles. */