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

/* WOFF2 only — every browser this project supports reads it, and it is ~63% smaller
   than the TTFs these replace (276 KB -> 102 KB across the five weights). The four
   weights that were never declared here (Black/ExtraLight/Light/Thin) are gone too:
   AssetMapper copies everything under assets/ into the build, so they shipped for
   nothing. base.html.twig preloads 400/600/700. */
@font-face { font-family: "Outfit"; src: url("../font/Outfit-Regular-dh2RNPc.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../font/Outfit-Medium-sC3dgnK.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../font/Outfit-SemiBold-fP6-0sM.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../font/Outfit-Bold-8GVDmkl.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../font/Outfit-ExtraBold-vXyy5PM.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* Inter is the text face — everything read or typed. Outfit above stays for what
   is announced: headings, prices, the main call-to-action buttons (the list is
   one rule, right after `body`). One variable file per script range, 400–700,
   split the way Google Fonts serves it; Hungarian's ő and ű, and Polish, Slovak,
   Romanian and Serbian, need the extended one, so base.html.twig preloads both.
   SIL Open Font License. */
@font-face { font-family: "Inter"; src: url("../font/Inter-latin-ext-9fzmmZy.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("../font/Inter-latin-joy4ri1.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*,
*::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, then taken down a step when the
       text face became Inter, which reads larger than Outfit at the same size:
       2px off each tier, 1px off micro and xs. The micro tier (11px) is the
       floor for normal text; the nano tier (10px) is reserved for the Google
       ratings attribution only. A form field never goes below 16px on a touch
       screen, whatever this says — see .form-input. Icon glyphs and one-off display numerals keep literal px. */
    --fs-nano:  10px;  /* Google ratings attribution ONLY */
    --fs-micro: 11px;  /* UPPERCASE micro-labels, badges/pills, footer copy, fine print */
    --fs-xs:    12px;  /* fine print, hints, captions, secondary text */
    --fs-sm:    13px;  /* secondary body */
    --fs-base:  14px;  /* body, form inputs, reading content, section titles */
    --fs-lg:    16px;  /* sub-headings, total labels, prominent buttons/CTAs */
    --fs-xl:    20px;  /* section / lot-page headings */
    --fs-2xl:   26px;  /* large headings, hero h1, prices */
}

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

/* The display face. Headings by element, the things styled as headings by
   class, every price and score, and the buttons that carry the page's one
   action. Anything not listed here is text, and text is Inter. */
h1, h2, h3,
.section-title, .modal-lot-name, .modal-form-title, .success-title, .empty-state-title,
.faq-header__title, .cta-card__title, .blog-card__title, .lot-related__title,
.hero-stat__value, .home-winner__name, .home-winner__value,
.lot-price, .pick-price, .price-total-amount, .modal-summary-price, .success-value--price,
.lot-marker__price, .prices-cell, .lot-prices-table td, .blog-prices-table td,
.lot-gallery__score, .lot-step__num, .error-code,
.search-btn, .modal-cta-btn, .modal-submit, .home-winner__cta {
    font-family: "Outfit", sans-serif;
}

/* ── 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: inherit;
    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: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    height: 28px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.15s;
}

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

.lang-switcher-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.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: inherit;
    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;
    /* One height with .datetime-pill, the other blue pill of the booking card. */
    min-height: 40px;
    padding: 0 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    width: 100%;
    font-family: inherit;
    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: inherit;
    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);
    isolation: isolate;
}

/* The freshness dot stays solid and sends out a copy of itself that spreads and
   fades — enough to read as "live", not enough to pull the eye off the search card
   next to it. The ring is the dot's ::after at z-index -1 inside the isolated line,
   so it passes behind the text instead of washing over its first letter. Shared
   with .lot-prices-dot. */
.hero-stats__dot {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
}

.hero-stats__dot::after,
.lot-prices-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: inherit;
    opacity: 0;
    pointer-events: none;
    animation: live-dot-pulse 2s cubic-bezier(.2, .65, .35, 1) infinite;
}

@keyframes live-dot-pulse {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    10% {
        opacity: 0.42;
    }
    80%,
    100% {
        opacity: 0;
        transform: scale(3.1);
    }
}

/* @media (prefers-reduced-motion: reduce) {
    .hero-stats__dot::after,
    .lot-prices-dot::after {
        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 on top carrying the category label
   and the distance, then name + rating, the lot's own pitch and the price
   beside the booking button. The accent colour is what varies between the
   three; the best-rated card alone wears it on its border and price; the button is the booking blue on all of them. */
/* 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: 6px;
}

.home-winner {
    --accent: var(--winner-best);
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 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);
}

/* The one card singled out. A ring rather than a thicker border, so all three
   keep the same box and their photos stay the same size. */
.home-winner--best,
.home-winner--lead {
    border-color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--white));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--white)), var(--shadow-card);
}

/* Cover photo by default; logo and the striped placeholder are fallbacks (same
   chain as the results cards). A fixed ratio, so three different photos still
   give three cards of one height. */
.home-winner__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2 / 1;
    background-size: cover;
    background-position: center;
}

/* The dark foot the rating's white text is read against. Taller and denser than
   the lot gallery's: a card photo is a third of that height, so the same 45% left
   the review count sitting on whatever bright sign the photo had at its base. */
.home-winner__media::after,
.pick-card-image::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.5) 45%, rgba(15, 23, 42, 0));
    pointer-events: none;
}

.home-winner__media .lot-gallery__rating,
.pick-card-image .lot-gallery__rating {
    z-index: 1;
}

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

.home-winner__media .p-icon--sm {
    width: 64px;
    height: 64px;
    font-size: 30px;
}

/* Both pills sit on a photo of unknown brightness, so each brings its own
   opaque ground. The label is the same pairing as .prices-lot-badge — accent
   text on the 12% tint — mixed into white instead of transparent, so it is
   the colour that badge shows on its white row. */
.home-winner__label,
.home-winner__dist {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}

.home-winner__label {
    top: 10px;
    left: 10px;
    padding: 7px 12px;
    background: var(--white);
    background: color-mix(in srgb, var(--accent) 12%, var(--white));
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Top right, across from the label: the foot of the photo belongs to the rating. */
.home-winner__dist {
    top: 10px;
    right: 10px;
    padding: 7px 12px;
    background: var(--white);
    box-shadow: var(--shadow-card);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--dark);
}

.home-winner__icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

.home-winner__emoji {
    font-size: 13px;
    line-height: 1;
}

.home-winner__dist .home-winner__icon {
    color: var(--blue);
}

.home-winner__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    --pad-x: 16px;
    padding: 14px var(--pad-x) 0;
}

/* Name and rating share a line while they fit; a long name pushes the rating
   under itself rather than squeezing it. */
.home-winner__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
}

.home-winner__name {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--dark);
}

/* The lots write their own pitch, anywhere from six words to three sentences.
   Clamped so the longest cannot make its card the tallest. */
.home-winner__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--muted);
}

/* Pinned to the card's foot, so the three prices line up across the row
   whatever the text above them does. The button is a span: the whole card is
   already the link to the lot page. */
.home-winner__offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* The card's foot, edge to edge: it bleeds through the body's side padding and
       the card's own rounded corners clip it. */
    margin: auto calc(-1 * var(--pad-x)) 0;
    padding: 12px var(--pad-x) 14px;
    background: var(--light-bg);
    background: color-mix(in srgb, var(--dark) 5%, var(--white));
}

.home-winner__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

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

/* margin-left: auto keeps the button on the right when a lot has no price for
   the default day and it is alone in the row. */
.home-winner__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 11px 18px;
    border-radius: 10px;
    /* Always the site's booking blue, whatever the card's accent: a book button is
       one colour everywhere. */
    background: var(--blue);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
}

.home-winner--best .home-winner__value,
.home-winner--lead .home-winner__value {
    color: var(--accent);
}

.home-winner:hover .home-winner__cta .home-winner__arrow {
    transform: translateX(3px);
}

/* 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 {
    display: inline-block;
    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;
    margin-bottom: 6px;
}

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

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

/* The all-lots page (landing/all_lots.html.twig): the same grid under a .landing-page
   header instead of a homepage section title. Edge to edge on mobile, like .home-prices. */
.all-lots-grid {
    padding: 4px 0 0;
}

/* The "is a lot missing? tell us" line under the intro: .results-disclaimer's small muted
   type, tucked up against the intro rather than a full 16px block away from it. */
.all-lots-missing {
    padding-top: 0;
    padding-bottom: 8px;
}

.all-lots-missing a {
    color: var(--blue);
    font-weight: 600;
}

/* ── Partner-lot map (partials/_lot_map.html.twig, assets/lotMap.js) ── */
.home-map {
    padding: 20px 0 0;
}

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

/* isolation: MapLibre's controls carry z-indexes of their own; a stacking
   context keeps every one of them below .modal-overlay (z 200). */
.lot-map {
    position: relative;
    isolation: isolate;
    margin: 0 16px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-card);
}

.lot-map__canvas {
    height: 320px;
    background: var(--light-bg);
}

.lot-map.is-failed .lot-map__canvas {
    display: none;
}

.lot-map .maplibregl-ctrl-attrib {
    font-size: var(--fs-nano);
}

/* Controls above every marker (the markers carry z-index 1–5 for declutter),
   so a card can never make the zoom buttons unclickable. */
.lot-map .maplibregl-ctrl-top-left,
.lot-map .maplibregl-ctrl-top-right,
.lot-map .maplibregl-ctrl-bottom-left,
.lot-map .maplibregl-ctrl-bottom-right {
    z-index: 10;
}

/* The marker: a small card (badge, name, price, distance) floating on a stem
   above a dot at the coordinate — the marker is anchored bottom, so the dot is
   the point. The accent is a winner's category colour and --dark otherwise;
   it colours the price, the stem and the dot, nothing else. */
.lot-marker {
    --accent: var(--dark);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    color: var(--dark);
    text-align: left;
    cursor: pointer;
}

.lot-marker__card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.06);
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease;
}

.lot-marker__badge {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--light-bg) center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.lot-marker__badge--letter {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 800;
    font-size: var(--fs-lg);
    box-shadow: none;
}

.lot-marker__body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Capped so a long name cannot hang past a phone's canvas edge; the button's
   aria-label carries it in full. */
.lot-marker__name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--fs-micro);
    font-weight: 700;
}

.lot-marker__price {
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 800;
}

.lot-marker__dist {
    color: var(--muted);
    font-size: var(--fs-nano);
    font-weight: 600;
}

/* The one control that books. Small on purpose: the card is the information,
   this is the action — in the hero search button's orange (.search-btn), so
   the same colour means "go" everywhere, rather than the card's category accent. */
.lot-marker__cta {
    flex: 0 0 auto;
    margin-left: 6px;
    padding: 7px 12px;
    border: 0;
    border-radius: 9px;
    background: var(--orange);
    color: var(--white);
    text-shadow: 0 0 1px #000;
    font-family: inherit;
    font-size: var(--fs-micro);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    cursor: pointer;
    transition: box-shadow .2s, opacity .2s;
}

.lot-marker__cta:hover {
    opacity: 0.93;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.8);
}

.lot-marker__cta:focus-visible {
    outline: 2px solid var(--dark);
    outline-offset: 2px;
}

/* The tail: a white triangle under the card pointing at the dot, so the card
   reads as a speech bubble at its coordinate. Tucked 1px under the card so no
   seam shows between the two; the bottom margin is the dot's 3px white ring
   plus a 2px gap, so the tip stays clear of it. */
.lot-marker__stem {
    width: 0;
    height: 0;
    margin-top: -1px;
    margin-bottom: 5px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 13px solid var(--white);
    filter: drop-shadow(0 2px 1px rgba(15, 23, 42, 0.16));
    transition: transform .15s ease;
}

.lot-marker__dot {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--white), 0 1px 4px rgba(15, 23, 42, 0.35);
    cursor: pointer;
}

/* The ripple expands independently of the marker, keeping its coordinate and
   declutter measurements fixed. The existing ::after remains the hit area. */
.lot-marker__dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: lot-marker-pulse 3.4s ease-out infinite;
    animation-delay: var(--pulse-delay, 0s);
}

@keyframes lot-marker-pulse {
    0% { transform: scale(1); opacity: 0.35; }
    75%, 100% { transform: scale(2.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lot-marker__dot::before {
        animation: none;
    }
}

.lot-marker__dot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* A finger-sized hit area around the dot, outside layout so declutter()'s
   measurement of the dot state stays the dot itself. */
.lot-marker__dot::after {
    content: '';
    position: absolute;
    inset: -10px;
}

/* The card and its tail lift together: a transform on the card alone leaves
   the tail behind and the bubble looks torn off its point. */
.lot-marker:hover .lot-marker__card {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.24), 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.lot-marker:hover .lot-marker__stem,
.lot-marker.is-selected .lot-marker__stem {
    transform: translateY(-2px);
}

/* Declutter states (assets/lotMap.js): a marker that would overlap a
   higher-priority card shows its logo badge alone, or just its dot. Hover and
   focus bring the full card back, so these rules come before the hover ones. */
.lot-marker.is-compact .lot-marker__body,
.lot-marker.is-compact .lot-marker__cta {
    display: none;
}

.lot-marker.is-compact .lot-marker__card {
    padding: 3px;
    border-radius: 11px;
}

.lot-marker.is-compact .lot-marker__badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.lot-marker.is-dot .lot-marker__card,
.lot-marker.is-dot .lot-marker__stem {
    display: none;
}

.lot-marker:hover,
.lot-marker:focus-within {
    z-index: 5 !important;
}

.lot-marker:hover .lot-marker__card,
.lot-marker:focus-within .lot-marker__card {
    display: flex;
    padding: 6px 12px 6px 6px;
    border-radius: 14px;
}

.lot-marker:hover .lot-marker__stem,
.lot-marker:focus-within .lot-marker__stem {
    display: block;
}

.lot-marker:hover .lot-marker__body,
.lot-marker:focus-within .lot-marker__body {
    display: flex;
}

.lot-marker:hover .lot-marker__cta,
.lot-marker:focus-within .lot-marker__cta {
    display: inline-block;
}

.lot-marker:hover .lot-marker__badge,
.lot-marker:focus-within .lot-marker__badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

/* Pinned open by a click: an accent ring says which one, and the hover lift
   stays on. */
.lot-marker.is-selected .lot-marker__card {
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px var(--accent), 0 6px 18px rgba(15, 23, 42, 0.24);
}

/* The same three accents as .home-winner--* and .prices-lot-badge--*. */
.lot-marker--cheapest { --accent: var(--winner-cheapest); }
.lot-marker--best     { --accent: var(--winner-best); }
.lot-marker--closest  { --accent: var(--winner-closest); }

.lot-map__airport {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark);
    color: var(--white);
    font-size: 18px;
    box-shadow: var(--shadow-card);
}

.lot-map__attribution {
    margin: 0;
    padding: 6px 12px;
    font-size: var(--fs-nano);
    color: var(--muted);
}

.lot-map__attribution a {
    color: inherit;
}

.lot-map__fallback {
    margin: 0;
    padding: 12px 16px 12px 32px;
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* 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-topbar > .results-logo { order: 0; }
.results-topbar > .lang-switcher,
.hero .top-bar > .lang-switcher { order: 2; }
.hero .top-bar { gap: 10px; }
.hero .top-bar > .logo { flex-shrink: 0; }

/* The bar's three links. On the phone they fold behind a menu button at the
   right end of the bar and open as a dropdown hanging from it — the same white
   card as the language menu, laid over the page rather than pushing it down.
   The bar is the positioning box: .top-nav itself is `display: contents`.
   desktop.css lays the links out in the bar, beside the logo, and drops the
   button. */
.results-topbar,
.hero .top-bar {
    position: relative;
}

.top-nav {
    display: contents;
}

.top-nav__toggle {
    order: 3;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    cursor: pointer;
}

/* Logo, phone, language and menu are 12px wider than a 320px screen at the
   bar's normal 10px gap. */
@media (max-width: 340px) {
    .results-topbar,
    .hero .top-bar {
        gap: 6px;
    }
}

.top-nav__toggle:hover { background: rgba(255, 255, 255, 0.22); }
.top-nav__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.top-nav__toggle svg { width: 18px; height: 18px; }

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

/* .results-topbar pads itself, so its right edge is 16px outside the button's;
   the home hero's bar has no padding of its own. */
.results-topbar > .top-nav > .top-nav__menu {
    top: calc(100% - 6px);
    right: 16px;
}

.top-nav__menu.is-open {
    display: flex;
}

.top-nav__link {
    padding: 11px 12px;
    border-radius: 8px;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--dark);
    text-decoration: none;
    white-space: nowrap;
}

.top-nav__link:hover,
.top-nav__link[aria-current="page"] {
    background: var(--light-bg);
    color: var(--blue);
}

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

.header-support {
    order: 1;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 28px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    cursor: pointer;
}

/* Reserve the compact slot while availability loads to avoid moving header controls. */
.header-support[hidden] { display: inline-flex; visibility: hidden; }
.header-support:hover { background: rgba(255, 255, 255, 0.22); }
.header-support:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.header-support svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 479px) {
    .header-support {
        width: 32px;
        padding: 0;
        flex-shrink: 0;
    }
    .header-support [data-header-support-number] { display: none; }

    /* Icon only, so nothing says what it is for: green and pulsing, the way the
       support widget's badge is while someone is there to answer. The button is
       only ever visible in that state (supportWidget.js hides it otherwise). */
    .header-support:not([hidden]) {
        background: var(--green);
        border-color: rgba(255, 255, 255, 0.55);
        animation: header-support-pulse 2.4s ease-out infinite;
    }
    .header-support:not([hidden]):hover { background: #0ea371; }
}

@keyframes header-support-pulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
    55%, 100% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .header-support:not([hidden]) { animation: none; }
}

.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: 10px 12px 10px 14px;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 6px 14px;
    color: var(--dark);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

/* Arrival and departure. */
.rsb-stay {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.rsb-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rsb-label {
    font-size: var(--fs-micro);
    color: var(--muted);
}

.rsb-value {
    font-size: var(--fs-base);
    font-weight: 700;
    white-space: nowrap;
}

/* A phone has room for the short date only; desktop.css swaps them. */
.rsb-long { display: none; }

.rsb-counts {
    display: flex;
    gap: 14px;
    margin-left: auto;
}

.rsb-counts .rsb-value { text-align: center; }

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

.rsb-edit svg {
    width: 14px;
    height: 14px;
}

.results-summary-bar:hover .rsb-edit {
    background: var(--blue-dark);
}

/* Narrow phones: the counts are in the edit modal one tap away; the dates and the
   button are what must stay on one line. */
@media (max-width: 419px) {
    .rsb-counts { display: none; }
    .rsb-edit { margin-left: auto; }
}

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

.rf-map {
    display: none;
}

/* ── 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: inherit;
}

.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;
    /* One row that scrolls sideways: the filters outgrew the two wrapped rows they
       had, and every extra row pushed the first result further down the screen. */
    overflow-x: auto;
    scrollbar-width: none;
}
.results-meta-bar--filters::-webkit-scrollbar { display: none; }

/* The filter panel's desktop-only parts (heading, group titles, checkboxes, counts,
   support box) share the markup of these pill bars; desktop.css section 4 reveals
   them. An option that would leave no result is not offered as a pill at all. */
.rf-head,
.rf-group-title,
.rf-check,
.rf-count,
.rf-support,
.rf-opt--none {
    display: none;
}
.rf-group { display: contents; }
/* What is switched on leads the row, so it is never scrolled out of sight. */
.rf-opt.active { order: -1; }
.rf-clear-pill {
    order: -2;
    background: var(--white);
    color: var(--blue);
    border-color: var(--blue);
}

/* The fold around the lots that cannot be booked here, with the price grid's own
   reveal buttons. The buttons take the page's side inset on a phone; desktop.css
   drops it, where .results-content is already inside the rail. */
.results-fold .prices-reveal {
    width: calc(100% - 32px);
    margin: 12px 16px 20px;
}

/* ── 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
    );
}

/* The results page's winner card is a <div> opening the modal, with a real button. */
.home-winner--modal { cursor: pointer; }
button.home-winner__cta {
    border: 0;
    cursor: pointer;
}
.pick-card-body .pick-lot-link { margin-bottom: 12px; }
.pick-card-body .pick-card-desc:has(+ .pick-lot-link) { margin-bottom: 6px; }

/* ── 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);
}

/* The Top Picks row holds the homepage's winner cards (.home-winner), two of them,
   side by side and scrolling when the row is too narrow for both. */
.top-picks-scroll .home-winner {
    flex: 0 0 auto;
    width: min(86%, 320px);
}

/* ── 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 .home-winner {
        width: max(260px, calc(50% - 8px));
    }
}

.pick-card-image {
    position: relative;
    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-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: 8px;
}

.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;
}

/* The lot's own pitch, clamped so a long one cannot make its card the tallest. */
.pick-card-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin-bottom: 12px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--muted);
}

.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;
}

/* The offer: the card's grey foot, edge to edge — total for the stay and the
   book button. Desktop turns it into the card's
   right-hand column (desktop.css). */
.pick-card-list .pick-card {
    display: flex;
    flex-direction: column;
}

.pick-card-list .pick-card-body {
    flex: 1;
    padding-bottom: 4px;
}

.pick-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 14px;
    background: var(--light-bg);
    background: color-mix(in srgb, var(--dark) 5%, var(--white));
}

.pick-offer-price {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pick-offer-label {
    font-size: var(--fs-xs);
    color: var(--muted);
}

.pick-price {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--dark);
    line-height: 1.1;
    white-space: nowrap;
}

.pick-offer-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

button.pick-book-btn {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

/* Under the description, on the partner cards and the Top Picks alike. */
.pick-lot-link {
    align-self: flex-start;
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

.pick-lot-link:hover {
    text-decoration: underline;
}

.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: inherit;
    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: inherit;
    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;
    /* Edge to edge in the sheet, like the lot page's photo in its card. */
    margin: 0 0 14px;
    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%;
    background-size: cover;
    background-position: center;
}

.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: 10px;
}

.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: 5px;
}

.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: 12px;
    padding: 10px 14px;
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--dark);
    width: 100%;
    transition: border-color 0.15s;
    outline: none;
}

/* iOS zooms the page when a focused field's text is under 16px, so on a touch
   screen a field keeps 16px whatever the type scale says. */
@media (max-width: 819px) {
    .form-input {
        font-size: 16px;
    }
}

.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 when an invoice is requested or the lot requires billing
   details. 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: 10px;
}

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

/* Blue datetime pill (date from search + editable time) */
.datetime-pill {
    background: var(--blue);
    border-radius: 10px;
    min-height: 40px;
    padding: 0 12px;
    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: inherit;
    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: inherit;
        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: inherit;
    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: inherit;
    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-wrap {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    margin-bottom: 4px;
}

.success-tick {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.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: inherit;
    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: inherit;
    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;
}

/* ── 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;
}

/* A second paragraph of intro: each one carries its own 16px block, which between two
   of them is a 32px hole. */
.landing-intro--next {
    padding-top: 0;
}

/* The head of a landing page (the toplists, the all-lots table): back button, h1 and
   intro on one blue band. It starts at the topbar's own --blue so the two read as a
   single header with no seam, eases to the hero gradient's lighter end, and closes on a
   rounded edge — the page's content cards begin below it on the pale background.
   Without it the title and intro were loose text floating above the first white card.
   White on #2563eb is 5.2:1; the softened intro and note stay above 4.5:1.

   Plain colour on purpose. The homepage hero's photo was tried here under a 76% overlay
   and rolled back: that photo works behind a headline, not behind paragraphs of 16px
   body copy, which is what this band carries. */
.landing-hero {
    margin-bottom: 16px;
    padding-bottom: 6px;
    background: linear-gradient(180deg, var(--blue) 0%, #2563eb 100%);
    border-radius: 0 0 22px 22px;
    color: var(--white);
}

.landing-hero .modal-lot-name {
    color: var(--white);
}

.landing-hero .landing-intro {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

/* Same translucent treatment as the topbar's own buttons, which sit on the same blue. */
.landing-hero .modal-back-btn {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--white);
}

.landing-hero .modal-back-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.landing-hero .results-disclaimer {
    color: rgba(255, 255, 255, 0.85);
}

.landing-hero .all-lots-missing a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.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. */
/* The photo runs edge to edge in its card, so the card clips it and carries no
   padding of its own; the facts row underneath brings its own. */
.lot-gallery-card {
    margin: 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* ── Lot page: header band ─────────────────────────────────── */
/* Name, address and distance above both columns. Shares .lot-page-name-row
   (back arrow + h1) with every other page's header; the name may wrap under
   it on a phone, so the row wraps and the pill follows the name. */
.lot-hero {
    padding: 16px 16px 0;
}

.lot-hero .lot-page-name-row {
    flex-wrap: wrap;
    gap: 8px 12px;
}

/* The "confirmed" pairing from :root — the same green as an available lot. */
.lot-hero__pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--status-success-bg);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--status-success-text);
    white-space: nowrap;
}

.lot-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.lot-gallery {
    position: relative;
    aspect-ratio: 16 / 10;
    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; }

/* Laid over the photo: badges top left, rating bottom left, position in the
   set bottom right. The badges and the counter are dark glass; the rating
   reads off a gradient that darkens the foot of the stage, whatever the photo.
   All above the media (z-index 2) and below the arrows. The results modal's
   stage (.modal-lot-swiper) wears the same set. */
/* A photo is a slide, not something to pick up: without this a mouse press
   and move lifts a ghost of the image (and selects it on a double click).
   The markup's draggable="false" does the same for Firefox. */
.lot-gallery__media,
.modal-swiper-media {
    -webkit-user-drag: none;
    user-select: none;
}

.lot-gallery::after,
.modal-lot-swiper::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0));
    pointer-events: none;
    z-index: 2;
}

.lot-gallery__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 3;
}

.lot-gallery__badge,
.lot-gallery__count {
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.78);
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
}

.lot-gallery__count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
}

.lot-gallery__rating {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
}

.lot-gallery__score {
    padding: 6px 9px;
    border-radius: 8px;
    background: var(--white);
    font-size: var(--fs-lg);
    font-weight: 800;
    line-height: 1;
    color: var(--dark);
}

.lot-gallery__rating-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lot-gallery__reviews {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-micro);
    color: var(--white);
}

/* The attribution's own grey is for a light ground. */
.lot-gallery__rating .GMP-attribution,
.lot-gallery__rating .GMP-info-icon {
    color: rgba(255, 255, 255, 0.85);
}

/* A playing video owns the stage: its controls sit exactly where the rating
   and the counter do. */
.is-playing::after,
.is-playing > .lot-gallery__badges,
.is-playing > .lot-gallery__rating,
.is-playing > .lot-gallery__count {
    display: none;
}

.lot-gallery__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
}

/* The card around the (untouched) search widget and the reservation result it
   reveals. Its parent, .lot-booking-col, is only a box for desktop.css to place
   in the side column and for this card to stick inside. */
.lot-booking-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px;
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

/* One white card for the whole booking: the search widget, the form it opens
   and the assurances. So everything inside drops the chrome it wears where it
   stands alone — the widget's blue frame, the form's own padding and its
   sticky-footer shadow (there is no scroll box here for a footer to float
   over). Scoped to this column: the blog widgets and the results modal keep
   theirs. */
.lot-booking-card > .lot-page-search {
    padding: 0;
    background: none;
}

.lot-booking-col .lot-search-label {
    font-size: var(--fs-lg);
    color: var(--dark);
}

.lot-booking-col .search-card {
    padding: 0;
    border: 0;
}

.lot-booking-card > .lot-search-result {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.lot-booking-col .modal-form {
    overflow: visible;
}

.lot-booking-col .modal-form-scroll {
    padding: 0;
    overflow: visible;
}

.lot-booking-col .modal-form-footer {
    padding: 16px 0 0;
    box-shadow: none;
}

.lot-booking-col .form-label {
    font-size: var(--fs-xs);
    letter-spacing: 0;
    text-transform: none;
}

/* Some labels are written lower-case and relied on the uppercase transform. */
.lot-booking-col .form-label::first-letter,
.lot-booking-col .form-label > span:first-child::first-letter {
    text-transform: uppercase;
}

.lot-booking-col .form-input {
    background: var(--light-bg);
    border-radius: 10px;
}

/* The card's one dark, full-width action, as on the home winner cards. */
.lot-booking-col .modal-submit {
    border-radius: 12px;
    background: var(--dark);
    box-shadow: none;
}

.lot-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
    font-size: var(--fs-micro);
    color: var(--muted);
}

/* "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-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: 8px;
}

.lot-service {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--light-bg);
    border: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--dark);
}

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

/* The home page's four steps as numbered tiles — same tile as .lot-service,
   stacked on the phone, two across on desktop. */
.lot-steps__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lot-step {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 10px;
    background: var(--light-bg);
    border: 1px solid var(--border);
}

.lot-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    border-radius: 999px;
    background: var(--dark);
    font-size: var(--fs-micro);
    font-weight: 700;
    color: var(--white);
}

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

.lot-step__sub {
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--muted);
}

/* 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.
   .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);
    isolation: isolate;
}

/* Reuses the hero's pulse (the ::after ring is declared with .hero-stats__dot):
   slow enough to read as "live" without pulling the eye off the page. */
.lot-prices-dot {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
}

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

/* ── Lot page: related articles ────────────────────────────── */
/* The articles written about this lot. Deliberately not .blog-card: that is a
   bordered white card, and nesting one inside .lot-panel's bordered white card
   reads as a box in a box — worse in the ~400px sidebar this lives in on
   desktop. A thumbnail-plus-title row separated by hairlines says the same
   thing in a third of the height. */
.lot-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lot-related__item + .lot-related__item {
    border-top: 1px solid var(--border);
}

.lot-related__link {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    text-decoration: none;
    color: inherit;
}

.lot-related__link:hover .lot-related__title,
.lot-related__link:focus-visible .lot-related__title {
    color: var(--blue);
}

/* Fixed box so a missing or slow cover can't reflow the list, and so rows with
   and without one keep the same text column. */
.lot-related__media {
    flex: 0 0 auto;
    width: 88px;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--light-bg);
}

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

.lot-related__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

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

.lot-related__title {
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.35;
    color: var(--dark);
    transition: color 0.15s;
}

/* Same treatment as the home strip's "all articles" link, over the hairline
   that closes the list. */
.lot-related__all {
    display: inline-block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    width: 100%;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

/* ── 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;
    /* Cover images are uploaded, so their intrinsic size is unknown at render time and
       no width/height attributes can be written. Reserving the ratio here is what stops
       the article reflowing when the cover loads — same approach as .blog-card__media. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.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;
}

/* The stay-length picker row: a label and the dropdown below. */
.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;
}

/* Stay-length dropdown. The trigger is the pill the active chip used to be — same
   shape as .sort-pill on the results page — and the menu is the language switcher's
   white card, so neither is a new component to learn. */
/* On a phone the menu hangs off the ROW, not the trigger: the trigger sits after the
   label, and a 280px menu starting there runs into the screen edge. Desktop re-anchors
   it to the trigger (desktop.css). */
.prices-days {
    position: relative;
}

.prices-day-select {
    position: static;
}

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

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

.prices-day-chev {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.15s;
}

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

/* Column-first grid: 1–7 down the left, 8–14 down the right (--rows comes from the
   template, so a different day range needs no edit here). Above the table's sticky
   header (z-index 3), below the modals. */
.prices-day-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--rows, 7), auto);
    gap: 2px 6px;
    padding: 6px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 36, 96, 0.18);
}

.prices-day-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 132px;
    min-height: 36px;
    padding: 6px 10px;
    background: none;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
}

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

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

/* The badge always inverts against the row it sits on, so "popular" reads at the same
   strength in both states: blue-on-white normally, a light pill on the blue active row. */
.prices-day-badge {
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--blue);
    color: var(--white);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.prices-day-opt.is-active .prices-day-badge {
    background: var(--light-bg);
    color: var(--blue);
}

/* 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,
.map-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;
}

/* Mouse drag-to-scroll (pricesGrid.js enableDragScroll).
   While the table overflows, the rows show the four-way arrow instead of their usual
   pointer: "you can pull this" is the thing a mouse user cannot otherwise discover, and a
   click on the row still books exactly as before. Links, buttons and the range
   placeholders set their own cursor and keep it — a drag cannot start on the first two,
   and the placeholder's job is its click. Gated on a real mouse, since touch never drags.
   A table that fits never gets .is-draggable, so it keeps the pointer.
   The dragging rule is !important because it has to win over every cell, link and
   button the pointer crosses mid-drag. */
@media (hover: hover) and (pointer: fine) {
    .prices-scroll.is-draggable .prices-row {
        cursor: move;
    }
}

.prices-scroll.is-dragging,
.prices-scroll.is-dragging * {
    cursor: grabbing !important;
    user-select: none;
}

.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);
}

/* The collapsed-range placeholder columns are a desktop device (desktop.css): a phone
   shows one day column at a time, so there is nothing to collapse. */
.prices-ph {
    display: none;
}

.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 band above the column minimum; the band width is per currency (PriceGridBuilder::HEAT_BANDS).
   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. */

/* ── Call-to-action row and card ─────────────────────────────
   A row of .search-btn buttons (the hero's orange one and a ghost twin for a blue
   background), and a card in the hero's blue that carries a title, a line of text and
   that row — the closing ask of a page. Written for the partner pages, named for any. */
.cta-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px 16px;
}

.cta-row .search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

.search-btn--ghost {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
    text-shadow: none;
}

.search-btn--ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

/* The number and the address stay whole; the label in front of them wraps instead. */
.cta-nowrap {
    white-space: nowrap;
}

/* The card. Centred on a desktop (desktop.css). */
.cta-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 0 8px;
    border-radius: 22px;
    background: var(--blue-gradient);
    color: var(--white);
}

.cta-card__title,
.cta-card__text {
    padding: 0 16px;
}

.cta-card__title {
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1.25;
}

.cta-card__text {
    font-size: var(--fs-base);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

.cta-card .cta-row {
    padding-top: 8px;
}

/* ── Partner pages (/hu/budapest/parkoloknak, /hu/budapest/partnerprogram) ──
   Built from the site's own parts: the landing pages' head (.landing-hero) opens and
   closes the page, the homepage's .step-row cards carry the reasons, .section-title
   heads each section, .cta-row / .cta-card (above) are the asks and .error-home-btn
   the blue button. What is here is the layout between them, and the one thing the site
   had nowhere: the sketch of a partner's page around the live widget. */
.partner-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 8px 16px 32px;
}

.partner-main .section-title {
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 0;
}

.partner-lead {
    margin-top: 6px;
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--muted);
}

.partner-grid {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.partner-grid .step-row {
    margin: 0;
}

/* Larger than the homepage's four steps: each of these carries a paragraph, not a line. */
.partner-grid .step-text strong {
    font-size: var(--fs-lg);
}

.partner-grid .step-text span {
    font-size: var(--fs-base);
    line-height: 1.6;
}

/* ParkMotion: their wordmark, their sentence, one button to their site. */
.partner-ecosystem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: 16px;
    padding: 28px 20px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    text-align: center;
}

.partner-ecosystem__body > * + * {
    margin-top: 12px;
}

.partner-ecosystem p {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--muted);
}

.partner-logo {
    display: block;
    width: min(100%, 300px);
}

.partner-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* The sketch of a partner's page around the live widget: a browser bar, the site's own
   header band, an article column of grey placeholder blocks, and the widget in the
   site's colour with a dashed outline marking what the partner embeds. Content first,
   widget beside it from the desktop breakpoint (desktop.css). */
.partner-widget-demo {
    margin-top: 16px;
}

.partner-mock {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow-card);
}

.partner-mock__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--border);
}

.partner-mock__bar > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.partner-mock__url {
    flex: 1;
    margin-left: 8px;
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--white);
    font-size: var(--fs-micro);
    color: var(--muted);
}

.partner-mock__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: #0f766e;
}

.partner-mock__logo {
    width: 96px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
}

.partner-mock__links {
    display: flex;
    gap: 10px;
}

.partner-mock__page {
    display: grid;
    gap: 24px;
    padding: 16px;
}

.partner-mock__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.partner-mock__image {
    aspect-ratio: 16 / 7;
    margin-bottom: 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

/* Every placeholder bar: the nav links (white on the header band), the text lines, and
   a taller, wider one for a title. */
.partner-mock__links > span,
.partner-mock__line {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: var(--border);
}

.partner-mock__links > span {
    width: 40px;
    background: rgba(255, 255, 255, 0.45);
}

.partner-mock__line {
    width: 90%;
}

.partner-mock__line--title {
    width: 60%;
    height: 16px;
    background: #cbd5e1;
}

.partner-mock__line--short {
    width: 45%;
}

.partner-mock__line--gap {
    margin-top: 12px;
}

/* Full width of the sketched page: the widget caps itself at 850px and centres past
   that (docs/WIDGET.md), and a rule of our own on the element is the documented way
   to override it. The padding keeps its own card off the dashes. */
.partner-mock parkolow-booking {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px;
    border: 2px dashed #0f766e;
    border-radius: 16px;
}

/* The footer's partners column: the two pages above, the partner companies below. */
.site-footer__item--group-end:not(:last-child) {
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}