/* ============================================================
   SRIBAZAAR — SITE THEME
   Hybrid: Landing page colors + ads-demo layout patterns
   ============================================================ */

/* ------------------------------------------------------------  
   DESIGN TOKENS (from sribazaar.css landing page)
   ------------------------------------------------------------ */
:root {
  /* --- color: brand ---
     Rebranded from the original green palette to a corporate blue
     (2026-07-29, client request). Variable names are kept as
     `--green-*` on purpose: they're referenced by var() in ~100+ places
     across theme.css and inline styles in admin/profile Blade views, so
     renaming them would mean touching dozens of files for a change that
     is purely about the color values, not the token names. */
  --green-deep: #1450A3;
  --green-bright: #2E7DD1;
  --green-pale: #E4EEFB;
  --green-pale-faint: #F2F7FD;
  --coral: #FF6E4A;
  --gold: #F2B705;

  /* --- color: neutrals --- */
  --cream: #FBFBF6;
  --white: #FFFFFF;
  --ink: #122720;
  --ink-soft: #4B5D57;
  --ink-faint: #6B7D77;
  --line: #E1E8E2;
  --line-strong: #C9D4CD;

  /* --- semantic aliases --- */
  --color-bg: var(--cream);
  --color-surface: var(--white);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-border: var(--line);
  --color-primary: var(--green-deep);
  --color-primary-hover: var(--green-bright);
  --color-accent: var(--coral);
  --color-accent-2: var(--gold);
  /* Deliberately NOT var(--green-bright) anymore: before the rebrand the
     brand color and "success" happened to both be green, so they shared
     a variable. Now that the brand is blue, success/approved states
     (toasts, approved-ad stat, checkmarks) need their own green so they
     keep the universal green = success meaning instead of turning blue. */
  --color-success: #12945F;
  --color-danger: #D9483A;
  --color-warning: var(--gold);

  /* --- typography --- */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Noto Sans', 'Noto Sans Tamil', 'Noto Sans Sinhala', sans-serif;

  /* --- spacing (use Bootstrap spacing as base) --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- shadow --- */
  --shadow-sm: 0 4px 12px -6px rgba(20, 80, 163, 0.18);
  --shadow-md: 0 10px 24px -14px rgba(20, 80, 163, 0.25);
  --shadow-lg: 0 16px 30px -18px rgba(20, 80, 163, 0.35);

  /* --- layout --- */
  --container-max: 1160px;
  --nav-height: 70px;
  --bottom-nav-height: 66px;
}

/* ------------------------------------------------------------  
   BASE OVERRIDES (on top of Bootstrap)
   ------------------------------------------------------------ */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--green-pale);
  color: var(--color-primary);
}

/* Ensure all interactive elements have visible cursor */
input,
select,
textarea,
button,
a,
[role="button"] {
  cursor: pointer;
}

input,
select,
textarea {
  color: var(--color-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

::selection {
  background: var(--green-pale);
  color: var(--ink);
}

::-moz-selection {
  background: var(--green-pale);
  color: var(--ink);
}

/* ------------------------------------------------------------  
   CONTAINER
   ------------------------------------------------------------ */
.container-custom {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 56px);
}

/* ------------------------------------------------------------  
   BUTTONS (Bootstrap overrides + custom)
   ------------------------------------------------------------ */
.btn-sb-primary {
  background: var(--color-primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 10px 24px;
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-sb-primary:hover {
  background: var(--color-primary-hover);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Bootstrap's base .btn:disabled rule (background-color: var(--bs-btn-disabled-bg))
   has higher specificity than a single custom class like .btn-sb-primary —
   without this override, disabling the button via JS (e.g. while an async
   action is in flight) let that Bootstrap rule win and strip the
   background entirely, leaving the button looking invisible instead of
   just dimmed. Same fix pattern already existed for .btn-sb-danger/.btn-sb-warn;
   primary and outline just never needed it until now. */
.btn-sb-primary:disabled {
  background: var(--color-primary);
  color: var(--white);
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-sb-accent {
  background: var(--color-accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 10px 24px;
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-sb-accent:hover {
  filter: brightness(1.06);
  color: var(--white);
  transform: translateY(-1px);
}

.btn-sb-outline {
  background: transparent;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 10px 24px;
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-sb-outline:hover {
  background: var(--green-pale);
  color: var(--color-primary);
}

.btn-sb-outline:disabled {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--color-text-muted);
  opacity: .7;
  cursor: not-allowed;
}

.btn-sb-ghost {
  background: transparent;
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 10px 24px;
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-sb-ghost:hover {
  background: var(--line);
}

.btn-sb-danger {
  background: var(--color-danger);
  color: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 10px 24px;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.btn-sb-danger:hover:not(:disabled) {
  background: #B93E30;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(217, 72, 58, .35);
}

.btn-sb-danger:disabled {
  background: #9CA3AF;
  color: #fff;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-sb-warn {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 10px 24px;
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-sb-warn:hover {
  background: linear-gradient(135deg, #D97706, #B45309);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(180, 83, 9, .3);
}

.btn-sb-warn:disabled {
  background: #9CA3AF;
  color: #fff;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-sb-danger-dark {
  background: #991B1B;
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 10px 24px;
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-sb-danger-dark:hover {
  background: #7F1D1D;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(153, 27, 27, .3);
}

/* WhatsApp contact button (ad-show contact card) — brand green, always
   pill-shaped like every other .btn-sb-* variant. Was previously two
   copies of inline styles on the page itself, which is how one of them
   silently drifted to a square corner instead of a pill. */
.btn-whatsapp {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-whatsapp:hover {
  background: #1EBE5A;
  border-color: #1EBE5A;
  color: #fff;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------  
   EYEBROW / BADGES
   ------------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-pale);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

.badge-sb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--green-pale);
  color: var(--color-primary);
}

.badge-sb-accent {
  background: #FFE9E2;
  color: var(--color-accent);
}

.badge-sb-gold {
  background: #FDF1CC;
  color: #8A6800;
}

.badge-sb-outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* ---- Featured grid (list cards) ---- */

/* ------------------------------------------------------------  
   AD CARD — horizontal list style (image left, text right)
   ------------------------------------------------------------ */
.ad-card {
  display: flex;
  align-items: stretch;
  height: 122px;
  background: var(--color-surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.ad-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green-bright);
  color: inherit;
}

/* Boosted ads get a premium gold border + tinted background on the card
   itself instead of a text badge — the styling *is* the signal, so it
   needs to survive at a glance even in a dense grid. A flat gold line on
   a flat cream fill read cheap/plasticky, so this uses a soft metallic
   gradient border (double-background trick: one layer painted into the
   padding-box for the fill, one into the border-box for the edge) plus a
   warm, low ambient shadow to give the card real depth at rest. */
.ad-card--boosted {
  border: 1.5px solid transparent;
  background:
    linear-gradient(155deg, #FFFDF6 0%, #FFF6DE 100%) padding-box,
    linear-gradient(135deg, #F8D568 0%, #E8B408 45%, #B8860B 100%) border-box;
  box-shadow: 0 10px 24px -16px rgba(184, 134, 11, 0.4), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.ad-card--boosted:hover {
  border-color: transparent;
  box-shadow: 0 20px 36px -16px rgba(184, 134, 11, 0.5), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.ad-card__media {
  position: relative;
  width: 112px;
  min-width: 112px;
  background: var(--green-pale);
  overflow: hidden;
}

.ad-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

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

.ad-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-pale);
  color: var(--color-primary);
  font-size: 22px;
  opacity: .4;
}

.ad-card__overlay {
  display: none;
}

.ad-card__cat-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  z-index: 3;
  transition: transform .25s ease;
}

.ad-card:hover .ad-card__cat-badge {
  transform: scale(1.1);
}

.cat-bg-land {
  color: var(--green-deep);
}

.cat-bg-real_estate {
  color: var(--green-bright);
}

.cat-bg-vehicles {
  color: var(--coral);
}

.cat-bg-pets {
  color: #8A6800;
}

.ad-card__like {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border: none;
  cursor: pointer;
  z-index: 3;
  transition: all .2s ease;
}

.ad-card__like:hover {
  transform: scale(1.15);
  color: var(--color-accent);
}

.ad-card__like.is-saved {
  color: var(--color-accent);
}

.ad-card__like i {
  font-size: 11px;
}

.ad-card__body {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.ad-card__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  margin-bottom: 2px;
}

.ad-card__eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.ad-card__title {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  /* Explicit top margin, not just bottom — this is now a real <h2> (was a
     plain <div>) for crawler/accessibility semantics, and h2's UA-stylesheet
     top margin would otherwise push it out of this card's fixed height. */
  margin: 0 0 4px;
}

.ad-card__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ad-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-primary);
  min-width: 0;
}

.ad-card__nego {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  /* A darkened one-off, not var(--color-accent) directly — at this size
     the label is normal text under WCAG (nowhere near the "large text"
     18.66px-bold cutoff), so it needs a 4.5:1 ratio against its own
     #FFE9E2 chip. The raw accent coral only clears ~2.5:1 there; this
     shade clears ~5.1:1 while staying visibly the same coral family.
     Scoped to this one chip rather than changing --color-accent, which
     is used in plenty of other places (larger text, icon fills) where
     the brighter coral is already fine. */
  color: #B23A1D;
  background: #FFE9E2;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  white-space: nowrap;
}

.ad-card__divider {
  border-top: 1px solid var(--color-border);
  margin: 6px 0 6px;
}

.ad-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ad-card__loc,
.ad-card__time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--color-text-muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Equal flex basis on both ends puts the verified pill between them on the
   row's exact centre line, instead of leaving it hanging off the end of the
   location text. With no pill present the two halves simply meet in the
   middle, which looks identical to the previous space-between layout. */
.ad-card__loc {
  flex: 1 1 0;
}

.ad-card__time {
  flex: 1 1 0;
  justify-content: flex-end;
}

.ad-card__loc i,
.ad-card__time i {
  font-size: 10px;
  flex-shrink: 0;
  opacity: .7;
}

/* The location text is the one part of this row allowed to truncate — the
   pin icon beside it, and the verified pill that now sits centred between
   the location and the time, stay fixed-size so neither is ever pushed out
   of the fixed-height card. */
.ad-card__loc-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Deliberately smaller than the base .pc-badge/.verified-pill sizing —
   this row sits inside a fixed-height card (see .ad-card), so any extra
   height here (line-height, padding, border) grows the whole meta row
   and, since .ad-card__body is vertically centered, shoves the title up
   into the card's overflow:hidden clip. line-height:1 in particular
   matters — without it the pill's line box is taller than its own
   content and taller than the plain-text location/time next to it. */
.ad-card__verified-pill {
  flex-shrink: 0;
  padding: 0 5px;
  gap: 2px;
  font-size: 8px;
  line-height: 1;
  border-width: 0;
  white-space: nowrap;
}

.ad-card__verified-pill .verified-badge--xs {
  width: 8px;
  height: 8px;
}

.ad-card__verified-pill .verified-badge--xs .verified-badge__seal {
  font-size: 8px;
}

.ad-card__verified-pill .verified-badge--xs .verified-badge__check {
  font-size: 4px;
}

/* ---- Small/large phones — a bit more breathing room ---- */
@media (min-width: 420px) {
  .ad-card {
    height: 136px;
  }

  .ad-card__media {
    width: 128px;
    min-width: 128px;
  }

  .ad-card__body {
    padding: 10px 12px;
  }

  .ad-card__eyebrow {
    font-size: 10px;
  }

  .ad-card__title {
    font-size: 13.5px;
  }

  .ad-card__price {
    font-size: 15.5px;
  }

  .ad-card__loc,
  .ad-card__time {
    font-size: 11px;
  }
}

/* ---- Tablet and up — restore the original balanced layout ---- */
@media (min-width: 600px) {
  .ad-card {
    height: 150px;
  }

  .ad-card__media {
    width: 200px;
    min-width: 200px;
  }

  .ad-card__placeholder {
    font-size: 32px;
  }

  .ad-card__cat-badge {
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .ad-card__like {
    bottom: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
  }

  .ad-card__like i {
    font-size: 13px;
  }

  .ad-card__body {
    padding: 14px 16px;
  }

  .ad-card__eyebrow {
    font-size: 11px;
  }

  .ad-card__title {
    font-size: 14.5px;
  }

  .ad-card__price {
    font-size: 17px;
  }

  .ad-card__nego {
    font-size: 10px;
    padding: 2px 8px;
  }

  .ad-card__divider {
    margin: 9px 0 8px;
  }

  .ad-card__loc,
  .ad-card__time {
    font-size: 12px;
  }
}

@media (min-width:901px) {
  .ad-card {
    height: 170px;
  }

  .ad-card__media {
    width: 240px;
    min-width: 240px;
  }

  .ad-card__body {
    padding: 16px 20px;
  }

  .ad-card__eyebrow {
    font-size: 11.5px;
  }

  .ad-card__title {
    font-size: 15.5px;
  }

  .ad-card__price {
    font-size: 18px;
  }

  .ad-card__loc,
  .ad-card__time {
    font-size: 12.5px;
  }
}

/* ------------------------------------------------------------  
   CATEGORY CARD (market stall style)
   ------------------------------------------------------------ */
.category-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}

.category-card .icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
}

.category-card .label {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.3;
  display: block;
}

.category-card .ad-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
  display: block;
  margin-top: -4px;
}

.category-card:nth-of-type(7n+1) .icon-wrap {
  background: var(--green-deep);
}

.category-card:nth-of-type(7n+2) .icon-wrap {
  background: var(--coral);
}

.category-card:nth-of-type(7n+3) .icon-wrap {
  background: var(--green-bright);
}

.category-card:nth-of-type(7n+4) .icon-wrap {
  background: var(--gold);
}

/* ------------------------------------------------------------  
   SITE HEADER
   ------------------------------------------------------------ */
/* Both header and footer read as blue now, but deliberately not the
   *same* blue: this bar is its own diagonal gradient (--ink into the
   brand blue, --green-deep) rather than reusing the footer's flat
   --footer-bg navy, so it doesn't read as "the footer again" further up
   the page — and, since the 2026-07-29 blue rebrand, ties the header
   directly to the same primary color used for every button/badge/link
   on the page, instead of the old gold-tinted bar that no longer
   matched the brand. No border — same reasoning as removing the old
   three-color gradient line that used to sit under this bar; the
   background change is the separation from the page now, not a
   hairline. Every text/icon color below is reused or re-verified
   against BOTH gradient ends (the --ink end is close to the footer's
   old background, already checked; --green-deep's contrast
   values are noted inline since the gradient end changed). */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 5vw, 56px);
  height: 60px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--green-deep) 100%);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* Decorative gold "stars" scattered across the header — kept gold on
   purpose after the rebrand: against the new blue gradient they read as
   a warm accent glinting on a cool "night sky" surface rather than
   competing with it, and gold stays purely ambient/decorative here so it
   never has to double as an interactive-state color the way blue now
   consistently does everywhere else on the page (see the nav
   hover/active pill below). Purely visual, aria-hidden, and inert to
   clicks (pointer-events: none) so it can never sit between a visitor
   and a nav link. It's a plain <div> placed first inside .site-header
   and absolutely positioned over the whole bar; every other direct
   child of .site-header gets position:relative + z-index:1 below so the
   stars (z-index:0) paint behind the logo/nav/pills rather than on top
   of them — an absolutely positioned box would otherwise paint above
   ordinary static flex children by default. */
.nav-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.nav-star {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: var(--size, 2px);
  height: var(--size, 2px);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 4px 1px rgba(242, 183, 5, .55);
  /* Static fallback when motion is reduced (see the animation rule below)
     — still visible as a fixed point of light, just not twinkling. */
  opacity: .5;
}

/* Each star's own --dur/--delay (set inline per star, see the markup)
   keeps them out of sync with each other, so the row reads as randomly
   twinkling rather than one uniform pulse. Gated behind
   prefers-reduced-motion: no-preference — under "reduce" the rule above
   still renders the stars, just motionless. */
@media (prefers-reduced-motion: no-preference) {
  .nav-star {
    animation: nav-star-twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
  }
}

@keyframes nav-star-twinkle {
  0%, 100% { opacity: .15; transform: scale(.75); }
  50% { opacity: .95; transform: scale(1.15); }
}

/* .site-logo is shared with the admin panel's TEXT logo (layouts/
   admin.blade.php — "Sri<span class="brand-accent">Bazaar</span>" next
   to a colored .dot, both with their own inline color), so it has to
   stay usable with no background/card of its own. */
.site-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.site-logo .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  display: inline-block;
}

.site-logo .brand-accent {
  color: var(--color-primary);
}

/* The header's own image logo mark is dark navy linework (see
   .footer-logo-badge's comment in the FOOTER section) — same problem
   here as there, same fix: its own small light card so it doesn't
   disappear into the dark bar, layered on top of the shared .site-logo
   above rather than replacing it. */
.site-logo.header-logo-badge {
  display: inline-flex;
  background: var(--white);
  padding: 6px 14px;
  border-radius: 12px;
  /* Blue-tinted to match .footer-logo-badge's shadow — same light card,
     same brand tie-in, top and bottom of the page. */
  box-shadow: 0 1px 4px rgba(20, 80, 163, .28);
  /* .nav-stars (below) is z-index:0 inside .site-header; lift this
     above it so the star field paints behind the logo, not on top. */
  position: relative;
  z-index: 1;
}

.site-logo-img {
  height: 34px;
  width: auto;
  display: block;
  object-fit: contain;
}

.site-logo-img.footer-logo-img {
  height: 56px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-weight: 500;
  font-size: 14px;
  /* white @ 82% → 10.9:1 against --ink, 5.8:1 against --green-deep (the
     brand-blue gradient end since the rebrand) — both comfortably clear
     4.5:1. */
  color: rgba(255, 255, 255, .82);
  /* paint above .nav-stars (z-index:0) — see header-logo-badge comment. */
  position: relative;
  z-index: 1;
}

.nav-links a:hover,
.nav-links button:hover {
  /* --green-pale: 13.4:1 / 6.6:1 against the two gradient ends — chosen
     over --color-primary (the base link color elsewhere on the page)
     specifically because --color-primary is dark and would nearly
     vanish against either end of this dark bar. */
  color: var(--green-pale);
}

.nav-links a.is-active,
.nav-links button.is-active {
  color: var(--green-pale);
  font-weight: 600;
}

/* The "Post Ad" nav trigger is a <button> (opens the choice modal) rather
   than a link — match the <a> baseline so it doesn't look out of place.
   background/border/font reset here (not as an inline style on the
   element) so the hover/is-active pill backgrounds below can actually
   apply — an inline style attribute beats any external :hover/.is-active
   rule regardless of selector specificity, which was silently keeping
   this button's background stuck at "none" through both states. */
.nav-links button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: inherit;
  background: none;
  border: none;
  font: inherit;
}

/* ------------------------------------------------------------  
   LANGUAGE SWITCHER
   ------------------------------------------------------------ */
.lang-switch {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.lang-switch button,
.lang-switch a {
  position: relative;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.lang-switch button:hover,
.lang-switch a:hover {
  color: var(--color-primary);
  background: var(--green-pale);
}

/* Soft divider between locale options — sits in the gap so it never
   touches the hover/active pill background. */
.lang-switch button:not(:last-child),
.lang-switch a:not(:last-child) {
  margin-right: 9px;
}

.lang-switch button:not(:last-child)::after,
.lang-switch a:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5px;
  width: 1.5px;
  height: 16px;
  background: var(--line-strong);
  transform: translateY(-50%);
}

.lang-switch button.active,
.lang-switch a.active {
  background: var(--color-primary);
  color: var(--white);
}

/* ------------------------------------------------------------  
   BOTTOM NAV (Mobile)
   ------------------------------------------------------------ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-top: none;
  z-index: 50;
  padding: 8px 16px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  pointer-events: none;
}

.bottom-nav .nav-pill {
  pointer-events: auto;
}

/* Plain straight-top pill — no notch/cutout. The "+" button (below) simply
   floats above it via absolute positioning; position:relative here is what
   anchors that. */
.bottom-nav .nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px 8px;
  background: var(--white);
  border: 1.5px solid rgba(20, 80, 163, 0.35);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}

.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  transition: all 200ms ease;
}

.bottom-nav .nav-item:hover,
.bottom-nav .nav-item.is-active {
  color: var(--color-primary);
}

.bottom-nav .nav-item i {
  font-size: 18px;
}

/* Unread-chat count dot on the "Chat" nav link — same small circular badge
   in both the desktop header nav and the mobile bottom nav, just anchored
   differently since one is a horizontal icon+label row and the other is a
   stacked icon-over-label column. position:relative on the link (not
   display) is what lets the badge sit absolutely without being pulled
   into either layout's own flex flow. Server-rendered on first load (see
   $navUnreadChatCount / ChatBadgeComposer) and kept live afterwards by
   public/js/push-notifications.js. */
.nav-chat-link {
  position: relative;
}

.chat-nav-badge {
  position: absolute;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--coral);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--white);
  pointer-events: none;
}

.bottom-nav .nav-item.nav-chat-link .chat-nav-badge {
  top: -2px;
  left: calc(50% + 5px);
}

/* The base white ring above is right for the bottom-nav's white pill, but
   in the header (.nav-links only exists there) it would sit on the dark
   gradient bar as a stray white halo instead of a seamless cutout. A
   rough midpoint of the two gradient ends isn't a pixel-perfect match at
   every position along it, but reads as "part of the dark bar" rather
   than "a mismatched ring" either way. */
.nav-links .chat-nav-badge {
  box-shadow: 0 0 0 2px #133C62;
}

.bottom-nav .nav-sell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), #ff8a6a);
  color: #fff;
  font-size: 22px;
  margin-top: -20px;
  box-shadow: 0 4px 14px rgba(255, 110, 74, 0.4);
  text-decoration: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.mobile-only {
  display: none !important;
}

@media (max-width: 900px) {
  .bottom-nav {
    display: block;
  }

  /* No body padding-bottom here anymore — that clearance for the fixed
     bottom-nav used to live on body, which left a strip of its own cream
     background showing below the footer. .site-footer now carries the
     equivalent padding itself (see its rule further down), so that strip
     fills with the footer's dark background instead. */

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }
}

/* ------------------------------------------------------------
   FOOTER — dark brand-blue surface

   Originally a flat --ink (the same near-black used for body text
   elsewhere) — visually that read as "almost black" rather than as part
   of the new blue brand, so the footer now sits on its own --footer-bg:
   a navy dark enough to still need light text, but clearly blue rather
   than neutral. Every text/icon token below is a *local* palette (scoped
   as custom properties on .site-footer itself, not the light-theme
   --color-text/--color-text-muted/--color-border, which are tuned for
   dark text on a light surface and read as near-invisible here) and was
   re-checked against WCAG 2.1 contrast ratios against --footer-bg:

     --footer-text        white @ 85% →  8.6:1  (links, contact details)
     --footer-text-muted  white @ 65% →  5.7:1  (tagline, copyright line)
     --footer-heading     white @ 72% →  6.7:1  (uppercase column labels,
                                                  13px/600 — too small to
                                                  count as "large text",
                                                  so held to the 4.5:1
                                                  body-text minimum anyway)
     --footer-divider     white @ 12%          (decorative hairlines only)
     --footer-control-border white @ 45% → ~3.6:1 against both the footer
                                                  bg and the near-black
                                                  app-store badges — the
                                                  badges and social icons
                                                  are interactive controls,
                                                  which need a real
                                                  perceivable boundary, not
                                                  just a decorative line.
                                                  (Bumped from 35% → 45%
                                                  now that the bg itself is
                                                  lighter/bluer than --ink.)
     --footer-icon-accent  --green-pale (a pale blue, not --green-bright):
                                                  the mid-tone brand blue
                                                  used for icon accents on
                                                  light surfaces only hits
                                                  ~2.7:1 against this blue
                                                  bg — a mid-blue icon on a
                                                  mid-blue bg is a bad pair
                                                  regardless of the exact
                                                  shade, so the accent
                                                  needs to be light instead
                                                  of brand-saturated here.
                                                  Pale blue clears 9.7:1.
   ------------------------------------------------------------ */
.site-footer {
  --footer-bg: #123A6E;
  --footer-heading: rgba(255, 255, 255, .72);
  --footer-text: rgba(255, 255, 255, .85);
  --footer-text-muted: rgba(255, 255, 255, .65);
  --footer-divider: rgba(255, 255, 255, .12);
  --footer-control-border: rgba(255, 255, 255, .45);
  --footer-icon-accent: var(--green-pale);

  background: var(--footer-bg);
  padding: 40px 0 0;
  margin-top: 60px;
}

/* Below 900px the fixed .bottom-nav pill needs the same clearance body
   used to provide on its own — carrying it here instead means the space
   is filled by the footer's own --footer-bg (extending the dark blue
   surface all the way to the bottom of the page) rather than leaving a
   strip of the page's cream background showing beneath the footer's
   visible content. Nothing above this — the columns, the copyright bar —
   moves; this is pure padding added after it. */
@media (max-width: 900px) {
  .site-footer {
    padding-bottom: calc(var(--bottom-nav-height) + 16px);
  }
}

/* The brand mark itself is dark navy linework (see
   public/images/sribazaar-logo-mark.png) — designed to sit on a light
   surface, so it would all but disappear directly on --ink. Rather than
   flattening it to a monochrome silhouette (losing the gold flame accent),
   it gets its own small light card to stand on, the way most brand marks
   with real color get treated on a dark footer. */
.site-logo.footer-logo-badge {
  display: inline-flex;
  background: var(--white);
  padding: 10px 20px;
  border-radius: 14px;
  /* Blue-tinted rather than plain black, so the one light-colored shape
     on this dark footer visibly belongs to the brand rather than reading
     as a generic drop shadow. */
  box-shadow: 0 2px 10px rgba(20, 80, 163, .28);
}

/* Edge-to-edge like .site-header, not boxed to --container-max like the
   page sections above it — the footer is meant to read as a full-width
   band, with the same clamp()-based side padding the header uses rather
   than a centered fixed-width column. */
.footer-inner {
  padding-inline: clamp(16px, 5vw, 56px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 32px;
}

/* Added only when the admin has configured at least one app-store link
   (see the Get App .footer-col in layouts/app.blade.php) — an extra
   column rather than the old horizontal band, so the badges stack in
   their own list instead of interrupting the layout with a divider on
   either side of a centered row.

   The last track is pinned to at least 200px rather than a plain 1fr:
   at viewports just above the 720px mobile collapse, four equal-ish 1fr
   tracks squeezed this column narrower than the 176px-wide app badges,
   wrapping/clipping their text — minmax() keeps this one column from
   ever getting that tight, letting the others share what's left. */
.footer-grid--5col {
  grid-template-columns: 1.5fr repeat(3, 1fr) minmax(200px, 1fr);
}

.footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--footer-heading);
  margin-bottom: 12px;
  font-weight: 600;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--footer-text);
  margin-bottom: 8px;
  transition: color 200ms ease;
}

.footer-col a:hover {
  color: var(--green-pale);
}

.footer-tagline {
  font-size: 14px;
  color: var(--footer-text-muted);
}

.footer-contact-line {
  font-size: 14px;
  color: var(--footer-text);
}

.footer-contact-line i {
  color: var(--footer-icon-accent);
  width: 14px;
  text-align: center;
}

/* The Get App column's own list of badges, stacked rather than the old
   horizontal row — each badge keeps its natural (not stretched) width so
   two different-width badges don't look mismatched sharing one column. */
.footer-app-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--footer-divider);
  font-size: 12px;
  color: var(--footer-text-muted);
}

.footer-bottom a {
  color: var(--footer-text-muted);
}

.footer-bottom a:hover {
  color: var(--green-pale);
}

.footer-social-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--footer-control-border);
  color: var(--footer-text);
  font-size: 15px;
  line-height: 1;
  margin-bottom: 0;
  transition: all 0.2s ease;
}
.footer-social-icon i {
  font-style: normal;
  color: inherit;
}

/* Each platform hovers to its own brand color, with the icon forced to
   white — guarantees the glyph never blends into its own background. */
.footer-social-icon:hover {
  color: #fff !important;
  transform: translateY(-2px);
}

.footer-social-icon--whatsapp:hover { background: #25D366; }
.footer-social-icon--facebook:hover { background: #1877F2; }
.footer-social-icon--instagram:hover { background: linear-gradient(135deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888); }
.footer-social-icon--youtube:hover { background: #FF0000; }
.footer-social-icon--tiktok:hover { background: #000; }
.footer-social-icon--twitter:hover { background: #000; }

/* min-content-safe: the badge's own text ("GET IT ON" / "Google Play")
   needs roughly 150-170px to never wrap, and the Get App column used to
   be an ordinary 1fr track that could get squeezed narrower than that
   between the desktop breakpoint and the 720px mobile collapse — that
   squeeze (not a missing icon or bad markup) was what made the badges
   wrap/clip and look broken. See .footer-grid--5col's minmax() fix. */
.footer-app-badge {
  /* !important because .footer-col a { display: block; } (below) also
     matches this <a> — it's nested inside a .footer-col too — and that
     selector's added element specificity (0,1,1) beats a lone class
     (0,1,0), so without this the icon and text block-stack instead of
     sitting side by side. .footer-social-icon needed the exact same fix
     for the same reason. */
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  width: 176px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #111;
  /* The badge's own near-black fill still barely differs from the
     footer's --footer-bg (contrast ~1.7:1 — practically invisible
     without this), so the ring is what actually defines its edge rather
     than a color difference doing the job. */
  border: 1px solid var(--footer-control-border);
  color: #fff !important;
  font-size: 12px;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.footer-app-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .32);
}

/* A fixed-width box around the glyph (not just a font-size) — the Apple
   mark and the Google Play triangle have different natural widths, so
   without this the two badges' text columns don't line up with each
   other even though the badges themselves are the same size. */
.footer-app-badge i {
  width: 22px;
  flex-shrink: 0;
  font-size: 20px;
  text-align: center;
}

.footer-app-badge > div {
  min-width: 0;
}

.footer-app-badge small,
.footer-app-badge > div > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-app-badge small {
  font-size: 10px;
  opacity: 0.8;
  display: block;
  line-height: 1;
}

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

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ------------------------------------------------------------  
   SECTION HEADERS
   ------------------------------------------------------------ */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-head h2 {
  font-size: clamp(20px, 3vw, 28px);
  margin: 0;
}

.section-head .see-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.section-head .see-all:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------  
   AD GRID — single column list
   ------------------------------------------------------------ */
.ad-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ------------------------------------------------------------  
   HORIZONTAL SCROLL
   ------------------------------------------------------------ */
.scroll-x {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.scroll-x::-webkit-scrollbar {
  height: 4px;
}

.scroll-x::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

.scroll-x>* {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 280px;
}

/* ------------------------------------------------------------  
   FORMS
   ------------------------------------------------------------ */
.form-sb .form-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 6px;
}

.form-sb .form-control,
.form-sb .form-select {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 15px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Bootstrap's .form-select reserves extra right padding for its dropdown
   arrow icon; the uniform 14px above collapses that space, so long option
   text (e.g. "Sri Lanka (+94)") runs underneath the arrow. Restore it here
   without touching .form-control, which has no arrow to clear. */
.form-sb .form-select {
  padding-right: 34px;
  text-overflow: ellipsis;
}

.form-sb .form-control:focus,
.form-sb .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--green-pale);
}

.form-sb .form-control::placeholder {
  color: var(--ink-faint);
}

/* Country-code dropdown + local-number input, used on registration and
   profile-edit phone/WhatsApp fields so a full, dialable number is always
   captured instead of an ambiguous bare local number. */
.phone-field-group {
  display: flex;
  gap: 8px;
}

.phone-field-group .form-control,
.phone-field-group .menu-input {
  flex: 1;
  min-width: 0;
}

/* Collapsed trigger — flag + code only (see components/country-code-dropdown
   .blade.php); the full country name only appears once the menu is open,
   so the trigger never needs to truncate or fight the dropdown caret. */
.cc-dropdown {
  flex: 0 0 auto;
}

.cc-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 15px;
  white-space: nowrap;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.cc-dropdown-toggle:hover {
  border-color: var(--color-primary);
}

.cc-dropdown-toggle:focus,
.cc-dropdown-toggle.show {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--green-pale);
  outline: none;
}

.cc-dropdown-flag {
  font-size: 18px;
  line-height: 1;
}

.cc-dropdown-code {
  font-weight: 600;
  color: var(--color-text);
}

.cc-dropdown-caret {
  font-size: 11px;
  color: var(--ink-faint);
  margin-left: 2px;
}

/* Open menu — flag + code + full country name per row, scrollable so 18+
   countries don't push the page height around. */
.cc-dropdown-menu {
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(16, 24, 20, .14);
}

.cc-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.cc-dropdown-item:hover,
.cc-dropdown-item:focus {
  background: var(--green-pale-faint);
}

.cc-dropdown-item-flag {
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}

.cc-dropdown-item-code {
  font-weight: 600;
  color: var(--color-text);
  flex-shrink: 0;
  min-width: 44px;
}

.cc-dropdown-item-name {
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-hint {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin: 2px 0 10px;
  line-height: 1.5;
}

/* "Does this number have WhatsApp?" Yes/No segmented control — mirrors the
   .ad-wizard-lang-option card-radio pattern already used elsewhere. */
.wa-toggle {
  display: flex;
  gap: 10px;
}

.wa-toggle-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--white);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.wa-toggle-option:hover {
  border-color: var(--color-primary);
  background: var(--green-pale-faint);
}

.wa-toggle-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--green-pale-faint);
  box-shadow: 0 0 0 3px var(--green-pale);
}

.wa-toggle-option input[type="radio"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.wa-toggle-option i.fa-whatsapp {
  color: #25D366;
}

/* ------------------------------------------------------------
   AD WIZARD — multi-step post/edit listing form
   ------------------------------------------------------------ */
.ad-wizard-progress {
  display: flex;
  align-items: flex-start;
  margin-bottom: 28px;
  overflow-x: auto;
  padding-top: 8px;
  padding-bottom: 4px;
}

.ad-wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 56px;
  position: relative;
}

.ad-wizard-step-line {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--line-strong);
  z-index: 1;
  transition: background 300ms ease;
}

.ad-wizard-step:last-child .ad-wizard-step-line {
  display: none;
}

.ad-wizard-step.is-done .ad-wizard-step-line {
  background: var(--color-primary);
}

.ad-wizard-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--white);
  border: 2px solid var(--line-strong);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: all 250ms ease;
  position: relative;
  z-index: 2;
}

.ad-wizard-step.is-done .ad-wizard-step-circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  cursor: pointer;
}

/* Editing (unlike the create wizard) lets you jump to ANY step, not just
   completed ones — see the progress-circle click handler in
   ads/edit.blade.php. Scoped to this modifier class so the create wizard's
   still-sequential steps don't visually imply a clickability they don't have. */
.ad-wizard-progress--jumpable .ad-wizard-step-circle {
  cursor: pointer;
}

.ad-wizard-step.is-active .ad-wizard-step-circle {
  background: var(--white);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--green-pale);
  transform: scale(1.08);
}

.ad-wizard-step-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-wizard-step.is-active .ad-wizard-step-label,
.ad-wizard-step.is-done .ad-wizard-step-label {
  color: var(--color-text);
}

.ad-wizard-panel {
  display: none;
}

.ad-wizard-panel.is-active {
  display: block;
  animation: adWizardFadeIn 280ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes adWizardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ad-wizard-panel-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--color-text);
}

.ad-wizard-panel-sub {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

.ad-wizard-nav {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.ad-wizard-nav .btn-sb-outline {
  flex: 0 0 auto;
  min-width: 132px;
  justify-content: center;
}

/* Slim pill "Cancel" action next to the wizard title — deliberately
   quieter than the full-size .btn-sb-outline used inside the wizard nav,
   since this is a secondary/destructive exit, not a step action. Turns
   danger-colored on hover as a subtle warning before the confirm modal
   even opens. */
.ad-wizard-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 16px;
  margin-bottom: 4px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 200ms cubic-bezier(.16, 1, .3, 1), color 200ms cubic-bezier(.16, 1, .3, 1), background 200ms cubic-bezier(.16, 1, .3, 1);
}

.ad-wizard-cancel-btn i {
  font-size: 11px;
}

.ad-wizard-cancel-btn:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: rgba(217, 72, 58, .06);
}

.ad-wizard-nav .ad-wizard-next,
.ad-wizard-nav .ad-wizard-submit {
  /* Match the Back button's auto-sized width instead of stretching to
     fill the row — both buttons now read as the same size, with Next
     pinned to the right edge via margin-left: auto. */
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 132px;
  justify-content: center;
}

/* Language step */
.ad-wizard-lang-grid {
  display: grid;
  gap: 10px;
}

.ad-wizard-lang-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  background: var(--white);
}

.ad-wizard-lang-option:hover {
  border-color: var(--color-primary);
  background: var(--green-pale-faint);
}

.ad-wizard-lang-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--green-pale-faint);
  box-shadow: 0 0 0 3px var(--green-pale);
}

.ad-wizard-lang-option input[type="radio"] {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ad-wizard-lang-text {
  flex: 1;
  min-width: 0;
}

.ad-wizard-lang-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
}

.ad-wizard-lang-native {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Category step — searchable dropdown (scales to any number of
   categories, unlike a fixed card grid). Same visual language as the
   language-step cards above it: border-radius:var(--radius-md), the
   var(--line-strong)/var(--color-primary) border swap, and the
   var(--green-pale) focus ring. */
.category-combobox {
  position: relative;
}

.category-combobox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.category-combobox-field:focus-within {
  border-color: var(--color-primary);
}

.category-combobox-input:focus {
  outline: none;
  box-shadow: none;
}

.category-combobox-icon {
  color: var(--color-text-muted);
  font-size: 14px;
  flex-shrink: 0;
}

.category-combobox-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 13px 0;
  font-size: 14.5px;
  color: var(--color-text);
  font-family: inherit;
}

.category-combobox-input::placeholder {
  color: var(--color-text-muted);
}

.category-combobox-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--line-strong);
  color: var(--color-text-muted);
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 180ms ease, color 180ms ease;
}

.category-combobox-clear:hover {
  background: var(--color-accent);
  color: #fff;
}

.category-combobox-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 264px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 32px -18px rgba(18, 39, 32, .35);
}

.category-combobox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text);
  transition: background 120ms ease;
}

.category-combobox-option + .category-combobox-option {
  margin-top: 2px;
  border-top: 1px solid var(--line-strong);
  padding-top: 12px;
}

.category-combobox-option i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-pale);
  color: var(--color-primary);
  font-size: 13px;
  flex-shrink: 0;
}

.category-combobox-option:hover,
.category-combobox-option.is-active {
  background: var(--green-pale-faint);
}

.category-combobox-option.is-selected {
  background: var(--green-pale);
  font-weight: 600;
}

/* The pinned "Other" row in the city combobox (see makeCityCombobox() in
   ads/create.blade.php) — always the last option, visually set apart from
   real suggestions so picking it reads as a deliberate "none of these"
   choice rather than just another city. */
.category-combobox-option--other {
  border-top: 1px solid var(--line-strong);
  margin-top: 4px;
  padding-top: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

.category-combobox-option--other i {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.category-combobox-empty {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
}

/* ------------------------------------------------------------
   PRICE STRIP (details page)
   ------------------------------------------------------------ */
.price-strip {
  background: var(--color-primary);
  color: var(--white);
  padding: 16px 24px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.price-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg,
      transparent,
      transparent 8px,
      rgba(255, 255, 255, 0.04) 8px,
      rgba(255, 255, 255, 0.04) 16px);
}

.price-strip>* {
  position: relative;
  z-index: 1;
}

.price-strip .price-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
}

/* ------------------------------------------------------------  
   PROFILE HEADER
   ------------------------------------------------------------ */
.profile-header {
  background: var(--color-primary);
  color: var(--white);
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

.profile-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg,
      transparent,
      transparent 8px,
      rgba(255, 255, 255, 0.04) 8px,
      rgba(255, 255, 255, 0.04) 16px);
}

.profile-header>* {
  position: relative;
  z-index: 1;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------  
   TOAST
   ------------------------------------------------------------ */
.toast-container-sb {
  position: fixed;
  bottom: 80px;
  right: 16px;
  left: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-sb {
  pointer-events: auto;
  background: var(--white);
  color: var(--color-text);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
  border-left: 4px solid var(--color-primary);
  animation: toastIn 300ms ease-out;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast-sb .toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.toast-sb .toast-msg {
  flex: 1;
}

.toast-sb .toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease;
  flex-shrink: 0;
}

.toast-sb .toast-close:hover {
  color: var(--color-text);
}

.toast-sb.is-success {
  border-left-color: var(--color-primary);
}

.toast-sb.is-success .toast-icon {
  color: var(--color-primary);
}

.toast-sb.is-error {
  border-left-color: var(--color-danger);
}

.toast-sb.is-error .toast-icon {
  color: var(--color-danger);
}

.toast-sb.is-warning {
  border-left-color: var(--color-warning);
}

.toast-sb.is-warning .toast-icon {
  color: var(--color-warning);
}

.toast-sb.toast-exit {
  animation: toastOut 250ms ease-in forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.96);
  }

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

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-8px) scale(.96);
  }
}

@media (min-width:901px) {
  .toast-container-sb {
    left: auto;
    width: 380px;
  }
}

/* ------------------------------------------------------------  
   FILTER SHEET (bottom sheet on mobile)
   ------------------------------------------------------------ */
.sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  align-items: flex-end;
  justify-content: center;
}

.sheet-overlay.is-open {
  display: flex;
}

.sheet {
  background: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px 24px 32px;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  animation: sheetUp 300ms ease-out;
}

@keyframes sheetUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

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

@media (min-width: 640px) {
  .sheet-overlay {
    align-items: center;
  }

  .sheet {
    border-radius: var(--radius-lg);
    max-width: 480px;
  }
}

/* ------------------------------------------------------------  
   AUTH CARD
   ------------------------------------------------------------ */
.auth-card {
  max-width: 420px;
  margin: 40px auto;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
}

/* ---- Google Sign-In ---- */

/* "or" rule between the email form and the Google button on the auth pages */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ---- Connected accounts (profile) ---- */
.conn-intro p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}

.conn-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid #F5C2C0;
  background: #FDECEC;
  border-radius: var(--radius-sm);
  color: #A32D2D;
  font-size: 13px;
  line-height: 1.5;
}

.conn-provider {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.conn-provider__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.conn-provider__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.conn-provider__text h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.conn-provider__text p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* One row per connected account, not per provider — the same provider can
   legitimately appear more than once. */
.conn-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.conn-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.conn-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.conn-item__label {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conn-item__meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.conn-item__locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--color-text-muted);
}

.conn-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}

.conn-connect-btn:hover {
  border-color: var(--color-primary);
  background: var(--green-pale-faint);
  color: var(--color-text);
}

.conn-unavailable {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.conn-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--green-pale-faint);
}

.conn-note p {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.conn-note a {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

/* "Continue with Google" — a plain link starting the OAuth redirect flow,
   so unlike Google's rendered widget it can carry the site's own styling.
   Matches .hero-post-card__btn: 46px tall, --radius-sm corners and the
   1.5px --line-strong border used by the search field and cards. */
.gsi-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0 18px;
  background: var(--color-surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.gsi-btn:hover {
  background: var(--green-pale-faint);
  border-color: var(--color-primary);
  color: var(--color-text);
}

.gsi-btn:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--green-pale);
}

.gsi-btn__logo {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.gsi-btn__label {
  /* Longer in Tamil and Sinhala — shrink before the button ever wraps. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Continue as guest" sits under the One Tap overlay, which Google pins to
   the top-right on desktop and across the top on mobile. Fixed rather than
   in-flow so it cannot shift the page while the overlay is deciding whether
   to appear; it removes itself once dismissed or if the prompt is
   suppressed. */
.gsi-guest-bar {
  position: fixed;
  z-index: 1040;
  top: 96px;
  right: 16px;
}

.gsi-guest-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  padding: 7px 14px;
  transition: color .2s ease, border-color .2s ease;
}

.gsi-guest-btn:hover {
  color: var(--color-text);
  border-color: var(--line-strong);
}

@media (max-width: 600px) {
  .gsi-guest-bar {
    top: auto;
    bottom: calc(var(--bottom-nav-height) + 12px);
    right: 50%;
    transform: translateX(50%);
  }
}

.auth-seal {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px double var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--color-primary);
  font-size: 24px;
}

.seller-reject-alert {
  display: flex;
  gap: 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 20px;
  text-align: left;
}

.seller-reject-alert-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FEE2E2;
  color: #DC2626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.seller-reject-alert-title {
  font-size: 14px;
  font-weight: 700;
  color: #991B1B;
  margin: 0 0 3px;
}

.seller-reject-alert-reason {
  font-size: 13px;
  line-height: 1.5;
  color: #7F1D1D;
  margin: 0;
}

.seller-reject-alert-date {
  font-size: 11.5px;
  color: #B91C1C;
  opacity: .8;
  margin: 6px 0 0;
}

.auth-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 6px;
}

.auth-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 24px;
}

/* ------------------------------------------------------------  
   EMPTY STATE
   ------------------------------------------------------------ */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
}

.empty-state i {
  font-size: 48px;
  color: var(--line);
  margin-bottom: 16px;
}

.empty-state h3 {
  color: var(--color-text);
  font-size: 20px;
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 15px;
  margin-bottom: 20px;
}

/* ------------------------------------------------------------  
   GATE PANEL (auth required)
   ------------------------------------------------------------ */
.gate-panel {
  text-align: center;
  padding: 60px 20px;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.gate-panel i {
  font-size: 40px;
  color: var(--color-primary);
  margin-bottom: 16px;
}

/* ------------------------------------------------------------  
   CHAT
   ------------------------------------------------------------ */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  max-height: 500px;
  overflow-y: auto;
}

.chat-bubble {
  max-width: 75%;
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.chat-bubble--sent {
  align-self: flex-end;
  /* Deliberately NOT --color-primary — that's also the thread header's
     background now (see .chat-thread-inner .chat-header), and a sent
     bubble scrolling up to meet a same-color sticky header made the two
     visually merge with no boundary between them. --green-bright is the
     same palette (already used as the primary color's own hover shade)
     but distinct enough to read as two separate surfaces. */
  background: var(--green-bright);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-bubble--received {
  align-self: flex-start;
  background: var(--line);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
}

.chat-bubble .time {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
}

/* --- Password toggle --- */
.input-group-toggle .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group-toggle .btn-toggle-pw {
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-left: none;
  color: var(--ink-faint);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 200ms ease;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.input-group-toggle .btn-toggle-pw:hover {
  color: var(--color-primary);
}

.input-group-toggle .btn-toggle-pw:focus {
  outline: none;
  box-shadow: none;
}

.input-group-toggle .btn-toggle-pw i {
  font-size: 16px;
  pointer-events: none;
}

/* --- Chat conversation cards --- */
.chat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 220ms ease;
}

.chat-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.chat-card .avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.chat-card .avatar.avatar-green {
  background: var(--green-pale);
  color: var(--color-primary);
}

.chat-card .avatar.avatar-coral {
  background: #FFE9E2;
  color: var(--color-accent);
}

.chat-card .avatar.avatar-gold {
  background: #FDF1CC;
  color: #8A6800;
}

.chat-card .chat-meta {
  flex: 1;
  min-width: 0;
}

.chat-card .chat-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  display: block;
}

.chat-card .chat-ad {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
  display: block;
}

.chat-card .chat-preview {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.chat-card .chat-time {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.chat-card .unread-badge {
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-card.has-unread {
  border-left: 3px solid var(--color-primary);
}

/* --- Chat thread improvements --- */
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  position: sticky;
  top: 0;
  background: var(--color-primary);
  z-index: 10;
}

/* WhatsApp-style 3-dot thread menu — icon-only, so Bootstrap's default
   dropdown-toggle caret is suppressed rather than showing a stray arrow
   next to the ellipsis icon. */
.chat-header-menu {
  flex-shrink: 0;
}

.chat-header-menu__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 160ms ease, color 160ms ease;
}

.chat-header-menu__btn::after {
  display: none;
}

.chat-header-menu__btn:hover,
.chat-header-menu__btn:focus {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
}

/* Dropdown menu itself — rounded, lifted off the page with a soft shadow,
   and roomier than Bootstrap's tight default so icon + label pairs read
   like deliberate list items rather than a dense system menu. */
.chat-header-menu__dropdown {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 220px;
}

.chat-header-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  transition: background 140ms ease;
}

.chat-header-menu__item:hover,
.chat-header-menu__item:focus {
  background: var(--green-pale);
  color: var(--color-text);
}

.chat-header-menu__icon {
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.chat-header-menu__item--danger {
  color: var(--color-danger);
}

.chat-header-menu__item--danger .chat-header-menu__icon {
  color: var(--color-danger);
}

.chat-header-menu__item--danger:hover,
.chat-header-menu__item--danger:focus {
  background: #FDECEA;
  color: var(--color-danger);
}

.chat-header-menu__dropdown .dropdown-divider {
  margin: 6px 4px;
}

.chat-header .back-btn {
  color: var(--white);
  font-size: 18px;
  text-decoration: none;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
}

.chat-header .back-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.chat-header .avatar-sm {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* A plain white ring now that the header itself is solid green (the
   photo needs separation from the bar, not from a tint of its own color
   the way it did against white). */
.chat-header .avatar-sm.has-avatar {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px rgba(255, 255, 255, .3);
}

.chat-header .header-info {
  flex: 1;
  min-width: 0;
}

.chat-header .header-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--white);
  display: block;
}

.chat-header .header-ad {
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  display: block;
}

.chat-header .header-ad:hover {
  color: var(--white);
}

.chat-input-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  border-top: 1.5px solid var(--line-strong);
  position: sticky;
  bottom: 0;
  background: var(--white);
}

.chat-input-bar .form-control {
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-strong);
  padding: 10px 18px;
  font-size: 14px;
  flex: 1;
}

.chat-input-bar .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--green-pale);
}

.chat-input-bar .send-btn {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-size: 16px;
  transition: all 200ms ease;
}

.chat-input-bar .send-btn:hover {
  background: var(--color-primary-hover);
  transform: scale(1.05);
}

/* Shown instead of the message form when either side has blocked the
   other (see chat/_thread.blade.php's $canReply) — centered, muted, no
   action to take here, just an honest explanation of why there's no input. */
.chat-input-bar--disabled {
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 13.5px;
  gap: 8px;
}

.chat-input-bar--disabled i {
  font-size: 14px;
}

/* --- Empty state for chat --- */
.chat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  flex: 1;
}

.chat-empty i {
  font-size: 40px;
  color: var(--line);
  margin-bottom: 16px;
  display: block;
}

.chat-empty p {
  color: var(--color-text-muted);
  font-size: 14px;
}

/* ------------------------------------------------------------
   CHAT — full-bleed two-pane (WhatsApp Desktop style) layout
   ------------------------------------------------------------ */

/* The chat page fills the space between the sticky header and the footer
   with no extra page-level padding or title block — main is given a
   min-height matching the viewport minus the header, .chat-layout fills it
   via flex, and the footer follows immediately after with zero gap. */
body.chat-page main {
  display: flex;
  min-height: calc(100vh - 60px);
}

@media (min-width: 901px) {
  body.chat-page main {
    min-height: calc(100vh - 68px);
  }
}

body.chat-page .site-footer {
  margin-top: 0;
}

.chat-page-content {
  flex: 1;
  display: flex;
  width: 100%;
}

.chat-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
  background: var(--white);
  border-top: 1px solid var(--line-strong);
  overflow: hidden;
}

.chat-list-pane {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  background: var(--white);
}

.chat-list-pane__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-strong);
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
}

.chat-list-pane__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.chat-list-pane__header h1 {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}

.chat-list {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 12px;
}

/* --- Modernized conversation tile: every tile keeps a visible border (not
   just on hover/active), bigger avatar, tighter type hierarchy, a soft
   lift on hover. Active state is shown via the border only — no
   background fill. --- */
.chat-list-pane .chat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 11px 12px;
  margin-bottom: 8px;
  background: var(--white);
  transform: none !important;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.chat-list-pane .chat-card:hover {
  border-color: var(--color-primary);
  background: var(--green-pale-faint);
  box-shadow: 0 4px 10px -6px rgba(20, 80, 163, 0.25) !important;
}

.chat-list-pane .chat-card.is-active {
  border-color: var(--color-primary);
  border-width: 2px;
  background: var(--white);
  box-shadow: 0 2px 8px -4px rgba(20, 80, 163, 0.3) !important;
}

.chat-list-pane .chat-card.is-active .chat-name {
  color: var(--color-primary);
}

.chat-list-pane .chat-card .chat-name {
  font-size: 14.5px;
}

.chat-list-pane .chat-card .chat-preview {
  font-size: 12.5px;
}

.chat-list-pane .chat-card.has-unread .chat-preview {
  color: var(--color-text);
  font-weight: 500;
}

.chat-list-pane .chat-card .avatar {
  width: 50px;
  height: 50px;
  font-size: 18px;
  box-shadow: 0 0 0 2px var(--white);
}

/* Photo avatars need a real ring, not just the plain white one above —
   a photo with no border can blend straight into the card background.
   Initials avatars keep their tinted fill, which already reads fine on
   its own without a frame. Same tinted-ring language as
   .seller-panel-avatar.has-avatar elsewhere in the app, for consistency.
   Equal selector specificity to the plain-white rule above, placed after
   it so it wins for has-avatar — and it's also what supplies the ring
   entirely missing on the base (non-list-pane) .chat-card .avatar used
   on mobile. */
.chat-card .avatar.has-avatar {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px rgba(20, 80, 163, .18);
}

.chat-card__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.chat-list-pane .chat-time {
  font-size: 11px;
}

.chat-list-pane .unread-badge {
  min-width: 19px;
  height: 19px;
  font-size: 10.5px;
}

/* --- Thread pane --- */
.chat-thread-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--green-pale-faint);
  position: relative;
}

.chat-thread-pane.is-loading {
  opacity: 0.6;
}

.chat-thread-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 40px;
  background: var(--white);
}

.chat-thread-placeholder i {
  font-size: 52px;
  color: var(--line);
}

.chat-thread-placeholder p {
  font-size: 15px;
  max-width: 260px;
}

.chat-thread-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* WhatsApp-style solid green header for the open thread — makes the
   thread read as a distinct "screen" from the chat list beside/behind it,
   and gives the 3-dot dropdown (white) an obviously different background
   to pop open against instead of blending into a plain white bar. */
.chat-thread-inner .chat-header {
  padding: 14px 24px;
  flex-shrink: 0;
  background: var(--color-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.chat-thread-inner .avatar-sm {
  width: 42px;
  height: 42px;
  font-size: 15px;
}

.chat-thread-back {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.chat-thread-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-thread-inner .chat-input-bar {
  flex-shrink: 0;
  padding: 16px 24px;
  background: var(--white);
  box-shadow: 0 -1px 0 var(--line);
}

.chat-thread-inner .chat-input-bar .form-control {
  background: var(--green-pale-faint);
  border-color: transparent;
}

.chat-thread-inner .chat-input-bar .form-control:focus {
  background: var(--white);
  border-color: var(--color-primary);
}

.chat-msg-row {
  display: flex;
}

.chat-msg-row.is-sent {
  justify-content: flex-end;
}

.chat-msg-row.is-received {
  justify-content: flex-start;
  align-items: flex-end;
}

.chat-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-primary);
  font-size: 10px;
  flex-shrink: 0;
  margin-right: 8px;
}

/* Softer, fully-rounded modern bubbles instead of the old single-corner
   "tail" notch. */
.chat-bubble {
  border-radius: 16px;
}

.chat-bubble--sent {
  border-bottom-right-radius: 16px;
  box-shadow: 0 3px 8px -3px rgba(46, 125, 209, 0.4);
}

.chat-bubble--received {
  border-bottom-left-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* --- Ad-context card — auto-appended, dismissable, shows which listing a
   conversation grew out of. Styled as a neutral "system" card, not a
   sent/received bubble. --- */
.chat-ad-context {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 420px;
  margin: 4px 0 10px;
}

.chat-ad-context__dismiss {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  color: var(--color-text-muted);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all 150ms ease;
}

.chat-ad-context__dismiss:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.chat-ad-context__link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.chat-ad-context__link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.chat-ad-context__thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.chat-ad-context__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-ad-context__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-ad-context__eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.chat-ad-context__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-ad-context__price {
  font-size: 12px;
  color: var(--color-text-muted);
}

.chat-ad-context__chevron {
  color: var(--color-text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

/* --- Mobile: thread slides in over the list instead of a full nav --- */
@media (max-width: 900px) {
  body.chat-page main {
    padding-bottom: var(--bottom-nav-height);
  }

  .chat-layout {
    display: block;
    border-top: none;
    overflow: visible;
    position: relative;
    width: 100%;
  }

  .chat-list-pane {
    border-right: none;
    overflow-y: visible;
  }

  /* The page itself scrolls on mobile (not this pane), and the site header
     is already sticky at top:0 — keeping this header also sticky would
     stack it under/over the site header instead of below it. */
  .chat-list-pane__header {
    position: static;
  }

  .chat-thread-pane {
    position: fixed;
    inset: 0;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 260ms ease;
  }

  .chat-layout.is-thread-active .chat-thread-pane {
    transform: translateX(0);
  }

  .chat-thread-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--color-text);
    font-size: 18px;
    flex-shrink: 0;
  }

  .chat-thread-back:hover {
    background: var(--green-pale);
  }

  body.chat-thread-open .site-header,
  body.chat-thread-open .site-footer,
  body.chat-thread-open .bottom-nav {
    display: none !important;
  }

  body.chat-thread-open {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

@media (min-width: 901px) {
  .chat-thread-back {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   MOBILE HEADER ACTIONS (lang switcher)
   ------------------------------------------------------------ */
.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  /* paint above .nav-stars (z-index:0) — see header-logo-badge comment. */
  position: relative;
  z-index: 1;
}

@media (min-width: 901px) {
  .mobile-header-actions {
    display: none;
  }
}

/* District filter pill, centered in the mobile nav bar independent
   of the logo/lang-switch flex row. */
.mobile-district-center {
  display: none;
}

@media (max-width: 900px) {
  .mobile-district-center {
    display: inline-flex;
    align-items: center;
    gap: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile-page {
  padding: 12px 16px 40px;
}

.profile-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-card {
  background: var(--green-pale-faint);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* --- Sidebar --- */
.profile-sidebar .profile-card {
  text-align: center;
  padding: 32px 24px;
}

.profile-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.profile-avatar-large {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 700;
  color: var(--color-primary);
  overflow: hidden;
  background: var(--green-pale);
}

.profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-edit-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  border: 2.5px solid var(--green-pale-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  transition: transform 200ms ease;
}

.avatar-edit-btn:hover {
  transform: scale(1.1);
}

.profile-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text);
}

.profile-email {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 6px;
}

.profile-detail {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 3px;
}

.profile-detail i {
  width: 14px;
  text-align: center;
  margin-right: 6px;
  opacity: .6;
}

.profile-joined {
  margin-top: 4px;
}


.profile-warnings-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-left: 4px;
}

.profile-suspended-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: #FEE2E2;
  color: #991B1B;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Report warn button — replaced by .btn-sb-warn */

/* Stats in sidebar */
.profile-sidebar .profile-stats {
  display: flex;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  margin: 20px -24px;
  padding: 0;
}

.profile-sidebar .stat-item {
  flex: 1;
  text-align: center;
  padding: 16px 8px;
}

.profile-sidebar .stat-item:first-child {
  border-right: 1px solid var(--line-strong);
}

.stat-num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
}

.stat-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Logout */
.profile-logout-form {
  margin-top: 20px;
}

.logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 200ms ease;
}

.logout-btn:hover {
  border-color: #dc3545;
  color: #dc3545;
  background: rgba(220, 53, 69, .05);
}

/* Standalone profile card */
.profile-card-white {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 32px 24px 24px;
  text-align: center;
}

/* Links to the user's own public seller/storefront page — same corner
   treatment as .avatar-edit-btn, but top-right of the whole card rather
   than on the avatar itself. Light-gold fill with a dark bronze icon and
   a visible gold-toned border, same palette as the .promo-slot__tag
   "Sponsored" badge elsewhere in the app — reads as a premium, clearly
   clickable button rather than a flat green icon. */
.profile-card-store-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FBE8B8 0%, #F6D989 55%, #F2CB6E 100%);
  color: #3A2600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none;
  border: 1.5px solid rgba(154, 111, 14, .4);
  box-shadow: 0 4px 12px -4px rgba(154, 111, 14, .35), inset 0 1px 1px rgba(255, 255, 255, .5);
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.profile-card-store-btn:hover {
  transform: translateY(-1px) scale(1.08);
  background: linear-gradient(135deg, #F6D989 0%, #F2CB6E 55%, #E8C874 100%);
  box-shadow: 0 6px 16px -4px rgba(154, 111, 14, .45), inset 0 1px 1px rgba(255, 255, 255, .5);
}

.profile-card-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin-bottom: 16px;
  cursor: pointer;
}

.profile-card-avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-card-avatar:not(.has-avatar) {
  background: var(--green-pale);
}

/* Neutral person-silhouette placeholder shown until a photo is uploaded —
   replaces what used to be an empty flat-color circle. Toggled purely via
   the existing .has-avatar class (already flipped by the upload/remove JS
   below), so no extra script wiring is needed here. */
.profile-card-avatar__placeholder {
  font-size: 38px;
  color: var(--color-primary);
  opacity: .5;
}

.profile-card-avatar.has-avatar .profile-card-avatar__placeholder {
  display: none;
}

/* A real photo on a white card otherwise has no edge to separate it from
   the card background — it just "hangs" there. A white inner ring plus a
   soft brand-tinted outer ring gives it a frame regardless of what color
   the photo itself is. Initials avatars already have the green-pale fill
   for contrast, so this only applies once an actual image is present. */
.profile-card-avatar.has-avatar {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px rgba(20, 80, 163, .16), 0 8px 20px -10px rgba(18, 39, 32, .28);
}

.profile-card-avatar .avatar-edit-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
}

.profile-card-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text);
}

.profile-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}

.pc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-decoration: none !important;
}
.pc-badge i { font-size: 10px; }
.pc-badge-green { color: var(--color-primary); background: var(--green-pale); }
.pc-badge-amber { color: #b45309; background: #fef3c7; }
/* #1565C0, not the brighter #1E88E5 this used to be — the brighter blue
   only reaches ~3.2:1 against #E3F2FD at this badge's 11px/8px sizes
   (both well under the "large text" cutoff, so 4.5:1 is required). This
   shade clears ~5.0:1 while staying recognizably the same blue. */
.pc-badge-blue { color: #1565C0; background: #E3F2FD; }
.pc-badge-grey { color: #6B7280; background: #F3F4F6; }

/* A thin, low-opacity outline (not a heavy border) so the pill reads as
   a defined chip rather than a flat patch of color — scoped to the
   verified-seller pill specifically (<x-verified-badge pill>), not every
   .pc-badge variant elsewhere in the app. */
.verified-pill {
  border: 1px solid rgba(21, 101, 192, 0.35);
}

/* Email / phone / member-since — previously three separate stacked lines,
   now a single wrapping row of quiet chips so the top of the card reads
   as one organized unit instead of a tall stack of plain text. */
.profile-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  margin-bottom: 16px;
}

.profile-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg-alt, #F3F4F6);
  border: 1px solid var(--line-strong);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.profile-card-meta-item i {
  font-size: 11px;
  opacity: .65;
}

.profile-card-stats {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  margin: 0 -24px;
}

.pc-stat {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
}

.pc-stat-num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
}

.pc-stat-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.pc-stat-divider {
  width: 1px;
  background: var(--line-strong);
  align-self: stretch;
  flex-shrink: 0;
}

/* --- Warning stepper (progressive: 1 → 2 → 3) --- */
.warn-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 0;
}

.warn-step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-bg);
  border: 2px solid var(--line-strong);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 700;
  transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease, color 300ms ease, transform 300ms ease;
}

.warn-step.is-warned .warn-step-circle {
  background: linear-gradient(135deg, #EF4444, #B91C1C);
  border-color: #B91C1C;
  color: #fff;
  font-size: 15px;
  box-shadow: 0 3px 10px rgba(185, 28, 28, .35);
  transform: scale(1.04);
}

.warn-step-line {
  width: 32px;
  height: 2px;
  background: var(--line-strong);
  margin: 0 2px;
  flex-shrink: 0;
  transition: background 300ms ease;
}

.warn-step-line.is-filled {
  background: linear-gradient(90deg, #EF4444, #B91C1C);
}

.warn-stepper-caption {
  text-align: center;
  font-size: 12.5px;
  color: var(--color-text-muted);
  padding: 8px 4px 0;
  margin: 0;
  line-height: 1.5;
}

.warn-stepper-caption strong {
  color: var(--color-danger);
  font-weight: 700;
}

.pc-suspended {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: #FEE2E2;
  color: #991B1B;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  margin-top: 12px;
}

/* Avatar modal options */
.avatar-modal-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 20px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 150ms ease;
  text-align: left;
}

.avatar-modal-option:hover {
  background: var(--green-pale-faint);
}

.avatar-modal-option i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: var(--color-text-muted);
}

.avatar-modal-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 20px;
}

#avatarModal .modal-dialog {
  margin: auto 16px;
}

@media (min-width: 576px) {
  #avatarModal .modal-dialog {
    margin: auto;
  }
}

/* Post-Ad choice modal (Create Listing vs Create Promotion). A plain
   max-width doesn't stop the dialog reading as "full width" on small
   phones — Bootstrap's default .modal-dialog margin is only 0.5rem, so we
   add real side gutters here too, giving a proper narrow card with visible
   page background on both sides instead of an edge-to-edge sheet. */
#postChoiceModal .modal-dialog {
  max-width: 380px;
  margin: auto 24px;
}

@media (min-width: 576px) {
  #postChoiceModal .modal-dialog {
    margin: auto;
  }
}

.post-choice-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 150ms ease, background 150ms ease;
}

.post-choice-option:hover {
  border-color: var(--color-primary);
  background: var(--green-pale-faint);
  color: var(--color-text);
}

.post-choice-option__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-pale, #F0FDF4);
  color: var(--color-primary);
  font-size: 18px;
}

.post-choice-option__icon--accent {
  background: #FFF7ED;
  color: var(--color-accent);
}

.post-choice-option__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.post-choice-option__title {
  font-weight: 700;
  font-size: 15px;
}

.post-choice-option__desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
  overflow-wrap: break-word;
}

.post-choice-option__arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.post-choice-option--locked .post-choice-option__icon {
  background: #F3F4F6;
  color: #9CA3AF;
}

.post-choice-option--locked:hover {
  border-color: #D1D5DB;
  background: #F9FAFB;
}

/* Profile nav tiles */
.profile-tiles {
  margin-top: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.profile-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #fff;
  color: var(--color-text);
  text-decoration: none !important;
  border-bottom: 1px solid var(--line-strong);
  transition: background 150ms ease;
}

.profile-tile:last-child {
  border-bottom: none;
}

.profile-tile:hover {
  background: var(--green-pale-faint);
}

.profile-tile-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.profile-tile-body {
  flex: 1;
  display: flex;
  align-items: center;
}

.profile-tile-name {
  font-size: 15px;
  font-weight: 600;
}

.profile-tile-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--green-pale);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}

.profile-tile-arrow {
  font-size: 12px;
  color: var(--color-text-muted);
}

.profile-tile--danger .profile-tile-icon {
  background: #FEE2E2;
  color: #DC2626;
}

.profile-tile--danger .profile-tile-name {
  color: #DC2626;
}

.profile-tile--danger:hover {
  background: #FEF2F2;
}

.profile-logout-full {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: transparent;
  border: 1.5px solid rgba(220, 53, 69, .3);
  border-radius: var(--radius-pill);
  color: rgba(220, 53, 69, .7);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 200ms ease;
}

.profile-logout-full:hover {
  border-color: #dc3545;
  color: #dc3545;
  background: rgba(220, 53, 69, .05);
}

/* Sub page header */
.sub-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.sub-page-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--color-text);
  text-decoration: none !important;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 150ms ease;
}

.sub-page-back:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sub-page-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}

/* --- Delete account page --- */
.gdpr-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-lg);
  color: #92400E;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  margin-bottom: 20px;
  transition: border-radius 150ms ease;
}

.gdpr-toggle[aria-expanded="true"] {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.gdpr-toggle-chevron {
  font-size: 12px;
  color: #B45309;
  transition: transform 200ms ease;
}

.gdpr-toggle[aria-expanded="true"] .gdpr-toggle-chevron {
  transform: rotate(180deg);
}

.gdpr-notice {
  padding: 14px 16px 16px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-top: none;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.gdpr-notice-text {
  font-size: 13px;
  line-height: 1.55;
  color: #92400E;
  margin: 0;
}

.form-sb-section-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0 0 10px;
}

.reason-list {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.reason-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  background: #fff;
  transition: border-color 150ms ease, background 150ms ease;
}

.reason-item:hover {
  border-color: var(--color-primary);
  background: var(--green-pale-faint);
}

.reason-item input[type="radio"] {
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.reason-item:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--green-pale-faint);
}

.delete-ack {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
  color: #7F1D1D;
  margin-top: 12px;
  cursor: pointer;
}

.delete-ack input[type="checkbox"] {
  accent-color: #DC2626;
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* --- Tab nav --- */
.profile-tab-nav {
  display: flex;
  gap: 0;
  background: var(--green-pale-faint);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.profile-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  white-space: nowrap;
}

.profile-tab:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: var(--line-strong);
}

.profile-tab:hover {
  color: var(--color-primary);
  background: rgba(20, 80, 163, .04);
}

.profile-tab.active {
  color: var(--color-primary);
  background: var(--green-pale);
}

.profile-tab.active::after {
  display: none;
}

.profile-tab i {
  font-size: 15px;
}

.tab-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--white);
  color: var(--color-primary);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
}

.profile-tab.active .tab-count {
  background: var(--green-pale-faint);
}

/* Tab panels */
.profile-tab-panel {
  background: var(--green-pale-faint);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.profile-tab-panel.active {
  animation: tabFadeIn 250ms ease;
}



@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

/* --- My Ads list --- */
.my-ads-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.my-ad-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  transition: all 200ms ease;
}

.my-ad-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.my-ad-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 20px;
  text-decoration: none;
}

.my-ad-thumb img,
.my-ad-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-ad-thumb div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-ad-info {
  flex: 1;
  min-width: 0;
}

.my-ad-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-ad-title:hover {
  color: var(--color-primary);
}

.my-ad-price {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary);
  display: block;
  margin-top: 2px;
}

.my-ad-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.my-ad-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 200ms ease;
  text-decoration: none;
  color: var(--color-text-muted);
  padding: 0;
}

.action-btn.edit:hover {
  background: var(--green-pale);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.action-btn.delete:hover {
  background: #f8d7da;
  border-color: #dc3545;
  color: #dc3545;
}

.action-btn.boost:hover {
  background: #FEF3C7;
  border-color: #D97706;
  color: #D97706;
}

.action-btn[title]:hover {
  opacity: 0.85;
}

/* --- Saved grid --- */
.saved-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* --- Settings menu items --- */
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-strong);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.menu-content {
  flex: 1;
}

.menu-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.menu-input {
  width: 100%;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--white);
  transition: border-color 200ms ease;
  cursor: pointer;
}

.menu-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--green-pale);
}

/* --- Empty states --- */
.empty-state-small {
  text-align: center;
  padding: 40px 16px;
}

.empty-state-small i {
  font-size: 36px;
  color: var(--line);
  margin-bottom: 12px;
  display: block;
}

.empty-state-small p {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0 0 16px;
}

/* --- Custom file input --- */
.file-input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 200ms ease;
}

button.file-input-wrap {
  width: 100%;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
}

.file-input-wrap:hover {
  border-color: var(--color-primary);
}

.file-input-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--green-pale);
}

.file-input-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.file-input-label {
  flex: 1;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--color-text-muted);
  background: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-input-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: var(--green-pale);
  color: var(--color-primary);
  font-size: 14px;
  border-left: 1.5px solid var(--line-strong);
  transition: background 200ms ease;
}

.file-input-wrap:hover .file-input-btn {
  background: var(--green-deep);
  color: #fff;
}

/* ------------------------------------------------------------  
   ADMIN SIDEBAR
   ------------------------------------------------------------ */
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  background: var(--color-primary);
  color: #fff;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
}

.admin-sidebar .sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 4px;
  transition: all 200ms ease;
  width: 100%;
}

.admin-sidebar .sidebar-link:hover,
.admin-sidebar .sidebar-link.is-active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.admin-sidebar .sidebar-link i {
  width: 20px;
  text-align: center;
  font-size: 15px;
}

.admin-sidebar .site-logo {
  color: #fff;
}

.admin-sidebar .site-logo .brand-accent {
  color: #fff;
}

.admin-sidebar .site-logo .dot {
  background: var(--color-accent);
}

.admin-content {
  padding: 32px;
  background: var(--color-bg);
}

/* --- Admin mobile header (hidden on desktop) --------------- */
.admin-mobile-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-primary);
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
}

.admin-mobile-header .site-logo {
  color: #fff;
  font-size: 16px;
}

.admin-mobile-header .site-logo .brand-accent {
  color: #fff;
}

.admin-mobile-header .site-logo .dot {
  background: var(--color-accent);
  width: 8px;
  height: 8px;
}

.admin-menu-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.admin-menu-btn:hover {
  background: rgba(255, 255, 255, .15);
}

/* --- Admin off-canvas (mobile) ---------------------------- */
.admin-offcanvas {
  width: 260px;
  background: var(--color-primary) !important;
  border-right: none;
}

.admin-offcanvas .sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 4px;
  transition: all 200ms ease;
  width: 100%;
}

.admin-offcanvas .sidebar-link:hover,
.admin-offcanvas .sidebar-link.is-active {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

.admin-offcanvas .sidebar-link i {
  width: 20px;
  text-align: center;
  font-size: 15px;
}

.admin-offcanvas .site-logo .brand-accent {
  color: #fff;
}

/* --- Admin card-based table rows (mobile) ------------------ */
.admin-card-row {
  display: none;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.admin-card-row .card-row-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 12px;
}

.admin-card-row .card-row-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--green-pale-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  overflow: hidden;
}

.admin-card-row .card-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-card-row .card-row-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.admin-card-row .card-row-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 3px;
}

.admin-card-row .card-row-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0 16px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.admin-card-row .card-row-body>span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 5px 0;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.admin-card-row .card-row-body>span i {
  font-size: 12px;
  color: var(--color-text-muted);
  opacity: .6;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.admin-card-row .card-row-body .badge-sb {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
  padding: 3px 8px;
}

.admin-card-row .card-row-body .badge-sb+.badge-sb {
  margin-left: 4px;
}

.admin-card-row .card-row-body>span:has(.badge-sb) {
  flex-wrap: wrap;
  gap: 4px;
}

.admin-card-row .card-row-actions {
  display: flex;
  gap: 0;
  padding: 0;
}

.admin-card-row .card-row-actions .btn {
  flex: 1;
  font-size: 13px;
  padding: 12px 0;
  border-radius: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
}

.admin-card-row .card-row-actions .btn+.btn {
  border-left: 1px solid var(--color-border);
}

.admin-card-row .card-row-actions form {
  flex: 1;
  display: flex;
}

.admin-card-row .card-row-actions form .btn {
  width: 100%;
}

/* --- Form variant (translations) --- */
.admin-card-row--form .card-row-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-template-columns: none;
}

.admin-card-row--form .card-row-body label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: -4px;
}

.admin-card-row--form .card-row-body .form-control {
  font-size: 14px;
  padding: 10px 12px;
}

/* --- Admin mobile responsive ------------------------------ */
@media (max-width: 768px) {
  .admin-layout {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
  }

  .admin-sidebar {
    display: none !important;
  }

  .admin-mobile-header {
    display: flex;
  }

  .admin-content {
    padding: 12px 16px 16px 16px;
  }

  /* Hide the desktop table entirely, show only card rows */
  .admin-table-wrap .table-sb {
    display: none;
  }

  .admin-table-wrap .admin-card-row {
    display: block;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
    margin-bottom: 8px !important;
  }

  .page-header .btn {
    width: 100%;
    justify-content: center;
  }

  .page-header h2 {
    font-size: 20px;
    margin-bottom: 0 !important;
  }

  .search-chips {
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 4px;
    gap: 8px;
  }
}

/* ------------------------------------------------------------  
   CARD (generic admin/surface card)
   ------------------------------------------------------------ */
.card-sb {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ------------------------------------------------------------  
   TABLE STYLES
   ------------------------------------------------------------ */
.table-sb {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table-sb thead {
  background: var(--green-pale);
}

.table-sb th {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}

.table-sb td {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table-sb tr:last-child td {
  border-bottom: none;
}

.table-sb tr:hover td {
  background: rgba(20, 80, 163, 0.03);
}

/* ------------------------------------------------------------  
   RESPONSIVE HELPERS
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .ad-grid {
    gap: 10px;
  }
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */

/* ---- Search hero ---- */
.search-hero {
  position: relative;
  text-align: center;
  padding: clamp(24px,5vw,44px) clamp(16px,5vw,56px) clamp(12px,3vw,20px);
  /* See .hero-wrap — clipping here would cut off the suggestion panel;
     .hero-floats already clips the only overflowing child. */
}

.search-hero .hero-float-icon {
  opacity: .22;
}

.search-hero .hero-float-icon:nth-child(1) { opacity: .18; }
.search-hero .hero-float-icon:nth-child(2) { opacity: .15; }
.search-hero .hero-float-icon:nth-child(3) { opacity: .17; }
.search-hero .hero-float-icon:nth-child(4) { opacity: .15; }
.search-hero .hero-float-icon:nth-child(5) { opacity: .12; }
.search-hero .hero-float-icon:nth-child(6) { opacity: .11; }
.search-hero .hero-float-icon:nth-child(7) { opacity: .12; }

.search-hero-title {
  position: relative;
  z-index: 2;
  font-size: clamp(22px,4.5vw,36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.15;
}

.search-hero-sub {
  position: relative;
  z-index: 2;
  color: var(--color-text-muted);
  font-size: clamp(13px,2vw,16px);
  margin-bottom: 20px;
  line-height: 1.5;
}

.search-bar-wrap {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0 auto;
}

/* ---- Category chips ---- */
.search-chips {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
}

.search-chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
  transition: all 220ms ease;
}

.chip i { font-size: 12px; opacity: .7; }

.chip:hover {
  background: var(--green-pale);
  color: var(--color-primary);
  border-color: var(--green-deep);
}

.chip-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(20, 80, 163, .2);
}

.chip-active:hover {
  background: var(--color-primary-hover);
  color: #fff;
  border-color: var(--color-primary-hover);
}

.chip-active i { opacity: 1; }

/* ---- Category selector pill (search page) ---- */
.search-category-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.search-category-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: all 250ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.search-category-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.search-category-btn i:first-child {
  font-size: 14px;
  color: var(--color-accent);
}

.search-category-btn i:last-child {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ---- Search layout ---- */
.search-layout {
  padding-bottom: 40px;
}

.search-results {
  min-width: 0;
}

/* ---- Filter groups ---- */
.filter-group {
  margin-bottom: 16px;
}

.filter-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.filter-price-row {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow: hidden;
}

.filter-input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--color-text);
  background: var(--white);
  transition: border-color 180ms ease, box-shadow 180ms ease;
  box-sizing: border-box;
}

.filter-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--green-pale);
}

.filter-input::placeholder { color: var(--ink-faint); }

.filter-dash {
  color: var(--color-text-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.filter-select {
  width: 100%;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--color-text);
  background: var(--white);
  cursor: pointer;
  transition: border-color 180ms ease;
}

.filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--green-pale);
}

.filter-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* ---- Toolbar ---- */
.search-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.search-count {
  font-size: 13px;
  color: var(--color-text-muted);
}

.search-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-form { margin: 0; }

/* ---- Sort Bootstrap Dropdown ---- */
.sb-sort-dropdown {
  position: relative;
}

.sort-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--white);
  cursor: pointer;
  transition: border-color 180ms ease;
  white-space: nowrap;
}

.sort-trigger-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sort-trigger-arrow {
  font-size: 10px;
  opacity: .5;
  transition: transform 200ms ease;
}

.sb-sort-dropdown.show .sort-trigger-arrow {
  transform: rotate(180deg);
}

.sb-sort-menu {
  min-width: 200px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  margin-top: 6px;
  background: var(--white);
}

.sb-sort-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  transition: background 150ms ease, color 150ms ease;
}

.sb-sort-item i {
  width: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
}

.sb-sort-item:hover {
  background: var(--green-pale);
  color: var(--color-primary);
}

.sb-sort-item:hover i {
  color: var(--color-primary);
}

.sb-sort-item.active {
  background: var(--color-primary);
  color: #fff;
}

.sb-sort-item.active i {
  color: #fff;
}

.filter-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--white);
  cursor: pointer;
  transition: border-color 180ms ease;
}

.filter-trigger-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.search-pagination {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

/* ---- Custom paginator ---- */
.sb-paginator {
  display: flex;
  justify-content: center;
}

.sb-pag {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sb-pag-item {
  margin: 0;
}

.sb-pag-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--white);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 200ms ease;
  cursor: pointer;
}

.sb-pag-link:hover {
  background: var(--green-pale);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sb-pag-active .sb-pag-link {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(20, 80, 163, .2);
}

.sb-pag-disabled .sb-pag-link {
  background: transparent;
  border-color: transparent;
  color: var(--ink-faint);
  cursor: default;
}

.sb-pag-dots {
  border: none;
  background: transparent;
  color: var(--ink-faint);
  letter-spacing: 2px;
}

/* ---- Sheet header ---- */
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sheet-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.sheet-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--color-text-muted);
  padding: 4px 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 150ms ease;
}

.sheet-close:hover { background: var(--green-pale); color: var(--color-primary); }

/* ---- Responsive ---- */

@media (max-width: 720px) {
  .search-chips { gap: 6px; }
  .chip { font-size: 12px; padding: 7px 12px; }
}

/* ============================================================  
   DESKTOP ENHANCEMENTS (≥901px)
   Everything above this line is mobile-first defaults.
   Below we re-skin the entire experience for wide screens.
   ============================================================ */
@media (min-width: 901px) {

  /* --- Header -------------------------------------------- */
  /* background/box-shadow deliberately omitted here — this block only
     resizes the header for wide screens. The old version hard-coded
     background: var(--white), which silently reverted the dark gradient
     (set once, in the base .site-header rule) back to flat white at
     ≥901px — mobile showed the new dark header correctly since it never
     reaches this media query, desktop did not. */
  .site-header {
    padding: 0 clamp(24px, 4vw, 64px);
    height: 68px;
  }

  .site-logo {
    font-size: 24px;
    gap: 10px;
  }

  .site-logo .dot {
    width: 12px;
    height: 12px;
  }

  .site-logo-img {
    height: 46px;
  }

  /* Nav links → pill-shaped hover backgrounds */
  .nav-links {
    gap: 4px;
    font-size: 14.5px;
  }

  .nav-links a,
  .nav-links button {
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    transition: background 200ms ease, color 200ms ease;
  }

  .nav-links a.nav-chat-link .chat-nav-badge {
    top: 2px;
    right: 6px;
  }

  /* Leftover from the header's old white/light-mint look — --green-pale
     pill + --color-primary (dark green) text only worked on a light bar.
     A gold-tinted glass pill covered that gap after the header first
     went dark, but the 2026-07-29 blue rebrand replaced it again: blue
     is now the interactive/hover-state color everywhere else on the
     page (buttons, links, badges), so the nav's own hover/active state
     should read the same way instead of gold — gold is reserved for the
     header's ambient .nav-star sparkle only (see .site-header comment).
     Keeps the already-verified --green-pale *text* color; contrast
     re-checked against this new pill background, not just the bare
     gradient: 12.2:1 / 6.6:1 for hover, 11.4:1 / 6.6:1 for active — both
     comfortably clear of 4.5:1. */
  .nav-links a:hover,
  .nav-links button:hover {
    background: rgba(20, 80, 163, .18);
    color: var(--green-pale);
  }

  .nav-links a.is-active,
  .nav-links button.is-active {
    background: rgba(20, 80, 163, .28);
    box-shadow: inset 0 0 0 1px rgba(20, 80, 163, .5);
    color: var(--green-pale);
    font-weight: 600;
  }

  /* --- Hero / Content Spacing ---------------------------- */
  .container-custom {
    padding-inline: clamp(24px, 4vw, 64px);
  }

  /* --- Section Headers ----------------------------------- */
  .section-head {
    margin-bottom: 28px;
  }

  .section-head h2 {
    font-size: 30px;
  }

  .section-head .see-all {
    font-size: 15px;
  }

  /* --- Category Cards (Browse by Category) --------------- */
  .category-card {
    padding: 28px 24px;
    border-radius: var(--radius-lg);
  }

  .category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }

  .category-card .icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 24px;
  }

  .category-card .label {
    font-size: 15.5px;
  }

  .category-card .ad-count {
    font-size: 12.5px;
  }

  /* --- Ad Cards ------------------------------------------ */
  .ad-card {
    border-radius: var(--radius-lg);
  }

  .ad-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }

  .ad-card__cat-badge {
    width: 36px;
    height: 36px;
    font-size: 15px;
    top: 12px;
    right: 12px;
  }

  .ad-card__like {
    width: 34px;
    height: 34px;
    bottom: 12px;
    right: 12px;
  }

  .ad-card__like i {
    font-size: 15px;
  }

  .ad-card__body {
    padding: 16px 18px 18px;
  }

  .ad-card__title {
    font-size: 15px;
    line-height: 1.35;
  }

  .ad-card__price {
    font-size: 19px;
    margin-bottom: 6px;
  }

  .ad-card__loc {
    font-size: 13px;
  }

  /* --- Ad Grid — list stays single column on desktop ------ */
  .ad-grid {
    gap: 14px;
  }

  /* --- Featured horizontal scroll → wider cards ----------- */
  .scroll-x {
    gap: 18px;
    padding-bottom: 4px;
  }

  .scroll-x>* {
    width: 300px;
  }

  /* --- Search Chips → wrap, bigger ----------------------- */
  .search-chips {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 10px;
  }

  /* --- Search bar wider on desktop ----------------------- */
  .section-head .search-bar-wide {
    max-width: 640px;
  }

  /* --- Footer -------------------------------------------- */
  .site-footer {
    padding: 56px 0 0;
    margin-top: 72px;
  }

  /* --- Toast --- handled in toast section above --- */

  /* --- Auth card ----------------------------------------- */
  .auth-card {
    margin: 60px auto;
  }

  /* --- Detail page badges -------------------------------- */
  .badge-sb {
    font-size: 13.5px;
    padding: 6px 14px;
    gap: 6px;
  }

  /* --- Chat --- */
  .chat-thread {
    max-height: calc(100vh - 260px);
  }

  .chat-card {
    padding: 20px;
  }

  .chat-card .avatar {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }

  .chat-card .chat-name {
    font-size: 16px;
  }

  .chat-card .chat-preview {
    font-size: 14px;
  }

  /* --- Profile --- */
  .profile-page {
    padding-inline: clamp(32px, 6vw, 80px);
  }

  .profile-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
  }

  .profile-sidebar {
    position: sticky;
    top: 96px;
  }

  .profile-sidebar .profile-card {
    padding: 32px 24px;
  }

  .profile-avatar-large {
    width: 112px;
    height: 112px;
    font-size: 44px;
  }

  .profile-name {
    font-size: 24px;
  }

  .profile-email {
    font-size: 15px;
  }

  .profile-detail {
    font-size: 14px;
  }

  .stat-num {
    font-size: 26px;
  }

  .stat-label {
    font-size: 13px;
  }

  .logout-btn {
    font-size: 15px;
    padding: 14px;
  }

  .profile-tab {
    padding: 16px;
    font-size: 15px;
    gap: 10px;
  }

  .tab-count {
    font-size: 12px;
    padding: 2px 8px;
  }

  .profile-tab i {
    font-size: 16px;
  }

  .profile-tab-panel {
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-strong);
    border-top: none;
  }

  .my-ad-thumb {
    width: 68px;
    height: 68px;
    font-size: 22px;
  }

  .my-ad-title {
    font-size: 15px;
  }

  .my-ad-price {
    font-size: 15px;
  }

  .action-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .saved-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .menu-item {
    padding: 16px 0;
  }

  .menu-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .menu-input {
    padding: 11px 14px;
    font-size: 15px;
  }
}

/* ============================================================
   MEDIA CAROUSEL — ecommerce-grade
   ============================================================ */
.media-carousel {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- Main stage --- */
.mc-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: #000;
  overflow: hidden;
}

.mc-track {
  display: flex;
  height: 100%;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.mc-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}

/* Cloned slides (used to make the loop seamless) are only ever glimpsed
   mid-transition — keep them non-interactive. */
.mc-slide--clone {
  pointer-events: none;
}

.mc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.mc-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mc-slide iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* --- Video / embed wrapper (poster, custom play button, error state) --- */
.mc-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

.mc-video-wrap video,
.mc-video-wrap iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
  display: block;
}

.mc-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  border: 2px solid rgba(255, 255, 255, .85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 4;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}

.mc-video-play i {
  margin-left: 3px; /* optical centering for the play glyph */
}

.mc-video-play:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translate(-50%, -50%) scale(1.06);
}

.mc-video-wrap.is-playing .mc-video-play {
  opacity: 0;
  pointer-events: none;
}

.mc-media-error {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 20px;
  background: var(--ink);
  color: rgba(255, 255, 255, .85);
  z-index: 5;
}

.mc-media-error i {
  font-size: 30px;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 4px;
}

.mc-media-error span {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.mc-media-error small {
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
}

/* --- Arrows --- */
.mc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 5;
  transition: background .2s, opacity .2s;
  opacity: 0;
}

.media-carousel:hover .mc-arrow {
  opacity: 1;
}

.mc-arrow:hover {
  background: rgba(0, 0, 0, .7);
}

.mc-arrow-left {
  left: 12px;
}

.mc-arrow-right {
  right: 12px;
}

.mc-arrow:disabled {
  opacity: 0 !important;
  pointer-events: none;
}

/* --- Dots (mobile) --- */
.mc-dots {
  display: none;
}

/* --- Counter --- */
.mc-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 5;
  letter-spacing: .3px;
}

/* --- Thumbnail strip --- */
.mc-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mc-thumbs::-webkit-scrollbar {
  display: none;
}

.mc-thumb {
  flex: 0 0 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s, opacity .2s;
  opacity: .6;
  position: relative;
}

.mc-thumb.is-active {
  border-color: var(--color-primary);
  opacity: 1;
}

.mc-thumb:hover {
  opacity: 1;
}

.mc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mc-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mc-thumb .mc-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 18px;
}

/* --- Mobile adjustments --- */
@media(max-width:767px) {
  .mc-arrow {
    display: none;
  }

  .mc-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 4px;
  }

  .mc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
    border: none;
    cursor: pointer;
    transition: background .2s, transform .2s;
    padding: 0;
  }

  .mc-dot.is-active {
    background: var(--color-primary);
    transform: scale(1.3);
  }

  .mc-thumb {
    flex: 0 0 52px;
    height: 52px;
  }

  .mc-counter {
    bottom: 8px;
    right: 8px;
    font-size: 11px;
    padding: 3px 8px;
  }
}

/* ============================================================
   AD DETAIL PAGE (Show) — two-column layout w/ sticky sidebar
   ============================================================ */

.ad-detail-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.ad-detail-breadcrumb a {
  color: var(--color-text-muted);
  transition: color .2s ease;
}

.ad-detail-breadcrumb a:hover {
  color: var(--color-primary);
}

.ad-detail-breadcrumb .crumb-sep {
  opacity: .5;
}

.ad-detail-breadcrumb .crumb-current {
  color: var(--color-text);
  font-weight: 600;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ad-detail-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn-sb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 16px;
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
}

.icon-btn-sb:hover {
  border-color: var(--line-strong);
  color: var(--color-text);
}

.icon-btn-sb.is-saved {
  color: var(--color-accent);
  border-color: #FFD9CC;
  background: #FFF5F2;
}

/* Report / Save — floated over the top-right corner of the gallery
   instead of a separate row, so it never leaves blank space when
   hidden (guests) and never reads as an orphaned lone icon. */
.ad-detail-media {
  position: relative;
}

.ad-detail-media-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn-sb--overlay {
  border: none;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.icon-btn-sb--overlay.is-saved {
  background: #fff;
}

.icon-btn-report-overlay {
  width: auto;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  gap: 6px;
}

/* --- Image Preview Modal (lightbox) --------------------------------
   Ad photos and the seller avatar open here at their true aspect ratio
   (object-fit: contain, never cropped) — the carousel frame and the
   avatar circle both crop non-matching shapes to fit a fixed container,
   so this is the only place a non-square photo is shown uncropped. --- */
/* width:fit-content (not a fixed vw/vh box) so the dialog hugs whatever
   size the photo actually renders at — a portrait or small image no
   longer sits inside a mostly-empty wide/tall dark frame. max-width/
   max-height still cap it so a huge photo can't overflow the viewport. */
.image-preview-dialog {
  width: fit-content;
  max-width: 94vw;
  margin: 3vh auto;
}

.image-preview-content {
  background: rgba(10, 14, 12, .96);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
}

/* No padding — the stage hugs the image exactly, so the dark rounded box
   never shows as a visibly bigger frame than the photo itself. Close/nav
   controls sit as overlays directly on the image instead of in a margin
   around it (same pattern as the carousel's own arrows/zoom hint). */
.image-preview-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#imagePreviewImg {
  display: block;
  max-width: min(94vw, 1000px);
  max-height: 94vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.image-preview-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
}

.image-preview-close:hover {
  background: rgba(0, 0, 0, .75);
}

.image-preview-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 6;
  transition: background 200ms ease;
}

.image-preview-arrow:hover {
  background: rgba(0, 0, 0, .7);
}

.image-preview-arrow-left {
  left: 12px;
}

.image-preview-arrow-right {
  right: 12px;
}

.image-preview-counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  z-index: 6;
  letter-spacing: .3px;
}

@media (max-width: 576px) {
  /* Same shrink-to-fit behavior as desktop — just a little more width to
     use on a narrow screen, not a forced full-height frame. */
  .image-preview-dialog {
    max-width: 98vw;
    margin: 2vh auto;
  }
  #imagePreviewImg {
    max-width: 96vw;
    max-height: 86vh;
  }
}

/* Small always-visible hint (not hover-only — most traffic here is
   touch) that tapping a photo opens the uncropped preview. */
.mc-zoom-hint {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 5;
  pointer-events: none;
}

/* The seller avatar becomes a <button> instead of an <a> once it has a
   real photo, so tapping it opens the uncropped preview rather than
   navigating away — visiting the seller's page is still available via
   their name right next to it. Box/circle styling is shared with the
   link variant via .seller-panel-avatar; this just resets default
   button chrome. */
button.seller-panel-avatar {
  border: none;
  padding: 0;
  font: inherit;
  cursor: zoom-in;
}

/* Same reset for the seller page's own (larger) avatar — see
   button.seller-panel-avatar above for why this is needed on a <button>
   sharing a class with the .seller-avatar-lg circle styling. */
button.seller-avatar-lg {
  border: none;
  padding: 0;
  font: inherit;
  cursor: zoom-in;
}

/* ------------------------------------------------------------
   PRIVACY TAB + COOKIE POLICY PAGE
   ------------------------------------------------------------ */
.privacy-toggle-card,
.privacy-info-card {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.privacy-toggle-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.privacy-toggle-text {
  flex: 1;
  min-width: 0;
}

.privacy-toggle-text h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}

.privacy-toggle-text p {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.privacy-info-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 10px;
}

.privacy-info-card ul {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.7;
}

.privacy-policy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.privacy-policy-link:hover {
  text-decoration: underline;
}

/* Generic on/off switch — reused anywhere a settings page needs an
   instant-save toggle instead of a checkbox tied to a form submit. */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--line-strong);
  border-radius: 999px;
  transition: background 180ms ease;
}

.switch-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform 180ms ease;
}

.switch input:checked + .switch-slider {
  background: var(--color-primary);
}

.switch input:checked + .switch-slider::before {
  transform: translateX(20px);
}

.switch input:focus-visible + .switch-slider {
  box-shadow: 0 0 0 3px var(--green-pale);
}

.switch input:disabled + .switch-slider {
  opacity: .5;
  cursor: not-allowed;
}

/* Pairs a switch with a loading spinner while an async toggle action (e.g.
   requesting notification permission, which can take a few seconds between
   the native browser prompt and the server round-trip) is in flight —
   without this there was no visual sign anything was happening between the
   click and the eventual toast. */
.privacy-toggle-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.spinner-sb {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinSb .6s linear infinite;
  flex-shrink: 0;
}

.spinner-sb.is-active {
  display: inline-block;
}

/* .spinner-sb's default green-on-line coloring reads fine next to a plain
   switch (Privacy tab), but disappears against a solid .btn-sb-primary's
   green fill — this variant swaps to white-on-translucent-white for use
   inside a colored button. */
.spinner-sb--on-primary {
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  margin-right: 6px;
}

@keyframes spinSb {
  to { transform: rotate(360deg); }
}

/* Static disclosure pages (Cookie Policy) */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 80px;
}

.legal-page-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 4px;
}

.legal-page-updated {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
}

.legal-page-body h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  margin: 28px 0 8px;
}

.legal-page-body p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

/* The privacy policy and terms enumerate what is collected and what is
   prohibited; the cookie policy is prose-only and unaffected by these. */
.legal-page-body p + p {
  margin-top: 12px;
}

.legal-page-body ul {
  margin: 10px 0 0;
  padding-inline-start: 22px;
}

.legal-page-body li {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text);
}

.legal-page-body li + li {
  margin-top: 4px;
}

/* Standing reminder that neither document is a substitute for advice from
   a Sri Lankan lawyer — deliberately quiet, but visible on the page. */
.legal-page-note {
  margin-top: 32px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--green-pale-faint);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.legal-page-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 24px auto 0;
}

/* --- Layout grid ---
   Main content and sidebar are two independent single-cell tracks
   (not spanning named areas) so the sidebar can never mis-size or
   bleed into content that sits below the grid, like Similar Listings. */
.ad-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 28px;
}

.ad-detail-main {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.ad-detail-sidebar {
  display: grid;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 901px) {
  .ad-detail-layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 380px);
    gap: 32px;
    align-items: start;
  }

  .ad-detail-sidebar {
    position: sticky;
    top: 92px;
    align-self: start;
  }
}

/* --- Header block --- */
.ad-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ad-detail-title {
  font-size: clamp(21px, 3.2vw, 30px);
  line-height: 1.25;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ad-detail-boosted-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.ad-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.ad-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ad-detail-meta i {
  color: var(--color-primary);
  font-size: 12.5px;
}

.ad-detail-meta .meta-sep {
  color: var(--line-strong);
}

/* --- Price card --- */
.price-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
}

.price-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.price-card-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--color-primary);
}

.price-card-nego {
  font-size: 11px;
  font-weight: 700;
  color: #8A6800;
  background: #FDF1CC;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* --- Contact / owner actions card (separate from price) --- */
.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

.contact-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.contact-card__title i {
  color: var(--color-primary);
  font-size: 13px;
}

.price-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-card-actions .btn {
  width: 100%;
  padding: 12px;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.price-card-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.price-card-owner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--green-pale-faint);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.price-card-owner i {
  color: var(--color-primary);
  font-size: 15px;
}

.price-card-owner span {
  flex: 1;
}

.price-card-owner-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--white);
  font-size: 13px;
  flex-shrink: 0;
  transition: background 180ms ease, transform 180ms ease;
}

.price-card-owner-edit:hover {
  background: var(--color-primary-hover);
  color: var(--white);
  transform: scale(1.06);
}

.price-card-owner-edit i {
  color: var(--white);
  font-size: 13px;
}

.price-card-guest-hint {
  text-align: center;
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

.price-card-guest-hint a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

/* --- Generic detail card (description / specs / safety) --- */
.detail-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}

.detail-card__title {
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.detail-card__title i {
  color: var(--color-primary);
  font-size: 15px;
}

.desc-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text);
  white-space: pre-wrap;
}

.desc-text.is-clamped {
  max-height: 8.75em;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.desc-toggle {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.desc-toggle:hover {
  text-decoration: underline;
}

/* --- Specs grid --- */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.spec-item {
  background: var(--green-pale-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.spec-item__label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}

.spec-item__value {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
  word-break: break-word;
}

@media (min-width: 560px) {
  .spec-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Safety tips card --- */
.safety-card {
  background: linear-gradient(135deg, var(--green-pale-faint), var(--color-surface));
}

.safety-list {
  display: grid;
  gap: 12px;
}

.safety-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.safety-item i {
  color: var(--color-primary);
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* --- Related listings heading --- */
.ad-detail-related h3 {
  font-size: 18px;
  margin-bottom: 16px;
}

@media (max-width: 480px) {
  .detail-card {
    padding: 18px;
  }

  .price-card {
    padding: 18px;
  }
}

/* ============================================================
   HOME PAGE
   ============================================================ */

/* ---- Scroll reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="category"] {
  transition-delay: var(--delay, 0ms);
}

[data-reveal="card"] {
  transition-delay: var(--delay, 0ms);
}

/* ---- Section spacing ---- */
.home-section {
  padding-top: 32px;
  padding-bottom: 8px;
}

/* Breathing room before the footer now that the page ends on a listing grid */
.home-section:last-of-type {
  padding-bottom: 40px;
}

/* ---- Hero — centered, no bg, floating icons ---- */
.hero-wrap {
  position: relative;
  padding: clamp(24px, 4vw, 44px) clamp(16px, 5vw, 56px) clamp(28px, 5vw, 44px);
  text-align: center;
  /* No overflow:hidden here — it would clip the search suggestion panel,
     which hangs below the search field. The two children that actually
     overflow (.hero-floats and .hero-post-card__strip) each clip
     themselves, so nothing escapes. */
}

.hero-search-area {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

/* ---- Post-an-ad card — primary sell CTA above the search bar ----
   One stacked arrangement at every width (heading, button, thumbnail
   strip) — the card is only as wide as the search field it sits above,
   so there is never enough room for a side-by-side variant to earn its
   extra rules. --------------------------------------------------------- */
.hero-post-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 0 auto 16px;
  padding: 16px;
  background: var(--color-surface);
  /* Same 1.5px --line-strong edge the search field below it uses, so the
     two stacked elements read as one family rather than two weights. */
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeUp .6s .15s cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero-post-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.hero-post-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.hero-post-card__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Shrink-to-fit and centred by the parent's align-items rather than
   stretching — a full-bleed pill across the card reads as a form submit,
   not an optional call to action. */
.hero-post-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 8px;
  /* Rounded rectangle rather than the theme's default pill — squarer
     corners sit better against the 8px thumbnail tiles directly below it,
     and keep the pill shape reserved for the search field. */
  border-radius: var(--radius-sm);
  padding: 12px 26px;
  font-size: 15px;
  white-space: nowrap;
}

/* Flowing thumbnail strip — real listing photos, icon-only where a
   listing has no photo (or its image fails to load and is removed). */
.hero-post-card__strip {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hero-post-card__track {
  display: flex;
  width: max-content;
  animation: heroPostTileFlow 26s linear infinite;
}

/* Pausing on hover lets the user actually look at a listing photo instead
   of chasing it past the edge of the mask. */
.hero-post-card:hover .hero-post-card__track {
  animation-play-state: paused;
}

/* Spacing lives on the tile rather than a flex gap so the track is exactly
   two equal halves — a gap between them would break the -50% loop. */
.hero-post-card__tile {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-right: 8px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--green-pale-faint);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 15px;
}

.hero-post-card__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes heroPostTileFlow {
  to {
    transform: translateX(-50%);
  }
}

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

  .hero-post-card,
  .hero-post-card__track {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

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

/* Floating category icons — more visible, varied timing */
.hero-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-float-icon {
  position: absolute;
  font-size: 28px;
  color: var(--line-strong);
  opacity: .18;
  animation: heroFloatDrift 12s ease-in-out infinite;
}

.hero-float-icon:nth-child(1) {
  top: 12%;
  left: 6%;
  animation-delay: 0s;
  font-size: 28px;
  color: var(--green-deep);
  opacity: .1;
  animation-duration: 14s;
}

.hero-float-icon:nth-child(2) {
  top: 20%;
  right: 8%;
  animation-delay: 1.5s;
  font-size: 34px;
  color: var(--coral);
  opacity: .09;
  animation-duration: 11s;
}

.hero-float-icon:nth-child(3) {
  bottom: 18%;
  left: 12%;
  animation-delay: 3s;
  font-size: 26px;
  color: var(--gold);
  opacity: .11;
  animation-duration: 16s;
}

.hero-float-icon:nth-child(4) {
  bottom: 28%;
  right: 6%;
  animation-delay: 0.5s;
  font-size: 30px;
  color: var(--green-bright);
  opacity: .09;
  animation-duration: 13s;
}

.hero-float-icon:nth-child(5) {
  top: 38%;
  left: 2%;
  animation-delay: 2s;
  font-size: 22px;
  color: var(--ink-faint);
  opacity: .07;
  animation-duration: 15s;
}

.hero-float-icon:nth-child(6) {
  top: 8%;
  left: 40%;
  animation-delay: 4s;
  font-size: 18px;
  color: var(--coral);
  opacity: .06;
  animation-duration: 18s;
}

.hero-float-icon:nth-child(7) {
  bottom: 10%;
  right: 35%;
  animation-delay: 1s;
  font-size: 20px;
  color: var(--green-deep);
  opacity: .07;
  animation-duration: 12s;
}

@keyframes heroFloatDrift {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(8px, -14px) rotate(4deg);
  }

  50% {
    transform: translate(-6px, 10px) rotate(-3deg);
  }

  75% {
    transform: translate(10px, 6px) rotate(5deg);
  }
}

/* Search bar — animated entrance */
.hero-search {
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-strong);
  padding: 4px 4px 4px 0;
  transition: border-color .2s ease, box-shadow .2s ease;
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeUp .6s .45s cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--green-pale), 0 4px 20px rgba(20, 80, 163, .08);
}

.hero-search-icon {
  padding: 0 16px;
  color: var(--ink-faint);
  font-size: 16px;
  flex-shrink: 0;
}

.hero-search-input {
  flex: 1;
  /* Flex items default to min-width:auto, which stops the input shrinking
     below its intrinsic width — with the clear button now sharing the row,
     that would push the field wider than its container on narrow screens. */
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--color-text);
  padding: 12px 0;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.hero-search-input:focus {
  outline: none;
  box-shadow: none;
}

.hero-search-input::placeholder {
  color: var(--ink-faint);
}

.hero-search-btn {
  padding: 10px 20px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hero-search-btn:hover {
  background: var(--color-primary-hover);
  transform: scale(1.03);
}

/* ---- Home ad slot placeholder (below search bar) ---- */
/* Reserved space for a future randomly-shown boosted listing or
   external ad unit. No display logic wired up yet — markup + style only. */
/* Gold-toned to match the .ad-slot-placeholder__tag / .promo-slot__tag
   "Sponsored" badge (same #B8860B family) rather than a plain neutral
   dashed box — reads as "premium spot, currently empty" instead of a
   generic broken/missing-content placeholder. */
.ad-slot-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 90px;
  margin-top: 20px;
  padding: 20px 16px;
  background-color: #FFFCF3;
  background-image:
    repeating-linear-gradient(45deg, rgba(184, 134, 11, 0.07) 0, rgba(184, 134, 11, 0.07) 1px, transparent 1px, transparent 13px),
    repeating-linear-gradient(-45deg, rgba(184, 134, 11, 0.07) 0, rgba(184, 134, 11, 0.07) 1px, transparent 1px, transparent 13px);
  border: 3px dashed rgba(184, 134, 11, .45);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
}

.ad-slot-placeholder__tag {
  position: absolute;
  top: -7px;
  left: 16px;
  color: #3A2600;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: visible;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(154, 111, 14, .35);
  background: linear-gradient(100deg, #C9971E 0%, #E8C874 50%, #B8860B 100%);
  text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
  box-shadow: 0 1px 3px rgba(120, 84, 8, .28);
}

.ad-slot-placeholder__tag i {
  font-size: 7px;
  color: #3A2600;
}

.ad-slot-placeholder__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.ad-slot-placeholder__inner i {
  font-size: 18px;
  color: #B8860B;
  opacity: .7;
}

.ad-slot-placeholder__sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
  background: #FFFCF3;
  border: 1px solid rgba(184, 134, 11, .25);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
}

@media (min-width: 901px) {
  .ad-slot-placeholder {
    min-height: 110px;
  }

  .ad-slot-placeholder__inner {
    font-size: 14.5px;
  }

  .ad-slot-placeholder__sub {
    font-size: 12.5px;
  }
}

/* ---- Home promo slot — rotating paid Promotion campaigns ---- */
/* Same slot position as .ad-slot-placeholder (below the hero search bar)
   but shown instead of it whenever at least one paid Promotion campaign
   is currently active. Every card is permanently position:absolute — only
   .is-active toggles opacity/transform, never `position` itself, so the
   browser never has to reflow mid-transition (that reflow was what made
   the earlier version stutter). Rotation is fully automatic, driven by
   public/js/promo-rotator.js — no manual dot controls. */
.promo-slot {
  position: relative;
  margin-top: 22px;
}

/* Same pill treatment as .ad-slot-placeholder__tag (the no-ads fallback)
   so the "Sponsored" label looks identical whichever state is showing.
   Static gold gradient (no shimmer animation) — an animated sweep kept
   dragging dark text through the gradient's brightest stop, tanking
   contrast at that point in the cycle. A fixed gradient position keeps
   contrast constant and still reads as "premium," just quieter. */
.promo-slot__tag {
  position: absolute;
  top: -7px;
  left: 16px;
  z-index: 2;
  color: #3A2600;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: visible;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(154, 111, 14, .35);
  background: linear-gradient(100deg, #C9971E 0%, #E8C874 50%, #B8860B 100%);
  text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
  box-shadow: 0 1px 3px rgba(120, 84, 8, .28);
}

.promo-slot__tag i {
  font-size: 7px;
  color: #3A2600;
}

/* Aspect-ratio (rather than a fixed pixel height) so the slot's shape
   scales consistently with its width across breakpoints — this matches
   Promotion::RECOMMENDED_WIDTH/HEIGHT (1200x300, 4:1), so a correctly
   sized upload is never cropped by object-fit: cover. min-height is only
   a floor for extremely narrow viewports. */
.promo-slot__viewport {
  position: relative;
  aspect-ratio: 4 / 1;
  min-height: 80px;
  border-radius: 10px;
}

/* Light-gray fill (not stark white, not dark) with a full rounded ring
   border — a three-color gradient (green/coral/gold, the same accent
   colors used elsewhere across the site), wrapped all the way around the
   card and slowly animated, instead of a flat solid border. */
.promotion-list-card {
  position: absolute;
  inset: 0;
  display: grid;
  /* auto (not a hardcoded px number) lets the column size itself to
     whatever width makes the media square for the row's actual height —
     see .promotion-list-card__media's aspect-ratio. The row's height
     itself is untouched (still whatever .promo-slot__viewport's 4:1
     aspect-ratio produces), so this never makes the card taller. */
  grid-template-columns: auto 1fr;
  /* Same premium cream-gold fill as .ad-card--boosted — this slot only
     ever shows boosted/sponsored content, so it gets the same "boosted"
     signal. Border stays exactly as it was: the animated gradient ring
     below is untouched. */
  background: linear-gradient(155deg, #FFFDF6 0%, #FFF6DE 100%);
  border: none;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform .9s cubic-bezier(.4, 0, .2, 1);
  text-decoration: none;
  color: var(--color-text);
  text-align: center;
  box-shadow: 0 8px 18px -14px rgba(18, 39, 32, .28);
}

/* Ring trick: paint the gradient across the whole padding-box, then mask
   out everything except a thin band at the edge (content-box XOR
   padding-box) — the result is a border that follows every rounded
   corner exactly, which a plain `border` can't do with a moving gradient. */
.promotion-list-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, var(--green-deep) 0%, var(--coral) 50%, var(--gold) 100%);
  background-size: 200% 100%;
  animation: promoAccentFlow 5s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .promotion-list-card::before {
    animation: none;
  }
}

@keyframes promoAccentFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

.promotion-list-card.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 1;
}

.promotion-list-card:hover {
  box-shadow: 0 10px 22px -14px rgba(18, 39, 32, .38);
}

.promotion-list-card__media {
  position: relative;
  height: 100%;
  aspect-ratio: 1 / 1;
  background: var(--green-pale);
  border-right: 1px solid var(--line-strong);
  overflow: hidden;
}

.promotion-list-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s cubic-bezier(.16, 1, .3, 1);
}

.promotion-list-card.is-active .promotion-list-card__media img {
  transform: scale(1.08);
}

.promotion-list-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-pale);
  color: var(--color-primary);
  font-size: 20px;
  opacity: .45;
}

/* Standalone paid Promotion banner — full-bleed media instead of the
   media+details grid used for boosted-ad cards, so images/GIFs/videos read
   as a proper sponsored banner. */
.promotion-list-card--banner {
  display: block;
  text-decoration: none;
  color: inherit;
}

.sponsored-banner__media {
  width: 100%;
  height: 100%;
}

.sponsored-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sponsored-banner__cta {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(15, 23, 42, .72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

.promotion-list-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 9px 14px 8px 14px;
}

/* Two pill badges at opposite edges: category left, negotiable right.
   Right edge lines up with the price below, so "negotiable" reads as
   sitting directly over the price — and the category's position never
   moves whether or not a negotiable badge is present next to it. */
.promotion-list-card__badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.promotion-list-card__cat {
  flex-shrink: 0;
  background: var(--green-pale);
  color: var(--color-primary);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.promotion-list-card__nego-badge {
  flex-shrink: 0;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--ink);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}

/* Quieter than "Negotiable" on purpose — this is the default/expected
   state, not something that needs to grab attention. */
.promotion-list-card__fixed-badge {
  flex-shrink: 0;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--line-strong);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}

/* Title, closed off with one hairline rule before the seller/price footer.
   Badges stay pinned to the top and the footer stays pinned to the bottom
   (see its margin removal below) — this auto top/bottom margin pair is
   what centers the title+rule as one tight unit in whatever leftover
   vertical room the (now-square, often tall) media leaves between them,
   without stretching the title away from its own hairline rule. */
.promotion-list-card__heading {
  margin-top: auto;
  margin-bottom: auto;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-strong);
}

.promotion-list-card__title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promotion-list-card__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 3px;
}

/* Outlined in the danger color — an attention-getting outline reserved
   for this one signal (where the listing actually is), now that seller
   name (not a relevant signal on a sponsored card) has been dropped. */
.promotion-list-card__loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 60%;
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promotion-list-card__loc i {
  font-size: 9px;
  flex-shrink: 0;
}

.promotion-list-card__price {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Sits between .promotion-list-card__loc and .promotion-list-card__price
   in the same footer row — auto margins on both sides share the row's
   remaining free space (alongside .promotion-list-card__price's own
   margin-left:auto), which centers it in the gap between the two rather
   than crowding either one. */
.promotion-list-card__verified-pill {
  margin: 0 auto;
  flex-shrink: 0;
  padding: 1px 6px;
  gap: 3px;
  font-size: 9px;
  white-space: nowrap;
}

.promotion-list-card__verified-pill .verified-badge--xs {
  width: 10px;
  height: 10px;
}

.promotion-list-card__verified-pill .verified-badge--xs .verified-badge__seal {
  font-size: 10px;
}

.promotion-list-card__verified-pill .verified-badge--xs .verified-badge__check {
  font-size: 5px;
}

@media (min-width: 901px) {
  .promotion-list-card__verified-pill {
    font-size: 10px;
    padding: 2px 8px;
  }
}

@media (min-width: 901px) {
  .promo-slot__viewport {
    min-height: 118px;
  }

  .promotion-list-card__body {
    padding: 13px 20px 11px 20px;
  }

  .promotion-list-card__title {
    font-size: 16px;
  }

  .promotion-list-card__cat,
  .promotion-list-card__nego-badge,
  .promotion-list-card__fixed-badge {
    font-size: 10px;
  }

  .promotion-list-card__badges {
    margin-bottom: 6px;
  }

  .promotion-list-card__loc {
    font-size: 10.5px;
    padding: 3px 10px;
  }

  .promotion-list-card__price {
    font-size: 15.5px;
  }
}

/* ---- Featured — list cards with arrows ---- */
.featured-wrap {
  position: relative;
}

.featured-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.featured-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-text);
  cursor: pointer;
  z-index: 5;
  transition: all 200ms ease;
  box-shadow: var(--shadow-sm);
}

.featured-arrow:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(20, 80, 163, .2);
}

.featured-arrow--left {
  left: -18px;
}

.featured-arrow--right {
  right: -18px;
}

/* ---- Category icon (components/category-icon.blade.php) ----
   Emoji or admin-uploaded SVG, sized to 1em so it matches whatever
   font-size the wrapping element already sets — the same sizing
   convention every fa-solid category icon used before it. */
.category-icon--emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1em;
}

.category-icon--svg {
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: middle;
}

/* ---- Category row grid ----
   No card chrome (no white background/border/shadow) — just the colored
   icon and label sitting close together, so this reads as a light
   "quick links" strip rather than a grid of boxes. */
/* minmax(0, …) rather than a bare 1fr: a grid track defaults to
   min-width:auto, so a long un-breakable label (Tamil and Sinhala names
   have no "&" for short_name to trim at) would widen its track and push
   the whole strip past the page edge instead of being truncated. */
.cat-row-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 2px;
}

.cat-row-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 2px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), background-color .2s ease;
  text-align: center;
}

.cat-row-card:hover {
  transform: translateY(-2px);
  background: var(--green-pale-faint);
  color: var(--color-text);
}

.cat-row-icon {
  position: relative;
  /* A bigger, uncoloured box around a smaller glyph reads as a deliberate
     icon slot rather than a filled badge — the old version leaned on the
     tinted circle to give each tile presence; without it, the size
     difference between box and icon has to do that job instead. */
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sizes both branches of x-category-icon at once: the emoji span and the
     admin-uploaded SVG are each 1em, so this one value drives both. */
  font-size: 26px;
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

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

/* No more tinted fill behind the icon (emoji and SVG icons ignore `color`
   entirely, so the background was the only thing these classes did for
   most categories). `color` stays: the one fa-solid fallback glyph still
   rendered here — the "All in category" pseudo-tile's fa-layer-group icon,
   built in categories/index.blade.php's inline script — is an icon font and
   still benefits from the per-category tint. */
.cat-color-1 { color: #1450A3; }
.cat-color-2 { color: #E85A38; }
.cat-color-3 { color: #00964F; }
.cat-color-4 { color: #A6790F; }

.cat-row-body {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

/* Two lines rather than a single nowrap line: Tamil and Sinhala category
   names are routinely longer than their English source and have no
   natural trim point, so clipping them to one line leaves a label that
   can't be read. The fixed min-height keeps every tile's count row on the
   same baseline whether the name takes one line or two. */
.cat-row-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--color-text);
  line-height: 1.2;
  max-width: 100%;
  min-height: 2.4em;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Below the point the grid narrows to 4 columns (see .cat-row-grid in the
   max-width:720px block), swap the full category name for the shortened
   one (the part before "&", e.g. "Mobile Phones & Tablets" -> "Mobile
   Phones") — there just isn't room for the long form in a quarter-width
   tile. Wider layouts keep showing the full name. */
.cat-row-name-short {
  display: none;
}

@media (max-width: 720px) {
  .cat-row-name-full {
    display: none;
  }

  .cat-row-name-short {
    display: inline;
  }
}

.cat-row-count {
  display: block;
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cat-row-arrow {
  display: none;
}

/* ---- Category slider (category-slider.js) ----
   A page is exactly one .cat-row-grid's worth of tiles (8 — a full 4x2 or
   8x1 screen either way), so paging never leaves a page visibly emptier
   than the others except possibly the last one. JS clones the first/last
   page for the infinite-loop illusion and drives .cat-slider-track's
   transform directly; without JS (or with 8 or fewer categories, so JS
   no-ops), this still renders as the plain grid it always was. */
.cat-slider {
  overflow: hidden;
  position: relative;
}

.cat-slider-track {
  display: flex;
  touch-action: pan-y;
  cursor: grab;
}

.cat-slider-track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.cat-slider-page {
  flex: 0 0 100%;
  min-width: 0;
}

.cat-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

/* 24x24 tap target (Lighthouse/WCAG's minimum) around a visual dot that
   stays small — the button itself is the invisible hit area, ::after
   carries the actual 7px/18px pill so the row still reads exactly as
   before. Adjacent dots stay non-overlapping too: each target is 24px
   plus .cat-slider-dots' own 8px gap, a 32px pitch with room to spare. */
.cat-slider-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-slider-dot::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color .2s ease, width .2s ease, border-radius .2s ease;
}

.cat-slider-dot.is-active::after {
  width: 18px;
  border-radius: 4px;
  background: var(--color-primary);
}

/* ---- Responsive ---- */
@media (min-width:901px) {
  .home-section {
    padding-top: 48px;
  }

  .featured-grid {
    gap: 14px;
  }

  .cat-row-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
  }

  .cat-row-card {
    padding: 10px 4px;
    gap: 10px;
  }

  /* Eight columns across the 1160px container leaves ~145px per tile, so
     the box can go up another step without crowding the label. */
  .cat-row-icon {
    width: 86px;
    height: 86px;
    border-radius: 20px;
    font-size: 30px;
  }

  .cat-row-name {
    font-size: 13.5px;
  }

  .featured-arrow {
    display: flex;
  }
}

@media (max-width:900px) {
  .featured-arrow {
    display: none;
  }
}

@media (max-width:720px) {
  .cat-row-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-float-icon {
    font-size: 20px;
  }
}

@media (max-width:480px) {
  .cat-row-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .featured-grid {
    gap: 10px;
  }

  .hero-wrap {
    padding: 28px 16px 20px;
  }

  .hero-search-input {
    font-size: 14px;
    padding: 10px 0;
  }

  .hero-search-btn {
    padding: 9px 14px;
    font-size: 13px;
  }
}

/* District filter pill (navbar) */
.nav-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  /* paint above .nav-stars (z-index:0) — see header-logo-badge comment. */
  position: relative;
  z-index: 1;
}

.district-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--green-pale);
  color: var(--color-primary);
  border: 1px solid rgba(20, 80, 163, .15);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  transition: all 200ms ease;
  white-space: nowrap;
}

.district-filter-pill i:first-child {
  font-size: 10px;
  opacity: .7;
}

.district-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(20, 80, 163, .15);
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--color-text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 200ms ease;
  margin-left: 4px;
}

.district-filter-clear:hover {
  background: #FEE2E2;
  color: #991B1B;
}

.mobile-district-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-pale);
  color: var(--color-primary);
  border: 1px solid rgba(20, 80, 163, .15);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  transition: all 200ms ease;
  white-space: nowrap;
}

.mobile-district-pill:hover {
  background: var(--green-pale);
}

.mobile-district-pill i:first-child {
  font-size: 10px;
}

.mobile-district-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(20, 80, 163, .15);
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--color-text-muted);
  font-size: 10px;
  cursor: pointer;
  transition: all 200ms ease;
  margin-left: 4px;
}

.mobile-district-clear:hover {
  background: #FEE2E2;
  color: #991B1B;
}

.mobile-district-pill i:first-child {
  font-size: 10px;
}

/* ============================================================
   LOCATION SELECTOR (Home Hero)
   ============================================================ */

.hero-location-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}

.hero-location-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: all 250ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.hero-location-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.hero-location-chevron {
  font-size: 10px;
  opacity: .6;
  transition: transform 200ms ease;
}

.hero-location-btn:hover .hero-location-chevron {
  transform: translateY(2px);
}

.hero-location-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  border: none;
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 200ms ease;
}

.hero-location-clear:hover {
  background: #FEE2E2;
  color: #991B1B;
}

/* District Modal Options */
.district-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 20px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--color-text);
  cursor: pointer;
  transition: background 150ms ease;
  text-align: left;
}

.district-option:hover {
  background: var(--green-pale-faint);
}

.district-option.is-active {
  background: var(--green-pale);
}

.district-option-icon {
  display: none;
}

.district-option-name {
  flex: 1;
  font-weight: 500;
}

.district-option-count {
  margin-left: auto;
  background: rgba(20, 80, 163, .08);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
}

.district-option-check {
  color: var(--color-primary);
  font-size: 16px;
}

.district-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 20px;
}

/* Fixed (not max-) height for the district modal's step 1 (districts) and
   step 2 (cities) lists — both use this same class so switching steps,
   filtering down to a handful of matches, or hitting an empty state never
   changes the modal's overall footprint. Internal scroll handles overflow
   when a step's content is taller than this. */
.district-modal-list-area {
  height: 320px;
  overflow-y: auto;
}

@media (max-width: 480px) {
  .hero-location-btn {
    font-size: 13px;
    padding: 7px 14px;
  }

  #districtModal .modal-dialog {
    margin: auto;
    max-width: calc(100vw - 24px) !important;
  }

  #districtModal .modal-content {
    border-radius: var(--radius-lg) !important;
  }
}

/* ============================================================
   SELLER PANEL CARD (Ad Show Page)
   ============================================================ */

.seller-panel-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.seller-panel-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 30%, #f8fafc 70%, #f1f5f9 100%);
  z-index: 0;
}

.seller-panel-bg::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, rgba(20, 80, 163, .06), rgba(46, 125, 209, .04));
  border-radius: 50%;
  top: -50px;
  right: -30px;
  animation: sellerFloat 7s ease-in-out infinite;
}

.seller-panel-bg::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, rgba(255, 110, 74, .05), rgba(242, 183, 5, .04));
  border-radius: 50%;
  bottom: -30px;
  left: 16px;
  animation: sellerFloat 9s ease-in-out infinite reverse;
}

@keyframes sellerFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.04); }
}

.seller-panel-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 16px;
}

.seller-panel-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
  border: 2.5px solid var(--color-surface);
  box-shadow: 0 2px 12px rgba(20, 80, 163, .12);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.seller-panel-avatar:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 20px rgba(20, 80, 163, .18);
}

/* Photo avatars need a visible frame — the panel background is a very
   pale green/white gradient, so the plain white border above blends
   straight into it. The extra tinted ring gives the photo an edge no
   matter what colors are in it. Initials avatars keep the green-pale
   fill above, which already reads fine on its own. */
.seller-panel-avatar.has-avatar {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px rgba(20, 80, 163, .18), 0 6px 16px -8px rgba(18, 39, 32, .32);
}

.seller-panel-avatar.has-avatar:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px rgba(20, 80, 163, .24), 0 8px 22px -8px rgba(18, 39, 32, .42);
}

.seller-panel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* "Verified seller" badge — a scalloped rosette/seal (fa-certificate)
   filled brand-blue with a small white checkmark centered on top,
   matching the familiar Facebook/Instagram verified-badge shape rather
   than a plain circle. See resources/views/components/verified-badge.blade.php
   for the markup (<x-verified-badge>) — every use of this badge across the
   app (ad cards, seller avatars, profile page) renders through that one
   component so the shape/behavior stays consistent. Sizes: xs (inline,
   next to text), md (default, ~64px avatars), lg (72–96px avatars). */
.verified-badge {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 1;
}

/* A small light backdrop behind the seal separates it from a photo avatar
   sitting directly underneath — fa-certificate is a single solid glyph
   with no border of its own to provide that separation. */
.verified-badge::before {
  content: '';
  position: absolute;
  inset: 20%;
  background: var(--color-surface);
  border-radius: 50%;
  z-index: 0;
}

.verified-badge__seal {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: 18px;
  color: #1E88E5;
}

.verified-badge__check {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 8px;
}

.verified-badge--xs {
  width: 13px;
  height: 13px;
}
.verified-badge--xs .verified-badge__seal { font-size: 13px; }
.verified-badge--xs .verified-badge__check { font-size: 6px; }

.verified-badge--lg {
  width: 24px;
  height: 24px;
}
.verified-badge--lg .verified-badge__seal { font-size: 24px; }
.verified-badge--lg .verified-badge__check { font-size: 11px; }

/* Positions the badge as a bottom-right overlay on an avatar — the avatar
   (or a wrapper around it, if the avatar itself clips with overflow:hidden)
   must be position:relative. */
.verified-badge--overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}

.seller-panel-info {
  min-width: 0;
}

.seller-panel-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  margin-bottom: 4px;
  transition: color 200ms ease;
}

.seller-panel-name:hover {
  color: var(--color-primary);
}

.seller-panel-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text-muted);
}

.seller-panel-meta i {
  opacity: .6;
  margin-right: 3px;
}

.seller-panel-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  padding: 0 24px 20px;
}

.seller-panel-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 480px) {
  .seller-panel-content {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px 12px;
  }

  .seller-panel-meta {
    justify-content: center;
  }

  .seller-panel-actions {
    flex-direction: column;
    padding: 0 16px 16px;
  }
}

/* ============================================================
   SELLER PAGE
   ============================================================ */

.seller-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}

.seller-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 30%, #f8fafc 70%, #f1f5f9 100%);
  z-index: 0;
}

.seller-header::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  background: linear-gradient(135deg, rgba(20, 80, 163, .05), rgba(46, 125, 209, .03));
  border-radius: 50%;
  top: -40px;
  right: -20px;
  animation: sellerFloat 7s ease-in-out infinite;
}

.seller-header > * {
  position: relative;
  z-index: 1;
}

.seller-header__info {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

/* position:relative lives on the wrapper (not .seller-avatar-lg itself)
   since the avatar circle uses overflow:hidden to crop the photo — a
   badge positioned inside that would get clipped at the circle's edge. */
.seller-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.seller-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.seller-avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Same reasoning as .seller-panel-avatar.has-avatar: a real photo needs a
   ring to separate it from the page's white/pale background, initials
   already have the green-pale fill for contrast. Safe on an
   overflow:hidden element — box-shadow paints outside the border box,
   so it isn't clipped by the circle crop. */
.seller-avatar-lg.has-avatar {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px rgba(20, 80, 163, .18), 0 6px 18px -8px rgba(18, 39, 32, .3);
}

.seller-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}

.seller-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.seller-meta i {
  margin-right: 4px;
  opacity: .6;
}

.seller-chat-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.seller-listings-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.seller-section-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.seller-section-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

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

.seller-ad-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.seller-ad-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.seller-ad-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--color-bg-alt);
  overflow: hidden;
}

.seller-ad-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.seller-ad-card:hover .seller-ad-card__media img {
  transform: scale(1.04);
}

.seller-ad-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--color-primary);
  opacity: .2;
}

.seller-ad-card__featured {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--gold);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.seller-ad-card__body {
  padding: 14px;
}

.seller-ad-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.seller-ad-card__price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.seller-ad-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.seller-ad-card__meta i {
  opacity: .6;
}

.seller-ad-card__nego {
  background: var(--green-pale);
  color: var(--color-primary);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}

@media (max-width: 768px) {
  .seller-header {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }

  .seller-header__info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .seller-meta {
    justify-content: center;
  }

  .seller-chat-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .seller-listings-section {
    padding: 16px;
  }

  .seller-ads-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .seller-ad-card__body {
    padding: 10px;
  }

  .seller-ad-card__title {
    font-size: 13px;
  }

  .seller-ad-card__price {
    font-size: 14px;
  }

  .seller-ad-card__meta {
    font-size: 11px;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .seller-ads-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CATEGORIES PAGE
   ============================================================ */

.categories-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-page-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, border-color 220ms ease;
}

.category-page-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.category-page-icon {
  /* Same box/glyph size as the home page's .cat-row-icon (both breakpoints
     below mirror its 72px/86px sizing) so a category's icon reads
     identically whether it's seen on the home page slider or here. */
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  transition: transform 250ms ease;
}

.category-page-card:hover .category-page-icon {
  transform: scale(1.08);
}

.category-page-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.category-page-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.category-page-count {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.category-page-arrow {
  font-size: 12px;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 250ms ease;
}

.category-page-card:hover .category-page-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Cards that lead to a subcategory step (rather than straight to search
   results) keep their chevron visible all the time — it's a disclosure
   indicator, not just a hover affordance, so it shouldn't require a
   hover/tap to discover that there's a next step. */
.category-page-btn.has-subcategories .category-page-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-primary);
}

/* The step-1/step-2 category cards are <button>s (not just <a>s) so the
   click can either navigate straight to search results or advance to the
   subcategory step in place — reset button chrome so they render exactly
   like the .category-page-card links do. */
button.category-page-card {
  font: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.category-page-card--all {
  border-color: var(--color-primary);
  background: var(--green-pale-faint);
}

.category-page-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.category-page-back:hover {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (min-width: 960px) {
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Matches .cat-row-icon's own desktop step (see min-width:901px block
     above) so the icon stays the same size on both pages at desktop
     widths, not just mobile. */
  .category-page-icon {
    width: 86px;
    height: 86px;
    border-radius: 20px;
    font-size: 30px;
  }
}

/* ============================================================
   GLOBAL CONFIRM MODAL — replaces native confirm() everywhere (see
   confirmDialog() in app.js). Centered icon-circle layout, same visual
   language as the chat-notification invite modal, so every custom modal
   in the app reads as one consistent, deliberate design instead of a mix
   of the plain Bootstrap default and a few hand-styled ones.
   ============================================================ */
.confirm-modal-content {
  border-radius: var(--radius-lg);
  border: none;
  position: relative;
}

.confirm-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
}

.confirm-modal-body {
  padding: 36px 28px 22px;
}

.confirm-modal-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
}

.confirm-modal-icon--danger {
  background: #FDECEA;
  color: var(--color-danger);
  box-shadow: 0 0 0 6px rgba(217, 72, 58, .08);
}

.confirm-modal-icon--safe {
  background: var(--green-pale);
  color: var(--color-primary);
  box-shadow: 0 0 0 6px rgba(20, 80, 163, .08);
}

.confirm-modal-title {
  font-size: 17px;
  margin-bottom: 8px;
}

.confirm-modal-text {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.confirm-modal-footer {
  border-top: 1px solid var(--color-border);
  padding: 14px 20px 20px;
  gap: 10px;
}

/* ============================================================
   GLOBAL MODAL CENTERING (mobile)
   ============================================================ */
@media (max-width: 575.98px) {
  .modal.show .modal-dialog {
    display: flex !important;
    align-items: center !important;
    margin: 0 auto !important;
    max-width: calc(100vw - 32px) !important;
  }
  .modal.show .modal-content {
    border-radius: var(--radius-lg) !important;
  }
}

/* ============================================================
   DIRECT-TO-R2 UPLOAD PROGRESS OVERLAY
   ============================================================ */
.upload-progress-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(18, 39, 32, 0.72);
  border-radius: inherit;
  pointer-events: none;
}

.upload-progress-bar {
  width: 70%;
  max-width: 140px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width 150ms ease;
}

.upload-progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.image-slot.is-uploading,
#videoUploadSlot.is-uploading,
#videoThumbSlot.is-uploading {
  cursor: wait;
}

/* Retry/resume states — same overlay shell as the progress bar above, just
   swapped content. "waiting"/"retrying" stay pointer-events:none (nothing
   to click, purely informational); "failed" needs pointer-events:auto since
   it's the only state with real buttons in it. */
.upload-progress-overlay[data-state="waiting"],
.upload-progress-overlay[data-state="retrying"] {
  gap: 6px;
}

.upload-progress-overlay[data-state="failed"] {
  pointer-events: auto;
  gap: 8px;
  padding: 10px;
}

.upload-progress-icon {
  font-size: 18px;
  color: #fff;
}

/* "Optimizing…" compression state (see prepareFileForUpload() in
   direct-upload.js) — a gentle pulse rather than a spin, since there's no
   real percentage to report while the compression worker runs. Respects
   prefers-reduced-motion the same way the navbar's star twinkle does. */
@media (prefers-reduced-motion: no-preference) {
  .upload-progress-icon--pulse {
    animation: upload-icon-pulse 1.1s ease-in-out infinite;
  }
}

@keyframes upload-icon-pulse {
  0%, 100% { opacity: .55; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.05); }
}

.upload-progress-state-text {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.3;
  /* Fixed, short vocabulary only ("Retrying…", "Upload failed", etc.) —
     anything longer or dynamic (real error text, retry counts) goes
     through showToast() instead so it can never overflow this slot. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
}

.upload-progress-actions {
  display: flex;
  gap: 6px;
}

.upload-progress-btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
  white-space: nowrap;
}

.upload-progress-btn i {
  font-size: 10px;
}

.upload-progress-btn--retry {
  background: var(--color-accent);
  color: #12271f;
}

.upload-progress-btn--remove {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.upload-progress-btn:hover {
  filter: brightness(1.08);
}

/* Compact failed-state control for the photo queue's small thumbnails
   (.ad-photo-item) — see renderUploadState()'s 'failed' branch in
   direct-upload.js. Just a centered retry icon; removal already has its
   own persistent top-right × on the thumbnail. */
.upload-progress-retry-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-primary);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.upload-progress-retry-btn:hover {
  filter: brightness(0.96);
}

/* ============================================================
   AD PHOTO UPLOADER — placeholder tile + below-it thumbnail queue
   (resources/views/ads/create.blade.php, ads/edit.blade.php,
   public/js/ad-photo-queue.js). Min 1 / max configurable via JS.
   ============================================================ */
.ad-photo-uploader {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ad-photo-drop {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  cursor: pointer;
  background: var(--color-surface);
  transition: border-color 150ms, background-color 150ms;
}

.ad-photo-drop:hover,
.ad-photo-drop:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}

.ad-photo-drop.is-dragover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.ad-photo-drop.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.ad-photo-drop-icon {
  font-size: 24px;
  color: var(--color-text-muted);
  opacity: .7;
  flex-shrink: 0;
}

.ad-photo-drop-text strong {
  display: block;
  font-size: 14px;
  color: var(--color-text);
}

.ad-photo-queue {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ad-photo-item {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
}

.ad-photo-item.is-uploading {
  cursor: wait;
}

.ad-photo-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.ad-photo-item-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 11px;
  cursor: pointer;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-photo-count-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  flex-shrink: 0;
}

/* =====================================================================
   Two-Factor Authentication
   ===================================================================== */

/* Site-wide reminder strip for a verified seller who hasn't finished 2FA
   setup yet — shown on every page (layouts/app.blade.php) until they do. */
.tfa-grace-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  background: #FFF8E1;
  color: #92600A;
  border-bottom: 1px solid #FDE9B8;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
}

.tfa-grace-banner:hover {
  background: #FFF3CD;
}

.tfa-grace-banner.is-expired {
  background: #FEF2F2;
  color: #B91C1C;
  border-bottom-color: #FECACA;
}

.tfa-grace-banner i:last-child {
  font-size: 11px;
  opacity: .7;
}

/* Same banner shape, used inline at the top of the settings page itself
   rather than as a persistent site-wide strip. */
.tfa-required-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #FFF8E1;
  border: 1px solid #FDE9B8;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
  color: #92600A;
}

.tfa-required-banner > i {
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

.tfa-required-banner h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}

.tfa-required-banner p {
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

.tfa-status-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 8px;
}

.tfa-status-card.is-enabled {
  border-color: rgba(20, 80, 163, .25);
  background: var(--green-pale-faint);
}

.tfa-status-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-bg-alt, #F3F4F6);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.tfa-status-card.is-enabled .tfa-status-icon {
  background: var(--green-pale);
  color: var(--color-primary);
}

.tfa-status-text {
  flex: 1;
  min-width: 0;
}

.tfa-status-text h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
}

.tfa-status-text p {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.tfa-method-card,
.tfa-recovery-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
}

.tfa-method-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.tfa-method-text {
  flex: 1;
  min-width: 0;
}

.tfa-method-text h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px;
}

.tfa-method-text p {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin: 0;
}

.tfa-method-action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tfa-method-enabled {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--green-pale);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* Login-challenge "try another method" row */
.tfa-method-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
}

.tfa-method-switch-label {
  color: var(--color-text-muted);
}

.tfa-method-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.tfa-method-switch-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Recovery-code reveal modal grid */
.tfa-recovery-codes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.tfa-recovery-code {
  display: block;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--green-pale-faint);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  color: var(--color-primary);
}

/* Mobile: cards stack (icon+text on top, action in its own full-width
   row) instead of squeezing everything into one flex line, which was
   forcing "Set up" buttons to collide with or fall awkwardly below the
   description text on narrow screens. */
@media (max-width: 576px) {
  .tfa-status-card,
  .tfa-method-card,
  .tfa-recovery-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon text"
      "action action";
    column-gap: 12px;
    row-gap: 12px;
    align-items: center;
    padding: 14px;
  }

  .tfa-status-icon,
  .tfa-method-icon {
    grid-area: icon;
  }

  .tfa-status-text,
  .tfa-method-text {
    grid-area: text;
  }

  .tfa-method-action {
    grid-area: action;
    width: 100%;
    justify-content: space-between;
  }

  /* A single action (Set up / Add phone / Regenerate / Disable) becomes
     a full-width tap target — easier to hit and reads as the row's
     primary call to action. Two actions (the "Enabled" badge plus a
     "Make primary" button) stay their natural width and spread across
     the row via the justify-content above instead. */
  .tfa-method-action > *:only-child {
    flex: 1;
  }

  .tfa-method-action .btn {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .tfa-required-banner {
    flex-direction: column;
  }
}

/* ============================================================
   SEARCH SUGGESTIONS
   Panel under the hero search bar on the home and search pages.
   Markup: resources/views/components/search-suggest.blade.php
   Behaviour: public/js/search-suggest.js
   ============================================================ */

.search-suggest {
  position: relative;
  /* Above the hero's floating icons and the promo slot below it, so the
     open panel is never overlapped by decoration. Stays under the sticky
     header (z-index 50) — scrolling the bar up should tuck it away, not
     have it ride over the nav. */
  z-index: 40;
  text-align: left;
}

/* The field keeps its full pill shape while the panel is open. Squaring
   off the bottom corners only reads as "one connected surface" when the
   panel is flush against the field — this one floats 8px below it, so
   flattening the pill just looked like a clipped shape. The active border
   and ring are enough to tie the two together. */
.search-suggest.is-open .hero-search {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--green-pale), 0 4px 20px rgba(20, 80, 163, .08);
}

.search-suggest__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 4px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}

/* Class-level `display` outranks the UA stylesheet's `[hidden]`, so the
   attribute has to be honoured explicitly — without this the clear button
   sits in the field permanently and pushes the input out of shape. */
.search-suggest__clear[hidden] {
  display: none;
}

.search-suggest__clear:hover,
.search-suggest__clear:focus-visible {
  background: var(--green-pale);
  color: var(--color-primary);
}

.search-suggest__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(58vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px -18px rgba(20, 80, 163, .38), 0 2px 8px rgba(18, 39, 32, .06);
  padding: 6px;
  animation: suggestPanelIn .16s cubic-bezier(.16, 1, .3, 1);
}

.search-suggest__panel[hidden] {
  display: none;
}

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

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

.search-suggest__group + .search-suggest__group {
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding-top: 4px;
}

.search-suggest__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.search-suggest__group-action {
  border: none;
  background: transparent;
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.search-suggest__group-action:hover,
.search-suggest__group-action:focus-visible {
  background: var(--green-pale);
}

.search-suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* Rows are chosen by keyboard as often as by pointer, so hover and the
     keyboard-active state are deliberately identical — nothing should look
     different depending on which one you used. */
  transition: background .12s ease;
}

.search-suggest__item:hover,
.search-suggest__item.is-active {
  background: var(--green-pale-faint);
}

.search-suggest__item.is-active {
  box-shadow: inset 0 0 0 1.5px var(--green-pale);
}

.search-suggest__thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--green-pale-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 16px;
}

.search-suggest__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-suggest__thumb.is-empty::after {
  content: '\f03e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--ink-faint);
  font-size: 14px;
}

.search-suggest__thumb--emoji {
  font-size: 20px;
  line-height: 1;
}

.search-suggest__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-suggest__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggest__label mark {
  background: transparent;
  padding: 0;
  color: var(--color-primary);
  font-weight: 800;
}

.search-suggest__sub {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggest__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--green-pale);
  color: var(--green-deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.search-suggest__badge--boost {
  background: rgba(242, 183, 5, .16);
  color: #8A6A00;
}

.search-suggest__go {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity .12s ease;
}

.search-suggest__item:hover .search-suggest__go,
.search-suggest__item.is-active .search-suggest__go {
  opacity: .7;
}

.search-suggest__empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

@media (max-width: 576px) {
  .search-suggest__panel {
    max-height: min(62vh, 420px);
  }

  .search-suggest__thumb {
    width: 36px;
    height: 36px;
  }

  /* The chevron is decorative and the row is entirely tappable — dropping
     it buys back width for the title on narrow screens. */
  .search-suggest__go {
    display: none;
  }
}