/* MobilityTrader - Wheelchair Accessible Vehicle Marketplace */
:root {
  --primary: #0d6efd;
  --primary-dark: #0a58ca;
  --secondary: #198754;
  --accent: #0dcaf0;
  --dark: #212529;
  --light: #f8f9fa;
  --gray: #6c757d;
  --border: #dee2e6;
  --shadow: 0 4px 12px rgba(0,0,0,0.1);
  --radius: 12px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--dark);
  background: #f0f4f8;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Accessibility focus */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Header */
.header {
  background: #fff;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

.logo span {
  color: var(--secondary);
}

.logo:hover {
  text-decoration: none;
}

.nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav a {
  color: var(--dark);
  font-weight: 500;
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  transition: background 0.2s;
}

.nav a:hover,
.nav a.active {
  background: #e7f1ff;
  color: var(--primary);
  text-decoration: none;
}

.header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-dark);
  text-decoration: none;
  color: #fff;
}

.btn-secondary {
  background: var(--secondary);
  color: #fff;
}

.btn-secondary:hover {
  background: #146c43;
  text-decoration: none;
  color: #fff;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

/* Mobile menu */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--dark);
}

/* Hero */
.hero {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 50%, #198754 100%);
  color: #fff;
  padding: 4rem 1.5rem;
  text-align: center;
}

.hero-inner {
  max-width: 900px;
  margin: 0 auto;
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero p {
  font-size: 1.15rem;
  opacity: 0.95;
  margin-bottom: 2rem;
}

.search-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 0.75rem;
  max-width: 900px;
  margin: 0 auto;
}

.search-box select,
.search-box input {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  width: 100%;
}

.search-box .btn {
  white-space: nowrap;
}

/* Main content */
.main {
  flex: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  width: 100%;
}

/* Filters sidebar + listings */
.listings-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.5rem;
  align-items: start;
  /* Establish height context so left panel can scroll independently */
  min-height: calc(100vh - 180px);
}

.filters {
  background: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.25rem;
  box-shadow: var(--shadow);
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) #e9ecef;
  /* Prevent parent scroll chaining */
  isolation: isolate;
}

.filters::-webkit-scrollbar {
  width: 6px;
}
.filters::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.filters::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}

/* Sponsored ad spot, shown under the filter panel's own controls. Fixed at
   300px wide to match the filters column itself; only the height changes
   by size (small/medium/large map to real IAB ad unit dimensions so the
   images advertisers provide are a familiar, standard fit). */
.ad-spot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.ad-spot-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray); margin-bottom: 0.4rem;
}
.ad-spot-media { display: block; width: 300px; max-width: 100%; border-radius: 8px; overflow: hidden; }
.ad-spot-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-small .ad-spot-media { height: 100px; }
.ad-medium .ad-spot-media { height: 250px; }
.ad-large .ad-spot-media { height: 600px; }

/* Accordion / popup-style filter groups */
.filter-accordion {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.6rem;
  overflow: hidden;
  background: #fafbfc;
}

.filter-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  color: var(--dark);
}

.filter-accordion-header:hover {
  background: #f0f4f8;
}

.filter-accordion-header .chevron {
  transition: transform 0.2s;
  color: var(--gray);
  font-size: 0.75rem;
}

.filter-accordion.open .filter-accordion-header .chevron {
  transform: rotate(180deg);
}

.filter-accordion-body {
  display: none;
  padding: 0.75rem 0.85rem 0.9rem;
  border-top: 1px solid var(--border);
  background: #fff;
}

.filter-accordion.open .filter-accordion-body {
  display: block;
}

.filter-accordion-summary {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--primary);
  margin-left: 0.35rem;
}

.filters h3 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.filter-group {
  margin-bottom: 1.25rem;
}

.filter-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--dark);
}

.filter-group select,
.filter-group input[type="number"],
.filter-group input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.checkbox-group label {
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.price-range {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.price-range input {
  width: 100%;
}

/* Min/max range selects (Year, Price, Mileage) stacked instead of side by
   side. The 300px filter sidebar simply doesn't have enough horizontal
   room to fit two selects plus their text without squeezing them below
   their content width - which is exactly what broke twice already
   (Mileage's "300,000 km", then Price's "$200,000" once Mileage's fix
   forced both into an equal, still-too-narrow split). Stacking each
   select to the row's full width is the actual fix: it can absorb any
   option text length without needing to fight over shared horizontal
   space again. Only one of these ever needs to fit on screen at a time
   (Year/Price/Mileage each live in their own accordion sub-section), so
   the extra vertical row this costs is negligible. */
.price-range.year-select-range {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.price-range.year-select-range select {
  width: 100%;
}

.price-range.year-select-range > span {
  text-align: center;
  color: var(--gray);
  font-size: 0.8rem;
}

/* Results header */
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.results-count {
  font-weight: 600;
  color: var(--gray);
}

.sort-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* Vehicle cards */
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Featured gets a real, prominent heading (not just a small label) -
   Featured listings are paid premium placement, so the section calling
   attention to them should look the part. Uses the same orange as
   .badge.featured so the heading and the badges on the cards below it
   read as one visual system. */
.grid-featured-header {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: 1.5rem;
  color: #fd7e14;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #fd7e14;
  margin: 0 0 0.25rem;
}

.grid-section-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
  margin-top: 1.5rem;
}

.vehicle-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.vehicle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.vehicle-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.vehicle-card .image-wrap {
  position: relative;
  aspect-ratio: 16/10;
  background: #e9ecef;
  overflow: hidden;
}

.vehicle-card .image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A card can carry several badges at once (New, Featured, and now up to
   three compliance badges - renderVehicleCard() pushes each that applies).
   .card-badges is the ONE absolutely-positioned element; each .badge
   inside it is a normal flex item, so this scales to any number of badges
   without the older "stack the 2nd one 2rem lower" approach silently
   overlapping a 3rd/4th badge on top of each other. */
.card-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.badge {
  background: var(--secondary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

.badge.new {
  background: var(--primary);
}

.badge.featured {
  background: #fd7e14;
}

/* Trust/verification badges - deliberately a different colour family from
   New/Featured (which describe the LISTING) since these describe outside
   verification of a claim, not a property of the vehicle itself. */
.badge.compliance {
  background: #146c43;
}

.badge.nmeda {
  background: #0a58ca;
}

.badge.rating {
  background: #b45309;
}

.vehicle-card .body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.vehicle-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.vehicle-card .price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.vehicle-card .meta {
  font-size: 0.9rem;
  color: var(--gray);
  margin-bottom: 0.75rem;
}

.features-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.tag {
  background: #e7f1ff;
  color: var(--primary);
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.tag.access {
  background: #d1e7dd;
  color: #0f5132;
}

/* Matches .badge.compliance/.badge.nmeda's colour family (detail page's
   verified-only Compliance & Certification section, not the card badge
   itself, but the same "this is a verified claim, not a spec" meaning). */
.tag.compliance {
  background: #d1e7dd;
  color: #146c43;
  font-weight: 700;
}

.tag.nmeda {
  background: #cfe2ff;
  color: #0a58ca;
  font-weight: 700;
}

.vehicle-card .actions {
  margin-top: auto;
  display: flex;
  gap: 0.5rem;
}

/* Detail page */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
}

/* Save-to-account (r1.02) */
.save-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: #6c757d;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.15s, color 0.15s;
}

.save-btn:hover { transform: scale(1.08); }

.save-btn.saved {
  color: #e0355b;
}

.account-nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.account-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.account-tab {
  padding: 0.6rem 1rem;
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.account-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.account-form-panel { display: none; }
.account-form-panel.active { display: block; }

.form-error {
  color: #b02a37;
  background: #f8d7da;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.form-success {
  color: #0f5132;
  background: #d1e7dd;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.gallery {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.gallery-main {
  aspect-ratio: 16/10;
  background: #e9ecef;
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-info {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-top: 1.5rem;
}

.detail-info h2 {
  margin-bottom: 1rem;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.spec-item {
  background: var(--light);
  padding: 0.75rem;
  border-radius: 8px;
}

.spec-item .label {
  font-size: 0.8rem;
  color: var(--gray);
}

.spec-item .value {
  font-weight: 600;
}

.sidebar-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  position: sticky;
  top: 90px;
}

.sidebar-card .price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}

.contact-form textarea {
  min-height: 100px;
  resize: vertical;
}

/* Sell page */
.form-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  max-width: 700px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* About / features section */
.features-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.feature-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.feature-card .icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.feature-card h3 {
  margin-bottom: 0.5rem;
}

/* Footer */
.footer {
  background: var(--dark);
  color: #adb5bd;
  padding: 3rem 1.5rem 1.5rem;
  margin-top: 3rem;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.footer h4 {
  color: #fff;
  margin-bottom: 1rem;
}

.footer ul {
  list-style: none;
}

.footer li {
  margin-bottom: 0.4rem;
}

.footer a {
  color: #adb5bd;
}

.footer a:hover {
  color: #fff;
}

.footer-bottom {
  max-width: 1280px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid #495057;
  text-align: center;
  font-size: 0.9rem;
}

/* Empty / loading */
.empty-state {
  text-align: center;
  padding: 3rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Messages inbox (messages.html) */
.messages-layout {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.thread-list {
  overflow-y: auto;
  max-height: 70vh;
}
.thread-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.9rem 1rem;
  border: none;
  border-bottom: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font: inherit;
}
.thread-item:hover { background: var(--light); }
.thread-item.active { background: #e8f1ff; }
.thread-item .thread-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem;
}
.thread-item .thread-name { font-weight: 600; }
.thread-item .thread-time { font-size: 0.75rem; color: var(--gray); white-space: nowrap; }
.thread-item .thread-listing { font-size: 0.8rem; color: var(--primary); margin-bottom: 0.2rem; }
.thread-item .thread-preview {
  font-size: 0.85rem; color: var(--gray);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-unread-badge {
  display: inline-block; min-width: 1.35rem; padding: 0.1rem 0.4rem;
  border-radius: 999px; background: var(--primary); color: #fff;
  font-size: 0.72rem; font-weight: 700; text-align: center;
}
.thread-panel {
  display: flex; flex-direction: column;
}
.thread-panel-header {
  padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border);
}
.thread-messages {
  max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; padding-right: 0.25rem;
}
/* Same fixed-overlay recipe used site-wide (admin.html's review/message
   detail modals, confirm dialogs) - clicking a thread now opens the
   conversation here instead of an always-visible side panel. */
.thread-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.5);
  align-items: center; justify-content: center;
  z-index: 1000;
}
.thread-modal-overlay.open { display: flex; }
.thread-modal-content {
  background: #fff; border-radius: var(--radius); padding: 1.5rem;
  max-width: 600px; width: 90%; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.message-bubble {
  max-width: 75%; padding: 0.55rem 0.8rem; border-radius: 12px; font-size: 0.9rem; line-height: 1.4;
}
.message-bubble.mine { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 3px; }
.message-bubble.theirs { align-self: flex-start; background: var(--light); border-bottom-left-radius: 3px; }
.message-bubble .message-time { display: block; font-size: 0.7rem; opacity: 0.75; margin-top: 0.25rem; }
.thread-reply-form { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.thread-reply-form textarea {
  flex: 1; resize: none; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; font: inherit;
}
@media (max-width: 800px) {
  .thread-modal-content { max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

/* Responsive */
@media (max-width: 900px) {
  .search-box {
    grid-template-columns: 1fr 1fr;
  }
  .listings-layout {
    grid-template-columns: 1fr;
  }
  .filters {
    position: static;
  }
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .sidebar-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .header-inner {
    flex-wrap: wrap;
  }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
  }
  .nav.open {
    display: flex;
  }
  .menu-toggle {
    display: block;
  }
  .search-box {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 2.5rem 1rem;
  }
}

/* Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-2 { margin-bottom: 1rem; }
.hidden { display: none !important; }

/* Country Selector */
.country-selector {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}

.country-selector select {
  appearance: none;
  background: #f8f9fa;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 1.8rem 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--dark);
  min-width: 110px;
}

.country-selector select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.country-selector::after {
  content: "▾";
  position: absolute;
  right: 0.5rem;
  pointer-events: none;
  font-size: 0.7rem;
  color: var(--gray);
}

.currency-badge {
  font-size: 0.75rem;
  background: #e7f1ff;
  color: var(--primary);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
}

/* Hybrid Sort Panel */
.sort-panel {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}

.sort-mode-toggle {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.mode-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
}

.mode-option input {
  accent-color: var(--primary);
}

.sort-row {
  display: grid;
  grid-template-columns: 40px 1fr 1fr;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.sort-row label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray);
}

.sort-row select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}

/* Field is fixed wide enough to show the longest current label in full
   (French "Caractéristiques d'accessibilité" measures ~186px in this font)
   plus room for a future longer one without truncating; the slider still
   absorbs whatever space is left (1fr), same spirit as the original
   pre-redesign proportions (80px label : 1fr slider : 50px value). */
.weight-row {
  display: grid;
  grid-template-columns: 22px 230px 1fr 42px 32px;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: grab;
}

.weight-row.dragging {
  opacity: 0.55;
  cursor: grabbing;
  border-color: var(--primary);
  background: #eef5ff;
}

.weight-row.drag-over {
  border-top: 2px solid var(--primary);
}

.weight-row .sort-field {
  padding: 0.45rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weight-row input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}

.weight-row .weight-val {
  font-weight: 600;
  font-size: 0.9rem;
  text-align: right;
}

.weight-total {
  font-weight: 600;
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

.weight-total.invalid {
  color: #dc3545;
}

.weight-hint {
  font-size: 0.8rem;
  color: var(--gray);
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  .sort-row {
    grid-template-columns: 1fr;
  }
  .sort-row label {
    margin-bottom: -0.3rem;
  }
  .weight-row {
    grid-template-columns: 18px 1fr 30px;
    row-gap: 0.3rem;
  }
  .weight-row .drag-handle {
    grid-row: 1 / 3;
  }
  .weight-row .sort-field {
    grid-column: 2 / 3;
    grid-row: 1;
  }
  .weight-row input[type="range"] {
    grid-column: 2 / 3;
    grid-row: 2;
  }
  .weight-row .weight-val {
    grid-column: 3;
    grid-row: 2;
  }
  .weight-row .btn-remove {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Expanded Sort Panel */
.sort-panel-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.lang-toggle {
  display: flex;
  gap: 1rem;
}

.priority-row {
  display: grid;
  grid-template-columns: 36px 1fr 1fr 36px;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.priority-num {
  font-weight: 700;
  color: var(--primary);
  text-align: center;
}

.btn-remove {
  background: #f8d7da;
  color: #842029;
  border: none;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}

.btn-remove:hover {
  background: #f1aeb5;
}

@media (max-width: 640px) {
  .priority-row {
    grid-template-columns: 30px 1fr 30px;
  }
  .priority-row .sort-dir {
    grid-column: 2;
  }
}

/* Priority row with optional value select */
.priority-row {
  display: grid;
  grid-template-columns: 32px minmax(100px, 1fr) minmax(90px, 1fr) minmax(120px, 1.2fr) 32px;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.priority-row .sort-value.hidden {
  display: none;
}

.priority-row .sort-dir.hidden {
  display: none;
}

@media (max-width: 900px) {
  .priority-row {
    grid-template-columns: 28px 1fr 1fr 28px;
  }
  .priority-row .sort-dir {
    grid-column: 2 / 4;
  }
}

/* Filter trigger list (left panel) */
.filter-popup-triggers {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.filter-trigger {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  color: var(--dark);
}

.filter-trigger:hover {
  border-color: var(--primary);
  background: #f0f7ff;
}

.filter-trigger-sum {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--primary);
  flex: 1;
}

.trigger-arrow {
  color: var(--gray);
  font-size: 1.1rem;
}

/* Overlay popup */
.filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.filter-overlay.hidden {
  display: none !important;
}

.filter-popup {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 420px;
  max-height: min(85vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.filter-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.filter-popup-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.filter-popup-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--gray);
  line-height: 1;
  padding: 0.2rem 0.4rem;
}

.filter-popup-close:hover {
  color: var(--dark);
}

.filter-popup-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}

.filter-popup-footer {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* Accessibility feature tree */
.access-tree .tree-heading {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--dark);
}

.tree-indent {
  padding-left: 0.35rem;
  border-left: 2px solid #e2e8f0;
  margin-left: 0.15rem;
}

.tree-indent label {
  font-weight: 400;
  font-size: 0.88rem;
}

/* Drag-and-drop priority rows */
.priority-row {
  cursor: grab;
}

.priority-row.dragging {
  opacity: 0.55;
  cursor: grabbing;
  border-color: var(--primary);
  background: #eef5ff;
}

.priority-row.drag-over {
  border-top: 2px solid var(--primary);
}

.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: 1rem;
  cursor: grab;
  user-select: none;
  padding: 0 0.15rem;
}

.priority-row {
  grid-template-columns: 22px 28px minmax(110px, 1.1fr) minmax(100px, 1fr) minmax(110px, 1.1fr) 32px;
}

.all-option {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.25rem 0 0.35rem;
  color: var(--primary);
}

.year-select-range select {
  flex: 1;
  /* Flex items default to min-width:auto, which floors a <select> at its
     content's intrinsic width - flex-shrink can't go below that without
     this. Mileage's "300,000 km" is wider than Price's "$200,000", so
     without this the pair overflows their shared-width container instead
     of shrinking evenly to fit it. */
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}

.secure-tree {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.secure-parent-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.secure-children {
  margin: 0.25rem 0 0.4rem 0.5rem;
}

.facet-count {
  color: var(--gray, #6c757d);
  font-weight: 500;
  font-size: 0.85em;
}

/* Left panel accordion filters (r24) */
.filter-acc {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  background: #fff;
  overflow: hidden;
}

.filter-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  text-align: left;
  color: var(--dark);
}

.filter-acc-head:hover {
  background: #f0f7ff;
}

.filter-acc-head .acc-title {
  flex: 0 1 auto;
}

.filter-acc-head .filter-trigger-sum {
  flex: 1;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--primary);
}

.filter-acc-head .acc-chevron {
  color: var(--gray);
  transition: transform 0.2s;
  font-size: 0.75rem;
}

.filter-acc.open .acc-chevron {
  transform: rotate(180deg);
}

.filter-acc-body {
  display: none;
  padding: 0.5rem 0.85rem 0.9rem;
  border-top: 1px solid var(--border);
}

.filter-acc.open .filter-acc-body {
  display: block;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mode-option.chip {
  flex: 0 1 auto;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 500;
}

.mode-option.chip input:checked + span,
.mode-option input:checked + span {
  font-weight: 600;
}

.country-mode {
  display: flex;
  gap: 0.4rem;
}

.country-mode .mode-option {
  flex: 1;
  justify-content: center;
}

.hidden {
  display: none !important;
}

.mode-option:has(input:checked) {
  border-color: var(--primary);
  background: #eef5ff;
  box-shadow: inset 0 0 0 1px var(--primary);
}

/* Nested sub-accordions inside filter sections */
.filter-sub {
  border: 1px solid #e8ecf1;
  border-radius: 8px;
  margin-bottom: 0.45rem;
  background: #fafbfc;
}

.filter-sub-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.86rem;
  text-align: left;
  color: var(--dark);
}

.filter-sub-head:hover {
  background: #f0f4f8;
}

.filter-sub-head .sub-title {
  flex: 0 0 auto;
}

.filter-sub-head .sub-sum {
  flex: 1;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-sub-body {
  display: none;
  padding: 0.35rem 0.7rem 0.75rem;
  border-top: 1px solid #e8ecf1;
  background: #fff;
}

.filter-sub.open .filter-sub-body {
  display: block;
}

.filter-sub.open .filter-sub-head .acc-chevron {
  transform: rotate(180deg);
}

/* Hide native checkbox/radio — chips only */
.mode-option input[type="checkbox"],
.mode-option input[type="radio"],
.chip input[type="checkbox"],
.chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.mode-option,
.mode-option.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
}

.mode-option:has(input:checked),
.mode-option.chip:has(input:checked) {
  border-color: var(--primary);
  background: #e8f1ff;
  color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.mode-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.all-chip {
  margin-bottom: 0.35rem;
}