/* ---------------------------------------------------------------------
   Car24 — "Obsidian marketplace" design system (ported from /theme).
   Dark theme is the default; light theme via [data-theme="light"] on <html>.
   Fonts: Archivo (display), Manrope (body), IBM Plex Mono (labels/badges).
   --------------------------------------------------------------------- */

:root {
    /* Brand accent taken from the AutoSale logo (#B94A15 burnt orange); ink is
       the logo's near-white so text on accent stays legible. */
    --accent: #B94A15;
    --accent-ink: #F8FAFE;
    --accent-soft: rgb(185 74 21 / 0.16);
    --accent-ring: rgb(185 74 21 / 0.32);
    /* Accent used AS TEXT: the brand orange reads fine on light surfaces but
       only hits ~3.3:1 on the dark theme, so dark overrides this to a
       lighter shade (see the [data-theme] blocks below). */
    --accent-text: #B94A15;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --control-height: 42px;
    --control-height-sm: 34px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    --font-body: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-disp: Archivo, Manrope, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

/* Dark */
:root[data-theme="dark"] {
    color-scheme: dark;
    --accent-text: #E8763A; /* lighter orange: >=4.5:1 on the dark background */
    --bg: oklch(0.135 0.006 265);
    --bg-hi: oklch(0.19 0.02 265);              /* radial glow top-left */
    --surface: oklch(0.185 0.01 265);           /* cards */
    --surface-2: oklch(0.165 0.008 265);        /* page panels / header */
    --surface-3: oklch(0.21 0.012 265);         /* raised panels */
    --field-bg: oklch(0.175 0.01 265);          /* inputs */
    --border: oklch(0.30 0.012 265);
    --border-soft: oklch(0.24 0.012 265);
    --text: oklch(0.92 0.006 265);
    --text-strong: oklch(0.965 0.004 265);
    --muted: oklch(0.66 0.012 265);
    --muted-2: oklch(0.56 0.012 265);
    --shadow-card: 0 22px 40px -26px rgba(0, 0, 0, 0.85);
    --shadow-pop: 0 24px 44px -20px rgba(0, 0, 0, 0.8);

    --ok: oklch(0.85 0.14 150);      --ok-bg: oklch(0.6 0.14 150 / 0.16);
    --warn: oklch(0.86 0.13 85);     --warn-bg: oklch(0.65 0.13 85 / 0.16);
    --err: oklch(0.78 0.16 25);      --err-bg: oklch(0.55 0.18 25 / 0.18);
    --info: oklch(0.8 0.1 265);      --info-bg: oklch(0.55 0.12 265 / 0.2);
    --danger: oklch(0.72 0.18 25);
}

/* Light (default) */
:root, :root[data-theme="light"] {
    color-scheme: light;
    --bg: oklch(0.985 0.006 265);
    --bg-hi: oklch(0.94 0.02 265);
    --surface: oklch(1 0 0);
    --surface-2: oklch(0.965 0.008 265);
    --surface-3: oklch(0.945 0.01 265);
    --field-bg: oklch(0.985 0.005 265);
    --border: oklch(0.86 0.012 265);
    --border-soft: oklch(0.91 0.012 265);
    --text: oklch(0.24 0.006 265);
    --text-strong: oklch(0.165 0.004 265);
    --muted: oklch(0.47 0.012 265);
    --muted-2: oklch(0.55 0.012 265);
    --shadow-card: 0 18px 34px -24px rgba(16, 24, 40, 0.35);
    --shadow-pop: 0 20px 40px -22px rgba(16, 24, 40, 0.3);

    --ok: oklch(0.45 0.13 150);      --ok-bg: oklch(0.6 0.14 150 / 0.14);
    --warn: oklch(0.5 0.12 80);      --warn-bg: oklch(0.7 0.13 85 / 0.18);
    --err: oklch(0.5 0.17 25);       --err-bg: oklch(0.6 0.18 25 / 0.13);
    --info: oklch(0.45 0.12 265);    --info-bg: oklch(0.55 0.12 265 / 0.13);
    --danger: oklch(0.55 0.2 25);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scrollbar-color: var(--border) transparent; }
/* Belt-and-suspenders against horizontal "float" on mobile: clip (not hidden,
   so position: sticky still works) any stray element that pokes past the edge. */
html, body { overflow-x: clip; max-width: 100%; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

body {
    font-family: var(--font-body);
    margin: 0;
    background-color: var(--bg);
    background-image: radial-gradient(1200px 700px at 20% -10%, var(--bg-hi), var(--bg));
    background-repeat: no-repeat;
    color: var(--text);
    line-height: 1.55;
    font-size: 14.5px;
}
.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 { font-family: var(--font-disp); color: var(--text-strong); }
h1 { font-size: 32px; font-weight: 900; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 var(--space-3); }
h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 var(--space-3); }
h3 { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 var(--space-2); }
.home-tagline { color: var(--muted); font-size: 15.5px; max-width: 560px; margin: -4px 0 var(--space-6); }

a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-text); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
    position: sticky; top: 0; z-index: 50;
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 16px; padding: 14px 20px;
}
.logo {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-disp); font-weight: 800; font-size: 20px; letter-spacing: -0.01em;
    color: var(--text-strong); text-decoration: none;
}
/* Mark's car body follows the theme via currentColor (light on dark, dark on
   light); the wheels stay brand-orange. */
.logo-mark { width: 34px; height: 34px; flex: 0 0 auto; color: var(--text-strong); }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.main-nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.main-nav a:hover { color: var(--text-strong); }
.main-nav a.nav-cta {
    background: var(--accent); color: var(--accent-ink);
    font-weight: 700; padding: 9px 16px; border-radius: var(--radius-md);
}
.main-nav a.nav-cta:hover { color: var(--accent-ink); filter: brightness(0.93); }
.main-nav a.active { color: var(--text-strong); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* Account dropdown (native <details>; main.js closes it on outside click). */
.nav-account { position: relative; }
.nav-account summary {
    list-style: none; cursor: pointer; color: var(--muted);
    font-size: 14px; font-weight: 600; white-space: nowrap;
}
.nav-account summary::-webkit-details-marker { display: none; }
.nav-account summary::after { content: " ▾"; font-size: 11px; }
.nav-account summary:hover, .nav-account[open] summary { color: var(--text-strong); }
.nav-menu {
    position: absolute; right: 0; top: calc(100% + 12px); z-index: 60;
    min-width: 210px; display: flex; flex-direction: column; padding: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-pop);
}
.nav-menu a {
    padding: 10px 12px; border-radius: 8px; color: var(--text) !important;
    font-weight: 500 !important; white-space: nowrap;
}
.nav-menu a:hover { background: var(--surface-3); color: var(--text-strong) !important; }
.nav-badge {
    display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 2px;
    border-radius: 999px; background: var(--accent); color: var(--accent-ink);
    font-size: 10.5px; font-weight: 700; text-align: center; vertical-align: 1px;
}

.lang-switcher {
    display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
}
.lang-switcher a { padding: 7px 9px; margin: 0; color: var(--muted); text-decoration: none; }
.lang-switcher a + a { border-left: 1px solid var(--border); }
/* !important + specific colors so the selected language stays legible on every
   theme (the generic .main-nav a.active rules must not bleed in and wash it out). */
.lang-switcher a.active { background: var(--accent) !important; color: var(--accent-ink) !important; border-bottom: none !important; }

.theme-toggle {
    width: 36px; height: 36px; min-height: unset; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-3); color: var(--text); cursor: pointer;
    font-size: 15px; line-height: 1;
}
.theme-toggle::before { content: "☀\FE0E"; }
:root[data-theme="light"] .theme-toggle::before { content: "☾"; }
.theme-toggle:hover { border-color: var(--muted-2); opacity: 1; }

/* Mobile hamburger: hidden on desktop (nav is inline there), shown < 640px. */
.nav-toggle {
    display: none; width: 42px; height: 42px; min-height: unset; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-3); color: var(--text); cursor: pointer;
    font-size: 20px; line-height: 1;
}
.nav-toggle::before { content: "\2630"; }               /* ☰ */
.site-header.nav-open .nav-toggle::before { content: "\2715"; } /* ✕ */
.nav-toggle:hover { border-color: var(--muted-2); }

/* Top-bar theme toggle: only shown on mobile (desktop uses the in-nav one). */
.theme-toggle--bar { display: none; }

main.container { padding-top: 28px; padding-bottom: 64px; min-height: 60vh; }

.flash { padding: 11px 15px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.flash-success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bg); }
.flash-error { background: var(--err-bg); color: var(--err); border-color: var(--err-bg); }

/* ---------------------------------------------------------------------
   Forms — one consistent height/radius for every text-like control.
   --------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea {
    font: inherit;
    font-family: var(--font-body);
    /* 16px so iOS Safari doesn't auto-zoom the page when a field gains focus
       (it zooms whenever a focused control's text is under 16px). */
    font-size: 16px;
    line-height: 20px;
    height: var(--control-height);
    margin: 0;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--field-bg);
    color: var(--text);
    width: 100%;
    vertical-align: middle;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { height: auto; min-height: 96px; padding-top: 10px; padding-bottom: 10px; }
::placeholder { color: var(--muted-2); opacity: 1; }

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808697' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}
select::-ms-expand { display: none; }

/* select2 replaces each native <select> with its own widget and hides the real
   control with .select2-hidden-accessible. Our `.filter-form select { width:auto }`
   was more specific than select2's width rule, so the hidden selects escaped to
   full width at an offset and caused horizontal scroll on mobile. Force them
   back to the accessible 1px clip. */
select.select2-hidden-accessible {
    position: absolute !important; width: 1px !important; height: 1px !important;
    /* min-width:0 is essential - .filter-form select sets min-width:100% on
       mobile, which would otherwise beat width:1px and re-inflate the hidden
       control to full width (the real cause of the horizontal float). */
    min-width: 0 !important; max-width: 1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important;
    padding: 0 !important; border: 0 !important; margin: 0 !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):hover,
select:hover, textarea:hover { border-color: var(--muted-2); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); }

.form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
/* The post/edit-an-ad forms: use the full container width. They carry far more
   fields than a login box, and the equipment checkboxes and photo dropzone lay
   out into more columns the more room they get. */
.form--wide { max-width: 100%; }
.form label { display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.form label input, .form label select, .form label textarea { font-size: 16px; letter-spacing: normal; text-transform: none; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row label { flex: 1; min-width: 160px; }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 8px !important; text-transform: none !important; letter-spacing: normal !important; font-size: 14px !important; color: var(--text) !important; }
.checkbox-row input { width: auto; }
.inline-form { display: inline-block; }

.status-filter-link {
    display: inline-block; margin: 0 8px 8px 0; padding: 7px 13px;
    border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
    text-decoration: none; color: var(--text); font-size: 13px;
}
.status-filter-link:hover { border-color: var(--muted-2); color: var(--text-strong); }
.status-filter-link.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }

.feature-fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--surface-2); }
.feature-fieldset legend { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0 6px; }

/* The sign-up block a guest gets at the foot of the ad form. Same frame as the
   equipment fieldset, but with the accent border - it is the one part of the
   page that isn't about the car, and the eye needs to find it before the
   button. */
.signup-fieldset {
    border: 1px solid var(--accent); border-radius: var(--radius-md);
    padding: 14px 16px 18px; background: var(--surface-2);
    display: flex; flex-direction: column; gap: 14px;
}
.signup-fieldset legend { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-strong); padding: 0 6px; }
.signup-fieldset .form-hint { margin: 0; }
/* 208px is measured, not arbitrary: the longest equipment name is the Estonian
   compound "automaatpidurdussüsteem" (182.5px at this font) plus the 16px box,
   the 7px gap and ~2px of rounding headroom. auto-fill never makes a track
   narrower than the minimum, so at any window width the longest label still
   fits on one line instead of breaking mid-word. The old 160px wrapped nearly
   every label; 206px broke this one on sub-pixel rounding. */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 8px 10px; align-items: start; }
.feature-checkbox { display: flex; align-items: flex-start; gap: 7px; font-weight: 400 !important; font-size: 14px !important; text-transform: none !important; letter-spacing: normal !important; color: var(--text) !important; flex-direction: row !important; line-height: 1.35; }
/* Never let the box shrink - flex items shrink by default, which squashed the
   16px checkbox into a sliver next to a long label. margin-top centres it on
   the label's FIRST line, so wrapped labels still line up. */
.feature-checkbox input[type="checkbox"] { flex: 0 0 auto; margin-top: 2px; }
/* min-width:0 lets the text shrink below its longest word, and overflow-wrap
   breaks that word instead of spilling it into the neighbouring column. */
.feature-checkbox > span { min-width: 0; overflow-wrap: anywhere; }

/* Grouped, collapsible equipment categories (create/edit/admin/filter). */
.feature-cat { border-top: 1px solid var(--border-soft); }
.feature-cat:first-of-type { border-top: none; }
.feature-cat > summary {
    cursor: pointer; list-style: none; padding: 10px 4px; font-size: 13px; font-weight: 600;
    color: var(--text); display: flex; align-items: center; gap: 8px;
}
.feature-cat > summary::-webkit-details-marker { display: none; }
.feature-cat > summary::before { content: "\25B8"; color: var(--muted-2); font-size: 11px; transition: transform .12s ease; }
.feature-cat[open] > summary::before { transform: rotate(90deg); }
.feature-cat-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); background: var(--surface-3); border-radius: 999px; padding: 1px 7px; }
.feature-cat > .feature-grid { padding: 2px 4px 12px; }

/* Grouped equipment sections on the ad page. */
.feature-group-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 6px; }
.feature-group:first-of-type .feature-group-title { margin-top: 4px; }

.form button, button, .link-button, .pricing-cta {
    font-family: var(--font-body);
    background: var(--accent); color: var(--accent-ink); border: none; padding: 10px 18px;
    min-height: var(--control-height); border-radius: var(--radius-md); font-size: 14px;
    font-weight: 700; cursor: pointer; width: fit-content;
    transition: filter .15s ease, transform .05s ease;
}
.form button:hover, button:hover { filter: brightness(0.93); }
.form button:active, button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: default; }
.link-button {
    background: transparent; color: var(--danger); padding: 0; min-height: unset;
    text-decoration: underline; font-weight: 500;
}
.link-button:hover { opacity: .75; filter: none; }
.btn-secondary {
    background: var(--surface-3); color: var(--text); border: 1px solid var(--border);
}
.btn-secondary:hover { filter: none; border-color: var(--muted-2); color: var(--text-strong); }
.btn-sm { min-height: var(--control-height-sm); padding: 5px 13px; font-size: 13px; }
.btn-block { width: 100%; }

/* Photo drop-zone (the real file input covers the zone invisibly, so click
   and drag-drop both land on it and keyboard focus still works). */
/* VIN decode helper on the create-ad form. */
.vin-decode {
    padding: 14px 16px; margin-bottom: 4px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.vin-decode > label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.vin-decode-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vin-decode-row input {
    flex: 1 1 220px; min-width: 0; text-transform: uppercase; letter-spacing: 0.06em;
}
.vin-decode-row button { flex: 0 0 auto; }
/* Plate and VIN sit half and half on one row - two ways of asking the same
   question, so neither gets to look like the primary one. Below 640px a
   half-width column can no longer hold input + button on one line, so the pair
   stacks instead of squeezing. */
.vin-decode-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.vin-decode-pair .vin-decode { margin-bottom: 0; height: 100%; }
/* Smaller flex basis than the full-width block: in half a row the 220px basis
   pushed the button onto its own line at ordinary desktop widths. */
.vin-decode-pair .vin-decode-row input { flex: 1 1 130px; }
@media (max-width: 640px) { .vin-decode-pair { grid-template-columns: 1fr; } }
.vin-decode-status { margin: 8px 0 0; font-size: 13px; min-height: 1em; }
.vin-decode-status.is-error { color: var(--danger, #c0392b); }
.vin-decode-status.is-success { color: var(--success, #2e7d32); }

/* Motor vehicle tax calculator: the breakdown table is the point of the page -
   a single total nobody can check against their tax notice is worth less than
   the four lines it came from. */
.tax-intro { max-width: 62ch; color: var(--muted); }
.tax-form { margin-bottom: 22px; }
.tax-result { margin: 8px 0 18px; }
.tax-table { width: 100%; max-width: 520px; border-collapse: collapse; }
.tax-table th, .tax-table td {
    padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 15px;
}
.tax-table th { font-weight: 500; color: var(--text); }
.tax-table th small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.tax-table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tax-table .tax-total th, .tax-table .tax-total td {
    border-bottom: none; border-top: 2px solid var(--accent);
    font-weight: 800; font-size: 18px; color: var(--text-strong);
}
.tax-disclaimer { max-width: 62ch; font-size: 13px; color: var(--muted); }

/* Annual tax on a listing. Reads as one line of running cost next to the spec
   table, not as a second price - hence the muted frame and the link out to the
   breakdown, which is where a number this consequential has to be checkable. */
.listing-tax {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
    margin: 14px 0 4px; padding: 11px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2);
}
.listing-tax-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.listing-tax-amount { font-size: 17px; font-weight: 700; color: var(--text-strong); }
.listing-tax-link { margin-left: auto; font-size: 13px; }
.tax-fieldset .form-hint { margin: 0 0 12px; }

.dropzone {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 34px 20px; text-align: center;
    border: 2px dashed var(--border); border-radius: 14px; background: var(--surface-2);
}
.dropzone:hover { border-color: var(--muted-2); }
.dropzone:focus-within { border-color: var(--accent); }
/* Active drag-over: solid accent border + soft accent fill so it's obvious
   the files will land here. Toggled by main.js on dragenter/dragleave/drop. */
.dropzone.dragover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
/* While client-side compression runs, dim the zone and block re-drops. */
.dropzone.processing { opacity: 0.6; pointer-events: none; }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone-icon { font-size: 26px; color: var(--muted-2); line-height: 1; }
.dropzone--sm { padding: 18px 14px; border-radius: 12px; }
.dropzone--sm .dropzone-icon { font-size: 20px; }
.dropzone--sm .dropzone-text { font-size: 13px; font-weight: 500; color: var(--muted); }
.dropzone-text { font-size: 14px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: normal; }

/* ---------------------------------------------------------------------
   Search / filter panel — the elevated card from the theme's hero search.
   --------------------------------------------------------------------- */
/* Search is the homepage's primary job, so the form is laid out in two tiers:
   .filter-primary is always on screen, and only .filter-panel (the secondary
   filters) collapses behind the toggle. Previously the whole block was hidden,
   which left a first-time visitor with no visible way to search at all. */
.filter-toggle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    min-height: var(--control-height-sm); padding: 6px 14px;
    border: 1px solid var(--border); border-radius: 999px;
    font-size: 13px; color: var(--muted); background: var(--surface-2);
}
.filter-toggle:hover { border-color: var(--muted-2); color: var(--text); }
.filter-toggle::before { content: "\2637"; font-size: 13px; line-height: 1; }
.filter-toggle .filter-toggle-label-hide { display: none; }
.filter-toggle.is-open .filter-toggle-label-show { display: none; }
.filter-toggle.is-open .filter-toggle-label-hide { display: inline; }

/* Collapsible panel. Plain display toggle rather than a height animation: the
   filter form is a select2 flex layout, and the grid-rows/max-height slide
   tricks fight its internal sizing and leave the panel clipped. Closed by
   default; .is-open (server-rendered when a SECONDARY filter is active,
   toggled by JS otherwise) reveals it. */
.filter-panel { display: none; width: 100%; }
.filter-panel.is-open { display: block; }

.filter-form {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px;
    background: var(--surface); padding: 14px; border-radius: var(--radius-lg);
    border: 1px solid var(--border); box-shadow: var(--shadow-pop);
}
.filter-form input:not([type="checkbox"]), .filter-form select { width: auto; flex: 1; min-width: 130px; }
.filter-form input[type="checkbox"] { flex: 0 0 auto; min-width: 0; }

/* Always-visible row: free text, make, model, price range, Search. */
.filter-primary { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; }
.filter-primary input[type="search"] { flex: 2 1 220px; }
.filter-primary input[type="number"] { flex: 0 1 120px; min-width: 100px; }
.filter-primary .filter-submit { flex: 0 0 auto; }

/* The toggle + reset sit between the two tiers, so the relationship between
   the button and the panel it controls is obvious. */
.filter-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; width: 100%; }

.filter-secondary { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; }
.filter-secondary input[type="number"] { flex: 0 1 130px; min-width: 110px; }
.filter-panel .filter-features { width: 100%; margin-top: 12px; }
.filter-panel .save-search-group { margin-top: 12px; }
/* Native search clear (×) — the default webkit glyph is near-black and
   invisible on the dark theme, so recolour it to the muted token. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 15px; width: 15px; cursor: pointer;
    background: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { background: var(--text-strong); }
.filter-form .select2-container { flex: 1; min-width: 160px; }

.save-search-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.save-search-group input[type="text"] { width: auto; flex: 1; min-width: 140px; }
.flash-inline { font-size: 13px; }
.flash-inline-success { color: var(--ok); }
.flash-inline-error { color: var(--err); }

/* Select2 — match control tokens, follow dark/light theme. */
.select2-container .select2-selection--single {
    height: var(--control-height);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--field-bg);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--control-height) - 2px);
    padding-left: 13px;
    padding-right: 34px;
    color: var(--text);
    font-size: 16px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted-2); }
.select2-container .select2-selection--single .select2-selection__arrow { height: var(--control-height); right: 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--muted) transparent transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--muted) transparent; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.select2-container--default .select2-selection--single .select2-selection__clear { margin-right: 8px; color: var(--muted); }
.select2-dropdown {
    border-color: var(--border); border-radius: var(--radius-md); overflow: hidden;
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    height: var(--control-height-sm); padding: 6px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--field-bg); color: var(--text);
    font-size: 16px; /* prevent iOS zoom when searching a make/model dropdown */
}
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--surface-3); color: var(--text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent); color: var(--accent-ink); }
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--surface-2); color: var(--muted-2);
}

.more-filters { width: 100%; margin-top: 4px; }
.more-filters summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center;
    min-height: var(--control-height-sm); padding: 6px 14px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 13px; color: var(--muted); background: var(--surface-2);
}
.more-filters summary:hover { border-color: var(--muted-2); color: var(--text); }
.more-filters summary::-webkit-details-marker { display: none; }
.more-filters .more-filters-close-label { display: none; }
.more-filters[open] .more-filters-open-label { display: none; }
.more-filters[open] .more-filters-close-label { display: inline; }
.more-filters-body {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    margin-top: 10px; padding: 14px; background: var(--surface-2);
    border: 1px solid var(--border-soft); border-radius: var(--radius-md); width: 100%;
}
.more-filters-body input[type="number"] { width: 140px; flex: 0 0 140px; }
.more-filters-body .filter-features { flex-basis: 100%; width: 100%; }
/* No .feature-grid override here on purpose: the 170px one used to break the
   longest labels mid-word. The shared 208px minimum is measured to fit them. */

.results-count { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.results-count strong { font-family: var(--font-disp); color: var(--text-strong); }

/* ---------------------------------------------------------------------
   Vehicle cards — theme .vcard: rounded, bordered, hover lift + accent.
   --------------------------------------------------------------------- */
.trending-section { margin-bottom: 32px; padding-bottom: 26px; border-bottom: 1px solid var(--border-soft); }
.trending-section h2 { font-size: 21px; }
.listing-card { position: relative; }
.trending-ribbon {
    position: absolute; top: 11px; left: 11px; z-index: 1;
    background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700;
    padding: 4px 9px; border-radius: 999px; letter-spacing: .01em;
}
/* Featured (paid boost) ribbon: gold, to read as premium and distinct from the
   accent-coloured trending badge. */
.featured-ribbon {
    position: absolute; top: 11px; left: 11px; z-index: 1;
    background: linear-gradient(135deg, #E0A200, #B8860B); color: #fff;
    font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
    letter-spacing: .02em; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
/* Featured markers in the seller's my-ads list. */
.featured-tag { color: #B8860B; font-weight: 700; font-size: 13px; white-space: nowrap; }
.feature-link { color: #B8860B; font-weight: 600; white-space: nowrap; }
:root[data-theme="dark"] .featured-tag,
:root[data-theme="dark"] .feature-link { color: #E0A200; }
/* Highlight the featured plan card on the buy-featured page. */
.plan-card--featured { border-color: #E0A200; box-shadow: 0 0 0 1px #E0A200 inset; }
.feature-perks { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text); }
.feature-perks li::before { content: "\2713"; color: var(--ok, #2e7d32); font-weight: 700; margin-right: 7px; }
.feature-current { color: #B8860B; font-weight: 600; }

/* Scam-awareness note under the contact form / atop a chat thread. */
.listing-safety-note {
    margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border-soft);
    font-size: 12px; line-height: 1.5; color: var(--muted);
}
.chat-safety-note {
    margin: 0; padding: 8px 14px; font-size: 12px; line-height: 1.45; color: var(--muted);
    background: var(--surface-2); border-bottom: 1px solid var(--border-soft); text-align: center;
}

/* Vehicle-history report card in the listing sidebar. */
.listing-history {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 16px; margin-bottom: 16px;
}
.listing-history h2 { margin: 0 0 6px; font-size: 15px; }
.listing-history-note { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.listing-history-disclaimer { margin: 8px 0 0; font-size: 11px; color: var(--muted-2); line-height: 1.4; }

.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

/* Favorite heart: overlaid on card photos, wide variant in the buy-box. */
.listing-card .save-btn {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 34px; height: 34px; min-height: unset; padding: 0;
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.45); color: #f2f4f7;
    font-size: 16px; line-height: 1;
}
.listing-card .save-btn:hover { background: rgba(0, 0, 0, 0.7); filter: none; }
.listing-card .save-btn.on { color: #E8763A; }
.save-btn--wide { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; }
.save-btn--wide.on .save-heart { color: var(--accent-text); }

/* Compare button - card corner (below the save heart) + wide variant on the ad page. */
.listing-card .compare-btn {
    position: absolute; top: 50px; right: 10px; z-index: 2;
    width: 34px; height: 34px; min-height: unset; padding: 0;
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.45); color: #f2f4f7; font-size: 16px; line-height: 1;
}
.listing-card .compare-btn:hover { background: rgba(0, 0, 0, 0.7); filter: none; }
.listing-card .compare-btn.on { color: #E8763A; border-color: rgba(233, 118, 58, 0.6); }
.compare-btn--wide { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; margin-left: 8px; }
.compare-btn--wide.on { border-color: var(--accent); color: var(--accent-text); }

/* Floating "N to compare" bar. */
.compare-bar {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(120%);
    z-index: 120; display: flex; align-items: center; gap: 14px;
    background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px;
    padding: 9px 12px 9px 18px; box-shadow: var(--shadow-pop);
    opacity: 0; transition: transform .2s ease, opacity .2s ease; pointer-events: none;
}
.compare-bar.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.compare-bar-count { font-size: 13.5px; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.compare-bar-go {
    background: var(--accent); color: var(--accent-ink) !important; text-decoration: none;
    font-weight: 700; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
}
.compare-bar-go:hover { filter: brightness(0.93); color: var(--accent-ink) !important; }
.compare-bar-clear {
    background: transparent; border: none; color: var(--muted); font-size: 13px; padding: 6px 4px;
    min-height: unset; cursor: pointer;
}
.compare-bar-clear:hover { color: var(--text-strong); filter: none; }

/* Compare page. */
.compare-empty { color: var(--muted); }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.compare-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 520px; }
.compare-table th, .compare-table td {
    border-bottom: 1px solid var(--border-soft); padding: 11px 14px; text-align: left;
    vertical-align: middle; font-size: 14px;
}
.compare-table td { text-align: center; }
/* Sticky label column so you keep context while swiping the cars on mobile. */
.compare-label {
    position: sticky; left: 0; z-index: 1; background: var(--surface-2);
    font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); white-space: nowrap; min-width: 118px;
}
.compare-head-row td { position: relative; vertical-align: top; background: var(--surface); }
.compare-head-row .compare-label { background: var(--surface-2); }
.compare-photo { display: block; }
.compare-photo img { width: 100%; max-width: 180px; height: 108px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.compare-noimage {
    display: flex; align-items: center; justify-content: center; height: 108px; max-width: 180px; margin: 0 auto;
    background: var(--surface-3); border-radius: 10px; color: var(--muted-2); font-family: var(--font-mono); font-size: 11px;
}
/* Name sits on top of each column as its header, photo below. */
.compare-head-row td { vertical-align: top; }
.compare-title { display: block; margin: 0 0 10px; font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--text-strong); text-decoration: none; }
.compare-title:hover { color: var(--accent-text); }
.compare-remove {
    position: absolute; top: 4px; right: 6px; z-index: 2;
    width: 26px; height: 26px; min-height: unset; padding: 0; line-height: 1; font-size: 16px;
    border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.compare-remove:hover { color: var(--text-strong); border-color: var(--muted-2); filter: none; }
.compare-price { font-family: var(--font-disp); font-weight: 800; font-size: 16px; color: var(--text-strong); }
.compare-table td.is-best { position: relative; }
.compare-table td.is-best::after {
    content: "\2714"; position: absolute; top: 4px; right: 6px; font-size: 9px;
    color: var(--ok, #2e7d32);
}
.compare-table td.is-best { color: var(--ok, #2e7d32); font-weight: 700; }
/* Category divider: the name pins in the sticky label column, the bar (td)
   scrolls with the car columns. Avoids the full-width sticky-colspan jitter. */
.compare-section th, .compare-section td { background: var(--surface-3); }
.compare-section th { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.compare-yes { color: var(--ok, #2e7d32); font-weight: 700; }
.compare-no { color: var(--muted-2); }
.compare-cta-row td { border-bottom: none; padding-top: 16px; }
.compare-view { display: inline-block; }
/* Mobile compare: fixed layout so the label column stays narrow and the car
   columns share the rest evenly (auto layout let the label grab ~70%).
   The table fills the screen when 2-3 cars fit; only 4 cars force a sideways
   scroll (the wrapper scrolls, label column stays pinned). --cols per table. */
@media (max-width: 640px) {
    .compare-table { table-layout: fixed; min-width: 0; width: max(100%, calc(92px + (var(--cols, 3) * 96px))); }
    .compare-table th, .compare-table td { padding: 10px 7px; font-size: 13px; }
    .compare-label { width: 92px; min-width: 92px; }
    .compare-photo img, .compare-noimage { height: 84px; }
    .compare-title { font-size: 13px; }
    .compare-price { font-size: 15px; }
    .compare-remove { width: 24px; height: 24px; font-size: 15px; }
}
.listing-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.listing-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-card); color: inherit; }
.listing-card-image { aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, var(--surface-3) 0 14px, var(--surface-2) 14px 28px); overflow: hidden; }
.listing-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-card-noimage { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; }
.listing-card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; }
.listing-card-body h3 { font-size: 15.5px; font-weight: 700; margin: 0; line-height: 1.15; color: var(--text-strong); }
.listing-card-price { font-family: var(--font-disp); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--text-strong); margin: 0; }
.listing-card-meta, .listing-card-location { font-size: 12.5px; color: var(--muted); margin: 0; }
.listing-card-location:not(:empty)::before {
    content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--muted); margin-right: 6px; vertical-align: 2px;
}

.pagination { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--control-height-sm); min-height: var(--control-height-sm); padding: 0 12px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    text-decoration: none; color: var(--text); font-size: 13px;
}
.page-link:hover { border-color: var(--muted-2); color: var(--text-strong); }
.page-link.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }

.image-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.image-thumb { position: relative; width: 104px; font-size: 11px; text-align: center; color: var(--muted); }
.image-thumb img { width: 104px; height: 78px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; }

/* Controls on upload-preview thumbnails (remove / cover badge / make cover).
   Scoped under .image-thumb to outrank the global ".form button" styling. */
.image-thumb .thumb-remove {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
    min-height: unset; padding: 0; border-radius: 7px;
    background: rgba(0, 0, 0, 0.6); color: #f2f4f7;
    font-size: 14px; line-height: 1; font-weight: 400;
}
.image-thumb .thumb-remove:hover { background: rgba(0, 0, 0, 0.8); filter: none; }
.image-thumb .thumb-badge {
    position: absolute; top: 4px; left: 4px;
    background: var(--accent); color: var(--accent-ink);
    font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
}
.image-thumb .thumb-cover {
    display: block; width: 100%; min-height: unset; margin-top: 4px; padding: 4px 6px;
    background: transparent; border: 1px solid var(--border); border-radius: 7px;
    color: var(--muted); font-size: 10.5px; font-weight: 600;
}
.image-thumb .thumb-cover:hover { color: var(--text-strong); border-color: var(--muted-2); filter: none; }

/* ---------------------------------------------------------------------
   Ad detail page
   --------------------------------------------------------------------- */
.listing-detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.listing-detail-sidebar { position: sticky; top: 84px; }

.promo-zone { margin-bottom: 20px; }
.promo-label {
    display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted-2); margin-bottom: 6px;
}
.promo-zone img { display: block; width: 100%; border-radius: var(--radius-md); }
.promo-placeholder {
    display: flex; align-items: center; justify-content: center; min-height: 90px;
    border: 1px dashed var(--border); border-radius: var(--radius-md);
    background: var(--surface-2); color: var(--muted-2); font-size: 13px; text-align: center; padding: 16px;
}
.promo-zone-home_top img { height: 140px; object-fit: cover; }
.promo-zone-results_inline {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; padding: 10px 12px; margin-bottom: 0;
}
.promo-zone-results_inline img { height: 120px; object-fit: cover; margin-top: 2px; border-radius: var(--radius-sm); }
.promo-zone-results_inline .promo-placeholder { min-height: 120px; border: none; padding: 0; }

.back-link { display: inline-block; font-size: 13.5px; color: var(--muted); text-decoration: none; margin-bottom: 14px; }
.back-link:hover { color: var(--text-strong); }
.similar-section { margin-top: 40px; }

/* Mobile-only price strip under the title - on phones the sidebar buy-box
   stacks below specs/description, which would hide the price off-screen. */
.listing-price-mobile { display: none; }
.btn-contact-anchor {
    flex: 0 0 auto; background: var(--accent); color: var(--accent-ink);
    font-weight: 700; font-size: 13.5px; padding: 10px 15px;
    border-radius: var(--radius-md); text-decoration: none; white-space: nowrap;
}
.btn-contact-anchor:hover { color: var(--accent-ink); filter: brightness(0.93); }

/* Buy-box: price + contact + seller, sticky in the sidebar. */
.listing-buybox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 16px; }
.listing-buybox .listing-price { font-family: var(--font-disp); font-size: 30px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-strong); margin: 0; }
.listing-buybox-meta { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.listing-buybox-heading { font-size: 15px; margin: 18px 0 12px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.listing-buybox .form { gap: 12px; }
/* Leasing calculator card */
.listing-leasing {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 20px 22px; margin-bottom: 16px;
}
.listing-leasing h2 { font-size: 15px; margin: 0 0 14px; }
.leasing-row { margin-bottom: 12px; }
.leasing-row label {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    margin-bottom: 6px;
}
.leasing-row label span { color: var(--text-strong); font-weight: 700; text-transform: none; letter-spacing: normal; font-size: 13px; }
.leasing-row input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.leasing-row--inline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.leasing-row--inline label { margin-bottom: 0; }
.leasing-row--inline input[type="number"] { width: 90px; flex: 0 0 90px; text-align: right; }
.leasing-result {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    border-top: 1px solid var(--border-soft); padding-top: 13px; margin-top: 14px;
}
.leasing-result span { font-size: 13px; color: var(--muted); }
.leasing-result strong { font-family: var(--font-disp); font-size: 24px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-strong); }
.leasing-note { font-size: 11.5px; color: var(--muted-2); margin: 8px 0 0; }

.listing-sellerbox {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 14px 16px; margin-bottom: 16px;
}
.listing-sellerbox strong { display: block; font-size: 14px; color: var(--text-strong); }
.listing-sellerbox small { display: block; font-size: 12.5px; color: var(--muted); }
.listing-seller-phone { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--accent-text); text-decoration: none; }
.listing-seller-phone:hover { text-decoration: underline; }
:root[data-theme="light"] .listing-seller-phone { color: var(--accent-ink); }
.listing-seller-email { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); text-decoration: none; word-break: break-all; }
.listing-seller-email:hover { color: var(--text-strong); text-decoration: underline; }
.listing-own-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--muted); }
.listing-seller-name { color: var(--text-strong); text-decoration: none; }
.listing-seller-name:hover { text-decoration: underline; }
a.listing-seller-avatar { text-decoration: none; }

/* Seller trust badges (verified tick, dealer tag), shown on the listing, the
   profile, and the admin user list. */
.seller-badge {
    display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px;
    border-radius: 999px; vertical-align: middle; margin-left: 4px; white-space: nowrap;
}
.seller-badge--verified { background: rgba(46,125,50,.14); color: #2e7d32; }
.seller-badge--dealer { background: var(--surface-3); color: var(--text); }
:root[data-theme="dark"] .seller-badge--verified { background: rgba(80,200,120,.18); color: #6fd08c; }

/* Public seller profile header. */
.seller-profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.seller-profile-head h1 { margin: 0; font-size: 24px; }
.seller-profile-meta { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.seller-profile-avatar {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
    background: var(--surface-3); color: var(--text-strong);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-disp); font-weight: 800; font-size: 24px;
}

/* Report-this-ad disclosure in the listing sidebar. Understated by design -
   a small muted link that expands the form only when a buyer wants it. */
.listing-report { margin-bottom: 16px; }
.listing-report > summary {
    cursor: pointer; list-style: none; font-size: 12.5px; color: var(--muted);
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
}
.listing-report > summary::-webkit-details-marker { display: none; }
.listing-report > summary:hover { color: var(--text-strong); }
.listing-report-form {
    display: flex; flex-direction: column; gap: 10px; margin-top: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px;
}
.listing-report-form button { align-self: flex-start; }
/* Muted / danger variants of the plain link-button (admin report actions). */
.link-button--danger { font-weight: 700; }
.link-button--muted { color: var(--muted); text-decoration: none; }
.link-button--muted:hover { color: var(--text-strong); text-decoration: underline; }
.listing-seller-avatar {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-text);
    font-family: var(--font-disp); font-weight: 800; font-size: 17px;
}

.listing-gallery { margin-bottom: 20px; }
.listing-gallery-main img {
    width: 100%; height: 400px; object-fit: cover; display: block;
    border-radius: var(--radius-lg); border: 1px solid var(--border);
}
.listing-gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.listing-gallery-thumbs img {
    width: 96px; height: 72px; object-fit: cover; cursor: pointer;
    border-radius: var(--radius-sm); border: 1px solid var(--border); opacity: .75;
    transition: opacity .15s ease, border-color .15s ease;
}
.listing-gallery-thumbs img:hover { opacity: 1; }
.listing-gallery-thumbs img.active { opacity: 1; border-color: var(--accent); }
.listing-photo-placeholder {
    height: 320px; margin-bottom: 20px; border-radius: var(--radius-lg); border: 1px solid var(--border);
    background: repeating-linear-gradient(135deg, var(--surface-3) 0 16px, var(--surface-2) 16px 32px);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
}

/* Full-screen photo lightbox (built in main.js, appended to <body>). */
body.lightbox-lock { overflow: hidden; }
.lightbox {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.92); padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 10px; }
.lightbox-close, .lightbox-nav {
    position: absolute; display: flex; align-items: center; justify-content: center;
    min-height: 0; padding: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%; line-height: 1;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); filter: none; }
.lightbox-close { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 26px; }
/* Centred vertically with auto margins, NOT transform: the global
   `button:active { transform: translateY(1px) }` would otherwise override a
   `translateY(-50%)` here, making the button jump out from under the cursor on
   press (so the click landed on the backdrop and closed the preview). */
.lightbox-nav { top: 0; bottom: 0; margin-block: auto; width: 52px; height: 52px; font-size: 30px; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-counter {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    color: #fff; font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
    background: rgba(0, 0, 0, 0.5); padding: 5px 12px; border-radius: 999px;
}
@media (max-width: 640px) {
    .lightbox { padding: 16px; }
    .lightbox-nav { width: 42px; height: 42px; font-size: 24px; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
}

/* Spec table — theme's two-tone spec grid feel. */
.listing-specs {
    border-collapse: separate; border-spacing: 0; margin-bottom: 20px;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden;
    min-width: min(480px, 100%);
}
.listing-specs tr + tr th, .listing-specs tr + tr td { border-top: 1px solid var(--border-soft); }
.listing-specs th { text-align: left; padding: 12px 18px 12px 16px; color: var(--muted); font-weight: 500; font-size: 13px; white-space: nowrap; }
.listing-specs td { padding: 12px 16px 12px 0; font-size: 13.5px; font-weight: 600; color: var(--text-strong); }

.feature-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 16px; list-style: none; padding: 0; margin: 0 0 18px; }
.feature-list li { font-size: 14px; padding-left: 20px; position: relative; }
.feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-text); font-weight: 700; }

.listing-description { font-size: 14.5px; line-height: 1.65; color: var(--text); }

/* ---------------------------------------------------------------------
   Tables (my ads, admin)
   --------------------------------------------------------------------- */
.ads-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; }
.ads-table th, .ads-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.ads-table th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); }
.ads-table tbody tr:last-child td { border-bottom: none; }
.ads-table tbody tr:hover { background: var(--surface-2); }
.actions { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }

.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-pending { background: var(--warn-bg); color: var(--warn); }
.badge-active { background: var(--ok-bg); color: var(--ok); }
.badge-rejected { background: var(--err-bg); color: var(--err); }
.badge-expired { background: var(--surface-3); color: var(--muted); }
.badge-sold { background: var(--info-bg); color: var(--info); }

/* Admin tab bar: a full-width band under the site header, rendered once by
   header.php. It scrolls sideways on narrow screens instead of wrapping, so the
   row of tabs always reads as one strip. */
.admin-nav {
    background: var(--surface); border-bottom: 1px solid var(--border);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.admin-nav-inner {
    display: flex; gap: 2px; max-width: 1600px; margin: 0 auto; padding: 0 20px; min-width: max-content;
}
.admin-tab {
    color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 700;
    padding: 13px 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
    transition: color .12s ease, border-color .12s ease;
}
.admin-tab:hover { color: var(--text-strong); }
.admin-tab.active { color: var(--accent-text); border-bottom-color: var(--accent); }

/* Admin content spans the viewport (capped generously) instead of the 1160px
   reading column, so wide tables and forms have room. */
.container--admin { max-width: 1600px; }

/* Compact dashboard stat cards - denser than the old 140px/26px version so more
   fit per row and the dashboard reads as a quick overview, not a wall. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-bottom: 22px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 13px; }
.stat-value { display: block; font-family: var(--font-disp); font-size: 21px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-strong); line-height: 1.1; }
.stat-label { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
a.stat-card {
    text-decoration: none; color: inherit;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
a.stat-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-card); color: inherit; }

/* ---------------------------------------------------------------------
   Plans / pricing
   --------------------------------------------------------------------- */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 800px; }
.plan-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.plan-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-card); }
.plan-card h3 { margin-top: 0; font-size: 17px; }
.banner-thumb { width: 72px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; }

/* Short explanatory line under a group of form fields. */
.form-hint { margin: -4px 0 4px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* Email log: expandable preview of what was actually sent. */
.email-body summary { cursor: pointer; font-size: 12px; color: var(--accent-text); margin-top: 4px; }
.email-body-frame {
    width: 100%; height: 340px; margin-top: 8px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: #FFFFFF; display: block;
}
.email-error { margin-top: 5px; font-size: 12px; color: var(--danger, #C0392B); }

/* Banner stats cell: one line per metric, unique count muted next to the total. */
.banner-stats { display: flex; flex-direction: column; gap: 2px; }
.banner-stat { white-space: nowrap; }
.banner-stat em { font-style: normal; color: var(--muted); }

/* Delivery panel on the banner edit page. */
.banner-delivery { margin-bottom: 18px; }
.banner-delivery h2 { margin: 0 0 10px; font-size: 15px; }
.banner-delivery-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.banner-delivery-row span { color: var(--muted); }
.banner-delivery-row em { font-style: normal; font-weight: 400; color: var(--muted); }
.banner-delivery-bar { width: 100%; height: 5px; margin-bottom: 6px; border: none; border-radius: 999px; background: var(--surface-3); appearance: none; }
.banner-delivery-bar::-webkit-progress-bar { background: var(--surface-3); border-radius: 999px; }
.banner-delivery-bar::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.banner-delivery-bar::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.banner-delivery-capped { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text); font-size: 12.5px; line-height: 1.45; }
.ads-table td small { color: var(--muted); font-size: 12px; }
.plan-price { font-family: var(--font-disp); font-size: 28px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-strong); margin: 8px 0; }
.provider-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.provider-buttons button, .provider-buttons a { text-align: center; text-decoration: none; width: 100%; }

.pricing-cta { display: block; width: 100%; text-align: center; text-decoration: none; margin-top: 14px; }
.pricing-cta:hover { color: var(--accent-ink); filter: brightness(0.93); }

/* ---------------------------------------------------------------------
   News
   --------------------------------------------------------------------- */
.news-list { max-width: 720px; }
.news-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 16px;
    transition: transform .16s ease, border-color .16s ease;
}
.news-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.news-item h2 { margin: 0 0 4px; font-size: 18px; }
.news-item h2 a { text-decoration: none; }
.news-date { font-family: var(--font-mono); color: var(--muted-2); font-size: 11.5px; letter-spacing: .03em; margin: 0 0 10px; }
.news-article { max-width: 720px; }
.news-body { line-height: 1.7; }
.news-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* ---------------------------------------------------------------------
   Chat (buyer-seller conversations)
   --------------------------------------------------------------------- */
.chat {
    display: grid; grid-template-columns: 320px 1fr; gap: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; min-height: 480px; max-height: 70vh;
}
.chat-list { border-right: 1px solid var(--border-soft); overflow-y: auto; }
.chat-item {
    display: flex; gap: 12px; align-items: center; padding: 13px 16px;
    text-decoration: none; color: inherit; border-bottom: 1px solid var(--border-soft);
}
.chat-item:hover { background: var(--surface-2); color: inherit; }
.chat-item--active { background: var(--surface-3); border-left: 2px solid var(--accent); }
.chat-item-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.chat-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-item-top strong { font-size: 13.5px; color: var(--text-strong); }
.chat-item-ad { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-snippet { font-size: 12.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-thread { display: flex; flex-direction: column; min-width: 0; }
.chat-thread-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2);
}
.chat-back { font-size: 13px; color: var(--muted); text-decoration: none; display: none; }
.chat-back:hover { color: var(--text-strong); }
.chat-thread-ad { font-size: 13.5px; font-weight: 700; color: var(--text-strong); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread-ad:hover { color: var(--accent-text); }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.chat-bubble-row { display: flex; justify-content: flex-start; }
.chat-bubble-row--me { justify-content: flex-end; }
.chat-bubble {
    max-width: 72%; padding: 9px 13px; border-radius: 14px;
    background: var(--surface-3); font-size: 13.5px; line-height: 1.45;
}
.chat-bubble-row--me .chat-bubble { background: var(--accent); color: var(--accent-ink); }
.chat-time { display: block; font-family: var(--font-mono); font-size: 9.5px; opacity: .65; margin-top: 4px; }
.chat-compose { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-soft); background: var(--surface-2); }
.chat-compose input[type="text"] { flex: 1; }
.chat-compose button { flex: 0 0 auto; }

/* Messages section on the owner's own ad page */
.listing-messages { margin-top: 28px; }
.listing-messages .home-chat-item { border-top: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 10px; }

.chat-thread-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.chat-thread-who strong { font-size: 14px; color: var(--text-strong); white-space: nowrap; }
.chat-thread-who .listing-seller-avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: 13px; }

/* Guest email inquiries under the chat */
.guest-inquiries { margin-top: 28px; max-width: 760px; }
.guest-inquiries h2 { font-size: 17px; }
.message-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 12px;
}
.message-item--unread { border-left: 3px solid var(--accent); }
.message-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.message-head strong { font-size: 14.5px; color: var(--text-strong); }
.message-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.message-meta { font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; }
.message-meta a { color: var(--muted); }
.message-meta a:hover { color: var(--text-strong); }
.message-body { font-size: 14px; line-height: 1.6; margin: 0; }

/* Homepage conversations panel */
.home-chat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 16px 20px; margin-bottom: 22px;
}
.home-chat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.home-chat-head h2 { font-size: 16px; margin: 0; }
.home-chat-head a { font-size: 13px; color: var(--muted); text-decoration: none; }
.home-chat-head a:hover { color: var(--text-strong); }
.home-chat-item {
    display: flex; gap: 12px; align-items: center; padding: 9px 0;
    text-decoration: none; color: inherit; border-top: 1px solid var(--border-soft);
}
.home-chat-item:hover strong { color: var(--accent-text); }
.home-chat-main { min-width: 0; flex: 1; font-size: 13.5px; color: var(--muted); }
.home-chat-main strong { color: var(--text-strong); }
.home-chat-main small { display: block; font-size: 12.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------------
   Footer & cookie banner
   --------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border-soft); padding: 24px 0; color: var(--muted); font-size: 13px; background: var(--surface-2); }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent-text); }

.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
    background: var(--surface-3); color: var(--text); border-top: 1px solid var(--border);
    padding: 14px 20px; font-size: 14px; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
}
.cookie-banner a { color: var(--text-strong); }
.cookie-banner button { min-height: var(--control-height-sm); padding: 6px 18px; }

.privacy-page { max-width: 760px; }
.privacy-page h2 { margin-top: 24px; }

/* ---------------------------------------------------------------------
   Admin settings tabs, tables, editor
   --------------------------------------------------------------------- */
.settings-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
.settings-tab {
    background: transparent; color: var(--muted); border: none; border-bottom: 2px solid transparent;
    border-radius: 0; padding: 12px 14px; min-height: unset; font-weight: 700; font-size: 13.5px;
}
.settings-tab:hover { color: var(--text-strong); filter: none; }
.settings-tab.active { color: var(--text-strong); border-bottom-color: var(--accent); }
.tab-panel { display: none; flex-direction: column; gap: 14px; }
.tab-panel.active { display: flex; }
/* Free mode + news toggle cards inside the settings "Features" tab. */
.platform-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 420px)); gap: 16px; }
.platform-toggles .plan-card { margin: 0; }

.table-search { max-width: 320px; margin-bottom: 12px; }
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { color: var(--text-strong); }
.sortable-th.sorted-asc::after { content: " ↑"; }
.sortable-th.sorted-desc::after { content: " ↓"; }

.news-editor { min-height: 180px; background: var(--field-bg); color: var(--text); }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--border); }
.ql-toolbar.ql-snow { border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface-2); }
.ql-container.ql-snow { border-radius: 0 0 var(--radius-md) var(--radius-md); font-size: 14px; }
.ql-snow .ql-stroke { stroke: var(--muted); }
.ql-snow .ql-fill { fill: var(--muted); }
.ql-snow .ql-picker { color: var(--muted); }
.ql-editor.ql-blank::before { color: var(--muted-2); }

/* ---------------------------------------------------------------------
   Flatpickr calendar - restyled with theme tokens (dark & light).
   !important is needed where the site's global input rules or flatpickr's
   own stylesheet would otherwise win on specificity.
   --------------------------------------------------------------------- */
.flatpickr-calendar {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop);
}
.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--border); }
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--border); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--surface); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays, span.flatpickr-weekday { background: transparent; color: var(--text); fill: var(--text); }
.flatpickr-current-month .flatpickr-monthDropdown-months {
    height: auto; width: auto; padding: 2px 4px; border: none; box-shadow: none;
    background-image: none; font-size: inherit; font-weight: inherit;
}
.flatpickr-current-month input.cur-year { height: auto !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; color: var(--text); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--muted); fill: var(--muted); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); }
span.flatpickr-weekday { color: var(--muted-2); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; }
.flatpickr-day { color: var(--text); border-radius: 8px; }
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--surface-3); border-color: var(--surface-3); }
.flatpickr-day.today { border-color: var(--accent); }
.flatpickr-day.today:hover { background: var(--surface-3); color: var(--text); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: var(--muted-2); }
.flatpickr-time { border-top: 1px solid var(--border-soft) !important; }
.flatpickr-time input.numInput {
    height: 100% !important; padding: 0 !important; border: none !important;
    background: transparent !important; box-shadow: none !important; color: var(--text) !important;
}
.flatpickr-time input.numInput:hover, .flatpickr-time input.numInput:focus { background: var(--surface-3) !important; }
.flatpickr-time .flatpickr-time-separator { color: var(--muted); }
.numInputWrapper span { border-color: var(--border-soft); }
.numInputWrapper span:hover { background: var(--surface-3); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--muted); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--muted); }

/* ---------------------------------------------------------------------
   OAuth buttons
   --------------------------------------------------------------------- */
.oauth-divider { display: flex; align-items: center; gap: 12px; max-width: 480px; margin: 20px 0 14px; color: var(--muted-2); font-size: 13px; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.oauth-buttons { display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
.oauth-button {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: var(--control-height); padding: 9px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--surface); color: var(--text);
    text-decoration: none; font-size: 14px; font-weight: 600;
    transition: border-color .15s ease;
}
.oauth-button:hover { border-color: var(--muted-2); background: var(--surface-3); color: var(--text-strong); }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Mobile admin nav: a horizontal-scroll strip of 10 tabs is a poor phone
       pattern - it hides the active tab off-screen, fights vertical scroll and
       the iOS edge-swipe, and gives no hint that it scrolls. On mobile the tabs
       wrap into pills instead, so every section is visible and tappable with no
       horizontal scroll at all. */
    .admin-nav { overflow-x: visible; padding: 8px 0; }
    .admin-nav-inner { flex-wrap: wrap; min-width: 0; gap: 6px; padding: 0 14px; }
    .admin-tab {
        padding: 8px 13px; border-bottom: none; margin-bottom: 0;
        border-radius: 999px; background: var(--surface-2); font-size: 13px;
    }
    .admin-tab.active { background: var(--accent); color: var(--accent-ink); }

    /* Mobile header: a compact sticky bar (logo + hamburger); the nav collapses
       into a full-width dropdown drawer toggled by the hamburger. */
    .site-header { position: sticky; top: 0; z-index: 50; }
    .header-inner { position: relative; flex-wrap: nowrap; padding: 12px 16px; }
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

    .main-nav {
        display: none;
        position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 60;
        flex-direction: column; align-items: stretch; gap: 2px;
        padding: 10px; background: var(--surface-2);
        border-bottom: 1px solid var(--border); box-shadow: var(--shadow-pop);
        max-height: calc(100vh - 62px); overflow-y: auto;
    }
    .site-header.nav-open .main-nav { display: flex; }
    .main-nav a { margin: 0; padding: 12px 14px; border-radius: 8px; font-size: 15px; }
    /* Direct-child only: must NOT hit the nested .lang-switcher links, whose
       active state has its own accent background (otherwise the selected
       language becomes near-white text on a light surface = invisible). */
    .main-nav > a:hover, .main-nav > a.active { background: var(--surface-3); }
    .main-nav > a.active { border-bottom: none; }
    .main-nav a.nav-cta { text-align: center; margin-top: 6px; padding: 13px; }

    /* Account submenu flows inline in the drawer instead of an absolute popup. */
    .nav-account { width: 100%; }
    .nav-account summary { padding: 12px 14px; }
    .nav-account .nav-menu {
        position: static; min-width: 0; margin: 2px 0 0; padding: 0 0 0 10px;
        border: none; background: transparent; box-shadow: none;
    }

    .lang-switcher { margin: 8px 0 2px; align-self: flex-start; }
    /* On mobile the theme switch lives in the top bar (right, before the
       hamburger); hide the in-drawer copy. */
    .main-nav .theme-toggle { display: none; }
    .theme-toggle--bar {
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; margin-left: auto; margin-right: 8px;
    }

    .cookie-banner { padding: 10px 14px; font-size: 12.5px; gap: 10px; }
    .cookie-banner button { min-height: 30px; padding: 4px 14px; font-size: 12.5px; }

    .listing-gallery-main img { height: 240px; }
    .listing-photo-placeholder { height: 200px; }

    /* Chat on phones: list OR thread, not both side by side. The auto-opened
       desktop thread stays hidden here so mobile remains list-first. */
    .chat { grid-template-columns: 1fr; max-height: none; }
    .chat--thread-open .chat-list { display: none; }
    .chat--thread-open .chat-back { display: inline; }
    .chat--auto .chat-thread { display: none; }
    .chat-log { max-height: 50vh; }

    .listing-price-mobile {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
        padding: 13px 16px; margin-bottom: 16px;
    }
    .listing-price-mobile .listing-price {
        display: block; font-family: var(--font-disp); font-weight: 900;
        font-size: 23px; letter-spacing: -0.02em; color: var(--text-strong);
    }
    .listing-price-mobile .listing-buybox-meta { display: block; margin: 0; }
    h1 { font-size: 25px; }
    h2 { font-size: 18px; }
    .listing-detail .listing-price { font-size: 26px; }

    .filter-form { padding: 12px; }
    .filter-form input, .filter-form select { min-width: 100%; }
    .filter-form .select2-container { min-width: 100%; }
    /* Full-width stacking would push every car below the fold on a phone. The
       pairs that read as one control anyway - make/model, price from/to, year
       from/to - share a line instead, which buys back two rows. */
    .filter-primary input[type="number"],
    .filter-secondary input[type="number"] { min-width: 0; flex: 1 1 calc(50% - 5px); }
    .filter-primary .select2-container { min-width: 0; flex: 1 1 calc(50% - 5px); }
    .filter-primary .filter-submit { width: 100%; }

    .listing-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .listing-card-body { padding: 10px 12px 12px; }
    .listing-card-body h3 { font-size: 14px; }
    .listing-card-price { font-size: 16px; }

    /* Tables become stacked cards on mobile - no horizontal scroll. main.js
       copies each column header onto the cell as data-label; CSS shows it
       before the value ("Label   value"). The first cell is the card title;
       the .actions cell is a full-width button row. */
    .ads-table, .ads-table tbody, .ads-table tr, .ads-table td { display: block; }
    .ads-table { border: none; background: transparent; border-radius: 0; overflow: visible; }
    .ads-table thead { display: none; }
    .ads-table tr {
        background: var(--surface); border: 1px solid var(--border-soft);
        border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden;
    }
    .ads-table tbody tr:hover { background: var(--surface); }
    .ads-table td {
        display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
        padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
        font-size: 14px; text-align: right; white-space: normal; overflow-wrap: anywhere;
    }
    .ads-table td:last-child { border-bottom: none; }
    .ads-table td[data-label]::before {
        content: attr(data-label); flex: 0 0 38%; text-align: left;
        font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
        text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap;
    }
    /* First cell = card title: full-width, prominent, no label. */
    .ads-table td:first-child {
        justify-content: flex-start; text-align: left; font-size: 15px; font-weight: 700;
        padding: 12px 14px; background: var(--surface-2);
    }
    .ads-table td:first-child::before { content: none; }
    /* Actions cell: full-width row of buttons, no label. */
    .ads-table td.actions {
        justify-content: flex-start; flex-wrap: wrap; gap: 8px 14px; text-align: left;
        background: var(--surface-2); border-top: 1px solid var(--border-soft);
    }
    .ads-table td.actions::before { content: none; }

    .plans-grid { grid-template-columns: 1fr; }
    /* Compact stat cards still tile 2-3 per row on a phone; forcing 1 column
       would make the dashboard needlessly tall. */
    .stat-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

    .form, .oauth-buttons, .oauth-divider { max-width: 100%; }

    .listing-detail-layout { grid-template-columns: 1fr; }
    .listing-detail-sidebar { position: static; }
}

@media (max-width: 380px) {
    .listing-grid { grid-template-columns: 1fr; }
}

/* Equipment filter on the home page: one collapsed row inside the secondary
   panel, so ten category accordions don't push the results off screen. */
.filter-equipment { width: 100%; margin-top: 12px; }
.filter-equipment > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--control-height-sm); padding: 6px 14px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 13px; color: var(--muted); background: var(--surface-2);
}
.filter-equipment > summary:hover { border-color: var(--muted-2); color: var(--text); }
.filter-equipment > summary::-webkit-details-marker { display: none; }
.filter-equipment > summary::before { content: "\25B8"; font-size: 10px; }
.filter-equipment[open] > summary::before { content: "\25BE"; }
.filter-equipment .filter-features { margin-top: 10px; }

/* Price intelligence badge ("12% below market"). Green/amber carry the verdict
   for anyone who reads colour first, but the text says it too - the badge must
   still work in greyscale and for colour-blind readers. */
.price-badge {
    display: inline-block; vertical-align: middle; margin-left: 8px;
    padding: 2px 9px; border-radius: 999px;
    font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
    letter-spacing: .01em; white-space: nowrap;
}
.price-badge--below { background: var(--ok-bg); color: var(--ok); }
.price-badge--above { background: var(--err-bg); color: var(--err); }
.price-badge--fair  { background: var(--surface-3); color: var(--muted); }
.listing-price-verdict { margin: -4px 0 10px; }
.listing-price-verdict .price-badge { margin-left: 0; font-size: 12.5px; padding: 3px 11px; }
.price-badge-hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted-2); }
.listing-card-price .price-badge { font-size: 10.5px; padding: 1px 7px; margin-left: 6px; }

/* Web Push settings block on the account page. */
.push-setting { max-width: 560px; }
.push-toggle-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.push-toggle-row input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; }
.push-setting--blocked .push-toggle-row { cursor: default; opacity: .6; }
.push-status:empty { display: none; }
.push-status { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.push-help { margin: 6px 0 0; font-size: 13px; color: var(--muted-2); }
/* The iOS instructions are the fix for a blocked state, so they read as a
   callout rather than fine print - a user who cannot see them has no way to
   discover that Add to Home Screen is the missing step. */
.push-ios-hint {
    margin-top: 14px; padding: 13px 16px; border-radius: var(--radius-md);
    background: var(--surface-2); border: 1px solid var(--border-soft); font-size: 13.5px;
}
.push-ios-hint strong { display: block; margin-bottom: 6px; color: var(--text-strong); }
.push-ios-hint ol { margin: 0; padding-left: 18px; color: var(--muted); }
.push-ios-hint li { margin: 3px 0; }

/* Admin setup page: status lists that must be readable at a glance, since the
   whole point is answering "is this configured or not" without a terminal. */
.setup-ok   { color: var(--ok); font-weight: 700; }
.setup-warn { color: var(--muted); font-weight: 700; }
.setup-fail { color: var(--err); font-weight: 700; }
.setup-list { list-style: none; padding: 0; margin: 8px 0; }
.setup-list li { padding: 4px 0; display: flex; align-items: center; gap: 8px; }
.setup-list code { font-family: var(--font-mono); font-size: 12.5px; }
.setup-details { margin-top: 12px; }
.setup-details summary { cursor: pointer; font-size: 13.5px; color: var(--muted); }
.setup-keys { margin: 14px 0; padding: 14px 16px; background: var(--surface-2);
              border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.setup-code { width: 100%; font-family: var(--font-mono); font-size: 12.5px;
              border: 1px solid var(--border); border-radius: var(--radius-sm);
              padding: 10px; background: var(--surface); color: var(--text-strong); }
.setup-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.setup-env th { width: 220px; color: var(--muted); font-weight: 600; }
.setup-results { margin-top: 12px; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }

/* Admin notification matrix: event rows, channel columns. */
.notify-grid td small { display: block; color: var(--muted-2); font-size: 12.5px; margin-top: 2px; font-weight: 400; }
.notify-grid th:not(:first-child), .notify-cell { text-align: center; width: 110px; }
.notify-cell label { display: inline-flex; padding: 6px; cursor: pointer; }
.notify-cell input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* One-time "turn on notifications?" dialog. A real overlay rather than a corner
   toast: it asks a yes/no question, and a question you can scroll past is one
   that gets answered by accident. Both buttons are equally reachable - the
   decline is a plain secondary button, not a hidden link. */
.push-prompt {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(12, 15, 22, 0.55);
}
.push-prompt[hidden] { display: none; }
body.push-prompt-open { overflow: hidden; }
.push-prompt-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
    padding: 26px 24px 20px; max-width: 400px; width: 100%; text-align: center;
}
.push-prompt-icon { font-size: 34px; line-height: 1; display: block; margin-bottom: 10px; }
.push-prompt-card h2 { margin: 0 0 8px; font-size: 19px; }
.push-prompt-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.push-prompt-actions { display: flex; gap: 10px; margin-top: 18px; }
.push-prompt-actions button { flex: 1; }
.push-prompt-note { margin-top: 12px !important; font-size: 12.5px; color: var(--muted-2); }
@media (max-width: 480px) {
    /* Bottom sheet on phones: within thumb reach, and it does not cover the
       page content the user was reading. */
    .push-prompt { align-items: flex-end; padding: 0; }
    .push-prompt-card { max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: 26px; }
}
.push-diag { max-width: 640px; }
.push-diag .setup-list li { align-items: flex-start; }
.push-diag code { font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }

/* "Show phone number" on a listing. Styled as a real control so it reads as
   something to press; once pressed it is replaced by the number itself. */
.seller-phone-btn {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
    min-height: var(--control-height-sm); padding: 5px 13px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface-2); color: var(--text); font-size: 13.5px; cursor: pointer;
}
.seller-phone-btn:hover:not(:disabled) { border-color: var(--muted-2); color: var(--text-strong); }
.seller-phone-btn:disabled { opacity: .65; cursor: default; }
.seller-phone-value {
    display: inline-block; margin-top: 6px;
    font-family: var(--font-disp); font-weight: 800; font-size: 17px;
    letter-spacing: -0.01em; color: var(--text-strong); text-decoration: none;
}
.seller-phone-value:hover { color: var(--accent-text); }

/* "Send a test notification" on the profile page. */
.push-test-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.push-test-row[hidden] { display: none; }
.push-test-result { font-size: 13px; color: var(--muted); }
.push-test-result.is-ok  { color: var(--ok); }
.push-test-result.is-bad { color: var(--err); }