/* ============================================================
   Bilcheck — Consolidated sell runtime layer (v17.3.11)
   Single runtime override source for the sell flow.

   Internal section map
   01. Sell hub / listings / inbox shell
   02. Sell shell / account / page wrappers
   03. Footer / page-wrapper / layout hardening
   04. Tokens / app-wide visual polish
   05. Header / progress / shared text
   06. Forms / shared cards / create flow
   07. Marketplace / sell cards / reporting
   08. Inspection / auth / account polish
   08B. Account / message / detail shell ownership
   09. Utilities / mobile / print / cleanup

   Goal: keep one runtime CSS truth without re-introducing
   split legacy override files. New sell-specific fixes should
   land in the matching section below instead of ad-hoc patches.
   ============================================================ */

/* ============================================================
   01. SELL HUB / LISTINGS / INBOX SHELL
   ============================================================ */

/* ------------------------------------------------------------
   Legacy sell components extracted from sell-enhancements.css.
   Kept in one place, then progressively normalized by section.
   ------------------------------------------------------------ */

/* --- Hub: welcome bar -------------------------------------- */
.hub-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 24px;
  flex-wrap: wrap;
}

.hub-welcome-text h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 2px;
  color: var(--text);
}

.hub-welcome-text p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* --- Hub: nav-cards --------------------------------------- */
.hub-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}

@media (max-width: 600px) {
  .hub-nav-grid { grid-template-columns: 1fr; }
}
.hub-nav-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised, var(--surface, rgba(255,255,255,0.025)));
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: background .14s, border-color .14s, transform .12s;
}

.hub-nav-card:hover,
.hub-nav-card:focus-visible {
  background: var(--surface-2, rgba(255,255,255,0.055));
  border-color: var(--border-strong);
  transform: translateY(-1px);
  outline: none;
}

.hub-nav-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--action-soft, rgba(29,95,204,0.1));
}

.hub-nav-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hub-nav-body strong {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text);
}

.hub-nav-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.hub-nav-arrow {
  font-size: 1.2rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* --- Mina annonser: topbar -------------------------------- */
.my-listings-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.my-listings-heading {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 800;
  margin: 0;
}

.my-listings-unread-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(232,193,78,0.18);
  color: var(--brand);
  border: 1px solid rgba(232,193,78,0.3);
}

/* --- Mina annonser: tab-filter ---------------------------- */
.my-listing-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.my-listing-tabs::-webkit-scrollbar { display: none; }
.my-listing-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.my-listing-tab:hover { color: var(--text); }
.my-listing-tab.active {
  color: var(--text);
  border-bottom-color: var(--brand);
}

.my-listing-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
}

.my-listing-tab.active .my-listing-tab-count {
  background: rgba(232,193,78,0.2);
  color: var(--brand);
}

/* --- Light mode overrides --------------------------------- */
body.light-mode .hub-nav-card {
  background: #fff;
  border-color: rgba(16,28,48,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

body.light-mode .hub-nav-card:hover,
body.light-mode .hub-nav-card:focus-visible {
  background: #f5f8ff;
  border-color: rgba(16,28,48,0.18);
}

body.light-mode .hub-nav-body strong,
body.light-mode .my-listings-heading,
body.light-mode .hub-welcome-text h2 {
  color: #0d1726;
}

body.light-mode .hub-welcome-text p {
  color: #6b7a99;
}

body.light-mode .hub-nav-icon {
  background: #f0f4fa;
}

body.light-mode .my-listing-tab.active {
  color: #0d1726;
}

body.light-mode .hub-nav-arrow { color: #aab4c8; }

/* ============================================================
   02. SELL SHELL / ACCOUNT / PAGE WRAPPERS
   ============================================================ */

/* ------------------------------------------------------------
   BC-system shell used by hub, messages, account and page-level
   wrappers rendered from the sell app runtime.
   ------------------------------------------------------------ */

/* Gemensamt screen-wrap */
.bc-screen-wrap {
  max-width: var(--content-max, 1080px);
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* Sidhuvud med titel + räknare */
.bc-page-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.bc-page-head h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 800;
  margin: 0;
}

.bc-page-count {
  font-size: 0.84rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Tom state */
.bc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  gap: 12px;
}

.bc-empty-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 8px;
}

.bc-empty-state h3 { margin: 0; }
.bc-empty-state p { color: var(--text-muted); margin: 0; }
.bc-empty-state .btn { margin-top: 8px; }

/* ── MEDDELANDELAYOUT ──────────────────────────────────────── */
.bc-messages-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  overflow: hidden;
}

.bc-inbox {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: calc(100vh - 120px);
  overflow: hidden;
  border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
  .bc-inbox {
    grid-template-columns: 1fr;
    grid-template-rows: 260px 1fr;
    height: auto;
  }

}

.bc-inbox-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--brand);
  color: #0d1422;
}

/* Chat panel */
.bc-inbox-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* ── KONTO-PROFIL ──────────────────────────────────────────── */
.bc-account-shell {
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bc-account-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
}

.bc-account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand) 0%, #c9942a 100%);
  color: #0d1422;
  font-size: 1.4rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-account-info { flex: 1; min-width: 0; }
.bc-account-info h2 { font-size: 1.1rem; font-weight: 800; margin: 0 0 2px; }
.bc-account-email { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.bc-account-location { font-size: 0.82rem; color: var(--text-muted); margin: 2px 0 0; }
.bc-account-logout { flex-shrink: 0; }

.bc-account-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bc-account-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 10px;
  text-decoration: none;
  color: var(--text);
  border-right: 1px solid var(--border);
  transition: background .12s;
  cursor: pointer;
  background: transparent;
}

.bc-account-stat:last-child { border-right: none; }
.bc-account-stat:hover { background: rgba(255,255,255,0.04); }
.bc-account-stat--alert .bc-account-stat-num { color: var(--brand); }
.bc-account-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.bc-account-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.bc-account-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   03. FOOTER / PAGE-WRAPPER / LAYOUT HARDENING
   ============================================================ */

/* ------------------------------------------------------------
   Sell-specific layout safety rails. These rules stay grouped so
   footer regressions and wrapper spacing bugs are easy to trace.
   ------------------------------------------------------------ */

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Hide all panels by default — only the .active one is shown.
   This was missing, causing multiple screens to render simultaneously. */
#sellAppRoot .panel {
  display: none !important;
}
#sellAppRoot .panel.active {
  display: block !important;
  animation: panelFadeIn 0.22s ease both;
}
/* Ensure [hidden] attribute always hides content regardless of other rules */
[hidden] { display: none !important; }

/* --- Marketplace/sell wrappers: keep one predictable width -- */
.sell-create-page,
.bc-screen-wrap,
.marketplace-layout .listing-main {
  width: 100%;
}

.sell-create-page,
.bc-screen-wrap {
  max-width: var(--content-max, 1080px);
  margin-left: auto;
  margin-right: auto;
}

/* --- Footer: single canonical dark surface ------------------ */
.site-footer,
.legal-footer {
  background: #1c2b4a;
  color: var(--footer-ink-soft);
  margin-top: 60px;
  border: 0;
  box-shadow: none;
}

.legal-footer p,
.legal-footer .muted,
.site-footer .footer-note,
.legal-footer .footer-note {
  color: var(--footer-ink-soft);
}

.legal-footer-top strong,
.legal-footer-column h3 {
  color: #fff;
}

.legal-footer-meta .pill,
.legal-footer .pill {
  color: var(--footer-ink);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}

.legal-footer-grid > *,
.site-footer .legal-footer-column,
.legal-footer .legal-footer-column,
body.marketplace-page .legal-footer-grid .legal-footer-column,
body.marketplace-page .legal-footer-column {
  background: transparent;
  background-image: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.legal-footer-column a,
.legal-footer-column button {
  color: rgba(255,255,255,0.80);
  padding: 4px 0;
  font-size: 13px;
}

.legal-footer-column a:hover,
.legal-footer-column button:hover,
.legal-footer-column a:focus-visible,
.legal-footer-column button:focus-visible {
  color: #fff;
  text-decoration: none;
}

.legal-footer .site-footer-inner,
.legal-footer .legal-footer-inner {
  display: block;
  gap: 0;
  padding: 36px 20px 28px;
}

.legal-footer .legal-footer-top {
  margin-bottom: 24px;
}

.legal-footer .legal-footer-grid {
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.10);
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sell-dashboard-strip { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.sell-stat-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 70px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
}

.sell-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.sell-stat-card strong {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}

.account-check-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.account-check-row:last-of-type { border-bottom: none; }
.account-check-row span {
  flex: 1;
  display: grid;
  gap: 4px;
  color: var(--text-soft);
}

.account-check-row strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.92rem;
  color: var(--text);
}

.account-check-row small {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.account-check-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
  cursor: pointer;
}

/* --- Mobile: layout collapse belongs here, not as overrides -- */
@media (max-width: 760px) {
  .legal-footer .legal-footer-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .legal-footer .site-footer-inner,
  .legal-footer .legal-footer-inner {
    padding: 28px 16px 24px;
  }

  .bc-inbox-panel {
    height: auto;
    min-height: 60vh;
  }

}

body.light-mode .sell-stat-card { background: rgba(16,28,48,0.04); }
body.light-mode .sell-stat-card strong,
body.light-mode .account-check-row strong {
  color: #0d1726;
}

/* ============================================================
   04. TOKENS / APP-WIDE VISUAL POLISH
   ============================================================ */

/* ------------------------------------------------------------
   Shared polish for the modern runtime. Keep token tweaks and
   global visual language here, not mixed into component blocks.
   ------------------------------------------------------------ */

/* ---- Tokens (light refinements, no redefinitions that fight) --- */
:root {
  --footer-ink: rgba(255,255,255,0.90);
  --footer-ink-soft: rgba(255,255,255,0.72);
  --footer-ink-muted: rgba(255,255,255,0.52);
  --ink-strong: #0f172a;
  --ink-soft: #475569;
  --ink-muted: #64748b;
  --surface-raised: #ffffff;
  --surface-sunken: #f9f7f2;
  --border-soft: #eef0f3;
  --shadow-crisp: 0 1px 2px rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.05);
  --shadow-lift: 0 4px 16px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --action-soft-2: rgba(29,95,204,0.06);
}

/* SELL NAV TABS — ownership lives in the consolidated runtime layer */
.sell-nav-tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  z-index: 150;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s ease;
  will-change: transform;
}

.sell-nav-tabs-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sell-nav-tabs-inner::-webkit-scrollbar { display: none; }
.sell-nav-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
  padding: 0 20px;
  height: var(--tabs-h);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sell-nav-tab:hover { color: var(--text); }
.sell-nav-tab.active {
  color: var(--action);
  border-bottom-color: var(--action);
  font-weight: 600;
}

@media (max-width: 480px) {
  .sell-nav-tabs.modern-tabs { gap: 4px; }
  .sell-nav-tab {
    font-size: 0.8rem;
    padding: 10px 8px;
  }

}

.nav-dot {
  width: 7px;
  height: 7px;
  background: var(--bad);
  border-radius: 50%;
  display: inline-block;
}

/* ============================================================
   HEADER — scroll-away (behavior in scroll-header.js)
   ============================================================ */
.app-header,
.header {
  transition: transform 260ms cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

body.header-hidden .app-header,
body.header-hidden .header {
  transform: translateY(-100%);
}

/* Tabs bar follows the header when it hides, so no empty strip appears */
body.header-hidden .sell-nav-tabs {
  transform: translateY(calc(-1 * var(--header-h, 64px)));
}

/* If no tabs are rendered on a page, kill the outdated hardcoded bar */
.marketplace-page-no-tabs { --tabs-h: 0px; }
.marketplace-page-no-tabs .sell-nav-tabs { display: none; }

/* ============================================================
   PROGRESS — only visible during check screen
   navigation.js toggles `.active` / `.visible` / `hidden`
   v17.2.0: REMOVED the compact-state height collapse that
   caused a scroll-flicker feedback loop (hiding .dots changed
   the element height, which caused the scroll threshold to
   uncross, which caused header-hidden to toggle off, which
   made .dots come back, which re-crossed the threshold —
   infinite blink). The bar is now simply sticky. Its top
   collapses from `header-h + 8px` to `8px` when the header
   is hidden, which is geometry-only (no layout shift).
   ============================================================ */
.progress-wrap { display: none; }
.progress-wrap.active,
.progress-wrap.visible { display: block; }
.progress-wrap[hidden] { display: none; }

/* Hide progress if the user is on a non-check screen even if JS forgot */
html[data-screen="home"] .progress-wrap,
html[data-screen="config"] .progress-wrap,
html[data-screen="summary"] .progress-wrap,
html[data-screen="services"] .progress-wrap {
  display: none;
  position: static;
}

/* ============================================================
   05. HEADER / PROGRESS / SHARED TEXT
   ============================================================ */

/* ------------------------------------------------------------
   Cross-screen behavior hooks used by header, progress and text
   consistency. Keep behavior-linked selectors adjacent here.
   ------------------------------------------------------------ */

/* SHARED — muted text consistent across entire app */
.muted, .small.muted, .field-hint, .footer-note-flat {
  color: var(--ink-soft);
}

/* ============================================================
   06. FORMS / SHARED CARDS / CREATE FLOW
   ============================================================ */

/* CREATE FLOW — single-column wizard, no floating gutter */
.sell-create-sidebar { display: none; }
.sell-create-layout,
.sell-create-wizard-layout {
  grid-template-columns: 1fr;
  gap: 16px;
}

.sell-create-page {
  max-width: 980px;
  margin: 0 auto;
}

.sell-step-panel[hidden] { display: none; }
.sell-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.sell-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sell-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .sell-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sell-grid-two,
  .sell-grid-three { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Shared sell-form/card primitives. Reuse these shapes here
   instead of re-declaring card chrome in later screen sections.
   ------------------------------------------------------------ */
.sell-step-panel > .sell-form-section,
.report-summary-box,
.hero-card,
.calc,
.section-result,
.auth-required-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.sell-preview-shell-embedded,
.confidence-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Wizard step panel breathing room */
.sell-step-panel > .sell-form-section {
  padding: 24px;
  box-shadow: var(--shadow-crisp);
}

.sell-step-panel > .sell-form-section + .sell-form-section { margin-top: 16px; }
.sell-form-subsection-head {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.sell-form-subsection-head .mini-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 4px;
}

.sell-form-subsection-head h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 4px;
}

.sell-form-subsection-head .form-section-lead,
.form-section-lead { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* Wizard progress bar at top of create flow */
.sell-wizard-progress {
  display: flex;
  gap: 6px;
  padding: 12px 0 18px;
  flex-wrap: wrap;
}

.sell-wizard-step {
  flex: 1 1 120px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sell-wizard-step .sell-wizard-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-sunken);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--ink-muted);
}

.sell-wizard-step.is-current,
.sell-wizard-step.active {
  border-color: var(--action);
  background: var(--action-soft);
  color: var(--action);
}

.sell-wizard-step.is-current .sell-wizard-step-num,
.sell-wizard-step.active .sell-wizard-step-num {
  background: var(--action);
  color: #fff;
}

.sell-wizard-step.is-done,
.sell-wizard-step.done {
  border-color: rgba(22,163,74,0.28);
  color: var(--good);
}

.sell-wizard-step.is-done .sell-wizard-step-num,
.sell-wizard-step.done .sell-wizard-step-num {
  background: var(--good);
  color: #fff;
}

/* Wizard nav actions row */
.sell-wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.sell-wizard-nav-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Preview step visual separation — it must NOT look like a live card */
.sell-preview-step .sell-form-section {
  background: var(--surface-sunken);
  border-style: dashed;
}

.sell-preview-shell-embedded {
  padding: 20px;
  margin-top: 12px;
}

.sell-preview-summary {
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(29,95,204,0.15);
  border-radius: var(--radius-md);
  background: var(--action-soft);
}

.sell-preview-summary .mini-kicker {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--action);
}

.listing-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.listing-upload-empty,
.listing-upload-card {
  min-height: 90px;
  padding: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink-muted);
  background: var(--surface-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

.listing-upload-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

@media (max-width: 600px) {
  .listing-upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Payment card */
.sell-payment-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .sell-payment-layout { grid-template-columns: 1fr; }
}
.sell-payment-card { padding: 20px; }
.sell-payment-options {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
}

.sell-payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color 120ms;
}

.sell-payment-option:has(input:checked),
.sell-payment-option.active {
  border-color: var(--action);
  background: var(--action-soft);
}

.sell-payment-option input {
  margin-top: 2px;
  accent-color: var(--action);
}

.sell-payment-option.disabled { opacity: 0.5; cursor: not-allowed; }
.sell-payment-option span { display: grid; gap: 2px; }
.sell-payment-option strong { font-size: 14px; }
.sell-payment-option small { color: var(--ink-muted); font-size: 12px; }
.sell-coupon-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sell-coupon-row .field { flex: 1; min-width: 180px; }

.sell-payment-summary-line {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--ink-soft);
}

.sell-payment-summary-line:last-child { border-bottom: 0; }
.sell-payment-summary-line strong { color: var(--ink-strong); font-weight: 700; }
.sell-payment-summary-line.total {
  border-bottom: 0;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 2px solid var(--ink-strong);
  font-size: 16px;
}

.sell-payment-summary-line.total strong { font-size: 20px; }

/* ============================================================
   07. MARKETPLACE / SELL CARDS / REPORTING
   ============================================================ */

/* MARKETPLACE — filter panel polish, tight/calm */
/* Marketplace shell + grid ownership moved out of rework-marketplace.css.
   Keep structural layout here so runtime sell UI lives in one CSS source. */
.marketplace-layout {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px 20px;
  display: block;
}

.listing-main,
.marketplace-layout .listing-main {
  min-width: 0;
  width: 100%;
}

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

.logged-in-shell {
  display: grid;
  gap: 18px;
}

/* Marketplace compatibility aliases retained during cleanup. */
.category-toggle-group { display: grid; gap: 8px; margin-bottom: 14px; }
.category-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.category-chip-row .btn[data-selected="true"] {
  background: var(--action-soft);
  color: var(--action);
  border-color: rgba(29,95,204,0.16);
}

.tire-fields[hidden],
.car-fields[hidden],
.tire-filter-row[hidden] { display: none; }
.shared-fields {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.shared-fields > div { display: grid; gap: 6px; }
.account-action-row { justify-content: flex-start; padding-top: 8px; }
.sell-active-filter-chip { gap: 8px; padding-inline: 12px; }
.sell-active-filter-chip::after { content: none; }

/* Marketplace detail / manage shells */
.manage-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}

.detail-gallery { display: grid; gap: 12px; }
.detail-gallery-count {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(17,24,39,0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.detail-gallery-thumb { display: block; width: 100%; }
.detail-gallery-nav.prev,
.detail-gallery-nav.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(17,24,39,0.62);
  color: #fff;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.detail-gallery-nav.prev { left: 12px; }
.detail-gallery-nav.next { right: 12px; }
.listing-preview-placeholder {
  min-height: 240px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

/* Upload cards + lightweight feedback */
.listing-upload-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.listing-upload-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.listing-upload-item-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.danger-chip { border-color: rgba(220,38,38,0.2); color: var(--bad); }
.danger-chip:hover { background: var(--bad-soft); color: var(--bad); }
.my-listing-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.compact-account-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stack-sm { display: grid; gap: 8px; }
.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: var(--text);
  color: #fff;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.18s;
  pointer-events: none;
  z-index: 400;
}

.toast-visible { opacity: 1; transform: translateY(0); }
.toast-error { background: #8b1e1e; }
.toast-success { background: #165b35; }

@media (max-width: 640px) {
  .toast {
    left: 12px;
    right: 12px;
    bottom: auto;
    top: 12px;
    z-index: 3000;
    text-align: center;
    transform: translateY(-8px);
  }
  .toast-visible { transform: translateY(0); }
}

.market-controls-shell {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  padding: 0;
}

.sell-filter-panel { padding: 18px 20px 14px; max-width: var(--content-max); margin: 0 auto; }
.filter-shell-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px 20px 0;
  display: grid;
  gap: 12px;
}

.filter-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.filter-header-row .section-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

.sell-filter-summary { display: flex; align-items: baseline; gap: 8px; }
.sell-filter-count { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.sell-filter-meta { font-size: 12px; color: var(--ink-muted); }

/* Category chips + search row */
.filter-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
/* Separate the chips group and nearby from the search field */
.filter-top-row .filter-cat-chips { flex-shrink: 0; }
.filter-top-row .filter-search-group { flex: 1; min-width: 200px; }

.filter-cat-chips {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}

.filter-cat-btn {
  background: transparent;
  border: 0;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 120ms;
  font-family: var(--font-body);
}

.filter-cat-btn:hover { color: var(--ink-strong); }
@media (max-width: 560px) {
  /* v17.69.8: comfortable tap height for category filter chips on mobile. */
  .filter-cat-btn { min-height: 38px; padding-top: 9px; padding-bottom: 9px; }
}
.filter-cat-btn.active {
  background: var(--surface-raised);
  color: var(--action);
  box-shadow: var(--shadow-sm);
}

.filter-search-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 240px;
  flex-wrap: wrap;
}

.sell-search-field {
  flex: 1;
  min-width: 200px;
  max-width: 460px;
}

.filter-sort {
  min-width: 170px;
  max-width: 160px;
  flex-shrink: 0;
}

/* Mobile filter toggle button */
.mobile-filter-toggle { display: none; }
.sell-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: var(--action);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

.sell-filter-badge[hidden] { display: none; }

/* Filter panels — BIL and DÄCK cannot both be visible */
.filter-panel {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 4px;
}

.filter-panel[hidden] { display: none; }
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.filter-grid-car,
.filter-grid-tire { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .filter-grid-car,
  .filter-grid-tire { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .filter-grid-car,
  .filter-grid-tire { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .filter-grid-car,
  .filter-grid-tire {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .filter-search-group .sell-search-field { min-width: 140px; }
}
/* Alla-panel has three small fields (Län, Stad, Visa). Give each a
   predictable slot so they don't collapse oddly on mid-sized screens. */
.filter-grid-all {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .filter-grid-all { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .filter-grid-all { grid-template-columns: 1fr; }
  .filter-shell-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .listing-grid,
  #sellListings .listing-grid { grid-template-columns: 1fr; }
  .sell-filter-basic-row-shared,
  .sell-filter-basic-row-car,
  .tire-filter-grid { grid-template-columns: 1fr; }
}
.filter-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 3px;
}

.filter-mobile-sort-row { display: none; }
.sell-filter-advanced-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.sell-filter-advanced-row[hidden] { display: none; }
.sell-filter-basic-row-shared,
.sell-filter-basic-row-car {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.sell-filter-basic-row-shared { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sell-filter-basic-row-car { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tire-filter-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.tire-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

#listingTireFiltersPanel[hidden] { display: none; }

@media (max-width: 1100px) {
  .tire-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mobile-filter-toggle { display: inline-flex; }
  .filter-mobile-sort-row { display: block; margin-top: 10px; }
  .filter-sort { display: none; }
}
@media (max-width: 760px) {
  .sell-filter-advanced-row,
  .sell-filter-basic-row-shared,
  .sell-filter-basic-row-car,
  .tire-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manage-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .marketplace-layout { padding: 16px 12px; }
  .listing-grid,
  #sellListings .listing-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sell-filter-advanced-row { grid-template-columns: 1fr; }
}

.sell-active-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.sell-active-filters[hidden] { display: none; }

/* Hide sidebar — the top filter bar is the single source of truth */

/* Listing shell head */
.listing-shell-head.simple-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.listing-shell-head h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}

.listing-shell-head p.muted { font-size: 13px; margin: 0; }
.market-list-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

#sellListMyBtn[hidden] { display: none; }

/* ============================================================
   MESSAGES FAB — clean and only when relevant
   ============================================================ */
.sell-messages-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 24px rgba(29,95,204,0.35), 0 2px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 140;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.sell-messages-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(29,95,204,0.4), 0 4px 10px rgba(0,0,0,0.12);
}

.sell-messages-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(29,95,204,0.25), 0 8px 24px rgba(29,95,204,0.35);
}

.sell-messages-fab[hidden] { display: none; }
.sell-messages-fab-icon {
  font-size: 22px;
  line-height: 1;
  display: inline-block;
}

.sell-messages-fab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface-raised);
}

.sell-messages-fab-count:empty,
.sell-messages-fab-count[data-count="0"] { display: none; }

/* ============================================================
   LISTING CARDS — compact and scannable
   (Rendered by JS. The sell layer owns card chrome + inner layout.)
   ============================================================ */
.listing-card,
.market-list-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}

.listing-card:hover,
.market-list-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.listing-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.listing-card-media,
.compact-media {
  position: relative;
  overflow: hidden;
  background: #f0ede8;
  aspect-ratio: 16 / 10;
}

.listing-card-media img,
.compact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.listing-card:hover .listing-card-media img { transform: scale(1.03); }
.listing-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: 13px;
  background: linear-gradient(135deg, #ece9e4, #e5e2db);
  aspect-ratio: 16 / 10;
}

.listing-card-topbar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  z-index: 1;
}

.listing-card-body,
.compact-body {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.listing-card-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.listing-price {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.3px;
}

.listing-card-id {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}

.listing-card-body h3,
.compact-body h3 {
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  line-height: 1.35;
  color: var(--ink-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.listing-spec-row span {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.listing-spec-row span strong {
  font-weight: 600;
  color: var(--ink-strong);
}

.listing-card-excerpt {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-card-footer,
.compact-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.listing-card-footer strong,
.compact-footer strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}

.listing-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 12px;
}

.listing-card-actions-extended {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}

.listing-card-actions .btn {
  flex: 1;
  min-width: 100px;
}

/* ============================================================
   INSPECTION — fuel/gear options: hide redundant sublabels
   ============================================================ */
.fuel-option .sub,
.gear-option .sub,
.driveline-option .sub { display: none; }
.fuel-option,
.gear-option,
.driveline-option { min-height: 92px; }
.option-chip { font-weight: 700; }

/* Home hero breathing room */
.hero-home { padding: 48px 0 28px; }

/* Config page: keep all subsection headings consistent */
.form-subsection-heading { margin: 20px 0 12px; }
.form-subsection-heading.compact { margin-top: 12px; }

/* ============================================================
   INSPECTION SUMMARY — real report hierarchy
   ============================================================ */
.report-shell { gap: 16px; }
.report-section > .verdict-panel {
  background: linear-gradient(135deg, var(--surface-raised) 0%, var(--surface-sunken) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.report-section > .verdict-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--action), var(--brand));
}

.verdict-panel .mini-kicker {
  color: var(--action);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.verdict-panel h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.decision {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 16px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
}

.decision.buy { background: var(--good-soft); color: var(--good); }
.decision.negotiate { background: var(--warn-soft); color: var(--warn); }
.decision.expert { background: var(--bad-soft); color: var(--bad); }

/* Summary rows: strong label/value contrast */
.summary-row,
.hero-line,
.calc-row,
.section-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.summary-row:last-child,
.hero-line:last-child,
.calc-row:last-child,
.section-row:last-child { border-bottom: 0; }
.summary-row span:first-child,
.hero-line span:first-child,
.calc-row span:first-child,
.section-row span:first-child {
  color: var(--ink-soft);
  font-weight: 500;
  min-width: 40%;
}

.summary-row span:last-child,
.hero-line strong,
.calc-row span:last-child,
.section-row span:last-child,
.cost,
.value {
  text-align: right;
  font-weight: 700;
  color: var(--ink-strong);
}

.report-summary-box {
  padding: 18px 20px;
}

.report-summary-box .muted-line {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

/* Price hero blocks */
.price-hero { gap: 16px; }
.hero-card {
  padding: 22px;
}

.hero-card.kpi {
  background: linear-gradient(135deg, rgba(29,95,204,0.08) 0%, rgba(232,184,74,0.06) 100%);
  border-color: rgba(29,95,204,0.2);
}

.hero-value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1;
  color: var(--ink-strong);
  margin: 10px 0 8px;
  letter-spacing: -0.02em;
}

.hero-sub { color: var(--ink-soft); font-size: 14px; line-height: 1.55; }

/* Confidence / KPI cards */
.confidence-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.confidence-card {
  padding: 16px;
  text-align: center;
}

.confidence-card .big {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--ink-strong);
  display: block;
  margin-bottom: 4px;
}

.confidence-card .label { font-size: 12px; color: var(--ink-muted); }

/* Stats trio */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { padding: 18px 14px; border-radius: var(--radius-md); text-align: center; border: 1px solid var(--border); }
.stat.good { background: var(--good-soft); border-color: rgba(22,163,74,0.2); }
.stat.warn { background: var(--warn-soft); border-color: rgba(217,119,6,0.2); }
.stat.bad  { background: var(--bad-soft);  border-color: rgba(220,38,38,0.2); }
.stat .n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  display: block;
}

.stat.good .n { color: var(--good); }
.stat.warn .n { color: var(--warn); }
.stat.bad  .n { color: var(--bad); }
.stat .l { font-size: 12px; color: var(--ink-soft); margin-top: 4px; font-weight: 500; }

/* Issues list */
.issue {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  margin-bottom: 10px;
}

.issue .top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.issue .cost {
  font-weight: 700;
  color: var(--ink-strong);
  white-space: nowrap;
  padding: 4px 10px;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.issue .note {
  margin-top: 8px;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 13px;
}

/* Calc block */
.calc {
  padding: 20px;
}

.calc-head {
  display: flex; justify-content: space-between; gap: 16px;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.calc-title { font-size: 16px; font-weight: 700; }

/* Upsell card */
.upsell-card {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surface-raised) 0%, var(--brand-soft) 100%);
  border: 1px solid rgba(232,184,74,0.3);
}

.upsell-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.upsell-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.upsell-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 6px;
}

/* Section result table */
.section-result {
  padding: 16px 20px;
}

/* ============================================================
   08. INSPECTION / AUTH / ACCOUNT POLISH
   ============================================================ */

/* INSPECTION — check screen polish */
.question-stage .qtitle {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  margin: 8px 0 6px;
}

.question-stage .desc {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0 14px;
}

@media (max-width: 640px) {
  .choice-row { grid-template-columns: 1fr; }
}
.choice {
  background: var(--surface-raised);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
  cursor: pointer;
  transition: all 140ms;
}

.choice .choice-copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.choice .status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink-muted);
  flex-shrink: 0;
}

.choice.good .status-dot { background: var(--good); }
.choice.warn .status-dot { background: var(--warn); }
.choice.bad  .status-dot { background: var(--bad); }
.choice:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow-crisp); }
.choice.selected.good { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.choice.selected.warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.choice.selected.bad  { border-color: var(--bad);  background: var(--bad-soft);  color: var(--bad); }
.choice:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.nav-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 14px;
}

/* Tip collapsibles */
.tip-collapsible {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
}

.tip-collapsible summary {
  list-style: none;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.tip-collapsible summary::-webkit-details-marker { display: none; }
.tip-collapsible summary .kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
}

.tip-collapsible.danger summary .kicker { color: var(--bad); }
.tip-collapsible .tip-toggle {
  position: relative;
  visibility: hidden;
  font-size: 12px;
  color: var(--ink-muted);
}

.tip-collapsible[open] .tip-toggle::before { content: "Dölj"; }
.tip-collapsible:not([open]) .tip-toggle::before { content: "Visa"; }
.tip-collapsible .tip-toggle::before { visibility: visible; position: absolute; right: 0; top: 0; }
.tip-collapsible .tip-body {
  padding: 0 14px 12px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.note-field { margin-top: 8px; }

.kbd {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  font-family: monospace;
  font-size: 11px;
  color: var(--ink-muted);
}

/* ============================================================
   08B. ACCOUNT / MESSAGE / DETAIL SHELL OWNERSHIP
   ============================================================ */

/* Shared card chrome for sell/account/messages surfaces */
.listing-empty,
.account-shell,
.account-tabs-shell,
.account-panel-card,
.account-insight-card,
.account-security-card,
.clean-contact-card,
.manage-summary-card,
.manage-side-card,
.messages-sidebar-card,
.messages-thread-panel-enhanced,
.mine-hub-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.listing-empty {
  padding: 28px;
  text-align: center;
  display: grid;
  gap: 10px;
}

.listing-empty p,
.simple-head .muted,
.listing-detail-description,
.seller-contact-meta,
.message-thread-preview {
  color: var(--text-soft);
}

.simple-tags,
.listing-tags,
.my-listing-status-row,
.manage-quick-stats,
.listing-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.simple-tags,
.listing-tags { gap: 6px; }
.tag-unread-accent {
  background: var(--bad-soft);
  color: var(--bad);
  border-color: rgba(220,38,38,0.16);
}

.my-listing-note,
.review-note,
.rejected-note,
.sold-note,
.status-note {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-soft);
}

.my-listing-note {
  border-color: rgba(220,38,38,0.14);
  background: rgba(220,38,38,0.04);
  display: grid;
  gap: 4px;
}

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

.mine-hub-grid,
.account-overview-grid,
.account-panel-grid,
.manage-layout-clean,
.sell-dashboard-grid,
.messages-layout,
.messages-layout-enhanced,
.clean-detail-layout,
.sell-detail-layout {
  display: grid;
  gap: 14px;
}

.mine-hub-grid,
.account-overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.account-panel-grid,
.manage-layout-clean {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}

.messages-layout {
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.messages-layout-enhanced {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.clean-detail-layout,
.sell-detail-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  align-items: start;
  gap: 18px;
}

.account-shell { display: grid; gap: 18px; }
.account-shell-simple { max-width: 980px; margin: 0 auto; }
.account-hero-card,
.auth-card,
.auth-helper-panel { padding: 22px; }
.account-hero-card-expanded,
.account-hero-copy,
.account-detail-list,
.auth-subform,
.messages-thread-items,
.listing-detail-body,
.listing-detail-side {
  display: grid;
  gap: 12px;
}

.account-hero-copy { gap: 6px; }
.account-hero-card-expanded { gap: 16px; }
.account-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--text-soft);
}

.account-tab-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 18px 18px 0;
}

.account-tab-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  color: var(--text-soft);
  font-weight: 600;
  cursor: pointer;
}

.account-tab-btn.active {
  background: var(--action-soft);
  border-color: rgba(29,95,204,0.18);
  color: var(--action);
}

.account-tab-panel { padding: 18px; }
.account-detail-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.account-detail-item:last-child { border-bottom: 0; }
.auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.auth-actions { justify-content: flex-start; }

.message-thread-list,
.message-thread-panel,
.messages-thread-panel,
.messages-thread-panel-enhanced {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-height: 520px;
}

.messages-thread-panel,
.messages-thread-panel-enhanced {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.messages-thread-head,
.messages-thread-head-enhanced {
  padding: 18px;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 4px;
}

.message-thread-item {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: grid;
  gap: 4px;
}

.message-thread-item:last-child,
.message-thread-item-enhanced:last-child { border-bottom: 0; }
.message-thread-item.active,
.message-thread-item-enhanced.active { background: var(--action-soft); }
.message-thread-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.message-thread-conversation,
.message-thread-conversation-enhanced {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.message-thread-conversation { gap: 16px; }
.message-thread-conversation-enhanced {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.message-thread-item-enhanced {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.message-thread-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--action);
  font-weight: 700;
  display: grid;
  place-items: center;
}

.message-thread-avatar-large { width: 52px; height: 52px; font-size: 18px; }
.message-thread-body { min-width: 0; display: grid; gap: 6px; }
.message-thread-item-top,
.message-thread-item-meta,
.messages-chat-head,
.messages-chat-person,
.message-bubble-meta,
.message-reply-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.message-thread-item-meta { align-items: flex-start; }
.message-thread-title { font-weight: 700; color: var(--text); }
.message-thread-preview {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.message-unread-badge,
.message-bubble-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--bad-soft);
  color: var(--bad);
}

.message-bubble,
.message-bubble.own-message,
.message-bubble-own {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}

.message-bubble {
  max-width: 78%;
  background: var(--surface-2);
}

.message-bubble-own,
.message-bubble.own-message {
  margin-left: auto;
  background: var(--action-soft);
  border-color: rgba(29,95,204,0.16);
}

.message-bubble-meta { margin-bottom: 6px; color: var(--text-muted); font-size: 12px; }
.message-reply-box,
.message-reply-box-enhanced {
  border-top: 1px solid var(--border);
  padding: 16px 18px;
  display: grid;
  gap: 10px;
}

.messages-chat-head { padding: 18px; border-bottom: 1px solid var(--border); }
.messages-chat-person { justify-content: flex-start; }
.messages-chat-actions,
.message-reply-actions { justify-content: flex-end; }

.listing-detail-card { padding: 0; overflow: hidden; }
.clean-detail-media,
.listing-detail-media {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.detail-gallery-stage,
.listing-detail-media .detail-gallery-stage {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  min-height: 320px;
  display: grid;
  place-items: center;
}

.detail-gallery-stage img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}

.detail-gallery-thumbs button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}

.detail-gallery-thumbs button.active {
  border-color: var(--action);
  box-shadow: 0 0 0 2px rgba(29,95,204,0.12);
}

.detail-gallery-thumbs img { width: 100%; height: 72px; object-fit: cover; }
.listing-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.detail-fact {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 12px 14px;
  display: grid;
  gap: 4px;
}

.detail-fact span {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.owner-detail-card {
  position: sticky;
  top: calc(var(--header-h) + var(--tabs-h) + 18px);
}

.single-preview { grid-template-columns: minmax(280px, 420px); justify-content: start; }
.phone-reveal-wrap { display: grid; gap: 8px; margin-top: 10px; }
.phone-number-display { font-weight: 700; color: var(--text); }

@media (max-width: 980px) {
  .auth-grid,
  .clean-detail-layout,
  .sell-detail-layout,
  .account-panel-grid,
  .manage-layout-clean,
  .messages-layout-enhanced {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 900px) {
  .messages-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .listing-detail-grid,
  .mine-hub-grid,
  .account-overview-grid {
    grid-template-columns: 1fr;
  }

  .account-detail-item,
  .messages-chat-head,
  .message-thread-item-top,
  .message-thread-item-meta,
  .message-bubble-meta,
  .message-reply-actions {
    flex-direction: column;
    align-items: flex-start;
  }

}

/* ============================================================
   ACCOUNT / AUTH cards polish
   ============================================================ */
.account-shell-simple .auth-grid { align-items: start; }
.account-shell-simple .auth-card { padding: 24px; }
.account-shell-simple .auth-card h3 { margin-bottom: 8px; }
.account-shell-simple .mini-kicker { color: var(--action); }

.auth-required-card {
  padding: 28px;
  text-align: center;
  max-width: 480px;
  margin: 32px auto;
  box-shadow: var(--shadow-crisp);
}

.auth-required-card h3 { font-size: 20px; margin-bottom: 6px; }
.auth-required-card .muted { margin-bottom: 16px; }
.auth-required-card .listing-card-actions { justify-content: center; display: flex; }

.auth-modal-dialog {
  width: min(720px, calc(100vw - 24px));
  max-width: 720px;
}

.auth-modal {
  padding: 0;
  gap: 0;
  max-height: min(88vh, 860px);
  overflow: hidden;
}

.auth-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 24px 0;
}

.auth-modal-copy {
  display: grid;
  gap: 6px;
}

.auth-modal-close {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.auth-modal-body {
  padding: 24px;
  display: grid;
  gap: 20px;
  overflow: auto;
}

.auth-inline-alert {
  border: 1px solid rgba(220, 38, 38, 0.28);
  background: #fff1f1;
  color: #8f1d17;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  line-height: 1.35;
}

.auth-inline-alert[hidden] {
  display: none !important;
}

.auth-inline-alert--success {
  border-color: rgba(22, 101, 52, 0.24);
  background: #ecfdf3;
  color: #166534;
}

.auth-modal-panel {
  display: grid;
  gap: 16px;
}

.auth-modal-panel[hidden] { display: none; }
.auth-modal-panel.is-active { display: grid; }
.auth-card-compact { max-width: 560px; margin: 0 auto; }
.auth-entry-actions { display: flex; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.auth-modal-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.auth-modal-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--action);
  font-weight: 700;
  padding: 0;
  cursor: pointer;
}

.auth-modal .auth-helper-panel {
  background: var(--surface-2);
}

/* v17.69.20: keep auth helper substeps genuinely hidden until their backend step succeeds. */
.auth-helper-panel[hidden],
.auth-subform[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .auth-modal-head,
  .auth-modal-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .auth-modal-footer {
    align-items: flex-start;
  }

}

/* ============================================================
   MESSAGE THREAD / MANAGE consistency
   ============================================================ */
.messages-thread-head p,
.clean-contact-card .muted,
.owner-detail-card .muted {
  color: var(--ink-soft);
}

/* ============================================================
   09. UTILITIES / MOBILE / PRINT / CLEANUP
   ============================================================ */

/* MOBILE polish */
@media (max-width: 760px) {
  .sell-create-page,
  .marketplace-layout,
  .page-heading,
  .site-footer-inner,
  .legal-footer-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .legal-footer-grid { grid-template-columns: 1fr; }
  .sell-filter-panel { padding: 14px 12px; }
  .filter-header-row .section-title { font-size: 20px; }
  .sell-step-panel > .sell-form-section { padding: 18px; }
  .sell-nav-tabs-inner { padding: 0 12px; }
  .verdict-panel h3 { font-size: 22px; }
  .hero-value { font-size: 28px; }
  .sell-messages-fab {
    bottom: 16px; right: 16px;
    width: 52px; height: 52px;
  }

}

@media (max-width: 480px) {
  .confidence-grid,
  .price-hero { grid-template-columns: 1fr; }
}

/* ============================================================
   PRINT — clean rapport
   ============================================================ */
@media print {
  body { background: #fff; }
  .app-header, .site-footer, .legal-footer,
  .progress-wrap, .sell-messages-fab, .upsell-card,
  .upsell-actions, .nav-row, .choice-row,
  .sell-nav-tabs { display: none; }
  .app, .app-shell, .legal-app {
    max-width: none;
    padding: 0;
  }

  .report-header-card { page-break-inside: avoid; }
  .report-section { page-break-inside: avoid; margin-bottom: 16px; }
  .print-only { display: block; }
  .print-hide { display: none; }
}

/* ============================================================
   A11Y — focus-visible everywhere
   ============================================================ */
.btn:focus-visible,
.field:focus-visible,
.choice:focus-visible,
.card:focus-visible,
.filter-cat-btn:focus-visible,
.sell-messages-fab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================
   Cleanup — kill visual zombies from legacy layers
   ============================================================ */
/* The hidden select stub must actually be hidden */
#listingCategoryFilter[aria-hidden="true"] { display: none; }

/* Strip legacy compact toolbar that duplicates filter bar */
.compact-toolbar-grid:empty { display: none; }

/* Hide stray loose help labels that duplicate field labels */
.listing-upload-shell .upload-help:empty,
.field-error-msg:empty { display: none; }

/* ─── Marketplace pagination bar (v17.11.0) ─── */
#bilcheckPaginationBar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 0 8px;
  flex-wrap: wrap;
}
#bilcheckPaginationBar button {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-body);
  min-width: 36px;
  transition: all 0.15s;
  font-weight: 500;
}
#bilcheckPaginationBar button:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--text-soft);
}
#bilcheckPaginationBar button:disabled {
  opacity: 0.35;
  cursor: default;
}
#bilcheckPaginationBar button[style*="background:var(--color-text-primary)"],
#bilcheckPaginationBar button.current-page {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
  cursor: default;
}
#bilcheckPaginationBar span {
  padding: 0 4px;
  color: var(--text-muted);
  font-size: 14px;
}

.svc-name { font-weight:900; font-size:18px; }
.svc-name-wrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.svc-why {
  margin: 12px 0 4px;
  padding: 14px 16px;
  background: var(--surface-2, rgba(0,0,0,0.03));
  border-radius: 10px;
  border-left: 3px solid var(--brand, #1a6ff4);
}
.svc-why p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary, #444);
  margin: 0 0 10px;
}
.svc-why p:last-child { margin-bottom: 0; }
.svc-badge {
  display:inline-block;
  background:var(--brand, #1a6ff4);
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.04em;
  padding:2px 8px;
  border-radius:20px;
  text-transform:uppercase;
}
.svc-price-wrap { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.svc-price-original {
  font-size:13px;
  color:var(--muted);
  text-decoration:line-through;
  opacity:0.65;
}
.svc-price-free {
  color:var(--good, #1a8c4e) !important;
  font-weight:800 !important;
}
.svc-desc { margin:6px 0 10px; font-size:14px; line-height:1.55; }
.svc-includes {
  margin:10px 0 0;
  padding:0 0 0 18px;
  font-size:13px;
  color:var(--text-secondary, #555);
  line-height:1.7;
  list-style-type:disc;
}
.svc-includes li::marker { color:var(--brand, #1a6ff4); }
.svc-includes-fuel { margin-top:6px; }
.svc-includes-fuel li::marker { color:var(--good, #1a8c4e); }
.svc-fuel-block {
  margin:12px 0 0;
  padding:10px 14px;
  background:var(--surface-2, rgba(0,0,0,0.04));
  border-radius:8px;
  border-left:3px solid var(--good, #1a8c4e);
}
.svc-fuel-label {
  font-size:11px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--good, #1a8c4e);
  margin-bottom:6px;
}
.svc-fuel-pills { display:flex; flex-wrap:wrap; gap:6px; }
.svc-fuel-pill {
  font-size:12px;
  background:var(--brand-subtle, rgba(26,111,244,0.1));
  color:var(--brand, #1a6ff4);
  padding:2px 10px;
  border-radius:12px;
  font-weight:600;
}
/* service additions */

/* ── Listvy / Rutnät toggle ──────────────────────────────────────────────── */
.sell-filter-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}



.sell-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--surface-2, rgba(0,0,0,0.06));
  border-radius: 8px;
  padding: 2px;
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary, #666);
  transition: background 0.15s, color 0.15s;
}

.view-toggle-btn:hover { background: var(--surface-raised, #fff); color: var(--text-primary, #111); }
.view-toggle-btn.active { background: var(--surface-raised, #fff); color: var(--brand, #1a6ff4); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* ── Listvy — Blocket/OLX-stil ──────────────────────────────────────────── */
#sellListings.listing-list-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#sellListings.listing-list-view .listing-card,
#sellListings.listing-list-view .modern-listing-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: var(--radius-md);
  min-height: 120px;
  overflow: hidden;
}

#sellListings.listing-list-view .listing-card-media,
#sellListings.listing-list-view .compact-media {
  width: 180px;
  min-width: 180px;
  flex-shrink: 0;
  aspect-ratio: unset;
  height: auto;
}

#sellListings.listing-list-view .listing-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 4px;
}

#sellListings.listing-list-view .listing-card-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

#sellListings.listing-list-view .listing-card-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

#sellListings.listing-list-view .listing-card-meta {
  font-size: 13px;
  color: var(--text-secondary, #666);
}

#sellListings.listing-list-view .listing-card-excerpt {
  display: none; /* Göm lång beskrivning i listvy */
}




/* ── Annonskortet i listvy — tire spec ───────────────────────────────────── */
.listing-card-tire-spec {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 2px 0;
}

.listing-card-tire-spec .tire-season-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  background: var(--surface-2, rgba(0,0,0,0.06));
  color: var(--text-secondary);
}

.listing-card-tire-spec .tire-season-badge.sommar { background: #fff3cd; color: #856404; }
.listing-card-tire-spec .tire-season-badge.vinter  { background: #cce5ff; color: #004085; }
.listing-card-tire-spec .tire-season-badge.helars  { background: #d4edda; color: #155724; }

@media (max-width: 600px) {
  #sellListings.listing-list-view .listing-card-media,
  #sellListings.listing-list-view .compact-media { width: 110px; min-width: 110px; }
}

/* ── Results bar: count + sort + view toggle on one clean row ── */
.filter-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 16px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.filter-results-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.filter-results-right .filter-sort {
  min-width: 160px;
  font-size: 13px;
}
.sell-filter-count {
  font-size: 15px;
  font-weight: 700;
}
.sell-filter-meta {
  font-size: 13px;
}

/* Higher specificity to override any filter-cat-btn siblings */

/* Nära mig */
.nearby-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, #2979ff, #1655c0);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(41,121,255,0.45);
  transition: box-shadow .15s, transform .12s;
  font-family: var(--font-body);
}
.nearby-btn:hover {
  box-shadow: 0 4px 18px rgba(41,121,255,0.55);
  transform: translateY(-1px);
}
.nearby-btn.nearby-active {
  background: linear-gradient(135deg, #22c55e, #15803d);
  box-shadow: 0 2px 12px rgba(34,197,94,0.45);
}

/* Report dialog (DSA notice-and-action) */
.report-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 20px;
}
.report-dialog {
  background: var(--surface-raised, #fff);
  border-radius: 16px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.report-dialog h3 { margin: 0 0 6px; font-size: 19px; }
.report-dialog .label { margin-top: 12px; display: block; }
.report-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.report-dialog-msg { margin: 12px 0 0; font-size: 14px; }
.report-dialog-msg.error { color: #c0392b; }
.report-dialog-msg.success { color: #16a34a; }
.btn-report { color: var(--ink-soft, #666); }
.btn-report:hover { color: #c0392b; }

/* ════════════════════════════════════════════════════════════════
   SYSTEMÖVERSIKT — komponenthälsa (premium verkstadsrapport)
   ════════════════════════════════════════════════════════════════ */
.component-health-block {
  background: var(--surface-raised, #fff);
  border: 1px solid var(--border, #e5e1da);
  border-radius: 16px;
  padding: 22px;
}
.component-health-block .calc-head { margin-bottom: 18px; }
.component-health-block .calc-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.health-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border, #e5e1da);
  background: var(--surface, #faf9f7);
  transition: box-shadow 0.15s, transform 0.12s;
}
.health-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* Halvcirkel-gauge byggd med conic-gradient */
.health-gauge {
  position: relative;
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--gauge-color, #16a34a) calc(var(--gauge-deg, 0deg) * 2),
    var(--gauge-track, #ececec) 0
  );
}
.health-gauge-center {
  position: absolute;
  inset: 9px;
  background: var(--surface-raised, #fff);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.health-pct {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.health-card-body { flex: 1; min-width: 0; }
.health-label {
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 3px;
}
.health-meta {
  font-size: 12.5px;
  color: var(--text-secondary, #6b6b6b);
  margin-bottom: 8px;
}
.health-confidence {
  display: flex;
  align-items: center;
  gap: 7px;
}
.health-conf-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--gauge-track, #ececec);
  overflow: hidden;
}
.health-conf-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--text-secondary, #999);
}
.health-conf-label {
  font-size: 11px;
  color: var(--text-secondary, #888);
  white-space: nowrap;
}

/* Severity-färger driver gauge-färgen */
.health-card.health-good { --gauge-color: #16a34a; }
.health-card.health-warn { --gauge-color: #d97706; }
.health-card.health-bad  { --gauge-color: #dc2626; }

.health-card.health-bad  { border-color: rgba(220,38,38,0.25); background: rgba(220,38,38,0.03); }
.health-card.health-warn { border-color: rgba(217,119,6,0.22); background: rgba(217,119,6,0.03); }

@media (prefers-color-scheme: dark) {
  .health-gauge { --gauge-track: #2a2a2a; }
  .health-conf-bar { background: #2a2a2a; }
}

/* ════════════════════════════════════════════════════════════════
   VEHICLE INTELLIGENCE — modellspecifik riskprofil (premium, expanderbar)
   ════════════════════════════════════════════════════════════════ */
.vehicle-intelligence-container[hidden] { display: none; }

.vi-block {
  margin-top: 18px;
  background: var(--surface-raised, #fff);
  border: 1px solid var(--border, #e5e1da);
  border-radius: 18px;
  padding: 22px;
}

.vi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.vi-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 6px 0 4px;
}
.vi-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary, #6b6b6b);
  margin: 0;
  max-width: 60ch;
}

.vi-priority-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft, #555);
}

.vi-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.vi-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Lista av expanderbara kort (inte grid — staplade läser bättre) */
.vi-list { display: flex; flex-direction: column; gap: 10px; }

.vi-card {
  border: 1px solid var(--border, #e5e1da);
  border-radius: 14px;
  background: var(--surface, #faf9f7);
  border-left-width: 4px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.vi-card.vi-open { box-shadow: 0 4px 18px rgba(0,0,0,0.07); }

/* Klickbar rubrikrad */
.vi-card-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.vi-card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: var(--surface-raised, #fff);
  border: 1px solid var(--border, #e8e8e8);
}
.vi-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vi-card-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-strong, #1a1a1a);
}

.vi-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  margin-right: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: var(--text-secondary, #666);
  font-size: 11px;
  font-weight: 800;
}
.vi-card-sub {
  font-size: 12px;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}
.vi-card-sev {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

/* Severity-mätare (4 prickar) */
.vi-meter { display: flex; gap: 3px; }
.vi-meter-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gauge-track, #e0e0e0);
}
.vi-card.vi-critical .vi-meter-dot.filled { background: #dc2626; }
.vi-card.vi-serious  .vi-meter-dot.filled { background: #d97706; }
.vi-card.vi-watch    .vi-meter-dot.filled { background: #2563eb; }
.vi-card.vi-info     .vi-meter-dot.filled { background: #16a34a; }

.vi-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.vi-chevron {
  display: grid;
  place-items: center;
  color: var(--text-secondary, #999);
  transition: transform 0.2s;
}
.vi-card.vi-open .vi-chevron { transform: rotate(180deg); }

/* Expanderad kropp */
.vi-card-body {
  padding: 0 16px 16px 70px;
}
.vi-card-body[hidden] { display: none; }

.vi-field { margin-bottom: 10px; }
.vi-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #888);
  margin-bottom: 2px;
}
.vi-field p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-strong, #1a1a1a); }

.vi-meta-row {
  display: inline-flex;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.045);
  color: var(--text-secondary, #666);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
}
.vi-cost {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #eee);
}
.vi-cost-label { font-size: 12px; color: var(--text-secondary, #888); }
.vi-cost strong { font-size: 15px; font-weight: 800; color: var(--ink-strong, #1a1a1a); }

.vi-disclaimer {
  font-size: 12px;
  color: var(--text-secondary, #999);
  margin: 16px 0 0;
  font-style: italic;
}

.vi-secondary {
  margin-top: 10px;
  border: 1px dashed var(--border, #e5e1da);
  border-radius: 14px;
  background: var(--surface, #faf9f7);
}
.vi-secondary > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft, #555);
  list-style-position: inside;
}
.vi-secondary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 12px;
}
.vi-secondary-card {
  opacity: 0.92;
}
.vi-secondary-card .vi-card-toggle {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Severity-färger */
.vi-chip.vi-critical, .vi-badge.vi-critical { background: rgba(220,38,38,0.12); color: #dc2626; }
.vi-chip.vi-serious,  .vi-badge.vi-serious  { background: rgba(217,119,6,0.12); color: #b45309; }
.vi-chip.vi-watch,    .vi-badge.vi-watch    { background: rgba(37,99,235,0.12); color: #2563eb; }
.vi-chip.vi-info,     .vi-badge.vi-info     { background: rgba(22,163,74,0.12); color: #16a34a; }

.vi-card.vi-critical { border-left-color: #dc2626; }
.vi-card.vi-serious  { border-left-color: #d97706; }
.vi-card.vi-watch    { border-left-color: #2563eb; }
.vi-card.vi-info     { border-left-color: #16a34a; }
.vi-card-icon { color: var(--ink-soft, #555); }

@media (max-width: 560px) {
  .vi-card-body { padding-left: 16px; }
  .vi-card-sub { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   GUIDAT KONTROLLMOMENT — ersätter dekorativ hero-art i undersökningen
   ════════════════════════════════════════════════════════════════ */
.qguide {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--qguide-accent) 10%, var(--surface-raised, #fff)), var(--surface-raised, #fff));
  border: 1px solid var(--border, #e5e1da);
  border-left: 4px solid var(--qguide-accent, #d4a04a);
}
.qguide-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--qguide-accent) 14%, transparent);
  color: var(--qguide-accent, #d4a04a);
}
.qguide-icon svg { width: 26px; height: 26px; }
.qguide-text { flex: 1; min-width: 0; }
.qguide-section {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-strong, #1a1a1a);
  line-height: 1.2;
}
.qguide-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #888);
  margin-top: 2px;
}
.qguide-badge {
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--qguide-accent) 14%, transparent);
  color: var(--qguide-accent, #b8862f);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .qguide-badge { display: none; }
  .qguide-section { font-size: 17px; }
}

/* ════════════════════════════════════════════════════════════════
   VEHICLE INTELLIGENCE — riskdiagram (SVG bilprofil)
   ════════════════════════════════════════════════════════════════ */
.vi-diagram {
  background: var(--surface, #faf9f7);
  border: 1px solid var(--border, #e5e1da);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.vi-diagram-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #888);
  margin-bottom: 8px;
}
.vi-diagram-svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.vi-diagram-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.vi-diagram-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft, #555);
}
.vi-diagram-leg i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

/* ─── Systemikon i hälsokort ─── */
.health-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.health-sys-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--ink-soft, #555);
}
.health-card.health-good .health-sys-icon { color: var(--good, #16a34a); }
.health-card.health-warn .health-sys-icon { color: var(--warn, #d97706); }
.health-card.health-bad .health-sys-icon { color: var(--bad, #dc2626); }

/* ─── Mini-bildiagram i guidningskort ─── */
.qguide-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 52px;
}
.qguide-car {
  width: 96px;
  height: auto;
  display: block;
}
@media (max-width: 560px) {
  .qguide-car { width: 82px; }
}

/* ─── Front/bak-etiketter under riskdiagram ─── */
.vi-diagram-fb {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #a8a8a8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
  padding: 0 14px;
  font-weight: 600;
}

/* ─── Områdesöversikt (ersätter bil-SVG) ─── */
.vi-areas {
  background: var(--surface, #faf9f7);
  border: 1px solid var(--border, #e5e1da);
  border-radius: 14px;
  padding: 16px 18px;
}
.vi-areas-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #888);
  margin-bottom: 12px;
}
.vi-areas-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vi-area-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border, #e5e1da);
  border-radius: 10px;
}
.vi-area-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vi-area-text {
  flex: 1;
  min-width: 0;
}
.vi-area-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong, #1a1a1a);
  line-height: 1.3;
}
.vi-area-hint {
  font-size: 12px;
  color: var(--text-secondary, #888);
  margin-top: 2px;
}
.vi-area-sev {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border: 1.5px solid;
  border-radius: 999px;
  white-space: nowrap;
}

/* v17.69.19: auth modal field focus/spacing hardening.
   Keep labels and inputs clearly separated so taps/clicks on the next field
   cannot land on the previous focused input outline. */
#sellAuthDialog .auth-modal-panel form:not(.stack-sm) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
}
#sellAuthDialog .auth-modal-panel form:not(.stack-sm) .field + .label {
  margin-top: 8px;
}
#sellAuthDialog .auth-modal-panel .label {
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}
#sellAuthDialog .auth-modal-panel .field {
  position: relative;
  z-index: 1;
  touch-action: manipulation;
}


/* ============================================================
   v17.69.31 — MOBILE LISTING CARD HOTFIX
   Scope: marketplace/my-listing cards only.
   Fixes mobile overflow caused by the later max-width:600 two-column
   rule overriding the earlier max-width:480 single-column rule.
   ============================================================ */
@media (max-width: 700px) {
  .marketplace-layout,
  .listing-shell,
  .listing-shell-flat {
    max-width: 100%;
    overflow-x: hidden;
  }

  .listing-grid,
  #sellListings .listing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100%;
  }

  .listing-card,
  .market-list-card,
  .my-listing-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .listing-card-media,
  .compact-media {
    width: 100%;
    min-width: 0;
  }

  .listing-card-body,
  .compact-body,
  .listing-card-price-row,
  .listing-card-footer,
  .compact-footer,
  .listing-card-actions {
    min-width: 0;
  }

  .listing-card-price-row,
  .listing-card-footer,
  .compact-footer {
    flex-wrap: wrap;
  }

  .listing-card-body h3,
  .compact-body h3,
  .listing-card-excerpt,
  .listing-card-tire-spec,
  .listing-price,
  .listing-card-id {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .listing-card-id {
    max-width: 44%;
  }

  .listing-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .listing-card-actions .btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
}


/* ============================================================
   v17.69.31 — MOBILE LIST/LISTING CARD LAYOUT HARDENING
   Scope: sell marketplace cards only.
   Problem fixed: mobile list-view kept desktop split-card layout,
   which made the image column too wide, squeezed the content/buttons,
   and made “Visa annons” / “Skicka meddelande” hard to tap.
   Desktop list-view remains unchanged.
   ============================================================ */
@media (max-width: 700px) {
  body.marketplace-page,
  .marketplace-layout,
  .listing-main,
  #sellListScreen,
  #sellListings,
  #sellListings .listing-grid {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #sellListings.listing-list-view,
  #sellListings.listing-grid-view {
    display: block !important;
    width: 100% !important;
  }

  #sellListings .listing-grid,
  #sellListings.listing-list-view .listing-grid,
  #sellListings.listing-grid-view .listing-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #sellListings .listing-card,
  #sellListings .market-list-card,
  #sellListings .rich-market-card,
  #sellListings.listing-list-view .listing-card,
  #sellListings.listing-list-view .market-list-card,
  #sellListings.listing-list-view .rich-market-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #sellListings .listing-card-media,
  #sellListings .compact-media,
  #sellListings.listing-list-view .listing-card-media,
  #sellListings.listing-list-view .compact-media {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 160px !important;
    aspect-ratio: 16 / 10 !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  #sellListings .listing-card-body,
  #sellListings .compact-body,
  #sellListings.listing-list-view .listing-card-body,
  #sellListings.listing-list-view .compact-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #sellListings .listing-card-price-row,
  #sellListings.listing-list-view .listing-card-price-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  #sellListings .listing-price,
  #sellListings .listing-card-price,
  #sellListings .listing-card-title,
  #sellListings .listing-card-body h3,
  #sellListings .listing-card-excerpt,
  #sellListings .listing-card-tire-spec,
  #sellListings .listing-card-footer,
  #sellListings .compact-footer,
  #sellListings .listing-spec-row,
  #sellListings .listing-spec-row span {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    box-sizing: border-box !important;
  }

  #sellListings .listing-card-id {
    flex: 0 1 auto !important;
    max-width: 42% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #sellListings .listing-card-footer,
  #sellListings .compact-footer {
    flex-wrap: wrap !important;
  }

  #sellListings .listing-card-actions,
  #sellListings.listing-list-view .listing-card-actions,
  #sellListings .listing-card-actions-extended {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px 16px 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #sellListings .listing-card-actions .btn,
  #sellListings.listing-list-view .listing-card-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 420px) {
  #sellListings .listing-card-media,
  #sellListings .compact-media,
  #sellListings.listing-list-view .listing-card-media,
  #sellListings.listing-list-view .compact-media {
    min-height: 145px !important;
  }
}


/* ============================================================
   v17.69.31 — CONTAINER-BASED MOBILE LISTING CARD LOCK
   Scope: sell marketplace cards only.
   Root cause: the broken split/list card could still win when the card
   container was narrow but the viewport media query did not match. The
   old desktop list-view then kept image/content/buttons in one row.
   This block uses both viewport and JS-added narrow-container classes.
   ============================================================ */
@media (max-width: 980px) {
  #sellListings,
  #sellListings .listing-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #sellListings.listing-list-view,
  #sellListings.listing-grid-view {
    display: block !important;
  }

  #sellListings .listing-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #sellListings .listing-card,
  #sellListings .market-list-card,
  #sellListings .rich-market-card,
  #sellListings .my-listing-card,
  #sellListings.listing-list-view .listing-card,
  #sellListings.listing-list-view .market-list-card,
  #sellListings.listing-list-view .rich-market-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #sellListings .listing-card-media,
  #sellListings .compact-media,
  #sellListings.listing-list-view .listing-card-media,
  #sellListings.listing-list-view .compact-media {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 170px !important;
    aspect-ratio: 16 / 10 !important;
    flex: none !important;
  }

  #sellListings .listing-card-body,
  #sellListings .compact-body,
  #sellListings.listing-list-view .listing-card-body,
  #sellListings.listing-list-view .compact-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #sellListings .listing-card-actions,
  #sellListings .listing-card-actions-extended,
  #sellListings.listing-list-view .listing-card-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #sellListings .listing-card-actions .btn,
  #sellListings.listing-list-view .listing-card-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }
}

html.bilcheck-narrow-listing-cards #sellListings,
html.bilcheck-narrow-listing-cards #sellListings .listing-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

html.bilcheck-narrow-listing-cards #sellListings .listing-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}

html.bilcheck-narrow-listing-cards #sellListings .listing-card,
html.bilcheck-narrow-listing-cards #sellListings .market-list-card,
html.bilcheck-narrow-listing-cards #sellListings .rich-market-card,
html.bilcheck-narrow-listing-cards #sellListings .my-listing-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.bilcheck-narrow-listing-cards #sellListings .listing-card-media,
html.bilcheck-narrow-listing-cards #sellListings .compact-media {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 170px !important;
  aspect-ratio: 16 / 10 !important;
  flex: none !important;
}

html.bilcheck-narrow-listing-cards #sellListings .listing-card-body,
html.bilcheck-narrow-listing-cards #sellListings .compact-body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.bilcheck-narrow-listing-cards #sellListings .listing-card-actions,
html.bilcheck-narrow-listing-cards #sellListings .listing-card-actions-extended {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 10px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html.bilcheck-narrow-listing-cards #sellListings .listing-card-actions .btn {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

/* ============================================================
   v17.69.31 — CARD-WIDTH MARKETPLACE LAYOUT HARDENING
   Scope: sell marketplace listing cards only.
   Root cause after v17.69.31: the page was loading the correct CSS, but
   the old desktop list/grid rules still allowed individual cards to become
   very narrow. A narrow card could still use row/list structure or keep the
   two CTA buttons in one cramped row. This block fixes the actual card-level
   layout instead of relying only on viewport/container root checks.
   ============================================================ */

/* Grid view: do not create ultra-narrow marketplace cards. */
#sellListings .listing-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)) !important;
  align-items: start !important;
}

/* List view: the inner .listing-grid must become one column. The old code
   put list-view on #sellListings but left the child .listing-grid as a normal
   auto-fill grid, causing row-style cards to be squeezed into grid columns. */
#sellListings.listing-list-view .listing-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* List rows on desktop get a controlled structure instead of uncontrolled
   flex children. Buttons are a full-width row below the content. */
#sellListings.listing-list-view .listing-card,
#sellListings.listing-list-view .market-card,
#sellListings.listing-list-view .rich-market-card,
#sellListings.listing-list-view .market-list-card,
#sellListings.listing-list-view .modern-listing-card {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#sellListings.listing-list-view .listing-card-media,
#sellListings.listing-list-view .compact-media {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 170px !important;
  aspect-ratio: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#sellListings.listing-list-view .listing-card-body,
#sellListings.listing-list-view .compact-body {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#sellListings.listing-list-view .listing-card-actions,
#sellListings.listing-list-view .listing-card-actions-extended {
  grid-column: 1 / -1 !important;
}

/* Buttons: never allow CTA text to stick outside the card. */
#sellListings .listing-card-actions,
#sellListings .listing-card-actions-extended,
#sellListings.listing-list-view .listing-card-actions,
#sellListings.listing-list-view .listing-card-actions-extended {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 12px 16px 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#sellListings .listing-card-actions .btn,
#sellListings .listing-card-actions-extended .btn,
#sellListings.listing-list-view .listing-card-actions .btn,
#sellListings.listing-list-view .listing-card-actions-extended .btn {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-align: center !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  touch-action: manipulation !important;
}

#sellListings .listing-card-price-row,
#sellListings .listing-card-footer,
#sellListings .compact-footer,
#sellListings .listing-spec-row,
#sellListings .listing-tags,
#sellListings .simple-tags {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#sellListings .listing-card-id {
  min-width: 0 !important;
  max-width: 42% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#sellListings .listing-spec-row span,
#sellListings .listing-tags .tag,
#sellListings .simple-tags .tag {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 760px) {
  #sellListings .listing-grid,
  #sellListings.listing-list-view .listing-grid,
  #sellListings.listing-grid-view .listing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #sellListings .listing-card,
  #sellListings .market-card,
  #sellListings .rich-market-card,
  #sellListings .market-list-card,
  #sellListings .modern-listing-card,
  #sellListings.listing-list-view .listing-card,
  #sellListings.listing-list-view .market-card,
  #sellListings.listing-list-view .rich-market-card,
  #sellListings.listing-list-view .market-list-card,
  #sellListings.listing-list-view .modern-listing-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #sellListings .listing-card-media,
  #sellListings .compact-media,
  #sellListings.listing-list-view .listing-card-media,
  #sellListings.listing-list-view .compact-media {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 170px !important;
    aspect-ratio: 16 / 10 !important;
    flex: none !important;
  }

  #sellListings .listing-card-body,
  #sellListings .compact-body,
  #sellListings.listing-list-view .listing-card-body,
  #sellListings.listing-list-view .compact-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
}

/* ============================================================
   v17.69.31 — MARKETPLACE CARD + DETAIL SIZE SYSTEM
   Scope: sell marketplace list/grid/detail only.
   Goal: Blocket/Telbob-inspired sizing: list rows keep a compact image,
   grid cards never stretch to full page width, action buttons remain inside
   the card, and detail view no-image gallery is capped.
   ============================================================ */

/* Keep the listing panel readable on wide desktops instead of stretching a
   single card across the entire browser width. */
.marketplace-page .marketplace-layout,
.marketplace-page .listing-main,
.marketplace-page .listing-shell {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Grid/card view: cards should behave like marketplace cards, not like one
   huge full-width row when there is only one listing. */
#sellListings.listing-grid-view .listing-grid,
#sellListings:not(.listing-list-view) .listing-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px)) !important;
  justify-content: start !important;
  align-items: start !important;
  gap: 18px !important;
  width: 100% !important;
}

#sellListings.listing-grid-view .listing-card,
#sellListings:not(.listing-list-view) .listing-card,
#sellListings.listing-grid-view .market-card,
#sellListings:not(.listing-list-view) .market-card,
#sellListings.listing-grid-view .rich-market-card,
#sellListings:not(.listing-list-view) .rich-market-card,
#sellListings.listing-grid-view .modern-listing-card,
#sellListings:not(.listing-list-view) .modern-listing-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 360px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#sellListings.listing-grid-view .listing-card-media,
#sellListings:not(.listing-list-view) .listing-card-media,
#sellListings.listing-grid-view .compact-media,
#sellListings:not(.listing-list-view) .compact-media {
  width: 100% !important;
  height: auto !important;
  min-height: 190px !important;
  max-height: 230px !important;
  aspect-ratio: 16 / 10 !important;
  flex: none !important;
  overflow: hidden !important;
}

#sellListings.listing-grid-view .listing-card-body,
#sellListings:not(.listing-list-view) .listing-card-body,
#sellListings.listing-grid-view .compact-body,
#sellListings:not(.listing-list-view) .compact-body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 16px 16px 10px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* List view: one row per listing, inspired by Blocket/Telbob. The card has a
   fixed-size media column, a flexible info column, and a compact action column. */
#sellListings.listing-list-view .listing-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
}

#sellListings.listing-list-view .listing-card,
#sellListings.listing-list-view .market-card,
#sellListings.listing-list-view .rich-market-card,
#sellListings.listing-list-view .market-list-card,
#sellListings.listing-list-view .modern-listing-card {
  display: grid !important;
  grid-template-columns: 292px minmax(0, 1fr) 190px !important;
  grid-template-areas: "media body actions" !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 1180px !important;
  min-width: 0 !important;
  min-height: 194px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#sellListings.listing-list-view .listing-card-media,
#sellListings.listing-list-view .compact-media {
  grid-area: media !important;
  width: 292px !important;
  min-width: 292px !important;
  max-width: 292px !important;
  height: 194px !important;
  min-height: 194px !important;
  max-height: 194px !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  border-right: 1px solid var(--border) !important;
  overflow: hidden !important;
}

#sellListings.listing-list-view .listing-card-body,
#sellListings.listing-list-view .compact-body {
  grid-area: body !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 18px 18px 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#sellListings.listing-list-view .listing-card-actions,
#sellListings.listing-list-view .listing-card-actions-extended {
  grid-area: actions !important;
  align-self: stretch !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: end !important;
  gap: 10px !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  padding: 18px 16px !important;
  border-left: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#sellListings.listing-list-view .listing-card-actions .btn,
#sellListings.listing-list-view .listing-card-actions-extended .btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Reduce text pressure in both views without hiding critical info. */
#sellListings .listing-card h3,
#sellListings .listing-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

#sellListings .listing-card-price-row,
#sellListings .listing-card-footer,
#sellListings .compact-footer,
#sellListings .listing-spec-row,
#sellListings .listing-tags,
#sellListings .simple-tags {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#sellListings .listing-card-id {
  max-width: 45% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Medium screens: keep the list principle, but remove the separate action
   column before the layout becomes cramped. */
@media (max-width: 980px) {
  .marketplace-page .marketplace-layout,
  .marketplace-page .listing-main,
  .marketplace-page .listing-shell {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
  }

  #sellListings .listing-grid,
  #sellListings.listing-list-view .listing-grid,
  #sellListings.listing-grid-view .listing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    display: grid !important;
  }

  #sellListings .listing-card,
  #sellListings .market-card,
  #sellListings .rich-market-card,
  #sellListings .market-list-card,
  #sellListings .modern-listing-card,
  #sellListings.listing-list-view .listing-card,
  #sellListings.listing-list-view .market-card,
  #sellListings.listing-list-view .rich-market-card,
  #sellListings.listing-list-view .market-list-card,
  #sellListings.listing-list-view .modern-listing-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #sellListings .listing-card-media,
  #sellListings .compact-media,
  #sellListings.listing-list-view .listing-card-media,
  #sellListings.listing-list-view .compact-media {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 180px !important;
    max-height: 300px !important;
    aspect-ratio: 16 / 10 !important;
    border-right: 0 !important;
    flex: none !important;
  }

  #sellListings .listing-card-body,
  #sellListings .compact-body,
  #sellListings.listing-list-view .listing-card-body,
  #sellListings.listing-list-view .compact-body {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    min-width: 0 !important;
  }

  #sellListings .listing-card-actions,
  #sellListings .listing-card-actions-extended,
  #sellListings.listing-list-view .listing-card-actions,
  #sellListings.listing-list-view .listing-card-actions-extended {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px 16px 16px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--border) !important;
    gap: 10px !important;
  }
}

/* Detail view: opening an ad should not feel like a broken empty wall. Cap the
   no-image/hero area and keep the listing information visible sooner. */
#screen-sell-detail .clean-detail-layout,
#screen-sell-detail .sell-detail-layout {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: minmax(0, 760px) minmax(300px, 360px) !important;
}

#screen-sell-detail .listing-detail-media,
#screen-sell-detail .clean-detail-media {
  padding: 16px !important;
}

#screen-sell-detail .detail-gallery-stage,
#screen-sell-detail .listing-detail-media .detail-gallery-stage {
  min-height: 260px !important;
  height: clamp(260px, 42vw, 460px) !important;
  max-height: 460px !important;
}

#screen-sell-detail .detail-gallery-empty,
#screen-sell-detail .listing-preview-placeholder.detail-gallery-empty {
  min-height: 220px !important;
  height: 260px !important;
  max-height: 300px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

@media (max-width: 980px) {
  #screen-sell-detail .clean-detail-layout,
  #screen-sell-detail .sell-detail-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 760px !important;
  }

  #screen-sell-detail .detail-gallery-stage,
  #screen-sell-detail .listing-detail-media .detail-gallery-stage,
  #screen-sell-detail .detail-gallery-empty,
  #screen-sell-detail .listing-preview-placeholder.detail-gallery-empty {
    min-height: 210px !important;
    height: clamp(210px, 56vw, 330px) !important;
    max-height: 330px !important;
  }
}

/* ============================================================
   v17.69.54 MESSAGE CENTER — SINGLE CANONICAL LAYOUT
   Replaces accumulated contradictory height/overflow hotfixes.
   Desktop keeps a two-pane inbox. Mobile shows either the thread
   list or the active conversation, never both stacked together.
   ============================================================ */
#screen-sell-messages.bc-messages-panel {
  display: block;
  height: auto;
  min-height: calc(100dvh - 120px);
  overflow: visible;
  padding-bottom: max(48px, calc(28px + env(safe-area-inset-bottom, 0px)));
}

#screen-sell-messages #sellMessagesContent {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

#screen-sell-messages .bc-inbox {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  height: min(760px, calc(100dvh - 190px));
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

#screen-sell-messages .messages-sidebar-card,
#screen-sell-messages .message-thread-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
}

#screen-sell-messages .messages-thread-items {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#screen-sell-messages .bc-inbox-panel {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}

#screen-sell-messages .messages-thread-panel,
#screen-sell-messages .messages-thread-panel-enhanced {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}

#screen-sell-messages .messages-chat-head {
  grid-row: 1;
  min-width: 0;
  padding: 18px;
  border-bottom: 1px solid var(--border);
}

#screen-sell-messages .message-thread-conversation,
#screen-sell-messages .message-thread-conversation-enhanced {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#screen-sell-messages .message-bubble,
#screen-sell-messages .message-bubble.own-message,
#screen-sell-messages .message-bubble-own {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

#screen-sell-messages #threadReplyForm.message-reply-box,
#screen-sell-messages #threadReplyForm.message-reply-box-enhanced {
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: end;
  min-width: 0;
  margin: 0;
  padding: 16px 18px max(18px, calc(14px + env(safe-area-inset-bottom, 0px)));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.05);
  overflow: visible;
}

#screen-sell-messages #threadReplyForm .label {
  grid-column: 1 / -1;
}

#screen-sell-messages #threadReplyMessage {
  grid-column: 1;
  min-width: 0;
  min-height: 88px;
  max-height: 180px;
  resize: vertical;
}

#screen-sell-messages #threadReplyForm .message-reply-actions {
  grid-column: 2;
  display: flex;
  align-self: stretch;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 168px;
}

#screen-sell-messages #threadReplySubmitBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  min-height: 52px;
  padding-inline: 18px;
  white-space: nowrap;
}

#screen-sell-messages #threadReplySubmitBtn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.message-mobile-back {
  display: none;
}

@media (max-width: 900px) {
  #screen-sell-messages.bc-messages-panel {
    min-height: 0;
    padding-bottom: max(40px, calc(20px + env(safe-area-inset-bottom, 0px)));
  }

  #screen-sell-messages .bc-inbox {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #screen-sell-messages .bc-inbox:not(.is-thread-open) > .bc-inbox-panel {
    display: none;
  }

  #screen-sell-messages .bc-inbox.is-thread-open > .messages-sidebar-card,
  #screen-sell-messages .bc-inbox.is-thread-open > .message-thread-list {
    display: none;
  }

  #screen-sell-messages .bc-inbox.is-thread-open > .bc-inbox-panel {
    display: block;
  }

  #screen-sell-messages .messages-sidebar-card,
  #screen-sell-messages .message-thread-list {
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  #screen-sell-messages .messages-thread-items {
    overflow: visible;
  }

  #screen-sell-messages .messages-thread-panel,
  #screen-sell-messages .messages-thread-panel-enhanced {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  #screen-sell-messages .messages-chat-head {
    display: grid;
    gap: 14px;
    padding: 16px;
  }

  #screen-sell-messages .message-mobile-back {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
  }

  #screen-sell-messages .message-thread-conversation,
  #screen-sell-messages .message-thread-conversation-enhanced {
    display: flex;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 16px;
    scroll-behavior: auto;
  }

  #screen-sell-messages .message-bubble {
    max-width: 88%;
  }

  #screen-sell-messages #threadReplyForm.message-reply-box,
  #screen-sell-messages #threadReplyForm.message-reply-box-enhanced {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 16px 16px max(20px, calc(14px + env(safe-area-inset-bottom, 0px)));
  }

  #screen-sell-messages #threadReplyMessage,
  #screen-sell-messages #threadReplyForm .message-reply-actions {
    grid-column: 1;
  }

  #screen-sell-messages #threadReplyForm .message-reply-actions,
  #screen-sell-messages #threadReplySubmitBtn {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   v17.69.50 MARKETPLACE DETAIL PREMIUM LAYOUT + TIRE FACTS
   Makes "Visa annons" detail closer to the approved mockup and
   prevents tire ads from showing car-only facts such as kaross.
   ============================================================ */
#screen-sell-detail .premium-detail-layout {
  width: min(100%, 1360px) !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  align-items: start !important;
  gap: 22px !important;
}

#screen-sell-detail .premium-detail-main {
  display: grid !important;
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  background: linear-gradient(180deg, #fff 0%, rgba(248, 250, 252, 0.88) 100%) !important;
  border: 1px solid rgba(209, 216, 228, 0.9) !important;
  border-radius: 24px !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden !important;
}

#screen-sell-detail .premium-detail-media {
  border-right: 1px solid var(--border) !important;
  border-bottom: 0 !important;
  background: radial-gradient(circle at 50% 24%, rgba(37, 99, 235, 0.08), transparent 42%), #f8fafc !important;
}

#screen-sell-detail .premium-detail-body {
  padding: clamp(22px, 3vw, 34px) !important;
  display: grid !important;
  align-content: start !important;
  gap: 18px !important;
}

#screen-sell-detail .detail-topline {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

#screen-sell-detail .detail-topline span { margin: 0 8px !important; color: #a8b2c6 !important; }

#screen-sell-detail .detail-title {
  margin: 0 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
}

#screen-sell-detail .detail-price {
  margin: 0 !important;
  color: var(--action) !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
}

#screen-sell-detail .detail-tags {
  gap: 10px !important;
}

#screen-sell-detail .detail-tags .tag-ui {
  min-height: 34px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  border-color: #e3e8f2 !important;
  color: #344054 !important;
  font-weight: 750 !important;
}

#screen-sell-detail .detail-spec-card,
#screen-sell-detail .detail-description-card,
#screen-sell-detail .premium-detail-side .seller-contact-card,
#screen-sell-detail .premium-detail-side .clean-contact-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(209, 216, 228, 0.92) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
}

#screen-sell-detail .detail-spec-card,
#screen-sell-detail .detail-description-card {
  padding: 18px !important;
}

#screen-sell-detail .detail-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

#screen-sell-detail .detail-section-head h4,
#screen-sell-detail .detail-description-card h4 {
  margin: 0 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
}

#screen-sell-detail .detail-section-head span {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

#screen-sell-detail .premium-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#screen-sell-detail .detail-fact-premium {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 82px !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1px solid #e4eaf3 !important;
  border-radius: 16px !important;
}

#screen-sell-detail .detail-fact-icon {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(29, 95, 204, 0.1) !important;
  color: var(--action) !important;
  font-weight: 900 !important;
}

#screen-sell-detail .detail-fact-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

#screen-sell-detail .detail-fact-copy span {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#screen-sell-detail .detail-fact-copy strong {
  color: var(--text) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

#screen-sell-detail .detail-description-card {
  display: grid !important;
  gap: 12px !important;
}

#screen-sell-detail .detail-description-card .listing-detail-description {
  margin: 0 !important;
  padding: 16px !important;
  min-height: 64px !important;
  background: #f8fafc !important;
  border: 1px solid #e8edf5 !important;
  border-radius: 14px !important;
  color: var(--text-muted) !important;
}

#screen-sell-detail .premium-detail-side {
  display: grid !important;
  gap: 16px !important;
}

#screen-sell-detail .premium-detail-side .seller-contact-card,
#screen-sell-detail .premium-detail-side .clean-contact-card {
  padding: 22px !important;
}

#screen-sell-detail .premium-detail-side .btn-primary {
  min-height: 54px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
}

#screen-sell-detail .premium-detail-side .btn-secondary,
#screen-sell-detail .premium-detail-side .btn-ghost {
  min-height: 48px !important;
  border-radius: 14px !important;
}

@media (max-width: 1180px) {
  #screen-sell-detail .premium-detail-main {
    grid-template-columns: 1fr !important;
  }
  #screen-sell-detail .premium-detail-media {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  #screen-sell-detail .premium-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #screen-sell-detail .premium-detail-layout {
    grid-template-columns: 1fr !important;
    max-width: 780px !important;
    gap: 16px !important;
  }
  #screen-sell-detail .premium-detail-side {
    order: 2 !important;
  }
}

@media (max-width: 640px) {
  #screen-sell-detail .premium-detail-layout {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
  }
  #screen-sell-detail .premium-detail-main {
    border-radius: 18px !important;
  }
  #screen-sell-detail .premium-detail-media,
  #screen-sell-detail .premium-detail-body {
    padding: 14px !important;
  }
  #screen-sell-detail .detail-title {
    font-size: 28px !important;
  }
  #screen-sell-detail .detail-price {
    font-size: 30px !important;
  }
  #screen-sell-detail .premium-detail-grid {
    grid-template-columns: 1fr !important;
  }
  #screen-sell-detail .detail-fact-premium {
    min-height: 68px !important;
  }
  #screen-sell-detail .detail-tags .tag-ui {
    font-size: 13px !important;
  }
}

/* ============================================================
   v17.69.50 MARKETPLACE DETAIL VISUAL REDESIGN / NO IMAGE STATE
   Real implementation of the approved premium listing detail direction.
   Shows a quiet marketplace placeholder icon when a listing has no photos.
   ============================================================ */
#screen-sell-detail {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 42%, #f8fafc 100%) !important;
}

#screen-sell-detail .premium-detail-layout {
  width: min(100%, 1380px) !important;
  max-width: 1380px !important;
  gap: 24px !important;
}

#screen-sell-detail .premium-detail-main {
  grid-template-columns: minmax(320px, 46%) minmax(0, 1fr) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08) !important;
}

#screen-sell-detail .premium-detail-media {
  background: #fff !important;
  padding: clamp(16px, 2.3vw, 24px) !important;
  align-content: start !important;
}

#screen-sell-detail .detail-gallery,
#screen-sell-detail .detail-gallery-empty-shell {
  width: 100% !important;
  min-width: 0 !important;
}

#screen-sell-detail .detail-gallery-stage,
#screen-sell-detail .listing-detail-media .detail-gallery-stage {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #e3e8f2 !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 40px rgba(15, 23, 42, 0.045) !important;
  min-height: 320px !important;
  height: clamp(320px, 36vw, 480px) !important;
  max-height: 480px !important;
}

#screen-sell-detail .detail-gallery-stage-empty,
#screen-sell-detail .listing-detail-media .detail-gallery-stage-empty {
  background: #fff !important;
  color: #b8c0cc !important;
}

#screen-sell-detail .detail-gallery-empty-symbol {
  width: clamp(74px, 8vw, 108px) !important;
  height: clamp(74px, 8vw, 108px) !important;
  border-radius: 26px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  border: 1px solid #dfe6f1 !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.055) !important;
}

#screen-sell-detail .detail-gallery-empty-svg {
  width: 58% !important;
  height: 58% !important;
  color: #aab4c3 !important;
}

#screen-sell-detail .listing-preview-placeholder.detail-gallery-empty,
#screen-sell-detail .detail-gallery-empty {
  background: #fff !important;
  border: 1px solid #e3e8f2 !important;
  color: #aab4c3 !important;
}

#screen-sell-detail .listing-preview-placeholder.detail-gallery-empty span,
#screen-sell-detail .listing-preview-placeholder.detail-gallery-empty small {
  display: none !important;
}

#screen-sell-detail .premium-detail-body {
  padding: clamp(24px, 3vw, 40px) !important;
  gap: 20px !important;
}

#screen-sell-detail .detail-topline {
  font-size: 13px !important;
  color: #667085 !important;
}

#screen-sell-detail .detail-title {
  font-size: clamp(32px, 4.8vw, 52px) !important;
  line-height: 1.02 !important;
}

#screen-sell-detail .detail-price {
  font-size: clamp(34px, 4.2vw, 48px) !important;
}

#screen-sell-detail .detail-tags .tag-ui {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035) !important;
}

#screen-sell-detail .detail-section-head h4::before,
#screen-sell-detail .detail-description-card h4::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--action);
  vertical-align: 2px;
}

#screen-sell-detail .detail-fact-premium {
  border-color: #e6ecf5 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035) !important;
}

#screen-sell-detail .detail-fact-icon {
  background: #eff5ff !important;
  color: var(--action) !important;
}

#screen-sell-detail .listing-card-placeholder-icon {
  background: #fff !important;
  border: 1px solid #e3e8f2 !important;
  color: #aab4c3 !important;
  font-size: 32px !important;
  display: grid !important;
  place-items: center !important;
}

@media (max-width: 1180px) {
  #screen-sell-detail .premium-detail-main {
    grid-template-columns: 1fr !important;
  }
  #screen-sell-detail .premium-detail-media {
    border-right: 0 !important;
  }
}

@media (max-width: 640px) {
  #screen-sell-detail .premium-detail-layout {
    padding: 0 10px !important;
    gap: 14px !important;
  }
  #screen-sell-detail .premium-detail-main {
    border-radius: 20px !important;
  }
  #screen-sell-detail .detail-gallery-stage,
  #screen-sell-detail .listing-detail-media .detail-gallery-stage {
    min-height: 240px !important;
    height: clamp(240px, 70vw, 340px) !important;
    max-height: 340px !important;
    border-radius: 18px !important;
  }
  #screen-sell-detail .detail-title {
    font-size: clamp(28px, 8.5vw, 36px) !important;
  }
  #screen-sell-detail .detail-price {
    font-size: clamp(30px, 8vw, 38px) !important;
  }
  #screen-sell-detail .premium-detail-body {
    padding: 16px !important;
  }
}



/* ============================================================
   v17.69.50 MARKETPLACE DETAIL RESPONSIVE SPEC CLEANUP
   Removes duplicated tire chips and prevents spec text from breaking.
   Mobile-first hardening for the premium listing detail view.
   ============================================================ */
#screen-sell-detail .detail-category-tire .detail-tags {
  margin-bottom: 4px !important;
}

#screen-sell-detail .detail-category-tire .premium-detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  gap: 14px !important;
}

#screen-sell-detail .detail-category-tire .detail-fact-premium {
  min-height: 76px !important;
  padding: 14px 16px !important;
  align-items: center !important;
}

#screen-sell-detail .detail-category-tire .detail-fact-copy,
#screen-sell-detail .detail-category-tire .detail-fact-copy span,
#screen-sell-detail .detail-category-tire .detail-fact-copy strong {
  min-width: 0 !important;
  max-width: 100% !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

#screen-sell-detail .detail-category-tire .detail-fact-copy span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#screen-sell-detail .detail-category-tire .detail-fact-copy strong {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

#screen-sell-detail .detail-category-tire .detail-section-head {
  align-items: flex-start !important;
}

#screen-sell-detail .detail-category-tire .detail-section-head span {
  white-space: nowrap !important;
}

@media (max-width: 1240px) {
  #screen-sell-detail .premium-detail-layout {
    grid-template-columns: 1fr !important;
    max-width: 920px !important;
  }
  #screen-sell-detail .premium-detail-side {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #screen-sell-detail .premium-detail-side {
    grid-template-columns: 1fr !important;
  }
  #screen-sell-detail .detail-category-tire .premium-detail-grid {
    grid-template-columns: 1fr !important;
  }
  #screen-sell-detail .detail-category-tire .detail-fact-premium {
    min-height: 64px !important;
  }
  #screen-sell-detail .detail-category-tire .detail-section-head {
    flex-direction: column !important;
    gap: 6px !important;
  }
}

@media (max-width: 480px) {
  #screen-sell-detail .premium-detail-layout {
    padding: 0 10px !important;
  }
  #screen-sell-detail .premium-detail-body {
    padding: 18px !important;
  }
  #screen-sell-detail .detail-title {
    font-size: 26px !important;
    line-height: 1.08 !important;
  }
  #screen-sell-detail .detail-price {
    font-size: 30px !important;
  }
}


/* ============================================================
   v17.69.50 MARKETPLACE DETAIL POLISH / MOBILE ACTIONS
   Fixes the remaining detail-page issues reported after v17.69.45:
   - share action uses the same bordered button treatment
   - tire detail only keeps the status chip to avoid duplicated facts
   - removes duplicated check symbols caused by the global .tag::before rule
   - keeps tire values readable on mobile
   - makes empty description compact instead of visually dragging the page down
   ============================================================ */
#screen-sell-detail .detail-tags .tag-ui {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#screen-sell-detail .detail-tags .tag-ui::before {
  margin-right: 6px !important;
}

#screen-sell-detail .detail-tags .tag-ui:not([class*="tag-status-"]) {
  color: #344054 !important;
}

#screen-sell-detail .detail-category-tire .detail-tags .tag-ui:not([class*="tag-status-"]) {
  display: none !important;
}

#screen-sell-detail .detail-category-tire .detail-tags {
  gap: 8px !important;
  min-height: 0 !important;
}

#screen-sell-detail .detail-category-tire .detail-fact-copy strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#screen-sell-detail .detail-category-tire .detail-fact-copy strong:is(:not(:empty)) {
  hyphens: none !important;
}

#screen-sell-detail .detail-category-tire .detail-fact-copy span {
  white-space: normal !important;
}

#screen-sell-detail .listing-detail-actions .btn,
#screen-sell-detail .listing-detail-actions button {
  text-align: center !important;
}

#screen-sell-detail .premium-detail-side .listing-detail-actions .btn-secondary,
#screen-sell-detail .premium-detail-side .listing-detail-actions [data-share-listing] {
  border: 1px solid #cfd8e6 !important;
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

#screen-sell-detail .premium-detail-side .listing-detail-actions [data-share-listing]:hover {
  border-color: var(--action) !important;
  color: var(--action) !important;
  background: #f8fbff !important;
}

#screen-sell-detail .premium-detail-side .listing-detail-actions .btn-report {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--text-soft) !important;
  box-shadow: none !important;
}

#screen-sell-detail .detail-description-card {
  align-self: start !important;
}

#screen-sell-detail .detail-description-card .listing-detail-description {
  min-height: 0 !important;
  height: auto !important;
  padding: 14px 16px !important;
  line-height: 1.55 !important;
}

@media (max-width: 760px) {
  #screen-sell-detail .premium-detail-side .listing-detail-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  #screen-sell-detail .premium-detail-side .listing-detail-actions .btn-primary,
  #screen-sell-detail .premium-detail-side .listing-detail-actions .btn-secondary,
  #screen-sell-detail .premium-detail-side .listing-detail-actions [data-share-listing] {
    width: 100% !important;
    min-height: 52px !important;
  }

  #screen-sell-detail .premium-detail-side .listing-detail-actions .btn-report {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    min-height: 38px !important;
    padding-inline: 0 !important;
  }

  #screen-sell-detail .detail-spec-card,
  #screen-sell-detail .detail-description-card {
    padding: 16px !important;
  }
}

@media (max-width: 430px) {
  #screen-sell-detail .premium-detail-side .listing-detail-actions {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   v17.69.50 MARKETPLACE CARD TIRE DUPLICATION CLEANUP
   Keeps listing cards clean: tire specs render once, with stable wrapping.
   ================================================================ */
#sellListings .listing-card-tire-spec,
.listing-card .listing-card-tire-spec {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.35;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
#sellListings .listing-card-tire-spec .tire-season-badge,
.listing-card .listing-card-tire-spec .tire-season-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
}
#sellListings .simple-tags:empty,
.listing-card .simple-tags:empty {
  display: none !important;
}

/* ================================================================
   v17.69.50 MARKETPLACE DETAIL MOCKUP-INSPIRED LAYOUT
   Turns the real "Visa annons" view into the approved marketplace layout:
   - hero row with media left and title/price right
   - full-width Annonsinformation card below
   - clean sidebar cards and stable mobile stacking
   ================================================================ */
#screen-sell-detail .premium-detail-layout {
  width: min(100%, 1320px) !important;
  max-width: 1320px !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 22px !important;
  align-items: start !important;
  padding-inline: clamp(12px, 2vw, 20px) !important;
}

#screen-sell-detail .premium-detail-content {
  display: grid !important;
  gap: 18px !important;
  min-width: 0 !important;
}

#screen-sell-detail .premium-detail-hero {
  display: grid !important;
  grid-template-columns: minmax(320px, 42%) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  background: #fff !important;
  border: 1px solid #e1e7f0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.075) !important;
}

#screen-sell-detail .premium-detail-main {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#screen-sell-detail .premium-detail-media {
  min-width: 0 !important;
  padding: clamp(18px, 2vw, 24px) !important;
  background: linear-gradient(180deg, #fbfcff 0%, #f6f8fb 100%) !important;
  border-right: 1px solid #e7edf5 !important;
  border-bottom: 0 !important;
}

#screen-sell-detail .premium-detail-body {
  min-width: 0 !important;
  padding: clamp(26px, 3vw, 42px) !important;
  display: grid !important;
  align-content: center !important;
  gap: 18px !important;
}

#screen-sell-detail .detail-gallery-stage,
#screen-sell-detail .listing-detail-media .detail-gallery-stage {
  height: clamp(320px, 32vw, 470px) !important;
  min-height: 320px !important;
  max-height: 470px !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 12px 28px rgba(15,23,42,.045) !important;
}

#screen-sell-detail .detail-gallery-stage-empty,
#screen-sell-detail .listing-detail-media .detail-gallery-stage-empty {
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
}

#screen-sell-detail .detail-gallery-empty-symbol {
  width: 96px !important;
  height: 96px !important;
  border-radius: 28px !important;
  color: #a6afbd !important;
  background: #fafbfc !important;
  border: 1px solid #e3e8ef !important;
}

#screen-sell-detail .detail-title {
  max-width: 720px !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
}

#screen-sell-detail .detail-price {
  font-size: clamp(34px, 3.8vw, 48px) !important;
  color: #1457d9 !important;
}

#screen-sell-detail .detail-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

#screen-sell-detail .detail-tags .tag-ui {
  background: #fff !important;
  border: 1px solid #e1e7f0 !important;
  border-radius: 999px !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
}

#screen-sell-detail .detail-spec-card,
#screen-sell-detail .detail-description-card,
#screen-sell-detail .premium-detail-side .seller-contact-card,
#screen-sell-detail .premium-detail-side .clean-contact-card {
  background: #fff !important;
  border: 1px solid #e1e7f0 !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06) !important;
}

#screen-sell-detail .detail-spec-card,
#screen-sell-detail .detail-description-card {
  padding: clamp(18px, 2.4vw, 26px) !important;
}

#screen-sell-detail .detail-section-head {
  margin-bottom: 18px !important;
}

#screen-sell-detail .detail-section-head h4,
#screen-sell-detail .detail-description-card h4 {
  font-size: 20px !important;
  font-weight: 850 !important;
}

#screen-sell-detail .premium-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid #e7edf5 !important;
  border-left: 0 !important;
}

#screen-sell-detail .detail-fact-premium {
  min-height: 88px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 18px 14px !important;
}

#screen-sell-detail .detail-fact-premium:nth-child(n+5) {
  border-top: 1px solid #e7edf5 !important;
}

#screen-sell-detail .detail-fact-icon {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  background: #eef5ff !important;
  color: #1457d9 !important;
}

#screen-sell-detail .detail-fact-copy span {
  font-size: 12px !important;
  color: #667085 !important;
}

#screen-sell-detail .detail-fact-copy strong {
  font-size: 14px !important;
  font-weight: 850 !important;
  color: #101828 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

#screen-sell-detail .detail-category-tire .detail-fact-copy strong {
  white-space: normal !important;
  overflow-wrap: normal !important;
}

#screen-sell-detail .detail-description-card .listing-detail-description {
  min-height: 0 !important;
  padding: 18px 20px !important;
  background: #f8fafc !important;
  border: 1px solid #e7edf5 !important;
  border-radius: 16px !important;
}

#screen-sell-detail .premium-detail-side {
  display: grid !important;
  gap: 18px !important;
  position: sticky !important;
  top: 96px !important;
}

#screen-sell-detail .premium-detail-side .seller-contact-card,
#screen-sell-detail .premium-detail-side .clean-contact-card {
  padding: 24px !important;
}

#screen-sell-detail .premium-detail-side .listing-detail-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

#screen-sell-detail .premium-detail-side .listing-detail-actions .btn-primary,
#screen-sell-detail .premium-detail-side .listing-detail-actions .btn-secondary,
#screen-sell-detail .premium-detail-side .listing-detail-actions [data-share-listing] {
  width: 100% !important;
  min-height: 54px !important;
  border-radius: 14px !important;
}

#screen-sell-detail .premium-detail-side .listing-detail-actions [data-share-listing] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 1180px) {
  #screen-sell-detail .premium-detail-layout {
    grid-template-columns: 1fr !important;
    max-width: 920px !important;
  }
  #screen-sell-detail .premium-detail-side {
    position: static !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 880px) {
  #screen-sell-detail .premium-detail-hero {
    grid-template-columns: 1fr !important;
  }
  #screen-sell-detail .premium-detail-media {
    border-right: 0 !important;
    border-bottom: 1px solid #e7edf5 !important;
  }
  #screen-sell-detail .premium-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #screen-sell-detail .detail-fact-premium:nth-child(n+3) {
    border-top: 1px solid #e7edf5 !important;
  }
}

@media (max-width: 640px) {
  #screen-sell-detail .premium-detail-layout {
    padding-inline: 10px !important;
    gap: 14px !important;
  }
  #screen-sell-detail .premium-detail-hero,
  #screen-sell-detail .detail-spec-card,
  #screen-sell-detail .detail-description-card,
  #screen-sell-detail .premium-detail-side .seller-contact-card,
  #screen-sell-detail .premium-detail-side .clean-contact-card {
    border-radius: 18px !important;
  }
  #screen-sell-detail .premium-detail-body {
    padding: 18px !important;
    align-content: start !important;
  }
  #screen-sell-detail .premium-detail-media {
    padding: 14px !important;
  }
  #screen-sell-detail .detail-gallery-stage,
  #screen-sell-detail .listing-detail-media .detail-gallery-stage {
    min-height: 230px !important;
    height: clamp(230px, 64vw, 330px) !important;
    max-height: 330px !important;
  }
  #screen-sell-detail .detail-title {
    font-size: 28px !important;
    letter-spacing: -0.035em !important;
  }
  #screen-sell-detail .detail-price {
    font-size: 32px !important;
  }
  #screen-sell-detail .detail-tags .tag-ui {
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  #screen-sell-detail .premium-detail-grid {
    grid-template-columns: 1fr !important;
    border-top: 0 !important;
  }
  #screen-sell-detail .detail-fact-premium,
  #screen-sell-detail .detail-fact-premium:nth-child(n+3),
  #screen-sell-detail .detail-fact-premium:nth-child(n+5) {
    border: 1px solid #e7edf5 !important;
    border-radius: 16px !important;
    min-height: 70px !important;
    margin-bottom: 10px !important;
    padding: 14px 16px !important;
  }
  #screen-sell-detail .detail-spec-card,
  #screen-sell-detail .detail-description-card,
  #screen-sell-detail .premium-detail-side .seller-contact-card,
  #screen-sell-detail .premium-detail-side .clean-contact-card {
    padding: 16px !important;
  }
  #screen-sell-detail .premium-detail-side {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   v17.69.50 DETAIL BACK NAVIGATION / RETURN POSITION HARDENING
   -------------------------------------------------------------------------- */
.listing-return-focus {
  outline: 3px solid rgba(37, 99, 235, 0.28) !important;
  outline-offset: 4px;
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.18) !important;
  transition: outline-color 0.2s ease, box-shadow 0.2s ease;
}


/* v17.69.50 INSPECTION COMPLETION / SKIP GUARD */
.nav-square.locked,
.nav-square[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.nav-square.locked:hover,
.nav-square[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

/* ============================================================
   v17.69.54 MOBILE AUTH / ACCOUNT ROOT-CAUSE FIX
   Prevents iOS focus zoom, modal overflow and cramped account cards.
   ============================================================ */
.account-screen-content {
  width: min(100%, var(--content-max, 1440px));
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px 40px;
  box-sizing: border-box;
  overflow-x: clip;
}

.auth-modal-dialog,
.auth-modal,
.auth-modal-body,
.auth-modal-panel,
.auth-modal-panel form,
.auth-helper-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.auth-modal-dialog {
  max-height: calc(100dvh - 16px);
}

.auth-modal {
  max-height: calc(100dvh - 16px);
}

.auth-modal-body {
  max-height: min(760px, calc(100dvh - 126px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#sellAuthPanelRegister.is-verifying #sellAuthRegisterForm {
  display: none !important;
}

#sellAuthRegisterVerifyPanel,
#sellAuthRegisterVerifyPanel form,
#sellAuthRegisterVerifyNotice {
  min-width: 0;
  max-width: 100%;
}

#sellAuthRegisterVerifyNotice {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.auth-verify-actions {
  flex-wrap: wrap;
  min-width: 0;
}

@media (max-width: 760px) {
  /* iOS Safari zooms the visual viewport when focused form controls are below
     16px. Keeping controls at 16px prevents the persistent cropped screen seen
     after registration and verification. */
  .field,
  input.field,
  select.field,
  textarea.field {
    font-size: 16px;
  }

  .auth-modal-dialog {
    width: calc(100dvw - 12px);
    max-width: calc(100dvw - 12px);
    max-height: calc(100dvh - 12px);
    margin: 6px auto;
    padding: 0;
  }

  .auth-modal {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 18px;
  }

  .auth-modal-head {
    gap: 10px;
    padding: 18px 16px 0;
  }

  .auth-modal-head h3 {
    font-size: clamp(20px, 6vw, 25px);
    line-height: 1.15;
  }

  .auth-modal-body {
    width: 100%;
    max-height: calc(100dvh - 102px);
    padding: 18px 16px max(20px, calc(14px + env(safe-area-inset-bottom, 0px)));
  }

  #sellAuthDialog .auth-actions,
  #sellAuthDialog .auth-verify-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 10px;
  }

  #sellAuthDialog .auth-actions .btn,
  #sellAuthDialog .auth-verify-actions .btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .account-screen-content {
    padding: 0 12px max(48px, calc(32px + env(safe-area-inset-bottom, 0px)));
  }

}

@media (max-width: 420px) {
  .auth-modal-copy .muted {
    font-size: 13px;
    line-height: 1.35;
  }

}

/* v17.69.54 MOBILE MARKETPLACE RESULTS BAR */
@media (max-width: 760px) {
  .filter-results-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
  }

  .sell-filter-summary {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .sell-filter-count,
  .sell-filter-meta {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .filter-results-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  .filter-results-right .filter-sort {
    width: 100%;
    min-width: 0;
  }

  .filter-results-right #listingSaveSearchBtn {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* ============================================================
   v17.69.54 MOBILE FILTER FLOW — STRUCTURAL ORDER FIX
   Filters now expand immediately below the search row. Results,
   view controls and save-search follow after the filter controls.
   ============================================================ */
.filter-mobile-footer { display: none; }

@media (max-width: 900px) {
  .filter-top-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
  }

  .filter-cat-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .filter-cat-btn {
    min-width: 0;
    padding-inline: 8px;
    white-space: normal;
    line-height: 1.2;
  }

  .nearby-btn { width: max-content; }

  .filter-search-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  .filter-search-group .sell-search-field {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .filter-panel {
    margin-top: 0;
    padding: 14px;
    scroll-margin-top: calc(var(--header-h, 76px) + 12px);
  }

  .filter-mobile-footer:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px 0 4px;
  }

  .filter-mobile-sort-row {
    display: grid;
    gap: 4px;
    margin: 0;
  }

  #listingFilterDoneBtn {
    min-height: 48px;
    white-space: nowrap;
  }

  .mobile-filter-toggle.is-open {
    background: var(--action-soft);
    border-color: rgba(29,95,204,0.28);
    color: var(--action);
  }
}

@media (max-width: 560px) {
  .sell-filter-panel,
  .filter-shell-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .filter-search-group {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .filter-search-group #listingResetFiltersBtn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .filter-mobile-footer:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }

  #listingFilterDoneBtn { width: 100%; }
}


/* ============================================================
   v17.69.55 MOBILE ACCOUNT + CATEGORY ROOT-CAUSE CONSOLIDATION
   Account tabs are now the primary navigation, while overview-only
   statistics no longer block Settings/Security on small screens.
   Marketplace categories use a readable 2x2 mobile grid and category
   selection alone is not presented as an active filter.
   ============================================================ */
.sell-active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(29,95,204,0.2);
  border-radius: var(--radius-pill);
  background: var(--action-soft);
  color: var(--action);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}

.sell-active-filter-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sell-active-filter-chip strong {
  color: currentColor;
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 480px) {
  .filter-cat-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
    border-radius: 18px;
  }

  .filter-cat-btn {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 14px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .filter-search-group {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .filter-search-group .sell-search-field {
    min-height: 48px;
  }

  .filter-search-group .mobile-filter-toggle {
    min-height: 48px;
  }

  .filter-search-group #listingResetFiltersBtn:not([hidden]) {
    grid-column: 1 / -1;
    min-height: 40px;
    margin-top: -2px;
  }

  .sell-active-filters {
    margin-top: 8px;
    padding-top: 8px;
  }
}

/* ============================================================
   v17.69.58 ACCOUNT INFORMATION ARCHITECTURE — CANONICAL
   Konto, Inställningar and Säkerhet are separate destinations.
   This block owns the account layout; older mobile account
   overrides were removed instead of layered with another hotfix.
   ============================================================ */
.account-page-heading {
  padding-bottom: 8px;
}

#sellAccountIntro {
  max-width: 620px;
  margin: 8px 0 0;
}

#sellAccountContent .bc-account-shell {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 0 64px;
  gap: 16px;
}

#sellAccountContent .bc-account-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  overflow: hidden;
}

#sellAccountContent .bc-account-info {
  min-width: 0;
}

#sellAccountContent .bc-account-email,
#sellAccountContent .bc-account-location {
  overflow-wrap: anywhere;
}

.account-profile-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(29, 95, 204, 0.18);
  border-radius: var(--radius-pill);
  background: var(--action-soft);
  color: var(--action);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.account-section-shell {
  display: grid;
  gap: 16px;
  min-width: 0;
}

#sellAccountContent .account-tab-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-sunken);
  box-shadow: none;
}

#sellAccountContent .account-tab-btn {
  min-width: 0;
  min-height: 44px;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sellAccountContent .account-tab-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

#sellAccountContent .account-tab-btn.active {
  border-color: rgba(29, 95, 204, 0.18);
  background: var(--surface-raised);
  color: var(--action);
  box-shadow: var(--shadow-sm);
}

#sellAccountContent .account-tab-btn:focus-visible {
  outline: 3px solid rgba(29, 95, 204, 0.24);
  outline-offset: 2px;
}

#sellAccountContent .account-tab-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 0;
}

.account-section-intro {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 0 2px;
}

.account-section-intro h3,
#sellAccountContent .account-panel-card h3 {
  margin: 0;
}

.account-section-intro p {
  margin: 0;
}

#sellAccountContent .account-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

#sellAccountContent .account-panel-card {
  min-width: 0;
  padding: 22px;
  overflow: hidden;
}

#sellAccountContent .account-settings-form {
  display: grid;
  gap: 14px;
  min-width: 0;
}

#sellAccountContent .account-form-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
}

#sellAccountContent .account-check-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  min-width: 0;
}

#sellAccountContent .account-check-row > span {
  min-width: 0;
}

#sellAccountContent .account-check-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
}

#sellAccountContent .account-detail-item {
  flex-direction: row;
  align-items: flex-start;
  min-width: 0;
}

#sellAccountContent .account-detail-item strong {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .account-screen-content {
    padding: 0 14px max(48px, calc(32px + env(safe-area-inset-bottom, 0px)));
  }

  #sellAccountContent .bc-account-shell {
    padding: 14px 0 52px;
    gap: 14px;
  }

  #sellAccountContent .bc-account-profile {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  #sellAccountContent .account-profile-status {
    grid-column: 2;
    justify-self: start;
  }

  #sellAccountContent .account-tab-row {
    gap: 4px;
    padding: 5px;
    border-radius: 14px;
  }

  #sellAccountContent .account-tab-btn {
    min-height: 42px;
    padding: 8px 4px;
    font-size: 14px;
    letter-spacing: -0.01em;
  }

  #sellAccountContent .account-panel-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #sellAccountContent .account-panel-card {
    padding: 18px 16px;
    border-radius: 18px;
  }

  #sellAccountContent .account-form-actions .btn {
    width: 100%;
  }

  #sellAccountContent .account-detail-item {
    gap: 12px;
  }
}

@media (max-width: 360px) {
  #sellAccountContent .account-tab-btn {
    font-size: 12.5px;
    padding-inline: 2px;
  }

  #sellAccountContent .bc-account-avatar {
    width: 50px;
    height: 50px;
  }
}


/* ============================================================
   v17.69.59 AUTH VERIFICATION INPUT FOCUS — CANONICAL
   Make the one-time-code field visibly interactive and keep the caret clear.
   ============================================================ */
#sellAuthRegisterVerifyCode,
#sellRegisterVerifyCode {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  font-weight: 700;
  caret-color: var(--action);
}

#sellAuthRegisterVerifyCode:focus,
#sellRegisterVerifyCode:focus {
  background: var(--surface, #fff);
  border-color: var(--action);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 18%, transparent);
  outline: none;
}


/* =========================================================
   v17.69.60 ACCOUNT MANAGEMENT + GDPR CONTROLS — CANONICAL
   ========================================================= */
#sellAccountContent .account-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

#sellAccountContent .account-data-card,
#sellAccountContent .account-danger-card {
  min-width: 0;
}

#sellAccountContent .account-danger-card {
  border-color: rgba(185, 28, 28, 0.28);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.92), rgba(255, 255, 255, 0.98));
}

.btn-account-danger {
  border: 1px solid #b91c1c;
  background: #b91c1c;
  color: #fff;
  font-weight: 800;
}

.btn-account-danger:hover {
  background: #991b1b;
  border-color: #991b1b;
}

.btn-account-danger:focus-visible {
  outline: 3px solid rgba(185, 28, 28, 0.28);
  outline-offset: 2px;
}

.btn-account-danger:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.account-danger-kicker {
  color: #991b1b;
}

.account-delete-dialog .modal {
  max-width: 560px;
}

.account-delete-dialog .modal > p {
  color: var(--muted, #5b6474);
}

@media (max-width: 720px) {
  #sellAccountContent .account-management-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-delete-dialog .modal-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .account-delete-dialog .modal-actions .btn {
    width: 100%;
  }
}

/* ============================================================
   v17.69.62 FORGOT PASSWORD RESET FLOW — CANONICAL
   Makes the reset flow explicit after "Glömt lösenord?" and
   supports admin-sent reset codes in the same customer-facing UI.
   ============================================================ */
#sellAuthForgotPasswordPanel.auth-reset-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  margin-top: 12px;
}

#sellAuthForgotPasswordPanel[hidden],
#sellAuthForgotPasswordResetForm[hidden] {
  display: none !important;
}

.auth-reset-actions {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

#sellAuthForgotPasswordResetForm.auth-reset-step.is-open {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

#sellAuthForgotPasswordCode {
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  touch-action: manipulation;
  pointer-events: auto;
}

@media (max-width: 520px) {
  #sellAuthForgotPasswordPanel.auth-reset-panel {
    padding: 16px;
  }

  #sellAuthForgotPasswordPanel .btn {
    width: 100%;
  }
}

/* ============================================================
   v17.69.71 CLEAN FREE PUBLISHING + COMPACT CHAT
   ============================================================ */
.sell-payment-free {
  max-width: 720px;
}

.sell-free-publishing-card {
  padding: clamp(18px, 3vw, 28px);
}

.sell-free-publishing-card h3 {
  margin: 4px 0 8px;
}

#screen-sell-messages .messages-chat-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 14px;
}

#screen-sell-messages .messages-chat-person {
  min-width: 0;
  gap: 10px;
}

#screen-sell-messages .messages-chat-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  font-size: 15px;
}

#screen-sell-messages .messages-chat-identity {
  min-width: 0;
}

#screen-sell-messages .messages-chat-identity h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-sell-messages .messages-chat-identity p {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-sell-messages .messages-chat-actions {
  min-width: 0;
}

#screen-sell-messages .messages-chat-listing-action {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13px;
  white-space: nowrap;
}

#screen-sell-messages .messages-chat-back {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  align-items: center;
  justify-content: center;
}

#screen-sell-messages #threadReplyForm.message-reply-box,
#screen-sell-messages #threadReplyForm.message-reply-box-enhanced {
  padding: 10px 12px max(12px, calc(10px + env(safe-area-inset-bottom, 0px)));
  gap: 8px;
  box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.04);
}

#screen-sell-messages #threadReplyMessage {
  min-height: 48px;
  max-height: 132px;
  padding: 12px 14px;
  border-radius: 18px;
  resize: none;
}

#screen-sell-messages #threadReplyForm .message-reply-actions {
  min-width: 118px;
}

#screen-sell-messages #threadReplySubmitBtn {
  min-width: 118px;
  min-height: 48px;
  border-radius: 18px;
}

@media (max-width: 900px) {
  #screen-sell-messages .messages-chat-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 62px;
    padding: 8px 10px;
  }

  #screen-sell-messages .messages-chat-back {
    display: inline-flex;
  }

  #screen-sell-messages .messages-chat-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  #screen-sell-messages .messages-chat-listing-action {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #screen-sell-messages #threadReplyForm.message-reply-box,
  #screen-sell-messages #threadReplyForm.message-reply-box-enhanced {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 10px 10px max(12px, calc(8px + env(safe-area-inset-bottom, 0px)));
  }

  #screen-sell-messages #threadReplyMessage,
  #screen-sell-messages #threadReplyForm .message-reply-actions {
    grid-column: auto;
  }

  #screen-sell-messages #threadReplyForm .message-reply-actions,
  #screen-sell-messages #threadReplySubmitBtn {
    width: auto;
    min-width: 48px;
  }

  #screen-sell-messages #threadReplySubmitBtn {
    padding-inline: 14px;
  }
}