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

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

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


:root {
    --blue: #1a56db;
    --blue-dark: #1a4fd6;
    --blue-gradient: linear-gradient(160deg, #1a4fd6 0%, #1a56db 60%, #2563eb 100%);
    --orange: #f59e0b;
    --dark: #1e293b;
    --muted: #64748b;
    --border: #e2e8f0;
    --light-bg: #f8faff;
    --white: #ffffff;
    --body-bg: #1a3a8a;
    --green: #10b981;
    --red: #ef4444;
    --footer-link: #627891;
    --footer-muted: #788394;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Toplist Links ────────────────────────────────────────── */
.toplist-section {
    padding: 20px 20px 28px;
}

.toplist-header {
    position: relative;
    margin: 0 -20px 16px;
    overflow: hidden;
}

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

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

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

.toplist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--dark);
    text-decoration: none;
    transition: box-shadow 0.15s;
}

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

.toplist-item__icon {
    width: 32px;
    height: 32px;
    background: var(--light-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

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

/* ── Site Footer ──────────────────────────────────────────── */
.site-footer {
    margin-top: 32px;
    flex-shrink: 0;
    padding: 10px 20px 14px;
    text-align: center;
    border-top: 1px solid #f1f5f9;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 9px;
    border-bottom: 1px solid #DDD;
    padding-bottom: 10px;
}

.site-footer__links a {
    font-size: var(--fs-micro);
    color: var(--footer-link);
    text-decoration: none;
}

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

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

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

.lang-switcher {
    display: flex;
    gap: 4px;
    align-items: center;
}

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

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

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

/* ── Tagline ──────────────────────────────────────────────── */
.tagline {
    text-align: center;
}

.tagline h1 {
    color: var(--white);
    font-size: var(--fs-2xl);
    font-weight: 800;
    line-height: 1.2;
}

.tagline p,
.tagline h2 {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--fs-base);
    font-weight: 400;
    margin-top: 4px;
}

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

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

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

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

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

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

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

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

/* ── Days Chip ────────────────────────────────────────────── */
.days-chip {
    display: flex;
    justify-content: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Trust Badges ─────────────────────────────────────────── */
.badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    justify-content: center;
}

.badge-pill {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


.sort-pill {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.modal-open {
    overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── 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 ──────────────────────────────────────── */
.lot-page .page-scroll {
    background: var(--white);
}

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

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

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

.landing-intro {
    padding: 16px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Blog: embedded lot widget (linked lot → search form, handoff to lot page) ── */
.blog-booking-widget {
    /* 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 {
    color: var(--white);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 0;
}

/* 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 (/prices) ─────────────────────────
   Rows = lots, columns = 4–14 day stay, cells = total price.
   .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;
}

.prices-intro {
    font-size: var(--fs-md);
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 4px;
}

.prices-sort-hint {
    font-size: var(--fs-sm);
    color: var(--muted);
    opacity: 0.8;
    margin: 0 0 4px;
}

.prices-heat-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--muted);
    opacity: 0.8;
    margin: 0 0 12px;
}

.prices-heat-swatch {
    flex: 0 0 auto;
    width: 56px;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #d9f2c6, #f2ecab, #fbd390, #f7a869, #ee7757);
    box-shadow: inset 0 0 0 1px rgba(30, 41, 59, 0.08);
}

.prices-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100dvh - 230px);
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    scrollbar-width: thin;
}

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

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

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

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

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

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

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

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

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

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

.prices-col-lot a {
    color: var(--blue);
    text-decoration: 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 .prices-cell,
.prices-table tbody .prices-col-lot {
    border-right: 1px solid #dfe4ee;
}

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

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

.prices-table tbody tr:last-child .prices-cell,
.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 {
    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;
}

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

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

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

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

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

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

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

.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. */