* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--accent); }

.container { max-width: var(--container-width, 1280px); margin: 0 auto; padding: 0 20px; }

/* ---------- sticky header (topbar + ticker only stay visible while scrolling — the search bar now scrolls away normally with the page, since on a small phone screen it used to take up half the visible area) ---------- */
.sticky-header-zone {
    position: sticky; top: 0; z-index: 60; background: var(--bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sticky-bottom-padding { height: 0.5em; }

/* ---------- header ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; flex-wrap: wrap; }
.logo { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.version-tag { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.nav { display: flex; align-items: center; font-size: 14px; flex-wrap: wrap; }
.nav > * { margin-left: 18px; margin-bottom: 8px; }
.nav > *:first-child { margin-left: 0; }
.nav-toggle {
    display: none; flex-direction: column; justify-content: space-around;
    width: 32px; height: 28px; padding: 0; margin-left: auto;
    background: none; border: none; cursor: pointer;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; }

/* Mobile nav — collapses behind the hamburger button (#nav-toggle/
   .nav-toggle above) below 720px. These rules are placed *after* the
   base .topbar/.nav rules just above deliberately: two selectors of
   equal specificity resolve by source order regardless of a media
   query, so putting the override earlier (as an initial version of
   this did) would have silently lost to the later, unconditional
   base rule on every matching viewport. */
@media (max-width: 720px) {
    .topbar .container { position: relative; }
    .nav-toggle { display: flex; }
    .nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; margin: 0;
        background: var(--bg); border-top: 1px solid var(--border);
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        padding: 14px 20px; z-index: 70;
    }
    .nav.nav-open { display: flex; }
    .nav > * { margin-left: 0; margin-bottom: 14px; }
}

@media (max-width: 480px) {
    .topbar { padding: 10px 16px; }
    .version-tag { display: none; }
}

.link-button {
    background: none; border: none; padding: 0; margin: 0; font: inherit;
    color: var(--accent); cursor: pointer; text-decoration: none;
}
.link-button:hover { text-decoration: underline; }
.nav .link-button {
    background: none; border: none; padding: 0; margin: 0; font: inherit;
    color: var(--muted); cursor: pointer; text-decoration: none;
}
.nav .link-button:hover { color: var(--ink); }
.country-picker { display: inline-flex; align-items: center; }
.country-picker .flag { font-size: 16px; margin-right: 4px; }
.country-picker select {
    border: none; background: transparent; color: var(--muted); font-size: 13px;
    width: 78px; margin: 0; padding: 0 4px 0 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.country-lock {
    display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted);
    margin-left: 4px; cursor: pointer;
}
.country-lock input[type="checkbox"] { margin: 0; }
.lang-picker { display: inline-flex; align-items: center; }
.lang-picker select {
    border: none; background: transparent; color: var(--muted); font-size: 13px;
    width: auto; margin: 0; padding: 0 4px 0 0;
}
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding: 34px 0 22px; background: var(--hero-bg); }
.hero h1 {
    font-family: var(--font-display); font-weight: var(--display-weight, 700);
    font-size: 30px; margin: 0 0 16px; color: var(--hero-ink, var(--ink)); max-width: 520px; line-height: 1.15;
}

/* ---------- form controls ---------- */
input, select, textarea {
    font: inherit; padding: 10px 12px; border-radius: var(--control-radius, 10px);
    border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--ink);
    width: 100%; margin: 4px 0 12px;
}
/* Checkboxes/radios opt out of the width:100% above — without this, the
   input becomes a full-width box and the browser centers the small
   native checkbox glyph inside it, floating it away from its own label
   instead of sitting right next to it at its normal small size. */
input[type="checkbox"], input[type="radio"] {
    width: auto; padding: 0; margin: 4px 6px 12px 0; vertical-align: middle;
}
label { font-size: 13px; color: var(--muted); }
.helptext {
    display: block; font-style: italic; font-size: 12px; color: var(--muted); margin-top: 4px;
}

/* Form validation errors — Django's own default ul.errorlist output
   (used by {{ form.as_p }} and {{ field.errors }} across every form
   site-wide: registration, login, posting a listing, etc.) rendered
   as plain, easy-to-miss text with no styling at all before this —
   requested directly after someone couldn't tell why their
   registration hadn't gone through. Bold, colored text on a tinted
   background with a left accent bar — deliberately not relying on
   color alone (bold weight + the background box carry the same
   "pay attention" signal), and using the same red already
   established elsewhere in this file for delete/destructive actions
   rather than introducing a new one-off color. */
ul.errorlist {
    list-style: none; margin: 6px 0; padding: 10px 14px;
    background: #FBE7E4; border-left: 4px solid #C0392B; border-radius: 4px;
    color: #C0392B; font-weight: 700; font-size: 13px;
}
ul.errorlist li { margin: 0; }
ul.errorlist li + li { margin-top: 4px; }

button, .btn {
    font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
    padding: 10px 18px; border-radius: var(--control-radius, 10px); border: 1px solid transparent;
    background: var(--accent); color: var(--on-accent);
    text-decoration: none; display: inline-block;
}
button.secondary, .btn.secondary {
    background: transparent; color: var(--ink); border-color: var(--border-strong);
}

form p { margin: 0 0 10px; }

/* ---------- messages ---------- */
ul.messages { list-style: none; padding: 10px 0; margin: 0; }
ul.messages li {
    padding: 10px 14px; border-radius: var(--control-radius, 10px); margin-bottom: 8px;
    background: var(--chip-bg); color: var(--chip-ink); font-size: 14px;
}

/* ---------- chips ---------- */
.chips { display: flex; padding: 18px 0 6px; flex-wrap: wrap; }
.chips > * { margin: 0 8px 8px 0; }
.chip, a.chip {
    padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
    background: var(--chip-bg); color: var(--chip-ink); border: 1px solid var(--chip-border);
    text-decoration: none; display: inline-block;
}

/* ---------- section label ---------- */
.section-label {
    padding: 22px 0 6px; font-family: var(--font-display); font-weight: 700;
    font-size: 16px; color: var(--ink); text-transform: var(--label-case, none);
    letter-spacing: var(--label-tracking, normal);
}

/* ---------- listing grid & cards ---------- */
.grid { display: flex; flex-wrap: wrap; padding: 10px 0 30px; list-style: none; margin: 0; }
.grid > * { flex: 1 1 220px; margin: 0 16px 16px 0; max-width: 100%; }
@media (min-width: 600px) { .grid > * { max-width: calc(50% - 8px); } }
@media (min-width: 900px) { .grid > * { max-width: calc(33.333% - 11px); } }
@media (min-width: 1200px) { .grid > * { max-width: calc(25% - 12px); } }
.card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-card, 14px); overflow: hidden; position: relative;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); border-color: var(--border-strong); }
.card .fav-btn {
    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.9); color: #666; display: flex; align-items: center; justify-content: center;
    font-size: 15px; border: none; cursor: pointer; text-decoration: none; z-index: 2;
}
.card .fav-btn.favorited { color: #d6316b; }
.card > a { display: block; color: inherit; text-decoration: none; }
.card .photo {
    /* aspect-ratio, not a fixed height — a fixed pixel height meant a
       fixed 220px-wide mobile card (below the 600px breakpoint, .grid
       has no max-width constraint at all, so a card is nearly the
       full viewport width) got the *same* 160px-tall photo box as a
       ~280px desktop card, cropping proportionally far more off the
       top/bottom on a narrow phone specifically — reported directly.
       16/9 keeps roughly the same look this already had at the
       existing 3-4-column desktop widths (where 280px : 160px was
       already close to that ratio), just scaling correctly with the
       card's own actual width at every breakpoint instead of only
       that one. */
    aspect-ratio: 16 / 9; background: var(--photo-bg);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 11px; color: var(--muted);
    overflow: hidden;
}
.no-photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); }
.no-photo-emblem { width: 34px; height: 34px; opacity: 0.7; color: var(--border-strong); }
.no-photo-label { font-family: var(--font-mono); font-size: 11px; }
.main-photo-frame .no-photo-emblem { width: 56px; height: 56px; }
.main-photo-frame .no-photo-label { font-size: 13px; }
.card .body { padding: 12px 14px 14px; position: relative; }
.card .title { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.card .meta { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.card .specs { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.card .specs > * { margin: 0 6px 6px 0; }
.card .specs span {
    font-family: var(--font-mono); font-size: 10.5px; padding: 3px 7px;
    background: var(--spec-bg); color: var(--spec-ink); border-radius: var(--spec-radius, 5px);
}
.card .foot { display: flex; align-items: center; justify-content: space-between; }
.card .foot > *:first-child { margin-right: 8px; }
.my-listing-status {
    font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em;
}
.my-listing-status.status-active { color: #1E8E5A; }
.my-listing-status.status-expired { color: #B8590A; }
.my-listing-status.status-draft { color: var(--muted); }
.my-listing-status.status-paused { color: #A6740F; }
.card-manage {
    padding: 10px 14px 14px; border-top: 1px solid var(--border);
}
.card-manage-meta { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.card-manage-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.card-manage-actions a, .card-manage-actions button, .card-manage-actions form {
    font-size: 13px; color: var(--accent); background: none; border: none; padding: 0;
    cursor: pointer; text-decoration: none; font-family: inherit; margin-right: 10px;
}
.card-manage-actions a:hover, .card-manage-actions button:hover { text-decoration: underline; }
.card-manage-actions .card-manage-delete { color: #C0392B; }
.price-tag {
    font-family: var(--font-mono); font-weight: 700; font-size: 14px;
    color: var(--price-ink); background: var(--price-bg); padding: 4px 10px;
    border-radius: var(--price-radius, 6px); position: relative; white-space: nowrap;
}
.card .seller { font-size: 11px; color: var(--muted); }

/* Theme signature: swing-tag price with a punched hole — shared by all
   the light, paper-toned themes (Daylight Market and the newer palette
   candidates), since it reads well against any of their light card backgrounds. */
[data-theme="daylight"] .price-tag,
[data-theme="harbor"] .price-tag,
[data-theme="meadow"] .price-tag,
[data-theme="zest"] .price-tag,
[data-theme="clay"] .price-tag {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); padding-left: 16px;
}
[data-theme="daylight"] .price-tag::before,
[data-theme="harbor"] .price-tag::before,
[data-theme="meadow"] .price-tag::before,
[data-theme="zest"] .price-tag::before,
[data-theme="clay"] .price-tag::before {
    content: ""; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 3px; border-radius: 50%; background: var(--price-ink); opacity: 0.5;
}

/* Theme signature: Spec Sheet — perforated ticket-stub edge on cards */
[data-theme="specsheet"] .card .body::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background-image: repeating-linear-gradient(90deg, var(--border-strong) 0 5px, transparent 5px 10px);
}
[data-theme="specsheet"] .card { border-radius: 4px; }

/* ---------- ticker → decorative accent line (Night Exchange signature) ---------- */
.ticker { display: none; height: 3px; background: var(--ticker-ink); opacity: 0.7; }
[data-theme="night"] .ticker, [data-theme="midnight"] .ticker, [data-theme="obsidian"] .ticker, [data-theme="carbon"] .ticker { display: block; }

/* ---------- theme switcher ---------- */
.theme-switcher { display: flex; align-items: center; flex-wrap: wrap; }
.theme-switcher > * { margin-right: 6px; margin-bottom: 6px; }
.theme-switcher button {
    background: var(--chip-bg); color: var(--chip-ink); border: 1px solid var(--chip-border);
    font-size: 12px; font-weight: 500; padding: 6px 10px;
}
.theme-switcher button[aria-current="true"] { border-color: var(--accent); color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { padding: 20px 0 30px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); margin-top: 20px; }

/* ---------- plain lists (chat, ratings, generic) ---------- */
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.conversation-last-date { color: var(--muted); font-size: 12px; margin-left: 8px; }

/* ---------- pagination ---------- */
.pagination { display: flex; align-items: center; padding: 16px 0; font-size: 13px; color: var(--muted); }
.pagination > * { margin-right: 10px; }
.pagination a { color: var(--accent); text-decoration: none; }
.load-more-link {
    display: inline-block; padding: 10px 20px; border: 1px solid var(--border-strong);
    border-radius: var(--control-radius, 10px); font-weight: 500;
}

/* ================= Homepage ================= */

.cta-button {
    background: #E8891F; color: #fff; font-weight: 700;
    padding: 10px 18px; border-radius: var(--control-radius, 10px); text-decoration: none;
    display: inline-flex; align-items: center; white-space: nowrap;
}
.cta-button:hover { background: #D67A15; }

/* Empty-category fallback (no listings yet, or none matching the
   current filters) — "be the first to post" + related categories
   that do have listings, instead of a bare "no results" dead end.
   Particularly relevant for a brand-new site where this is the
   common case, not the exception. */
.empty-category-state {
    list-style: none; text-align: center; padding: 40px 20px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--control-radius, 10px);
}
.related-categories-list {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; padding: 0; margin: 12px 0 0;
}
.related-categories-list li a {
    display: inline-block; padding: 6px 14px; border: 1px solid var(--border);
    border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 13px;
}
.related-categories-list li a:hover { background: var(--card-bg-hover, var(--card-bg)); }
.promote-nudge {
    border: 1px solid #F0B429; box-shadow: 0 0 0 3px rgba(240,180,41,0.15);
}
.promote-nudge-hint { text-align: center; font-size: 12px; color: var(--muted); margin: 6px 0 0; }

.search-row {
    display: flex; flex-wrap: wrap; background: var(--card-bg); border: 1px solid var(--border-strong);
    border-radius: var(--control-radius, 10px); overflow: hidden; margin: 18px 0;
}
.header-spacer { height: 1.2em; }
.search-row input, .search-row select {
    border: none; border-radius: 0; margin: 0; background: transparent;
    border-right: 1px solid var(--border); flex: 1 1 160px;
}
.search-row input:focus, .search-row select:focus { outline: none; }
.search-row .kw { flex: 2 1 220px; }
.search-row .cat { flex: 1 1 160px; }
.search-row .loc { flex: 1 1 120px; border-right: none; }
.search-row button { border-radius: 0; flex: 1 1 100px; }

.category-nav { display: flex; justify-content: center; padding: 6px 0 18px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.category-nav a {
    display: flex; flex-direction: column; align-items: center;
    color: var(--muted); text-decoration: none; font-size: 12px; white-space: nowrap; flex-shrink: 0;
    margin-right: 24px;
}
.category-nav a:last-child { margin-right: 0; }
.category-nav a svg { margin-bottom: 4px; }
.category-nav a:hover, .category-nav a.active { color: var(--ink); }
.category-nav svg { color: var(--accent); }

.home-tabs { display: flex; border-bottom: 1px solid var(--border); margin-top: 18px; }
.home-tabs a { margin-right: 26px; }
.home-tabs a {
    padding: 10px 2px 12px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
    border-bottom: 2px solid transparent;
}
.home-tabs a.active { color: var(--ink); border-bottom-color: var(--accent); }

.sidebar-layout { display: flex; align-items: flex-start; }
.sidebar-layout .sidebar { flex: 0 0 240px; margin-right: 32px; }
.sidebar-layout .main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px) { .sidebar-layout { flex-direction: column; } .sidebar-layout .sidebar { flex-basis: auto; margin-right: 0; margin-bottom: 24px; width: 100%; } }

.filter-form h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 10px; }
.filter-form label { display: block; margin-top: 12px; }
.filter-form input, .filter-form select { margin: 4px 0 0; }
.filter-form button { width: 100%; margin-top: 14px; }

.sidebar-block { margin-bottom: 26px; }
.sidebar-block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 10px; }
.sidebar-block ul { list-style: none; margin: 0; padding: 0; }
.sidebar-block li { margin-bottom: 9px; font-size: 14px; }
.sidebar-block a { color: var(--ink); text-decoration: none; }
.sidebar-block a:hover { color: var(--accent); }
.sidebar-block .hint { display: block; font-size: 12px; color: var(--muted); }

.home-section { margin: 26px 0; }
.home-section .section-head { display: flex; align-items: baseline; justify-content: space-between; }
.home-section .section-head a { font-size: 13px; color: var(--accent); text-decoration: none; }

.carousel { display: flex; flex-wrap: wrap; }
.carousel > * { flex: 1 1 180px; margin: 0 14px 14px 0; max-width: 100%; }
@media (min-width: 600px) { .carousel > * { max-width: calc(50% - 7px); } }
@media (min-width: 900px) { .carousel > * { max-width: calc(33.333% - 10px); } }
@media (min-width: 1200px) { .carousel > * { max-width: calc(25% - 11px); } }
.mini-card {
    display: block; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-card, 14px); overflow: hidden; text-decoration: none; color: inherit; position: relative;
}
.mini-card .photo { aspect-ratio: 16 / 9; }
.mini-card .fav-btn {
    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.9); color: #666; display: flex; align-items: center; justify-content: center;
    font-size: 15px; border: none; cursor: pointer; text-decoration: none; z-index: 2;
}
.mini-card .fav-btn.favorited { color: #d6316b; }
.mini-card .body { padding: 10px 12px 12px; }
.mini-card .title { font-size: 13px; font-weight: 600; margin: 0 0 4px; color: var(--ink); line-height: 1.3; }
.mini-card .meta { font-size: 11px; color: var(--muted); margin: 0 0 6px; }
.mini-card .price-tag { font-size: 13px; }

/* ---------- listing detail: breadcrumb + two-column layout ---------- */
.breadcrumb-bar { display: flex; align-items: center; margin: 16px 0; }
.back-btn {
    border: 1px solid var(--border-strong); border-radius: var(--control-radius, 10px);
    padding: 8px 16px; margin-right: 18px; color: var(--ink); text-decoration: none; font-size: 14px;
    background: var(--card-bg); flex-shrink: 0;
}
.breadcrumb { font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--accent); text-decoration: none; margin-right: 4px; }
.breadcrumb span { margin-left: 4px; }

.listing-layout { display: flex; flex-wrap: wrap; align-items: flex-start; }
.listing-media { flex: 2 1 480px; margin-right: 32px; min-width: 0; }
.listing-side { flex: 1 1 260px; min-width: 260px; }

.main-photo-frame {
    position: relative; height: 420px; background: var(--photo-bg);
    border-radius: var(--radius-card, 14px); overflow: hidden; cursor: zoom-in;
    display: flex; align-items: center; justify-content: center;
}
.main-photo-frame.empty { color: var(--muted); font-size: 14px; cursor: default; }
.main-photo-frame img { width: 100%; height: 100%; object-fit: contain; }
.media-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.35); color: #fff; border: none; width: 38px; height: 38px;
    border-radius: 50%; font-size: 20px; cursor: pointer;
}
.media-nav:hover { background: rgba(0,0,0,0.55); }
.media-prev { left: 12px; }
.media-next { right: 12px; }
.media-counter {
    position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.55); color: #fff;
    font-size: 12px; padding: 3px 10px; border-radius: 999px;
}
.thumb-strip { display: flex; flex-wrap: wrap; margin-top: 10px; }
.thumb-strip .thumb {
    width: 80px; height: 60px; object-fit: cover; margin: 0 8px 8px 0; cursor: pointer;
    border-radius: 8px; border: 2px solid transparent; opacity: 0.75;
}
.thumb-strip .thumb.active { border-color: var(--accent); opacity: 1; }

.listing-side h1 { font-size: 22px; margin: 0 0 10px; }
.detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.detail-title-row h1 { flex: 1 1 auto; margin-right: 12px; }
.detail-title-row .promoted-badge {
    position: static; display: inline-block; align-self: center;
}
.detail-fav .fav-btn {
    position: static; width: 36px; height: 36px; background: var(--card-bg);
    border: 1px solid var(--border-strong); font-size: 18px; flex-shrink: 0;
}
.price-tag.big { font-size: 22px; padding: 8px 16px; display: inline-block; margin-bottom: 16px; }
.seller-box { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px 0; margin-bottom: 16px; }
.seller-name { font-weight: 600; }
.seller-meta { display: block; font-size: 13px; color: var(--muted); text-decoration: none; margin-top: 2px; }
.views-count { font-size: 12px; color: var(--muted); margin-top: 14px; }
.listing-description { margin-top: 26px; max-width: 720px; }
.translation-note { font-size: 12px; color: var(--muted); font-style: italic; }
.ad-slot { margin: 20px 0; text-align: center; }
.promoted-badge {
    position: absolute; top: 8px; left: 8px; background: var(--accent); color: var(--on-accent);
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; z-index: 2;
}
.verified-badge {
    display: inline-block; background: #1E8E5A; color: #fff; font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
.unread-badge {
    display: inline-block; background: #d6316b; color: #fff; font-size: 11px; font-weight: 700;
    min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 999px; padding: 0 4px;
}
.car-fields {
    border: 1px solid var(--border-strong); border-radius: var(--radius-card, 14px);
    padding: 4px 16px 16px; margin: 16px 0; background: var(--card-bg);
}
.local-only-badge {
    display: inline-block; font-size: 12px; color: var(--muted); margin-top: 6px;
}
.car-fields legend { font-weight: 700; font-size: 15px; padding: 0 6px; }
.spec-badges { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 8px; }
.spec-badges span {
    font-size: 11px; color: var(--muted); background: var(--hero-bg); border-radius: 999px;
    padding: 2px 8px; margin: 0 4px 4px 0;
}
.specs-table { border-collapse: collapse; margin: 12px 0; }
.specs-table td { padding: 4px 16px 4px 0; font-size: 14px; }
.specs-table td:first-child { color: var(--muted); }

.data-table { border-collapse: collapse; margin: 12px 0; width: 100%; max-width: 720px; }
.data-table th, .data-table td { padding: 8px 16px 8px 0; font-size: 14px; text-align: left; border-bottom: 1px solid var(--border-strong); }
.data-table th { color: var(--muted); font-weight: 600; }

/* ---------- social login buttons ---------- */
.social-login { display: flex; flex-wrap: wrap; margin: 16px 0; }
.social-login form { flex: 1 1 200px; margin: 0 10px 10px 0; }
.social-btn {
    display: block; width: 100%; text-align: center; padding: 10px 16px;
    border-radius: var(--control-radius, 10px); border: 1px solid var(--border-strong);
    font-weight: 600; font-size: 14px; color: var(--ink); background: var(--card-bg); cursor: pointer;
}
.social-btn:hover { border-color: var(--accent); }
.or-divider { color: var(--muted); font-size: 13px; margin: 4px 0 16px; }

/* ---------- photo upload dropzone + previews ---------- */
.photo-dropzone {
    display: block; border: 2px dashed var(--border-strong); border-radius: var(--radius-card, 14px);
    padding: 24px 16px; text-align: center; color: var(--muted); font-size: 14px;
    cursor: pointer; margin: 8px 0; background: var(--card-bg);
}
.photo-dropzone.dragover { border-color: var(--accent); color: var(--ink); background: var(--hero-bg); }
.photo-count-hint { display: block; font-size: 13px; color: var(--muted); margin: 6px 0; }
.photo-preview-grid { display: flex; flex-wrap: wrap; margin: 10px 0; }
.photo-preview-item {
    position: relative; width: 90px; height: 90px; margin: 0 8px 8px 0;
    border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
}
.photo-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove-btn {
    position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 14px; line-height: 1; cursor: pointer;
}
.photo-remove-btn:hover { background: rgba(0,0,0,0.85); }

@media (max-width: 720px) {
    .listing-layout { flex-direction: column; }
    .listing-media, .listing-side { flex-basis: auto; margin-right: 0; min-width: 0; }
}

.gallery-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.92); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.gallery-overlay img {
    max-width: 85vw; max-height: 85vh; object-fit: contain; border-radius: 6px;
}
.gallery-back {
    position: absolute; top: 18px; left: 18px; z-index: 1001;
    background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3);
    padding: 8px 16px; border-radius: 999px; font-size: 14px; cursor: pointer;
}
.gallery-back:hover { background: rgba(255,255,255,0.25); }
.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 1001;
    background: rgba(255,255,255,0.15); color: #fff; border: none; width: 48px; height: 48px;
    border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer;
}
.gallery-nav:hover { background: rgba(255,255,255,0.3); }
.gallery-prev { left: 18px; }
.gallery-next { right: 18px; }
.gallery-counter {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 13px; background: rgba(0,0,0,0.4); padding: 4px 12px; border-radius: 999px;
}

/* ---------- support chat widget ---------- */
.support-chat-toggle {
    position: fixed; right: 20px; bottom: 20px; z-index: 1000;
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent); color: var(--on-accent); font-size: 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.scroll-to-top {
    position: fixed; left: 20px; bottom: 20px; z-index: 1000;
    width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--card-bg); color: var(--ink); border: 1px solid var(--border-strong);
    font-size: 20px; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.support-chat-panel {
    position: fixed; right: 20px; bottom: 84px; z-index: 1000;
    width: 320px; max-height: 440px; display: none; flex-direction: column;
    background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22); overflow: hidden;
}
.support-chat-panel.open { display: flex; }
.support-chat-header {
    padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--on-accent);
    background: var(--accent);
}
.support-chat-messages { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 13px; }
.support-chat-msg { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; max-width: 85%; line-height: 1.4; }
.support-chat-msg-visitor { background: var(--accent); color: var(--on-accent); margin-left: auto; }
.support-chat-msg-assistant { background: var(--hero-bg); color: var(--ink); margin-right: auto; }
.support-chat-typing { opacity: 0.6; }
.support-chat-form { display: flex; border-top: 1px solid var(--border-strong); }
.support-chat-form input {
    flex: 1; border: none; padding: 10px 12px; font-size: 13px; background: var(--field-bg); color: var(--ink);
}
.support-chat-form button {
    border: none; background: var(--accent); color: var(--on-accent); padding: 0 16px; cursor: pointer; font-size: 13px;
}