/* =====================================================================
   Motobay — design system
   Retuned 2026-08-05 to match the measured tokens of the live site
   (moto-bay.co.za) at the client's request. Extracted via bin/style-probe.php.
   NOTE: this supersedes the FRS §13 dark theme — flagged to client.

   Live-site source values (HSL, from its compiled stylesheet):
     accent 205 100% 50% · background 0 0% 100% · foreground 0 0% 5%
     border 210 15% 90% · muted 210 20% 96% · muted-fg 0 0% 40%
     radius .75rem · success 142 76% 36% · destructive 0 84% 60%
     sidebar: bg 0 0% 5% · fg 0 0% 90% · accent 0 0% 15% · border 0 0% 20%
     fonts: Barlow Condensed (display) + Inter (body)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Accent — live site's blue: hsl(205 100% 50%) */
  --blue: #0095FF;
  --blue-glow: hsl(205 100% 50% / .12);

  /* LIGHT THEME SURFACES (public pages).
     Token names are kept from the original dark build so every component
     rule continues to work; the *meaning* is now "strongest ink on the
     current surface" etc. Dark contexts (nav, hero, footer, sidebar)
     re-scope these locally further down. */
  --surface: hsl(0 0% 100%);
  /* page background            */
  --card: hsl(0 0% 100%);
  /* card background            */
  --panel: hsl(0 0% 100%);
  /* panels, filters            */
  --panel-hover: hsl(210 20% 96%);
  /* muted fills, input bg      */
  --border: hsl(210 15% 90%);
  --white: hsl(0 0% 5%);
  /* primary ink (was white-on-dark) */
  --grey-light: hsl(0 0% 22%);
  /* body text                  */
  --grey-mid: hsl(0 0% 40%);
  /* secondary text / muted-fg  */

  /* Dark band used by hero / nav / footer (live site keeps these dark) */
  --jet-black: hsl(0 0% 4%);
  --gradient-hero: linear-gradient(135deg, hsl(0 0% 2%) 0%, hsl(210 20% 12%) 50%, hsl(205 100% 50% / .15) 100%);
  --gradient-cta: linear-gradient(135deg, hsl(205 100% 50%) 0%, hsl(205 100% 40%) 100%);
  --gradient-premium: linear-gradient(135deg, hsl(205 100% 55%) 0%, hsl(205 100% 40%) 100%);

  /* Semantic */
  --success: hsl(142 76% 36%);
  --warning: hsl(38 92% 50%);
  --danger: hsl(0 84% 60%);
  --purple: hsl(270 60% 55%);
  --price-gold: #F59E0B;
  /* amber accents/badges; prices are ink — see --price */
  --price: hsl(0 0% 5%);
  /* live site prices read as strong ink */

  /* Category accents measured from the live site */
  --cat-cars: hsl(205 100% 50%);
  --cat-bikes: hsl(340 75% 55%);
  --cat-boats: hsl(200 80% 50%);
  --cat-campers: hsl(142 60% 45%);
  --cat-parts: hsl(32 80% 50%);
  --cat-services: hsl(270 60% 55%);

  /* Shadows measured from the live site */
  --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / .05);
  --shadow-card: 0 2px 8px -2px hsl(0 0% 0% / .1), 0 4px 16px -4px hsl(0 0% 0% / .08);
  --shadow-card-hover: 0 8px 24px -4px hsl(0 0% 0% / .15), 0 16px 40px -8px hsl(205 100% 50% / .1);
  --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / .1), 0 4px 6px -2px hsl(0 0% 0% / .05);
  --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / .1), 0 10px 10px -5px hsl(0 0% 0% / .04);

  /* Type */
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing — 4px base unit (unchanged) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s15: 60px;
  --s20: 80px;

  /* Radius — live site: base .75rem, computed steps, pill chips */
  --r-chip: 9999px;
  --r-input: 8px;
  --r-btn: 10px;
  --r-card: 12px;
  --r-modal: 16px;

  --container: 1360px;
  --nav-h: 84px;
}

/* =====================================================================
   DARK THEME — follows the browser / OS setting automatically.
   Because the whole app is token-driven, flipping these surface tokens
   re-themes every component that uses them. Palette matches the v3
   homepage design. Light theme remains the default in :root above.
   ===================================================================== */


/* --------------------------------------------------------------- reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--grey-light);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  display: block;
}

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

a:hover {
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-chip);
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--blue);
  color: #000;
  padding: var(--s3) var(--s4);
  font-weight: 700;
  border-radius: 0 0 var(--r-btn) 0;
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------ typography */
h1,
h2,
h3,
h4 {
  margin: 0 0 var(--s4);
  color: var(--white);
  letter-spacing: -0.025em;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.12;
}

h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-mid);
  margin-bottom: var(--s2);
}

.small {
  font-size: 13px;
  color: var(--grey-mid);
}

.caption {
  font-size: 11px;
  color: var(--grey-mid);
}

.muted {
  color: var(--grey-mid);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s10);
}

@media (max-width: 1023px) {
  .container {
    padding: 0 var(--s6);
  }
}

@media (max-width: 767px) {
  .container {
    padding: 0 var(--s4);
  }
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s6);
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  text-decoration: none;
  min-height: 44px;
}

.btn:hover {
  opacity: 0.85;
  text-decoration: none;
}

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

.btn-ghost {
  background: transparent;
  color: var(--grey-light);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  opacity: 1;
}

.btn-danger {
  background: var(--danger);
  color: var(--white);
}

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

.btn-sm {
  padding: var(--s2) var(--s3);
  font-size: 11px;
  min-height: 32px;
  border-radius: var(--r-input);
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- forms */
.field {
  margin-bottom: var(--s4);
}

.label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--grey-mid);
  margin-bottom: var(--s1);
}

.input,
.select,
.textarea {
  width: 100%;
  background: var(--panel-hover);
  color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 9px var(--s3);
  font-size: 13px;
  transition: border-color 0.15s ease;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--blue);
  outline: none;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--grey-mid);
}

.textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

.select {
  appearance: none;
  padding-right: var(--s8);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239AA5B4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s3) center;
}

.input.has-error,
.select.has-error {
  border-color: var(--danger);
}

.error-text {
  font-size: 11px;
  color: var(--danger);
  margin-top: var(--s1);
}

.help-text {
  font-size: 11px;
  color: var(--grey-mid);
  margin-top: var(--s1);
}

/* ---------------------------------------------------------------- flashes */
.flash-stack {
  position: fixed;
  top: calc(var(--nav-h) + var(--s4));
  right: var(--s4);
  z-index: 150;
  max-width: 380px;
}

.flash {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-btn);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
  font-size: 13px;
  color: var(--grey-light);
  box-shadow: var(--shadow-lg);
}

.flash-ok {
  border-left-color: var(--success);
}

.flash-warn {
  border-left-color: var(--warning);
}

.flash-bad {
  border-left-color: var(--danger);
}

/* =====================================================================
   FRONT-END
   ===================================================================== */

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: #000;
  border-bottom: 1px solid hsl(0 0% 12%);
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s10);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s6);
}

.nav-logo img {
  height: 50px;
  width: auto;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
}

.nav-logo img {
  height: 38px;
  width: auto;
}

.nav-logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--white);
  letter-spacing: -0.01em;
}

.nav-logo-text span {
  color: var(--blue);
}

.nav-links {
  display: flex;
  gap: var(--s2);
}

.nav-links a {
  position: relative;
  padding: var(--s2) var(--s3);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: #fff;
  text-decoration: none;
}

.nav-links a.is-active {
  color: var(--blue);
}

.nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: var(--s3);
  right: var(--s3);
  bottom: -4px;
  height: 2px;
  border-radius: 9999px;
  background: var(--blue);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-left: auto;
}

.nav-icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-icon-link:hover {
  color: var(--blue);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  padding: var(--s2);
  cursor: pointer;
}

@media (max-width: 1023px) {
  .nav-inner {
    padding: 0 var(--s6);
    gap: var(--s4);
  }

  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: block;
    margin-left: auto;
  }

  .nav-actions .btn-ghost {
    display: none;
  }
}

.nav-drawer {
  position: fixed;
  inset: var(--nav-h) 0 0 auto;
  width: min(320px, 86vw);
  background: hsl(0 0% 5%);
  border-left: 1px solid hsl(0 0% 15%);
  padding: var(--s6);
  z-index: 99;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  overflow-y: auto;
}

.nav-drawer.is-open {
  transform: translateX(0);
}

.nav-drawer a {
  display: block;
  padding: var(--s3) 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  border-bottom: 1px solid hsl(0 0% 15%);
}

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: var(--gradient-hero);
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: var(--s15) 0;
  overflow: visible;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--s10);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 84px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--s3);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.hero h1 em {
  font-style: normal;
  color: var(--blue);
}

.hero-sub {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 auto var(--s8);
  max-width: 800px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.searchbar {
  display: grid;
  grid-template-columns: 1.7fr 1.1fr 1.35fr auto;
  align-items: center;
  gap: var(--s3);
  max-width: 900px;
  margin: 0 auto;
  background: var(--card);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xl);
  padding: var(--s2);
}

.search-field {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s3);
  min-width: 0;
  height: 48px;
  background: var(--card);
  border: 1px solid hsl(210 15% 88%);
  border-radius: 10px;
  transition: border-color 0.15s ease;
}

.search-field:focus-within {
  border-color: var(--blue);
}

.search-field svg {
  width: 18px;
  height: 18px;
  color: var(--grey-mid);
  flex-shrink: 0;
}

.searchbar input,
.searchbar select {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  font-size: 15px;
  padding: var(--s3) 0;
  appearance: none;
}

.searchbar input::placeholder {
  color: var(--grey-mid);
}

.searchbar select:invalid,
.searchbar select option[value=""] {
  color: var(--grey-mid);
}

.search-submit {
  padding: 0 var(--s6);
  border-radius: 10px;
  gap: var(--s2);
  height: 48px;
}

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

  .search-submit {
    width: 100%;
  }
}

.quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
  margin-top: var(--s5);
}

.quick-tag {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  padding: var(--s2) var(--s4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-chip);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: all 0.15s ease;
}

.quick-tag:hover {
  border-color: var(--blue);
  color: #fff;
  background: rgba(0, 149, 255, 0.25);
  text-decoration: none;
}

/* ----------------------------------------------------------- trust strip */
.trust-strip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s6) var(--s10);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.trust-item {
  display: flex;
  gap: var(--s3);
  align-items: center;
  padding: 0 var(--s5);
  border-right: 1px solid var(--border);
}

.trust-item:last-child {
  border-right: none;
}

.trust-item svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--blue);
}

.trust-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
}

.trust-sub {
  font-size: 11px;
  color: var(--grey-mid);
}

@media (max-width: 1023px) {
  .trust-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
    padding: var(--s5) var(--s6);
  }

  .trust-item {
    border-right: none;
    padding: 0;
  }
}

@media (max-width: 520px) {
  .trust-inner {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------- sections */
.section {
  padding: var(--s15) 0;
}

.section-head-center {
  text-align: center;
  margin-bottom: var(--s10);
}

.section-head-center h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  margin-bottom: var(--s2);
}

.section-head-center p {
  color: var(--grey-mid);
  font-size: 16px;
  margin: 0;
}

.section-action {
  display: flex;
  justify-content: center;
  margin-top: var(--s10);
}

.section-action .btn {
  padding: var(--s3) var(--s8);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.section-head h2 {
  margin: 0;
}

/* -------------------------------------------------------- category cards */
.category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s3);
}

@media (max-width: 1023px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.category-card {
  position: relative;
  height: 140px;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 149, 255, 0.15);
  border-color: var(--blue);
  text-decoration: none;
}

.category-card:hover img {
  transform: scale(1.05);
}

.category-meta {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  z-index: 1;
}

.category-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.category-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------- listing cards */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
}

.listing-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1399px) {
  .listing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1023px) {

  .listing-grid,
  .listing-grid.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  .listing-grid,
  .listing-grid.cols-3 {
    grid-template-columns: 1fr;
  }
}

.listing-card {
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 1px 3px rgba(16, 21, 28, 0.06), 0 4px 16px rgba(16, 21, 28, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.listing-card:hover {
  transform: translateY(-5px);
  border-color: var(--blue);
  box-shadow: 0 8px 30px rgba(16, 21, 28, 0.12);
}

.listing-card:hover .listing-img img {
  transform: scale(1.07);
}

.listing-card:hover .contact-circle {
  opacity: 1;
  transform: scale(1);
}

.listing-card:hover .listing-cta {
  opacity: 1;
  transform: translateY(0);
}

.listing-img {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: var(--panel-hover);
}

.listing-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.32s ease;
}

.badge-stack {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  z-index: 2;
}

/* Realistic slanted corner ribbon — top-left, angled like "/" with a folded
   under-shadow for a real-fabric feel. Used for New / Trusted / Featured. */
.ribbon {
  position: absolute;
  top: 14px;
  left: -34px;
  z-index: 3;
  transform: rotate(-45deg);
  width: 150px;
  text-align: center;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}

/* the little folded triangles at each end that sell the "wrapped ribbon" look */
.ribbon::before,
.ribbon::after {
  content: '';
  position: absolute;
  bottom: -6px;
  border-style: solid;
  filter: brightness(0.7);
}

.ribbon::before {
  left: 8px;
  border-width: 0 6px 6px 0;
  border-color: transparent;
  border-right-color: currentColor;
  color: var(--blue);
}

.ribbon::after {
  right: 8px;
  border-width: 6px 6px 0 0;
  border-color: transparent;
  border-top-color: currentColor;
  color: var(--blue);
}

.ribbon-new {
  background: #16a34a;
}

.ribbon-new::before,
.ribbon-new::after {
  color: #16a34a;
}

.ribbon-trusted {
  background: var(--blue);
}

.ribbon-trusted::before,
.ribbon-trusted::after {
  color: var(--blue);
}

.ribbon-featured {
  background: #8b5cf6;
}

.ribbon-featured::before,
.ribbon-featured::after {
  color: #8b5cf6;
}

.ribbon-hot {
  background: #e5484d;
}

.ribbon-hot::before,
.ribbon-hot::after {
  color: #e5484d;
}

.make-chip {
  position: absolute;
  left: var(--s4);
  bottom: var(--s4);
  z-index: 2;
  background: var(--blue);
  color: #fff;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  padding: 5px var(--s4);
}

.fav-btn {
  position: absolute;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card);
  color: hsl(0 0% 45%);
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: color 0.15s ease, transform 0.15s ease;
}

.fav-btn:hover {
  color: var(--danger);
  transform: scale(1.06);
  text-decoration: none;
}

.badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px var(--s3);
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}

.badge-featured {
  background: var(--gradient-premium);
  color: #fff;
}

.badge-new {
  background: var(--success);
  color: #fff;
}

.badge-hot {
  background: var(--danger);
  color: var(--white);
}

.badge-trusted {
  background: var(--blue);
  color: #fff;
}

.badge-auction {
  background: var(--purple);
  color: #fff;
}

.view-pill {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  z-index: 2;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  color: var(--grey-light);
  font-size: 10px;
  padding: 3px var(--s2);
  border-radius: var(--r-chip);
  display: flex;
  align-items: center;
  gap: 4px;
}

.contact-circle {
  position: absolute;
  right: var(--s3);
  bottom: var(--s3);
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: #fff;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Touch devices have no hover — keep the control visible and 44px tappable. */
@media (hover: none) {
  .contact-circle {
    opacity: 1;
    transform: scale(1);
  }

  .contact-circle::after {
    content: '';
    position: absolute;
    inset: -5px;
  }

  .listing-cta {
    opacity: 1;
    transform: translateY(0);
  }
}

.listing-body {
  padding: var(--s5) var(--s5) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex: 1;
}

.listing-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.cond-pill {
  font-size: 13px;
  font-weight: 500;
  color: hsl(0 0% 30%);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 4px var(--s4);
}

.listing-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  color: #F59E0B;
  line-height: 1;
}

.price-per {
  font-size: 12px;
  color: #7a8291;
  font-family: var(--font-body);
  font-weight: 400;
}

.listing-loc {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 14px;
  color: #4a5160;
  margin-top: var(--s2);
}

.listing-loc svg {
  flex-shrink: 0;
  color: #e5484d;
}

.listing-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #11151c;
  margin: 0;
}

.listing-title a {
  color: inherit;
  text-decoration: none;
}

.listing-title a:hover {
  text-decoration: none;
  color: #11151c;
}

.listing-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cond-pill-lighttheme-anchor {}

.spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: auto;
}

/* detail page only now */
.chip {
  font-size: 10px;
  color: var(--grey-mid);
  background: var(--panel-hover);
  border-radius: var(--r-chip);
  padding: 3px var(--s2);
}

.listing-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding: var(--s3) var(--s4);
  font-size: 11px;
  color: var(--grey-mid);
}

.listing-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: var(--gradient-cta);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  padding: var(--s3);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ------------------------------------------------------------ empty state */
.empty {
  text-align: center;
  padding: var(--s20) var(--s6);
  border: 1px dashed var(--border);
  border-radius: var(--r-card);
  background: var(--panel);
}

.empty h3 {
  color: var(--white);
  margin-bottom: var(--s2);
}

.empty p {
  color: var(--grey-mid);
  margin: 0 auto var(--s5);
  max-width: 420px;
}

/* --------------------------------------------------------- results layout */
.results-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s8);
  align-items: start;
}

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

.filters {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s5);
  position: sticky;
  top: calc(var(--nav-h) + var(--s4));
}

.filters h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-mid);
  font-weight: 600;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}

@media (max-width: 1023px) {
  .filters {
    position: static;
  }

  .filters[hidden] {
    display: none;
  }
}

.filter-toggle {
  display: none;
}

@media (max-width: 1023px) {
  .filter-toggle {
    display: inline-flex;
  }
}

.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
}

.pagination {
  display: flex;
  gap: var(--s2);
  justify-content: center;
  margin-top: var(--s10);
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  font-size: 13px;
  color: var(--grey-light);
  text-decoration: none;
}

.pagination a:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.pagination .is-current {
  background: rgba(0, 149, 255, 0.15);
  border-color: var(--blue);
  color: var(--blue);
  font-weight: 700;
}

/* --------------------------------------------------------- listing detail */
.detail-gallery {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Consistent 3:2 landscape frame — every listing's main image is the same size.
   Car photos (landscape) fill it edge-to-edge, so no black bars; only unusual
   shapes get a small, even crop. */
.gallery-main {
  aspect-ratio: 16 / 9;
  background: #f2f4f7;
}

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

@media (max-width: 767px) {
  .gallery-main {
    aspect-ratio: 4 / 3;
  }
}

.gallery-thumbs {
  display: flex;
  gap: var(--s2);
  padding: var(--s3);
  overflow-x: auto;
  background: var(--panel);
}

.gallery-thumb {
  flex: 0 0 88px;
  height: 62px;
  border-radius: var(--r-input);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: none;
}

.gallery-thumb.is-active {
  border-color: var(--blue);
}

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

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s8);
  align-items: start;
  margin-top: var(--s6);
}
.detail-left { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }

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

.detail-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  color: var(--price);
  line-height: 1;
  margin: var(--s3) 0;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin: var(--s6) 0;
}

@media (max-width: 640px) {
  .specs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.spec-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  padding: var(--s3) var(--s4);
}

.spec-tile .label {
  margin-bottom: 2px;
}

.spec-tile .value {
  font-size: 14px;
  color: var(--white);
  font-weight: 500;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s5);
}

.panel+.panel {
  margin-top: var(--s4);
}
/* ...but not when panels sit side by side as cards. Grid and flex containers
   already space their children with `gap`, so the stacking margin only pushes
   every card except the first one out of line with its row. Matching on the
   word "grid" alone missed the dealer dashboard's .split, a two-column grid
   whose second panel was dropping 16px below the first.
   Keep this list to containers that really are grids: a loose match like
   [class*="row"] would also catch .narrow and .eyebrow and flatten the gap
   between stacked panels on the public pages. */
:where([class*="grid"], [class*="split"], .cards) > .panel + .panel {
  margin-top: 0;
}

/* A layout block sitting under a panel needs the same breathing room a panel
   would get. Without this the dashboard's two-column block sat flush against
   the "Listing slots used" panel above it, borders touching. */
.panel + .split {
  margin-top: var(--s4);
}

/* A button standing beside a form field takes the field's vertical metrics, so
   the two are exactly the same height. Without this a .btn-sm (32px) next to a
   dropdown or text box (~41px) reads as a mistake. */
.btn.btn-field {
  min-height: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 13px;
  line-height: 1.6;          /* 13 x 1.6 = 20.8px, same as .input */
}
/* When a dropdown sits in a stretched row its .msel wrapper takes the row's
   height, but the trigger inside kept its own — leaving the dropdown looking
   2px shorter than the controls beside it. Resolves to auto (no change)
   whenever the wrapper has no definite height, which is everywhere else. */
.msel-trigger {
  height: 100%;
}

.panel h3 {
  font-size: 16px;
  margin-bottom: var(--s4);
}

.dealer-card {
  display: flex;
  gap: var(--s3);
  align-items: center;
  margin-bottom: var(--s4);
}

.dealer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 149, 255, 0.15);
  color: var(--blue);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(0, 149, 255, 0.12);
  color: var(--blue);
  border: 1px solid rgba(0, 149, 255, 0.4);
  padding: 2px var(--s2);
  border-radius: var(--r-chip);
  margin-top: 2px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row .value {
  color: var(--white);
  font-weight: 600;
}

/* --------------------------------------------------------------- modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.72);
  display: grid;
  place-items: center;
  padding: var(--s4);
  animation: modal-fade 0.2s ease;
}

.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-modal);
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--s6);
  animation: modal-pop 0.2s ease;
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.modal-close {
  background: none;
  border: none;
  color: var(--grey-mid);
  cursor: pointer;
  padding: var(--s1);
}

.modal-close:hover {
  color: var(--white);
}

/* -------------------------------------------------------------- footer */
.footer {
  background: hsl(0 0% 4%);
  padding: var(--s15) 0 var(--s8);
  margin-top: 0;
  --white: #fff;
  --grey-light: hsl(0 0% 80%);
  --grey-mid: hsl(0 0% 60%);
  --border: hsl(0 0% 16%);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s8);
}

@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
  }
}

.footer h4 {
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--s4);
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer li {
  margin-bottom: var(--s3);
}

.footer a {
  color: hsl(0 0% 72%);
  font-size: 14px;
  text-decoration: none;
}

.footer a:hover {
  color: var(--blue);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  margin-top: var(--s10);
  padding-top: var(--s5);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--grey-mid);
}

.build-stamp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

/* ------------------------------------------------------------- bot bubble */
.bot-bubble {
  position: fixed;
  right: var(--s5);
  bottom: var(--s5);
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--blue);
  color: #000;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 30px rgba(0, 149, 255, 0.35);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

/* =====================================================================
   UPDATE / CACHE-BUSTER POPUP
   ===================================================================== */
.update-toast {
  position: fixed;
  left: var(--s5);
  bottom: var(--s5);
  z-index: 300;
  width: min(400px, calc(100vw - var(--s10)));
  background: var(--card);
  border: 1px solid var(--blue);
  border-radius: var(--r-card);
  padding: var(--s5);
  box-shadow: var(--shadow-xl);
  animation: update-in 0.25s ease;
}

@keyframes update-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.update-toast h4 {
  color: var(--white);
  margin-bottom: var(--s1);
  font-size: 15px;
}

.update-toast p {
  margin: 0 0 var(--s3);
  font-size: 13px;
  color: var(--grey-mid);
}

.update-notes {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s4);
}

.update-notes li {
  font-size: 12px;
  color: var(--grey-light);
  padding-left: var(--s4);
  position: relative;
  margin-bottom: 2px;
}

.update-notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.update-actions {
  display: flex;
  gap: var(--s2);
}

.update-version {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--grey-mid);
  margin-top: var(--s3);
}

@media (max-width: 520px) {
  .update-toast {
    left: var(--s4);
    right: var(--s4);
    width: auto;
  }
}

/* ---------------------------------------------------------------- utils */
.stack>*+* {
  margin-top: var(--s4);
}

.row {
  display: flex;
  gap: var(--s3);
  align-items: center;
  flex-wrap: wrap;
}

.grow {
  flex: 1;
}

.right {
  margin-left: auto;
}

.hide {
  display: none !important;
}

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

/* =====================================================================
   DARK CONTEXTS
   The live site is light-themed but keeps the nav, hero band, trust strip
   and footer dark (sidebar tokens: bg 0 0% 5%, fg 0 0% 90%, border 0 0% 20%).
   Re-scoping the surface tokens here restyles every component inside these
   regions without touching their rules.
   ===================================================================== */
.hero {
  --white: hsl(0 0% 100%);
  --grey-light: hsl(0 0% 85%);
  --grey-mid: hsl(0 0% 64%);
  --border: hsl(0 0% 20%);
}

/* Category accent underlines, colour-coded per the live site's tokens */
.category-card[data-cat="car"] .category-label {
  color: #fff;
}

.category-card[data-cat="car"]::before,
.category-card[data-cat="bike"]::before,
.category-card[data-cat="boat"]::before,
.category-card[data-cat="caravan"]::before,
.category-card[data-cat="service"]::before,
.category-card[data-cat="rental"]::before,
.category-card[data-cat="rent_to_own"]::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 2;
}

.category-card[data-cat="car"]::before {
  background: var(--cat-cars);
}

.category-card[data-cat="bike"]::before {
  background: var(--cat-bikes);
}

.category-card[data-cat="boat"]::before {
  background: var(--cat-boats);
}

.category-card[data-cat="caravan"]::before {
  background: var(--cat-campers);
}

.category-card[data-cat="service"]::before {
  background: var(--cat-services);
}

.category-card[data-cat="rental"]::before {
  background: var(--cat-parts);
}

.category-card[data-cat="rent_to_own"]::before {
  background: var(--cat-parts);
}

/* Blue pulse on the bot bubble — measured on the live site (#0095ff66 -> transparent ring) */
.bot-bubble {
  animation: float 3s ease-in-out infinite, bot-pulse 2.4s ease-out infinite;
}

@keyframes bot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bot-bubble {
    animation: none;
  }
}


/* ------------------------------------------------------ page headers */
.page-head {
  background: var(--gradient-hero);
  padding: var(--s12) 0;
  text-align: center;
}

.page-head h1 {
  color: #fff;
  margin-bottom: var(--s2);
  font-size: clamp(30px, 4vw, 44px);
}

.page-head-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  margin: 0;
}

.container.narrow {
  max-width: 760px;
}

/* --------------------------------------------- blue shop CTA section
   Reference: soft blue band, white centred cards with icon chips,
   dark titles, muted copy, blue Browse links; stats band below. */
.shop-cta {
  /* Continues the dark hero at the top, then fades smoothly into the
     light background of the next section for a seamless transition. */
  background: linear-gradient(to bottom,
      #0b1119 0%, #0d141d 34%, #2a3a52 66%, var(--stats-bg, hsl(210 25% 96%)) 100%);
  padding: var(--s15) 0 var(--s20);
  text-align: center;
}

.shop-cta h2 {
  color: #fff;
  margin-bottom: var(--s3);
  font-size: clamp(28px, 3.4vw, 38px);
}

.shop-cta-sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  max-width: 640px;
  margin: 0 auto var(--s10);
}

.shop-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .shop-cta-grid {
    grid-template-columns: 1fr;
  }
}

.shop-card {
  background: var(--card);
  border-radius: 16px;
  padding: var(--s10) var(--s8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.shop-card-icon {
  width: 78px;
  height: 78px;
  border-radius: 16px;
  background: hsl(217 92% 93%);
  color: hsl(221 78% 58%);
  display: grid;
  place-items: center;
  margin-bottom: var(--s5);
}

.shop-card-icon svg {
  width: 36px;
  height: 36px;
}

.shop-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--white);
  margin-bottom: var(--s3);
}

.shop-card p {
  font-size: 14px;
  color: var(--grey-mid);
  line-height: 1.55;
  margin: 0 0 var(--s5);
  max-width: 300px;
}

.shop-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: hsl(221 78% 58%);
  text-decoration: none;
  transition: gap 0.15s ease;
}

.shop-card-link:hover {
  text-decoration: none;
  gap: var(--s3);
}

/* ------------------------------------------- category small cards */
.cat-section {
  background: hsl(210 25% 96%);
  padding: var(--s15) 0;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s4);
}

@media (max-width: 1023px) {
  .cat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s6) var(--s3);
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
}

.cat-icon {
  font-size: 34px;
  line-height: 1;
  margin-bottom: var(--s2);
}

.cat-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--white);
  line-height: 1.25;
}

.cat-sub {
  font-size: 12px;
  color: var(--grey-mid);
  line-height: 1.35;
}

/* ----------------------------------------------------- stats band */
.stats-band {
  background: hsl(210 25% 96%);
  padding: var(--s12) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
  text-align: center;
}

@media (max-width: 767px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s8) var(--s4);
  }
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.1;
  color: hsl(221 83% 60%);
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 14px;
  color: hsl(0 0% 25%);
  margin-top: var(--s1);
}


/* ---------------------------------------------- footer extras (dark) */
.footer-brand p {
  font-size: 14px;
  color: hsl(0 0% 70%);
  max-width: 260px;
  line-height: 1.55;
}

.footer-logo {
  height: 48px;
  width: auto;
  margin-bottom: var(--s4);
  border-radius: 6px;
}

.footer-social {
  display: flex;
  gap: var(--s4);
  margin-top: var(--s4);
}

.footer-social a {
  color: hsl(0 0% 60%);
  transition: color 0.15s ease;
}

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

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  color: hsl(0 0% 72%);
  font-size: 14px;
}

.footer-contact svg {
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  flex-wrap: wrap;
  border-top: 1px solid hsl(0 0% 14%);
  margin-top: var(--s10);
  padding-top: var(--s6);
  color: hsl(0 0% 60%);
  font-size: 13px;
}

.pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 84px;
  height: 44px;
  padding: 0 var(--s4);
  border-radius: 8px;
  background: var(--card);
}

.pay-visa {
  color: #1A1F71;
  font-weight: 800;
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.02em;
}

.pay-mc {
  position: relative;
}

.pay-mc em {
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  color: #1b1b1b;
  z-index: 1;
}

.mc-c {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: absolute;
  top: 11px;
  opacity: 0.9;
}

.mc-red {
  background: #EB001B;
  left: 22px;
}

.mc-yellow {
  background: #F79E1B;
  left: 36px;
  mix-blend-mode: multiply;
}

.pay-paystack {
  background: #56C1E8;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

/* -------------------------------------------- What Sets Us Apart */
.apart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  max-width: 1000px;
  margin: 0 auto;
}

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

.apart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s8) var(--s6);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.apart-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: hsl(217 92% 93%);
  color: hsl(221 78% 58%);
  display: inline-grid;
  place-items: center;
  margin-bottom: var(--s4);
}

.apart-icon svg {
  width: 24px;
  height: 24px;
}

.apart-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--white);
  margin-bottom: var(--s3);
}

.apart-card p {
  font-size: 14.5px;
  color: var(--grey-mid);
  line-height: 1.6;
  margin: 0;
  max-width: 280px;
  margin-inline: auto;
}

/* ------------------------------------------------------- pricing */
.pricing-section {
  background: hsl(210 25% 96%);
  padding: var(--s15) 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  max-width: 800px;
  margin: 0 auto;
}

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

.price-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--s8);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.price-card.is-best {
  border: 1.5px solid var(--blue);
  box-shadow: 0 8px 30px rgba(0, 149, 255, 0.12);
}

.best-pill {
  position: absolute;
  top: var(--s5);
  right: var(--s5);
  background: var(--blue);
  color: #fff;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px var(--s3);
}

.price-plan {
  font-size: 16px;
  color: hsl(0 0% 30%);
  margin-bottom: var(--s2);
}

.price-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: var(--s6);
}

.price-amount span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--grey-mid);
  letter-spacing: 0;
}

.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s8);
}

.price-features li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--s3);
  font-size: 14px;
  color: hsl(0 0% 25%);
}

.price-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  background: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230095FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.price-card .btn {
  margin-top: auto;
}

/* ------------------------------------------------------ locations */
.loc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
}

@media (max-width: 1023px) {
  .loc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.loc-card {
  position: relative;
  height: 176px;
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s4) var(--s5);
  text-decoration: none;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.loc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
}

.loc-name {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.loc-view {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  margin-top: 2px;
}

/* Scenic gradient stand-ins until real province photos land at
   assets/img/province-<slug>.jpg (the inline background-image layers them in). */
.loc-eastern-cape {
  background-color: #3d6b4f;
  background-image: linear-gradient(160deg, #74a884, #2e5340);
}

.loc-free-state {
  background-color: #8a5a33;
  background-image: linear-gradient(160deg, #c98d52, #6e4423);
}

.loc-gauteng {
  background-color: #4a4358;
  background-image: linear-gradient(160deg, #a98151, #37324a);
}

.loc-kwazulu-natal {
  background-color: #2e6f8f;
  background-image: linear-gradient(160deg, #63b5cf, #1f5670);
}

.loc-limpopo {
  background-color: #b0762a;
  background-image: linear-gradient(160deg, #e8b45a, #8a5a1e);
}

.loc-mpumalanga {
  background-color: #396b45;
  background-image: linear-gradient(160deg, #6fae7d, #295237);
}

.loc-north-west {
  background-color: #7a5e3f;
  background-image: linear-gradient(160deg, #c99a5c, #5c452d);
}

.loc-northern-cape {
  background-color: #a3672f;
  background-image: linear-gradient(160deg, #d99b4e, #7d4d22);
}

.loc-western-cape {
  background-color: #2f6486;
  background-image: linear-gradient(160deg, #5aa3c7, #204a66);
}

/* --------------------------------------------------- sell CTA band */
.sell-cta {
  background: hsl(210 60% 97%);
  padding: var(--s15) 0;
  text-align: center;
}

.sell-cta h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  margin-bottom: var(--s3);
}

.sell-cta-sub {
  color: var(--grey-mid);
  font-size: 17px;
  max-width: 640px;
  margin: 0 auto var(--s6);
}

.sell-cta-points {
  display: flex;
  justify-content: center;
  gap: var(--s8);
  flex-wrap: wrap;
}

.sell-cta-points span {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 14px;
  color: hsl(0 0% 25%);
}

.sell-cta-points svg {
  color: var(--blue);
}

.sell-cta .section-action {
  margin-top: var(--s6);
}


/* ------------------------------------------------- seller registration */
.reg-form h3 {
  font-size: 17px;
  margin: 26px 0 12px;
}

.reg-form h3:first-of-type {
  margin-top: 0;
}

.type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}

@media (max-width: 560px) {
  .type-toggle {
    grid-template-columns: 1fr;
  }
}

.type-option input,
.pkg-option input {
  position: absolute;
  opacity: 0;
}

.type-card,
.pkg-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: var(--s4) var(--s5);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.type-option input:checked+.type-card,
.pkg-option input:checked+.pkg-card {
  border-color: var(--blue);
  background: rgba(0, 149, 255, 0.05);
}

.type-card em,
.pkg-price em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--grey-mid);
}

.pkg-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.pkg-list[hidden] {
  display: none;
}

.pkg-card {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.reg-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

@media (max-width: 560px) {
  .reg-form .form-grid {
    grid-template-columns: 1fr;
  }
}

.reg-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.reg-form .field[hidden] {
  display: none;
}

.reg-form .field>span {
  font-weight: 600;
}

.reg-form .field>span em {
  font-style: normal;
  font-weight: 400;
  color: var(--grey-mid);
}

.reg-form .field-wide {
  grid-column: 1 / -1;
}

.reg-form input,
.reg-form select {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}

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

/* ---------------------------------------------------- checkout page */
.pay-card {
  padding: var(--s8);
}

.pay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pay-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--grey-mid);
}

.pay-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: var(--s4);
}

.pay-lines>div {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
}

.pay-lines dt {
  color: hsl(0 0% 30%);
}

.pay-lines dd {
  margin: 0;
  font-weight: 600;
}

.pay-total {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-size: 16px;
}

.pay-total dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
}

.pay-sim-note {
  margin-top: var(--s5);
  padding: 10px 14px;
  border-radius: 10px;
  background: hsl(45 95% 95%);
  border: 1px solid hsl(45 80% 75%);
  font-size: 12.5px;
  color: hsl(35 60% 30%);
  line-height: 1.5;
}

/* ------------------------------------------------- AI assistant panel */
.bot-panel {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 300;
  width: min(380px, calc(100vw - 32px));
  height: min(540px, calc(100vh - 140px));
  background: var(--card);
  color: var(--white);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.bot-panel.is-open {
  display: flex;
}

.bot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: hsl(0 0% 4%);
  color: #fff;
}

.bot-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bot-head strong {
  font-size: 15px;
}

.bot-sub {
  font-size: 11.5px;
  color: hsl(0 0% 65%);
}

.bot-close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: hsl(0 0% 70%);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.bot-close:hover {
  color: #fff;
}

.bot-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: hsl(210 25% 98%);
}

.bot-msg {
  max-width: 85%;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.5;
}

.bot-msg p {
  margin: 0 0 8px;
}

.bot-msg p:last-child {
  margin: 0;
}

.bot-msg a {
  color: var(--blue, #0095FF);
  font-weight: 600;
}

.bot-msg-user {
  align-self: flex-end;
  background: var(--blue, #0095FF);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bot-msg-bot {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border, #e3e6ea);
  border-bottom-left-radius: 4px;
}

.bot-thinking {
  color: var(--grey-mid, #888);
}

.bot-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border, #e3e6ea);
  background: var(--card);
}

.bot-form input {
  flex: 1;
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  min-width: 0;
}

.bot-form input:focus {
  outline: none;
  border-color: var(--blue, #0095FF);
}

@media (max-width: 480px) {
  .bot-panel {
    right: 12px;
    bottom: 84px;
  }
}

/* ------------------------------------------- assistant listing cards */
.bot-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
}

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

.bot-card:hover {
  border-color: var(--blue, #0095FF);
  box-shadow: 0 6px 20px rgba(0, 149, 255, 0.12);
}

.bot-card-img {
  position: relative;
  flex: 0 0 118px;
}

.bot-card-img img {
  width: 118px;
  height: 100%;
  min-height: 96px;
  object-fit: cover;
  display: block;
}

.bot-card-ribbon {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--blue, #0095FF);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bot-card-body {
  flex: 1;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bot-card-price {
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: 16.5px;
  color: var(--white);
}

.bot-card-title {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-card-meta {
  font-size: 11px;
  color: var(--grey-mid, #7a828c);
}

.bot-card-foot {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--grey-mid, #7a828c);
}

.bot-card-cta {
  color: var(--blue, #0095FF);
  font-weight: 700;
}

.fav-btn.is-watched {
  background: var(--blue, #0095FF);
  color: #fff;
  border-color: var(--blue, #0095FF);
}

.fav-btn.is-watched svg {
  fill: currentColor;
}

/* ------------------------------------------------ notification bell */
[data-notify-bell] {
  position: relative;
  display: inline-flex;
}

.notify-bell {
  position: relative;
  background: none;
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  color: inherit;
  line-height: 0;
}

.notify-bell:hover {
  border-color: var(--blue, #0095FF);
  color: var(--blue, #0095FF);
}

.notify-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 5px;
  line-height: 1;
}

.notify-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 240;
  width: 300px;
  max-height: 340px;
  overflow-y: auto;
  /* Self-contained colours — do NOT inherit theme tokens, since the bell can
     sit inside dark headers/sidebars which would flip the text to white. */
  background: #ffffff;
  color: #1a1f26;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.16);
  padding: 6px;
}

.notify-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #1a1f26;
}

.notify-item:hover {
  background: hsl(210 25% 96%);
}

.notify-item time {
  color: #7a828c;
  font-size: 10.5px;
  white-space: nowrap;
}

/* Header/section rows + empty state inside the panel */
.notify-panel .notify-head,
.notify-panel .notify-empty {
  color: #1a1f26;
}

.notify-panel .notify-empty {
  padding: 16px 12px;
  text-align: center;
  color: #7a828c;
  font-size: 12.5px;
}

aside .notify-panel {
  top: auto;
  bottom: calc(100% + 8px);
  right: auto;
  left: 0;
}

/* --------------------------------------------- email preview overlay */
.mail-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(8, 10, 14, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.mail-preview-card {
  width: min(680px, 100%);
  height: min(80vh, 720px);
  background: var(--card);
  color: var(--white);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.mail-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e3e6ea);
}

.mail-preview-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #f2f4f7;
}

/* ------------------------------------------------- settings sections */
.set-grid {
  display: flex;
  flex-direction: column;
}

.set-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border, #e3e6ea);
}

.set-row:last-child {
  border-bottom: 0;
}

.set-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

.set-help {
  font-size: 12px;
  color: var(--grey-mid, #7a828c);
  margin-top: 6px;
  max-width: 620px;
  line-height: 1.55;
}

.set-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.set-toggle .set-title {
  margin-bottom: 0;
}

.set-toggle input {
  width: 38px;
  height: 22px;
  appearance: none;
  background: hsl(210 15% 82%);
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  flex: 0 0 auto;
}

.set-toggle input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--card);
  border-radius: 50%;
  transition: left 0.15s;
}

.set-toggle input:checked {
  background: var(--blue, #0095FF);
}

.set-toggle input:checked::after {
  left: 19px;
}

.bot-head-btns {
  display: flex;
  align-items: center;
  gap: 2px;
}

.bot-reset {
  background: none;
  border: 0;
  color: hsl(0 0% 70%);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}

.bot-reset:hover {
  color: #fff;
}

/* -------------------------------------------------- enquiry consent */
.enq-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 14px;
  cursor: pointer;
}

.enq-consent input {
  margin-top: 2px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.enq-consent span {
  font-size: 12px;
  line-height: 1.5;
  color: var(--grey-mid, #7a828c);
}

.enq-consent .error-text,
.field .error-text {
  color: #e5484d;
  font-size: 11.5px;
  margin-top: 4px;
}

/* ------------------------------------------------ custom dropdowns (msel) */
.msel {
  position: relative;
}

.msel>select.select {
  /* Fully removed from interaction — the custom dropdown sets this select's
     value and fires its change event in JS, so it still submits with the form.
     Using display:none (not the clip trick) stops iOS Safari from popping the
     native picker on top of our dropdown. */
  display: none !important;
}

.msel-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  background: var(--panel-hover);
  color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 9px var(--s3);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.msel-trigger:hover {
  border-color: var(--grey-mid);
}

.msel-trigger:focus-visible {
  border-color: var(--blue);
  outline: none;
}

.msel.is-open .msel-trigger {
  border-color: var(--blue);
}

.msel-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.msel-chev {
  display: inline-flex;
  color: var(--grey-mid);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}

.msel.is-open .msel-chev {
  transform: rotate(180deg);
}

.msel-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 5px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.msel-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--grey-light);
  cursor: pointer;
  white-space: nowrap;
}

.msel-opt:hover,
.msel-opt.is-active {
  background: var(--panel-hover);
  color: var(--white);
}

.msel-opt.is-selected {
  background: color-mix(in srgb, var(--blue) 15%, transparent);
  color: var(--white);
}

.msel-opt.is-selected::after {
  content: '';
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%234d8dfb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ------------------------------------------------ search input (browse) */
.search-input {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--panel-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 0 6px 0 11px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

.search-input-icon {
  width: 16px;
  height: 16px;
  color: var(--grey-mid);
  flex: 0 0 auto;
}

.search-input input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  font-size: 13px;
  padding: 10px 0;
  appearance: none;
}

.search-input input::placeholder {
  color: var(--grey-mid);
}

.search-input input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-input-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: var(--blue);
  color: #fff;
  transition: background 0.15s ease;
}

.search-input-go:hover {
  background: var(--blue-dark, #0077e6);
}

.search-input-go svg {
  width: 15px;
  height: 15px;
}

/* ------------------------------------------------ save-search bar (browse) */
.save-search {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.save-search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--panel-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 0 11px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.save-search-field:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

.save-search-field svg {
  width: 15px;
  height: 15px;
  color: var(--grey-mid);
  flex: 0 0 auto;
}

.save-search-field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  font-size: 13px;
  padding: 9px 0;
}

.save-search-field input::placeholder {
  color: var(--grey-mid);
}

.save-search-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ------------------------------------------------ password rules checklist */
.pw-rules {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.pw-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--grey-mid);
  transition: color 0.15s ease;
}

.pw-tick {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  position: relative;
  transition: all 0.15s ease;
}

.pw-rules li.is-ok {
  color: var(--grey-light, #c8ccd2);
}

.pw-rules li.is-ok .pw-tick {
  background: var(--success, #2fb968);
  border-color: var(--success, #2fb968);
}

.pw-rules li.is-ok .pw-tick::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pw-rules.show-unmet li:not(.is-ok) {
  color: var(--danger, #e5484d);
}

.pw-rules.show-unmet li:not(.is-ok) .pw-tick {
  border-color: var(--danger, #e5484d);
}

/* ------------------------------------------------ clickable notifications */
.notify-item-link {
  text-decoration: none;
  color: #1a1f26;
  cursor: pointer;
  transition: background 0.12s ease;
}

/* solid accent on hover with white text so it stays readable */
.notify-item-link:hover {
  background: var(--blue, #0095FF);
  color: #fff;
}

.notify-item-link:hover time {
  color: rgba(255, 255, 255, 0.85);
}

/* highlight the invoice a notification linked to */
tr[id^="invoice-"]:target {
  animation: invoiceFlash 2s ease;
}

@keyframes invoiceFlash {

  0%,
  40% {
    background: color-mix(in srgb, var(--blue) 14%, transparent);
  }

  100% {
    background: transparent;
  }
}

/* ------------------------------------------------ shared date picker (.mdate) */
.mdate {
  position: relative;
  display: inline-block;
}

.mdate-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.mdate-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-input, 9px);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  min-width: 150px;
  text-align: left;
  transition: border-color 0.15s ease;
}

.mdate-trigger:hover {
  border-color: var(--blue);
}

.mdate.is-open .mdate-trigger {
  border-color: var(--blue);
}

.mdate-trigger>svg {
  color: var(--grey-mid);
  flex: 0 0 auto;
}

.mdate-label {
  flex: 1;
}

.mdate-label.is-placeholder {
  color: var(--grey-mid);
}

.mdate-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 320;
  width: 268px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18);
}

.mdate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mdate-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--white);
}

.mdate-nav {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.12s ease;
}

.mdate-nav:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.mdate-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mdate-week {
  margin-bottom: 4px;
}

.mdate-wd {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--grey-mid);
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mdate-empty {
  aspect-ratio: 1 / 1;
}

.mdate-day {
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--white);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.mdate-day:hover {
  background: var(--panel-hover);
}

.mdate-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--blue);
}

.mdate-day.is-selected {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
}

.mdate-day.is-selected.is-today {
  box-shadow: none;
}

.mdate-day:disabled {
  color: var(--grey-mid);
  opacity: 0.4;
  cursor: not-allowed;
}

.mdate-day:disabled:hover {
  background: transparent;
}

.mdate-foot {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.mdate-quick {
  flex: 1;
  padding: 7px;
  background: var(--panel-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  color: var(--white);
  cursor: pointer;
  transition: all 0.12s ease;
}

.mdate-quick:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* =====================================================================
   V3 REVAMP — signature effects (frosted nav, hero wash, glow).
   Theme-aware via tokens; applies in both light and dark.
   ===================================================================== */

/* Frosted-glass sticky nav */
.nav {
  background: #000;
  border-bottom: 1px solid var(--blue-glow);
}


/* Hero: radial blue wash + smooth image fade (mask) */
.hero {
  position: relative;
  overflow: visible;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 80% at 82% 50%, rgba(0, 149, 255, .18) 0%, transparent 65%),
    radial-gradient(ellipse 30% 60% at 96% 18%, rgba(0, 168, 232, .08) 0%, transparent 60%);
}

.hero-inner,
.hero-content {
  position: relative;
  z-index: 1;
}

.hero-photo,
.hero-inner img.hero-photo {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .5) 25%, rgba(0, 0, 0, .9) 60%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .5) 25%, rgba(0, 0, 0, .9) 60%, #000 100%);
}

/* Pulsing "live" dot (hero pill) */
.hero-pill-dot,
.pill-dot {
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%;
  animation: mb-pulse 2s infinite;
  display: inline-block;
}

@keyframes mb-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .3;
    transform: scale(.6);
  }
}

/* Category card: photo zoom on hover (if the card has an image) */
.cat-card {
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px var(--blue-glow);
}

.cat-card img {
  transition: transform 0.32s ease;
}

.cat-card:hover img {
  transform: scale(1.06);
}

/* Smooth-scroll for anchor jumps */
html {
  scroll-behavior: smooth;
}

/* Buttons: match mockup easing */
.btn {
  transition: all 0.15s ease;
}

.btn-primary:hover {
  filter: brightness(1.05);
}

/* =====================================================================
   V3 REVAMP — hero photo + photographic category cards
   ===================================================================== */

/* Hero: content left, large photo bleeding off the right */
.hero-content {
  max-width: 620px;
  text-align: left;
}

.hero {
  --_x: 0;
}

.hero-photo {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 58%;
  max-width: 58%;
  clip-path: inset(0);
  object-fit: cover;
  object-position: center;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .9) 55%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .9) 55%, #000 100%);
}

.hero h1 {
  text-align: left;
}

.hero-sub {
  text-align: left;
  margin-left: 0;
}

.hero-accent {
  color: var(--blue);
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s5);
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}

.hero .searchbar {
  margin-left: 0;
}

@media (max-width: 900px) {
  .hero-photo {
    width: 100%;
    opacity: .28;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-content {
    max-width: 100%;
  }
}

/* Photographic category cards */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

@media (max-width: 1100px) {
  .cat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cat-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  padding: 0;
  /* override old padded card */
}

.cat-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cat-card:hover .cat-photo {
  transform: scale(1.07);
}

.cat-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(9, 12, 18, .9) 0%, rgba(9, 12, 18, .5) 42%, rgba(9, 12, 18, .12) 75%, transparent 100%);
}

.cat-card:hover {
  border-color: var(--blue);
  box-shadow: 0 14px 40px var(--blue-glow);
  transform: translateY(-4px);
}

.cat-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s5) var(--s4);
  text-align: left;
}

.cat-caption .cat-name {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
}

.cat-caption .cat-sub {
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
}

.cat-card::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: var(--s4);
  bottom: var(--s4);
  width: 30px;
  height: 3px;
  background: var(--blue);
  border-radius: 2px;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.25s ease;
}

.cat-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================================
   Shop cards with photo background + tint (text/icons pop)
   ===================================================================== */
.shop-card-photo {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 340px;
  color: #fff;
  isolation: isolate;
}

/* Blurred photo layer (frosted-glass look, ~15-20% blur) */
.shop-card-photo::before {
  content: '';
  position: absolute;
  inset: -24px;
  z-index: 0;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(1px);
  transform: scale(1.10);
}

/* Dark window-tint so white text & icons pop */
.shop-card-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 10, 16, .90) 0%, rgba(6, 10, 16, .72) 100%);
}

/* Water-droplet texture on the "glass" */
.shop-card-drops {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url('../img/texture/waterdrops.svg');
  background-size: 300px 300px;
  opacity: .5;
  mix-blend-mode: screen;
  pointer-events: none;
}

.shop-card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s10) var(--s8);
  height: 100%;
}

.shop-card-photo h3 {
  color: #fff;
}

.shop-card-photo p {
  color: rgba(255, 255, 255, .86);
}

.shop-card-photo .shop-card-icon {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(4px);
}

.shop-card-photo .shop-card-link {
  color: #fff;
  font-weight: 700;
}

.shop-card-photo .shop-card-link:hover {
  color: var(--blue);
}

.shop-card-photo:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .4);
}

/* =====================================================================
   DARK THEME readability boost — lighter cards, brighter text, clearer borders
   ===================================================================== */


/* Location card fallback until a province image is uploaded */
.loc-card-empty {
  background: linear-gradient(135deg, #1b2637 0%, #24344a 100%);
}

.loc-card-empty .loc-name {
  color: #fff;
}


/* =====================================================================
   Responsive container — fill larger desktop screens gracefully instead
   of capping everything at a narrow width (content looked compacted on
   big monitors). Scales the max width up at wide breakpoints.
   ===================================================================== */
@media (min-width: 1500px) {
  :root {
    --container: 1500px;
  }
}

@media (min-width: 1700px) {
  :root {
    --container: 1640px;
  }
}

@media (min-width: 1920px) {
  :root {
    --container: 1800px;
  }
}

@media (min-width: 2400px) {
  :root {
    --container: 2100px;
  }
}

/* Let the hero photo track the wider container on big screens */
@media (min-width: 1700px) {
  .hero {
    min-height: 620px;
  }

  .hero-photo {
    width: 56%;
  }

  .hero-content {
    max-width: 700px;
  }
}

@media (min-width: 1920px) {
  .hero {
    min-height: 680px;
  }
}


/* =====================================================================
   Hero "Type" dropdown — blend into the search field (no inner border/box),
   readable text, keep the chevron, and let the panel overlap the next
   section when open (hero no longer clips it).
   ===================================================================== */
.searchbar .msel {
  width: 100%;
}

.searchbar .msel-trigger {
  border: none;
  background: transparent;
  padding: var(--s3) 0;
  color: var(--white);
  font-size: 15px;
}

.searchbar .msel-trigger:hover,
.searchbar .msel.is-open .msel-trigger {
  border: none;
}

.searchbar .msel-value {
  color: var(--white);
}

.searchbar .msel-chev {
  color: var(--grey-mid);
}

/* Tidy dark panel that matches the search bar, opens neatly below the field */
.searchbar .msel-trigger {
  padding: 0;
}

.searchbar .msel-panel {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  z-index: 600;
  left: auto;
  right: 0;
  min-width: 240px;
  width: 100%;
  margin-top: 4px;
  background: #10151d;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .55);
  max-height: 300px;
  overflow-y: auto;
  /* Custom scrollbar to match the dark panel */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
/* WebKit (Chrome/Safari/Edge) scrollbar for the dropdown panel */
.searchbar .msel-panel::-webkit-scrollbar { width: 8px; }
.searchbar .msel-panel::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.searchbar .msel-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.22); border-radius: 8px; border: 2px solid #10151d;
}
.searchbar .msel-panel::-webkit-scrollbar-thumb:hover { background: rgba(0,149,255,.55); }
/* Trigger fills its field so the label + arrow sit naturally */
.searchbar .msel-trigger { width: 100%; justify-content: space-between; }
.searchbar .msel-value { flex: 1 1 auto; }

.searchbar .msel-opt {
  color: rgba(255, 255, 255, .82);
  border-radius: 8px;
  padding: 10px 12px;
}

.searchbar .msel-opt:hover,
.searchbar .msel-opt.is-active {
  color: #fff;
  background: rgba(30, 167, 255, .16);
}

.searchbar .msel-opt.is-selected {
  color: #fff;
  background: rgba(30, 167, 255, .24);
}

/* =====================================================================
   Affiliate dashboard — KPI cards, metrics, marketing feed
   ===================================================================== */
.aff-kpis {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (max-width: 760px) {
  .aff-kpis {
    grid-template-columns: 1fr 1fr;
  }
}

.aff-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aff-kpi-hero {
  background: var(--gradient-hero);
  border-color: transparent;
  color: #fff;
}

.aff-kpi-label {
  font-size: 12px;
  color: var(--grey-mid);
}

.aff-kpi-hero .aff-kpi-label {
  color: rgba(255, 255, 255, .75);
}

.aff-kpi-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.05;
}

.aff-kpi-hero .aff-kpi-value {
  color: #fff;
}

.aff-kpi-sub {
  font-size: 11.5px;
  color: var(--grey-mid);
}

.aff-kpi-hero .aff-kpi-sub {
  color: rgba(255, 255, 255, .8);
}

.aff-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}

@media (max-width: 760px) {
  .aff-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

.aff-metric {
  text-align: center;
}

.aff-metric-num {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
}

.aff-metric-lbl {
  display: block;
  font-size: 11.5px;
  color: var(--grey-mid);
  margin-top: 2px;
}

.aff-feed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 900px) {
  .aff-feed {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .aff-feed {
    grid-template-columns: 1fr;
  }
}

.aff-feed-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  display: flex;
  flex-direction: column;
}

.aff-feed-img {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--panel-hover);
}

.aff-feed-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.aff-feed-card:hover .aff-feed-img img {
  transform: scale(1.05);
}

.aff-feed-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.aff-feed-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aff-feed-price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--price-gold);
}

.aff-feed-meta {
  font-size: 11px;
  color: var(--grey-mid);
}

.aff-feed-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.aff-feed-actions .btn {
  flex: 1;
}

/* Affiliate — prospect log (matches dashboard card design) */
.aff-prospect-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.aff-prospect-count {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-mid);
  background: var(--panel-hover);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.aff-prospect-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  .aff-prospect-form {
    grid-template-columns: 1fr;
  }
}

.aff-input {
  background: var(--card);
  color: var(--white);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 13px;
  font: inherit;
  font-size: 14px;
  width: 100%;
  transition: border-color 0.15s ease;
}

.aff-input:focus {
  outline: none;
  border-color: var(--blue);
}

.aff-input::placeholder {
  color: var(--grey-mid);
}

.aff-input-wide {
  grid-column: 1 / -1;
}

.aff-prospect-form .btn {
  align-self: center;
}

@media (max-width: 640px) {
  .aff-input-wide {
    grid-column: 1;
  }
}

.aff-prospect-empty {
  color: var(--grey-mid);
  padding: 6px 0;
}

.aff-prospect-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aff-prospect-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: var(--panel-hover);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.aff-prospect-info {
  min-width: 0;
}

.aff-prospect-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--white);
}

.aff-prospect-contact {
  font-size: 12.5px;
  color: var(--grey-light);
  margin-top: 2px;
}

.aff-prospect-note {
  font-size: 12.5px;
  color: var(--grey-mid);
  margin-top: 3px;
}

.aff-prospect-date {
  font-size: 11px;
  color: var(--grey-mid);
  margin-top: 6px;
}

.aff-prospect-card form {
  flex: 0 0 auto;
}

/* =====================================================================
   HERO v4 — match the cinematic dark mockup (keeps 3-field search + chips)
   ===================================================================== */
/* Near-black cinematic background with a subtle graphite wash on the right */
.hero {
  background:
    radial-gradient(120% 90% at 88% 45%, rgba(70, 84, 104, .30) 0%, rgba(20, 26, 36, .15) 40%, transparent 70%),
    #050608;
  min-height: 620px;
}

.hero::before {
  background:
    radial-gradient(ellipse 60% 70% at 82% 50%, rgba(0, 140, 255, .10) 0%, transparent 62%) !important;
}

/* Photo fades into pure black on the left, richer blend */
.hero-photo,
.hero-inner img.hero-photo {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .25) 20%, rgba(0, 0, 0, .8) 52%, #000 78%) !important;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .25) 20%, rgba(0, 0, 0, .8) 52%, #000 78%) !important;
}

/* Brighter, more saturated accent for "Perfect Drive" */
.hero-accent {
  color: #1EA7FF;
}

.hero h1 {
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}

/* Blue pill: uppercase, letter-spaced, blue text on a dark blue-tinted fill */
.hero-pill {
  background: rgba(30, 167, 255, .10);
  border: 1px solid rgba(30, 167, 255, .30);
  color: #4db6ff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11.5px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

.hero-pill-dot {
  background: #1EA7FF;
  box-shadow: 0 0 8px rgba(30, 167, 255, .9);
}

/* Sub-text: bold count reads white */
.hero-sub {
  color: rgba(255, 255, 255, .72);
}

.hero-sub strong {
  color: #fff;
  font-weight: 700;
}

/* Search bar sits on the dark canvas — dark, rounded, subtle border (not a white block) */
.searchbar {
  background: rgba(18, 22, 30, .72);
  border: 1px solid rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .6);
  max-width: 720px;
  margin-left: 0;
  margin-right: 0;
}

.searchbar .search-field {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}

.searchbar .search-field:focus-within {
  border-color: #1EA7FF;
}

.searchbar .search-field svg {
  color: rgba(255, 255, 255, .55);
}

.searchbar input {
  color: #fff;
}

.searchbar input::placeholder {
  color: rgba(255, 255, 255, .5);
}

.searchbar .msel-value {
  color: #fff;
}

.searchbar .msel-chev {
  color: rgba(255, 255, 255, .55);
}

.search-submit {
  background: #1EA7FF;
}

.search-submit:hover {
  background: #0d97f0;
}

/* Quick-search chips */
.hero-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  max-width: 720px;
}

.hero-chips-label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .45);
  margin-right: 2px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: all 0.15s ease;
}

.hero-chip:hover {
  background: rgba(30, 167, 255, .15);
  border-color: rgba(30, 167, 255, .5);
  color: #fff;
}


/* Hero heading: fixed size on all desktop widths (consistent visuals),
   with "Find Your" always stacked above "Perfect Drive". */
.hero h1 .hero-line {
  display: block;
}

.hero h1 .hero-accent {
  display: block;
}

/* Mobile keeps a fluid size (excluded from the desktop-fixed rule) */
@media (max-width: 767px) {
  .hero h1 {
    font-size: clamp(40px, 11vw, 60px);
  }
}

/* =====================================================================
   Category marquee — continuous left-to-right looping carousel
   ===================================================================== */
.cat-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* soft fade on both edges so cards slide in/out gracefully */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.cat-track {
  display: flex;
  width: max-content;
  gap: var(--s4);
  animation: cat-scroll 42s linear infinite;
}

.cat-marquee:hover .cat-track {
  animation-play-state: paused;
}

/* Each card fixed width so the track measures predictably */
.cat-marquee .cat-card {
  flex: 0 0 300px;
  width: 300px;
  aspect-ratio: 4 / 3;
}

/* We render the set twice; move left by exactly half the track (one full set)
   then loop — seamless because the second half is identical to the first. */
@keyframes cat-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - (var(--s4) / 2)));
  }
}

@media (max-width: 767px) {
  /* On mobile, let the user swipe the category strip left/right themselves
     instead of it auto-floating. */
  .cat-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cat-track {
    animation: none;
    width: max-content;
    flex-wrap: nowrap;
  }
  .cat-marquee .cat-card {
    flex-basis: 240px;
    width: 240px;
    scroll-snap-align: start;
  }
  /* Hide the duplicated second set (only needed for the auto-loop). */
  .cat-marquee .cat-card.cat-dup { display: none; }

  /* Slim, subtle scrollbar so users can see it's swipeable */
  .cat-marquee::-webkit-scrollbar { height: 6px; }
  .cat-marquee::-webkit-scrollbar-track { background: transparent; }
  .cat-marquee::-webkit-scrollbar-thumb { background: rgba(0,149,255,.35); border-radius: 6px; }
  .cat-marquee { scrollbar-width: thin; scrollbar-color: rgba(0,149,255,.35) transparent; }
}

/* Respect reduced-motion preference — but keep the left-to-right browsing.
   Instead of the auto-scroll animation (which can bother motion-sensitive
   users), turn the strip into a manually swipeable horizontal scroller. */
@media (prefers-reduced-motion: reduce) {
  .cat-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cat-track {
    animation: none;
    width: max-content;
    flex-wrap: nowrap;
  }
  .cat-marquee .cat-card {
    scroll-snap-align: start;
  }
  /* Hide the duplicated second set (only needed for the seamless auto-loop). */
  .cat-marquee .cat-card.cat-dup { display: none; }
}

/* =====================================================================
   Showcase strips — Featured Listings & Just Listed (matches mockups)
   ===================================================================== */
.sc-section {
  background: #0b0e13;
}

.sc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.sc-head h2 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  display: inline;
}

.sc-head-sub {
  color: var(--grey-mid);
  font-size: 15px;
  margin-left: 12px;
}

.sc-head-link {
  color: var(--blue);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sc-head-link:hover {
  text-decoration: underline;
}

.sc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) {
  .sc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.sc-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 21, 28, 0.06), 0 4px 16px rgba(16, 21, 28, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sc-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 8px 30px rgba(16, 21, 28, 0.12);
  text-decoration: none;
}

.sc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0d0f13;
}

.sc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.sc-card:hover .sc-media img {
  transform: scale(1.05);
}

/* Slanted corner ribbon (top-left, "/") — realistic folded look, matches cards */
.sc-badge {
  position: absolute;
  top: 14px;
  left: -34px;
  z-index: 3;
  transform: rotate(-45deg);
  width: 150px;
  text-align: center;
  display: block;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}

.sc-badge svg,
.sc-badge span {
  display: none;
}

/* drop inline icons in the ribbon */
.sc-badge::before,
.sc-badge::after {
  content: '';
  position: absolute;
  bottom: -6px;
  border-style: solid;
  filter: brightness(0.7);
}

.sc-badge::before {
  left: 8px;
  border-width: 0 6px 6px 0;
  border-color: transparent;
  border-right-color: currentColor;
}

.sc-badge::after {
  right: 8px;
  border-width: 6px 6px 0 0;
  border-color: transparent;
  border-top-color: currentColor;
}

.sc-badge-featured {
  background: #8b5cf6;
  color: #fff;
}

.sc-badge-featured::before,
.sc-badge-featured::after {
  color: #8b5cf6;
}

.sc-badge-hot {
  background: #e5484d;
  color: #fff;
}

.sc-badge-hot::before,
.sc-badge-hot::after {
  color: #e5484d;
}

.sc-badge-trusted {
  background: var(--blue);
  color: #fff;
}

.sc-badge-trusted::before,
.sc-badge-trusted::after {
  color: var(--blue);
}

.sc-badge-new {
  background: #16a34a;
  color: #fff;
}

.sc-badge-new::before,
.sc-badge-new::after {
  color: #16a34a;
}

.sc-views {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(0, 0, 0, .55);
  color: rgba(255, 255, 255, .9);
  backdrop-filter: blur(4px);
}

.sc-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.sc-make {
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sc-title {
  color: #11151c;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  margin: 3px 0 10px;
}

.sc-price {
  color: #F59E0B;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
}

.sc-per {
  font-size: 13px;
  color: #7a8291;
  font-weight: 600;
}

.sc-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
  padding-top: 14px;
  border-top: 1px solid #eceef2;
}

.sc-chip {
  font-size: 11.5px;
  color: #4a5160;
  background: #f6f8fb;
  border: 1px solid #e6e9ef;
  border-radius: 6px;
  padding: 4px 9px;
}

.sc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eceef2;
}

.sc-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #4a5160;
  font-size: 12.5px;
}

.sc-loc svg {
  color: #e5484d;
}

.sc-enq {
  color: #7a8291;
  font-size: 12.5px;
}

/* Just Listed sits under Browse by Category — fade from the light Browse
   background at the top into the section's dark colour. */
.sc-section-fade {
  background: linear-gradient(to bottom,
      hsl(210 25% 96%) 0%,
      hsl(210 22% 70%) 14%,
      #1a2230 34%,
      #0b0e13 55%) !important;
}

/* =====================================================================
   Floating Contact button — sits just above the chat/bot bubble
   ===================================================================== */
.contact-fab {
  position: fixed;
  right: var(--s5);
  bottom: calc(var(--s5) + 56px + 14px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px 0 16px;
  border-radius: 9999px;
  background: #101722;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.contact-fab svg {
  color: var(--blue);
  flex: 0 0 auto;
}

.contact-fab:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  text-decoration: none;
  transform: translateY(-2px);
}

.contact-fab:hover svg {
  color: #fff;
}

@media (max-width: 520px) {
  .contact-fab span {
    display: none;
  }

  .contact-fab {
    padding: 0;
    width: 48px;
    justify-content: center;
  }
}

/* =====================================================================
   Payment outcome banner (portal subscription page)
   ===================================================================== */
.pay-outcome {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid;
}

.pay-outcome-icon {
  flex: 0 0 auto;
  display: inline-flex;
}

.pay-outcome-body strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}

.pay-outcome-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
}

.pay-outcome-success {
  background: #ecfdf3;
  border-color: #abefc6;
  color: #067647;
}

.pay-outcome-success .pay-outcome-icon {
  color: #16a34a;
}

.pay-outcome-pending {
  background: #fffaeb;
  border-color: #fedf89;
  color: #b54708;
}

.pay-outcome-pending .pay-outcome-icon {
  color: #d97706;
}

.pay-outcome-declined {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
}

.pay-outcome-declined .pay-outcome-icon {
  color: #dc2626;
}

/* Legal pages (privacy, terms) — readable long-form typography */
.legal-page .legal-body {
  margin-top: 28px;
  color: var(--white);
}

.legal-page .legal-body h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 30px 0 8px;
  color: var(--white);
}

.legal-page .legal-body p {
  margin: 0 0 14px;
  line-height: 1.65;
  color: hsl(0 0% 25%);
  font-size: 15px;
}

.legal-page .legal-body ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-page .legal-body li {
  margin-bottom: 7px;
  line-height: 1.6;
  color: hsl(0 0% 25%);
  font-size: 15px;
}

.legal-page .legal-body a {
  color: var(--blue);
}

.legal-page .legal-body strong {
  color: hsl(0 0% 10%);
}

/* ============================================================
   Stop iOS Safari from auto-zooming when a form field is tapped.
   iOS zooms into any input/select/textarea whose font-size is
   under 16px. Forcing 16px on touch/small screens prevents the
   zoom. Desktop styling is unchanged (rule only applies ≤767px).
   ============================================================ */
@media (max-width: 767px) {

  input,
  select,
  textarea,
  .input,
  .select,
  .mdate-trigger,
  .info-form textarea,
  .date-range input[type="date"],
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="date"] {
    font-size: 16px !important;
  }
}

/* Invalid form field highlight (validation kept the input, flags what to fix) */
.field-invalid,
input.field-invalid,
textarea.field-invalid,
.msel-invalid .msel-trigger {
  border-color: #e5484d !important;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.14) !important;
}

/* CRM board drag-and-drop */
.kanban-card[draggable="true"] {
  cursor: grab;
}

.kanban-card.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
  transform: scale(0.98) rotate(-1deg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.kanban-col.is-drop-target {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  outline: 2px dashed var(--blue) !important;
  outline-offset: -5px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent);
}

.kanban-col.is-drop-target .kanban-empty {
  border-color: var(--blue);
  color: var(--blue);
}

.crm-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 400;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  pointer-events: none;
}

.crm-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.crm-toast.ok {
  background: #16a34a;
}

.crm-toast.bad {
  background: #e5484d;
}

/* Rand currency prefix on amount inputs */
.cur-wrap {
  position: relative;
  display: block;
}

.cur-wrap>.cur-symbol {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey-mid, #7a8291);
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
  line-height: 1;
}

.cur-wrap>input[data-currency] {
  padding-left: 26px !important;
}
/* ============================================================
   MOBILE — global no-horizontal-scroll safety net + fits.
   ============================================================ */
@media (max-width: 767px) {
  /* NOTE: overflow-x:hidden on html/body silently breaks position:sticky,
     which is why the header would not stay put on mobile. `clip` gives the
     same no-sideways-scroll safety net WITHOUT creating a scroll container. */
  html, body { max-width: 100%; }
  /* Older browsers without `clip` support fall back to hidden: they lose
     sticky (as before) but never gain a sideways scrollbar. */
  @supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
  @supports (overflow-x: clip)     { html, body { overflow-x: clip;   } }
  /* Keep the header pinned while scrolling on mobile. */
  .nav { position: sticky; top: 0; z-index: 100; }
  /* Nothing should force the page wider than the screen */
  img, video, table, pre, iframe { max-width: 100%; }
  .container, .narrow, .panel, .admin-card, .listing-card, .sc-card { max-width: 100%; }
  /* Grids collapse to one column on phones */
  .form-grid, .specs-grid, .detail-layout, .split { grid-template-columns: 1fr !important; }
  .detail-left { min-width: 0; }
  /* Wide fixed-width inputs shouldn't overflow */
  .input, .select, input, select, textarea { max-width: 100%; }
}

/* ============================================================
   MOBILE — affiliate & other .table tables → stacked cards.
   (These use class="table" and load only motobay.css.)
   ============================================================ */
@media (max-width: 767px) {
  table.table { display: block; width: 100%; font-size: 14px !important; }
  table.table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.table tbody { display: block; }
  table.table tr {
    display: block; margin-bottom: 12px; padding: 12px 14px;
    border: 1px solid var(--border, #e6e9ef); border-radius: 12px; background: var(--card, #fff);
  }
  table.table td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 7px 0; border: 0; border-bottom: 1px solid var(--line, #eceef2);
    text-align: right; white-space: normal;
  }
  table.table td:last-child { border-bottom: 0; }
  table.table td[data-label]::before {
    content: attr(data-label); font-weight: 600; color: var(--grey-mid, #7a8291);
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em; text-align: left; flex: 0 0 auto;
  }
}

/* Bot: keep the conversation scrollable while the background is locked. */
.bot-log { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* When the background is scroll-locked, hide its scrollbar cleanly. */
body.bot-scroll-locked { overflow: hidden; }

/* Affiliate "Fresh listings" — remove-from-view X button (top-right) */
.aff-feed-card { position: relative; }
.aff-feed-remove {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.55); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.aff-feed-remove:hover { background: #e5484d; }

/* Home search: pulse the Search button + show a hint when a category is picked */
@keyframes search-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,149,255,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(0,149,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,149,255,0); }
}
.search-submit.pulsing { animation: search-pulse 1.2s ease-out 3; }
.search-hint {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: #0095FF; color: #fff;
  font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 9px;
  box-shadow: 0 8px 22px rgba(0,149,255,.45); opacity: 0;
  transition: opacity .2s, transform .2s; pointer-events: none; z-index: 30; white-space: nowrap;
}
.search-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.search-hint::before {
  content: ''; position: absolute; bottom: -6px; left: 50%; margin-left: -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #0095FF;
}

/* Seller-type tag in the location row (Dealer / Private) */
.listing-loc { flex-wrap: wrap; }
.listing-loc-text { flex: 1 1 auto; min-width: 0; }
.seller-type-tag {
  flex: 0 0 auto; margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 6px; color: #fff; line-height: 1.4;
}
.seller-type-dealer  { background: #8b5cf6; }   /* purple = dealer */
.seller-type-private { background: var(--blue, #0095FF); }  /* blue = private */

/* Smooth image loading — light placeholder + fade-in so cards never flash blank
   and images appear cleanly even on slow connections. */
.card-photo-img {
  opacity: 0;
  transition: opacity .35s ease;
  background: linear-gradient(110deg, #eef1f5 8%, #e3e8ee 18%, #eef1f5 33%);
  background-size: 200% 100%;
  animation: img-shimmer 1.3s linear infinite;
}
.card-photo-img.img-loaded {
  opacity: 1;
  animation: none;
  background: none;
}
@keyframes img-shimmer {
  to { background-position: -200% 0; }
}

/* AI Assistant hint above the chat bubble */
.bot-hint {
  position: fixed;
  right: var(--s5);
  bottom: calc(var(--s5) + 56px + 10px);
  z-index: 91;
  background: #101722;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,.32);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}
.bot-hint.show { opacity: 1; transform: translateY(0); }
.bot-hint::after {
  content: '';
  position: absolute;
  right: 22px;
  bottom: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #101722;
}
@media (max-width: 520px) {
  .bot-hint { font-size: 12px; padding: 8px 12px; }
}

/* Verified seller badge — top-right of listing card image */
/* Verified seller seal — a round badge with triangular starburst edging,
   like a certification stamp. Sits top-right of the listing image. */
.verified-badge {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 56px; height: 56px;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  /* the drop-shadow filter follows the clipped starburst outline, unlike
     box-shadow which would trace the square box */
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.35));
}
/* The spiked seal itself */
.verified-badge::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--blue, #0095FF);
  clip-path: polygon(50.0% 0.0%, 58.0% 9.8%, 69.1% 3.8%, 72.8% 15.9%, 85.4% 14.6%, 84.1% 27.2%, 96.2% 30.9%, 90.2% 42.0%, 100.0% 50.0%, 90.2% 58.0%, 96.2% 69.1%, 84.1% 72.8%, 85.4% 85.4%, 72.8% 84.1%, 69.1% 96.2%, 58.0% 90.2%, 50.0% 100.0%, 42.0% 90.2%, 30.9% 96.2%, 27.2% 84.1%, 14.6% 85.4%, 15.9% 72.8%, 3.8% 69.1%, 9.8% 58.0%, 0.0% 50.0%, 9.8% 42.0%, 3.8% 30.9%, 15.9% 27.2%, 14.6% 14.6%, 27.2% 15.9%, 30.9% 3.8%, 42.0% 9.8%);
}
/* Subtle inner ring so it reads as a stamp */
.verified-badge::after {
  content: '';
  position: absolute; inset: 8px;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 50%;
}
/* The tick sits above both layers */
.verified-badge svg {
  position: relative; z-index: 2;
  width: 17px; height: 17px; color: #fff;
  flex: 0 0 auto; margin-bottom: -1px;
}
/* "Verified" wordmark under the tick, inside the seal */
.verified-badge-text {
  position: relative; z-index: 2;
  color: #fff; font-size: 8px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1;
}

/* Browse filters — more compact on mobile so they take less space */
@media (max-width: 767px) {
  .filters { padding: 12px; border-radius: 10px; }
  .filters h3 { font-size: 11px; margin-bottom: 8px; }
  .filters .field { margin-bottom: 10px; }
  .filters .label { font-size: 10px; margin-bottom: 3px; }
  .filters .input, .filters .select, .filters .msel-trigger,
  .filters input, .filters select {
    padding: 7px 10px; font-size: 13px;
  }
  .filter-row { gap: 6px; }
  .filters .btn { padding: 8px 12px; font-size: 12px; min-height: 38px; }
  /* the filter toggle button itself */
  .filter-toggle { padding: 7px 12px; font-size: 12px; min-height: 38px; }
}

/* Show/hide password eye button */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 42px !important; }
.pw-eye {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--grey-mid, #7a8291); display: inline-flex; line-height: 0;
}
.pw-eye:hover { color: var(--blue, #0095FF); }

/* Footer "Become a Partner" link */
.footer-partner-link {
  display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700;
  color: var(--blue, #0095FF); text-decoration: none;
}
.footer-partner-link:hover { text-decoration: underline; }

/* Listing detail — Back button + breadcrumb row */
.listing-topnav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.listing-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--blue, #0095FF);
  text-decoration: none; padding: 6px 12px 6px 8px;
  border: 1px solid var(--border, #e6e9ef); border-radius: 9999px;
  background: var(--card, #fff); transition: border-color .15s, background .15s;
}
.listing-back:hover { border-color: var(--blue, #0095FF); background: color-mix(in srgb, var(--blue) 6%, #fff); text-decoration: none; }
/* .page-head is text-align:center, which also centred the Back pill. Make it a
   block-level box sized to its content so the heading stays centred while Back
   sits on the left where it belongs. */
.page-head .listing-back {
  display: flex;
  width: fit-content;
  margin-left: 0;
  margin-right: auto;
}
.listing-back svg { flex: 0 0 auto; }

/* ------------------------------------------------- take-a-photo button
   A dealer standing at the car on their phone should be able to shoot the
   angle rather than hunt through a gallery. The camera button only appears
   on touch devices — on a desktop the ordinary file picker is the right
   control and a second button would just be clutter. */
.photo-cam { display: none; }
@media (pointer: coarse) {
  /* A phone slot is about 150px wide, so the foot has to stack: the angle name
     on its own line, then Upload and Take photo sharing the row below it.
     Without the wrap the third control simply overflowed the card. */
  .photo-slot-foot { flex-wrap: wrap; row-gap: 6px; }
  .photo-slot-foot > span { flex: 1 1 100%; }
  .photo-slot-foot > form { flex: 1 1 0; min-width: 0; }
  .photo-slot-foot .photo-pick {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%; white-space: nowrap; padding-left: 6px; padding-right: 6px;
  }
  .photo-cam { display: block; }
  /* The word "photo" is redundant next to a camera icon when space is tight. */
  .photo-cam-label { display: none; }
}
.listing-crumbs { color: var(--grey-mid, #7a8291); }
@media (max-width: 560px) {
  .listing-crumbs { display: none; } /* on small screens keep just the Back button */
}

/* Chat launcher shows "Ask AI" text instead of an icon */
.bot-bubble {
  width: auto !important;
  height: 48px !important;
  min-width: 96px;
  padding: 0 20px;
  border-radius: 9999px !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.bot-bubble-label { line-height: 1; }
@media (max-width: 520px) {
  .bot-bubble { height: 44px !important; min-width: 88px; padding: 0 18px; font-size: 14px; }
}

/* Contact FAB sits above the (now shorter) Ask AI launcher */
.contact-fab { bottom: calc(var(--s5) + 48px + 12px); }
.bot-hint { bottom: calc(var(--s5) + 48px + 10px); }
@media (max-width: 520px) {
  .contact-fab { bottom: calc(var(--s5) + 44px + 10px); }
}

/* Browse filters: collapsed by default on ALL screens, with a chevron that
   flips when expanded so users can see it opens. */
.filter-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.filter-toggle-chevron { transition: transform .2s ease; flex: 0 0 auto; }
.filter-toggle[aria-expanded="true"] .filter-toggle-chevron { transform: rotate(180deg); }
/* The filters panel is sticky only once it's open; collapsed it shouldn't
   reserve space. */
.filters[hidden] { display: none !important; }

/* ===== Enquiry messaging (buyer side) ===== */
.msg-thread { display: flex; flex-direction: column; gap: 12px; max-height: 460px; overflow-y: auto; padding: 4px 2px; }
.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg-mine { align-self: flex-end; align-items: flex-end; }
.msg-theirs { align-self: flex-start; align-items: flex-start; }
.msg-bubble {
  padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5;
  word-break: break-word; white-space: normal;
}
.msg-mine .msg-bubble { background: var(--blue, #0095FF); color: #fff; border-bottom-right-radius: 4px; }
.msg-theirs .msg-bubble { background: #eef1f5; color: #23272e; border-bottom-left-radius: 4px; }
.msg-meta { font-size: 11px; color: var(--grey-mid, #7a8291); margin-top: 4px; }

/* Enquiry list rows on the buyer account page */
.enq-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--border, #e6e9ef);
  text-decoration: none; color: inherit;
}
.enq-row:last-child { border-bottom: 0; }
.enq-row:hover { background: rgba(0,149,255,.04); text-decoration: none; }
.enq-row-main { min-width: 0; }
.enq-row-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.enq-row-sub { font-size: 12.5px; color: var(--grey-mid, #7a8291); margin-top: 3px; }
.enq-row-right { text-align: right; flex: 0 0 auto; }
.enq-unread {
  background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 800;
  padding: 2px 7px; border-radius: 9999px; letter-spacing: .02em;
}

/* ===== Wishlist "Notify me about" panel ===== */
.wish-notify {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  width: min(310px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--border, #e6e9ef);
  border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 16px 44px rgba(16,21,28,.22);
  opacity: 0; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.wish-notify.show { opacity: 1; transform: translateY(0); }
.wish-notify-head { font-weight: 800; font-size: 14.5px; color: #14713d; margin-bottom: 2px; }
.wish-notify-sub  { font-size: 13px; color: var(--grey-mid, #7a8291); margin-bottom: 10px; }
.wish-notify-opts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.wish-opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #23272e; cursor: pointer; }
.wish-opt input { width: 16px; height: 16px; accent-color: var(--blue, #0095FF); flex: 0 0 auto; }
.wish-notify-actions { display: flex; gap: 8px; }
.wish-notify-actions .btn { flex: 1; }
@media (max-width: 520px) {
  .wish-notify { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* ===== Message attachments ===== */
.msg-attach { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.msg-attach-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--blue, #0095FF);
  padding: 6px 10px; border: 1px dashed rgba(0,149,255,.45); border-radius: 8px;
}
.msg-attach-btn:hover { background: rgba(0,149,255,.06); }
.msg-attach-list { font-size: 12px; color: var(--grey-mid, #7a8291); }
.msg-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.msg-file-img img {
  max-width: 190px; max-height: 150px; border-radius: 10px; display: block;
  border: 1px solid rgba(0,0,0,.08);
}
.msg-file-doc {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eef1f5; color: #23272e; font-size: 12.5px;
  padding: 7px 11px; border-radius: 8px; text-decoration: none; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-file-doc:hover { background: #e3e8ef; }


/* ===== Message composer — tidy, aligned layout (esp. on desktop) ===== */
.msg-composer {
  border: 1px solid var(--border, #e6e9ef);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  margin-top: 14px;
  max-width: 720px;          /* stops the box stretching awkwardly wide */
}
.msg-composer:focus-within { border-color: var(--blue, #0095FF); box-shadow: 0 0 0 3px rgba(0,149,255,.10); }
.msg-composer textarea {
  width: 100%; border: 0 !important; background: transparent !important;
  padding: 4px 2px !important; resize: vertical; min-height: 64px;
  box-shadow: none !important; outline: none; font-size: 14px; line-height: 1.55;
}
/* attach + send share one row, send pinned right */
.msg-composer .msg-attach {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 0; padding-top: 8px;
  border-top: 1px solid var(--border, #eceef2);
}
.msg-composer .btn { margin-left: auto; }
@media (max-width: 640px) {
  .msg-composer { max-width: 100%; }
  .msg-composer .btn { width: 100%; margin-left: 0; }
}


/* Fresh listings: keep titles to ONE line with "…" so every card is the same
   height and the View / Share buttons stay aligned across the row. */
.aff-feed-title {
  display: block !important;
  -webkit-line-clamp: unset !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Cards in a row share a height, with actions pinned to the bottom so they
   line up regardless of how much text sits above them. */
.aff-feed-card { display: flex; flex-direction: column; }
.aff-feed-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.aff-feed-actions { margin-top: auto; padding-top: 10px; }

/* ===== Card alignment across portals =====
   Cards sitting side by side in a grid stretch to a common height and push
   their footer/action row to the bottom, so rows line up cleanly. This only
   equalises heights — it does not move any card or change the layout. */
.listing-grid, .sc-grid, .aff-feed-grid, .set-grid, .kpi-grid, .stat-grid {
  align-items: stretch;
}
.listing-grid > *, .sc-grid > *, .aff-feed-grid > * { height: 100%; }
.listing-card, .sc-card, .aff-feed-card, .admin-card, .panel {
  display: flex;
  flex-direction: column;
}
.listing-card > .listing-body,
.sc-card > .sc-body { flex: 1 1 auto; display: flex; flex-direction: column; }
/* Anything marked as the action row sinks to the bottom of its card */
.listing-card .listing-foot,
.sc-card .sc-foot,
.aff-feed-card .aff-feed-actions { margin-top: auto; }


/* Heart on the home showcase cards */
.sc-media .sc-fav {
  /* Bottom-right of the image — clear of the ribbon (top-left), the views
     badge and the Verified seal (both top-right). */
  position: absolute; bottom: 12px; right: 12px; top: auto; left: auto; z-index: 4;
}
/* Sign-in prompt when a guest tries to save to their wishlist */
.wish-signin-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(16,21,28,.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .2s ease;
}
.wish-signin-backdrop.show { opacity: 1; }
.wish-signin-box {
  position: relative; background: #fff; border-radius: 16px;
  padding: 28px 26px; width: min(400px, 100%); text-align: center;
  box-shadow: 0 24px 60px rgba(16,21,28,.3);
  transform: translateY(8px); transition: transform .2s ease;
}
.wish-signin-backdrop.show .wish-signin-box { transform: translateY(0); }
.wish-signin-box h3 { margin: 0 0 8px; font-size: 19px; color: #11151c; }
.wish-signin-box p  { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: #5a6472; }
.wish-signin-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wish-signin-actions .btn { flex: 1 1 140px; }
.wish-signin-close {
  position: absolute; top: 10px; right: 12px; border: 0; background: none;
  font-size: 24px; line-height: 1; color: #9aa3ad; cursor: pointer; padding: 4px 8px;
}
.wish-signin-close:hover { color: #11151c; }

/* ===== Category strip: manual scroll arrows ===== */
.cat-scroller { position: relative; }
.cat-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,14,20,.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: background .15s ease, border-color .15s ease;
}
.cat-arrow:hover { background: var(--blue, #0095FF); border-color: var(--blue, #0095FF); }
.cat-arrow[hidden] { display: none; }
.cat-arrow-prev { left: 8px; }
.cat-arrow-next { right: 8px; }
/* Once an arrow is used the strip becomes a real scroller under the
   visitor's control, so the auto-marquee stops sliding content away. */
.cat-scroller.is-manual .cat-track { animation: none !important; width: max-content; }
.cat-scroller.is-manual .cat-marquee {
  overflow-x: auto; scroll-behavior: smooth;
  -webkit-mask-image: none; mask-image: none; scrollbar-width: none;
}
.cat-scroller.is-manual .cat-marquee::-webkit-scrollbar { display: none; }
.cat-scroller.is-manual .cat-card.cat-dup { display: none; }
@media (max-width: 600px) {
  .cat-arrow { width: 36px; height: 36px; }
  .cat-arrow-prev { left: 4px; }
  .cat-arrow-next { right: 4px; }
}

/* "Viewing as" bar shown while an admin is impersonating a user */
.viewas-bar {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; padding: 9px 16px;
  background: #b45309; color: #fff;
  font-size: 13px; font-weight: 600; text-align: center;
}
.viewas-exit {
  background: #fff; color: #b45309; text-decoration: none;
  padding: 4px 12px; border-radius: 9999px; font-weight: 700; font-size: 12.5px;
  white-space: nowrap;
}
.viewas-exit:hover { background: #fff7ed; text-decoration: none; }


/* Live search: results swap in place. A brief, gentle dim is the only cue —
   no spinner, so nothing shifts the layout while you are still typing. */
#live-results { transition: opacity .12s ease; }
#live-results.is-searching { opacity: .55; pointer-events: none; }

/* Paged lists (helpers.php pager()): count on the left, page links right. */
.pager-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; }
.pager-bar .pagination { margin-top: 0; justify-content: flex-end; }
.pager-bar .pagination a, .pager-bar .pagination span { min-width: 34px; height: 34px; }
.pager-count { font-size: 13px; color: var(--grey-mid, #7a8291); }
.pager-gap { border: 0 !important; min-width: 16px !important; }
@media (max-width: 600px) { .pager-bar { justify-content: center; } .pager-bar .pagination { justify-content: center; } }

/* =====================================================================
   Form fields never stick out of their box or off the screen — in every
   browser (Chrome, Safari/iOS, Firefox, Samsung Internet, Edge).
   Why they did: a grid column or flex item will not shrink below its
   content's natural width unless allowed (min-width:0), and file/date
   inputs have a wide natural width (widest in Safari and Firefox). On a
   phone that pushed whole forms past the screen edge.
   ===================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea { max-width: 100%; min-width: 0; }
input[type="file"] { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] {
  min-width: 0; max-width: 100%;
}
/* iOS Safari sizes date/time inputs from their native control and ignores
   width unless the native look is dropped; keep the value left-aligned. */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    -webkit-appearance: none; appearance: none; display: block; min-height: 38px;
  }
  input::-webkit-date-and-time-value { text-align: left; }
}
/* The boxes fields sit in may shrink with the screen. */
.form-grid > *, .field, .field-wide, .filter-bar > *, .date-range > * { min-width: 0; }
/* Search boxes keep a comfortable width, giving way only on screens too narrow for it. */
.search-input { min-width: min(200px, 100%); }
.form-grid, .reg-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .form-grid, .reg-form .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  /* Rows of fields (date ranges, toolbars) wrap instead of running off. */
  .date-range, .table-toolbar, .filter-bar, form.row { flex-wrap: wrap; }
  .date-range label { display: flex; align-items: center; gap: 6px; flex: 1 1 140px; min-width: 0; }
  .date-range input { flex: 1 1 auto; }
  /* Phone "card" tables: a long value wraps under its label instead of
     pushing past the card (e.g. the Packages table's plan fields). */
  table.data td, table.table td, table.data-table td { flex-wrap: wrap; }
  table.data td > input, table.data td > select, table.table td > input, table.table td > select { flex: 1 1 120px; }
}
@media (max-width: 560px) {
  .reg-form .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Phones zoom into any field with text under 16px when it is tapped (iOS),
   which makes the page look wider than the screen. 16px stops that. */
@media (max-width: 768px) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
}
/* Layout columns that hold forms/details may shrink with the screen, and long
   unbroken values (email addresses, references) wrap instead of widening them. */
.results-layout > *, .split > *, .detail-layout > *, .review-grid > *, .specs-grid > * { min-width: 0; }
.detail-list dd, .detail-list dt, .queue-meta, .kpi-row-meta { word-break: break-word; overflow-wrap: anywhere; } /* word-break: older Safari */
.mdate { max-width: 100%; }
.mdate-trigger { max-width: 100%; }
@media (max-width: 720px) {
  /* Date range: each date picker gets its own full-width row. */
  .date-range label { flex: 1 1 100%; }
  .date-range .mdate { display: block; flex: 1 1 auto; min-width: 0; }
  .date-range .mdate-trigger { min-width: 0; width: 100%; }
  /* Card headers: tags and buttons wrap onto a new line. */
  .admin-card-head > div, .admin-card-head > .right { flex-wrap: wrap; min-width: 0; }
  /* Save-search and similar inline forms wrap. */
  .save-search { flex-wrap: wrap; }
  .save-search input { flex: 1 1 140px; }
}
@media (max-width: 560px) {
  /* Approvals queue: the View / Approve / Reject buttons go under the item. */
  .queue-item { grid-template-columns: 64px minmax(0, 1fr); }
  .queue-item .row-actions { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; }
}