/* Kidlo — site styles */

/* ==========================================================================
   TRUST-COLOR PALETTE  (Color Psychology)
   ---------------------------------------------------------------------------
   The original design used a saturated coral (#FF6B6B) as the dominant color
   for backgrounds, borders, icons AND text. In large doses, warm/saturated
   hues keep the nervous system mildly activated — it reads as "energetic"
   but also raises visual fatigue and subtle stress, which works against a
   parent trying to calmly evaluate a stranger's used children's items.

   Fix: the app's *surfaces* (background, cards, borders) now use soft,
   desaturated mint/off-white tones — colors associated with cleanliness,
   safety and calm. The coral is not removed; it is demoted to a single job:
   marking the ONE action we want the eye to land on first (the Isolation /
   von Restorff Effect — an item that differs from its surroundings is
   disproportionately noticed and remembered). So --color-cta now appears
   almost nowhere except primary "buy-side" conversion buttons.

   A second, calmer accent (teal) fills the role coral used to play for
   everyday interactive elements (links, active filters, icons, the "sell"
   flow) — it still signals "interactive" without spending the one truly
   attention-grabbing color on things that aren't the primary conversion.

   All colors below were checked against WCAG 2.1 AA (4.5:1 for normal text)
   wherever they are used as text or as a button fill with white text —
   see the Fluency Heuristic note further down for why that matters.
   ========================================================================== */
:root {
  --color-bg:             #F5FAF8; /* app background: soft mint-tinted off-white, replaces #FFF9F5 peach */
  --color-surface:        #FFFFFF; /* cards / header / sidebar / modals */
  --color-surface-alt:    #EAF6F2; /* soft mint fill for icon buttons & active states, replaces peach #FFF0EB */
  --color-border:         #DCEEE8; /* soft mint-grey border/divider, replaces pink #FFE8DC everywhere */

  --color-text:           #3A4568; /* Kidlo brand navy (sampled from the wordmark) — 9.4:1 on white, AAA */
  --color-text-secondary: #5C6580; /* muted navy-gray, ~5.3:1 on white (AA) */

  --color-cta:            #CF3B26; /* primary "buy" CTA only — 4.88:1 with white text (AA-safe) */
  --color-cta-hover:      #B8301C;

  --color-accent:         #158048; /* Kidlo green, darkened for AA: the wordmark's #12A45E gives white text only 3.2:1, this functional shade gives 4.98:1. The pure brand green lives in the logo. */
  --color-accent-hover:   #116B3C;
  --color-accent-soft:    #E2F4EA; /* light Kidlo-green fill for hover/active chip backgrounds */

  --color-gold:           #B45309; /* rating gold, darkened from #FBBF24 (1.67:1) to 5.0:1 so it's AA-safe as text */
}

/* ==========================================================================
   CORNER RADIUS — squarer, less "bubbly" than Tailwind's defaults.
   ---------------------------------------------------------------------------
   Cards, buttons, chips, badges and pills across the site used Tailwind's
   rounded-full/rounded-2xl/rounded-xl utilities (16-9999px), which reads as
   very soft/"pill-shaped". Overriding the utility classes here (one place,
   !important to beat Tailwind's own injected stylesheet regardless of load
   order) keeps rounded corners but pulls every one of those elements to a
   consistent, noticeably squarer radius in a single pass, rather than
   editing each of the ~100 call sites individually.
   True circles that represent something round by nature (color swatches,
   the range-slider handle, small status dots) are hand-coded with
   border-radius:50% further down and are intentionally left untouched.
   ========================================================================== */
.rounded-full { border-radius: 8px !important; }
.rounded-2xl  { border-radius: 12px !important; }
.rounded-xl   { border-radius: 8px !important; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: 'Inter', sans-serif; background: var(--color-bg); color: var(--color-text); }
/* Type system (clean/technical): Montserrat gives headings a strong,
   geometric, authoritative presence; Inter (body) is the on-screen legibility
   gold standard for UI text; Roboto handles the mechanical numerals. The tiny
   negative tracking on headings keeps Montserrat crisp rather than airy. */
.font-display { font-family: 'Montserrat', sans-serif; letter-spacing: -0.01em; }

.product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
.product-card:hover .product-img-overlay { opacity: 1; }
.product-card:hover .quick-view-btn { transform: translateY(0); opacity: 1; }
.quick-view-btn { transform: translateY(10px); opacity: 0; transition: all 0.3s ease; }
.product-img-overlay { opacity: 0; transition: opacity 0.3s ease; }
.nav-btn { transition: all 0.25s ease; }
.nav-btn:hover { transform: scale(1.05); }

/* ==========================================================================
   HERO — layered gradient + soft blurred brand shapes.
   The old hero was one flat, near-white mint gradient with two faint white
   circles that read as broken image placeholders. This gives it depth
   (three stacked radial/linear gradients) and warmth, and fills the dead
   space around the centred copy with playful colour instead of nothing.
   ========================================================================== */
.hero-section {
  background:
    radial-gradient(1100px 480px at 12% -20%, #E4F6EE 0%, rgba(228,246,238,0) 60%),
    radial-gradient(900px 460px at 92% -10%, #E7F0FF 0%, rgba(231,240,255,0) 58%),
    linear-gradient(135deg, #E7F6EF 0%, #EBF2FC 52%, #FDEFE6 100%);
}
.hero-blob {
  position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
  filter: blur(10px); opacity: 0.6;
}
.hero-blob-1 { width: 130px; height: 130px; top: 12%;  left: 7%;  background: #FFD5E4; }  /* pink   */
.hero-blob-2 { width: 84px;  height: 84px;  top: 24%;  right: 11%; background: #FFE7A8; }  /* yellow */
.hero-blob-3 { width: 170px; height: 170px; bottom: -46px; left: 15%; background: #CDE6FF; } /* blue */
.hero-blob-4 { width: 74px;  height: 74px;  bottom: 18%; right: 17%; background: #B9E9CF; }  /* green  */
.hero-blob-5 { width: 56px;  height: 56px;  top: 16%;  left: 33%; background: #FFCFC2; opacity: 0.5; } /* peach */
@media (max-width: 640px) { .hero-blob-1, .hero-blob-5 { display: none; } }

.hero-eyebrow {
  display: inline-block; background: #FFFFFF; color: var(--color-accent);
  font-weight: 800; font-size: 12px; letter-spacing: 0.01em;
  padding: 6px 15px; border-radius: 999px; margin-bottom: 16px;
  box-shadow: 0 3px 14px rgba(21,128,72,0.12);
}
.hero-title {
  color: var(--color-text); max-width: 46rem;
  font-size: clamp(1.95rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em;
}
.hero-cta { box-shadow: 0 8px 22px rgba(21,128,72,0.28); }
.hero-trust {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.75); border: 1px solid var(--color-border);
  color: var(--color-text); font-size: 12.5px; font-weight: 700;
  padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(4px);
}

/* ==========================================================================
   HOME CATEGORY STRIP — colourful one-tap shortcuts under the hero.
   ========================================================================== */
.home-cat-strip {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
  flex: 1; min-width: 0; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.home-cat-strip::-webkit-scrollbar { display: none; }
.home-cat-tile {
  flex: 1 0 108px; min-width: 108px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 10px; border: none; border-radius: 20px; cursor: pointer;
  background: var(--tile, var(--color-surface-alt));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.home-cat-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(58,69,104,0.12); }
.home-cat-ic {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.72);
  display: flex; align-items: center; justify-content: center;
}
.home-cat-ic svg { width: 22px; height: 22px; color: var(--color-text); }
.home-cat-lb { font-size: 12px; font-weight: 800; color: var(--color-text); text-align: center; line-height: 1.15; }

/* ==========================================================================
   "CUM FUNCȚIONEAZĂ" steps — coloured icon tiles + a big faint step number.
   ========================================================================== */
.how-step {
  position: relative; text-align: center;
  background: var(--color-surface); border: 2px solid var(--color-border);
  border-radius: 20px; padding: 26px 20px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.how-step:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(58,69,104,0.10); }
.how-num {
  position: absolute; top: 12px; right: 18px;
  font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 30px;
  line-height: 1; color: var(--color-border);
}
.how-ic {
  width: 58px; height: 58px; border-radius: 17px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.how-ic svg { width: 27px; height: 27px; }

/* Reusable coloured feature-icon tile (verify / donate / profile teasers) */
.feat-ic {
  width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
}
.feat-ic svg { width: 22px; height: 22px; }
.feat-card {
  background: var(--color-surface); border: 2px solid var(--color-border);
  border-radius: 18px; padding: 20px 16px; text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.feat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(58,69,104,0.09); }

/* Donation band inner card + soft badge */
.donate-band { background: linear-gradient(135deg, #FDEFE9 0%, #FCF4DE 55%, #F3F0FF 100%); border-top: 2px solid var(--color-border); }
.donate-badge {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  background: #FFFFFF; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(207,59,38,0.14);
}

/* Keyboard focus ring: :focus-visible shows ONLY for keyboard navigation
   (Tab), never on a mouse click — so the clean, ring-free look on click is
   kept while keyboard users get a clear, brand-colored indicator that tracks
   the element's rounded shape. Covers every interactive control. */
a:focus-visible,
button:focus-visible,
.nav-btn:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(21,128,72,0.55);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Everyday interactive chips (sizes, ages, conditions) now use the calm
   accent teal instead of coral on hover/active — coral is reserved for the
   handful of real conversion buttons (Isolation Effect). */
.search-bar { transition: box-shadow 0.3s ease, border-color 0.3s ease; border-color: var(--color-border) !important; }
.search-bar:focus-within { box-shadow: 0 0 0 3px rgba(21,128,72,0.18); border-color: var(--color-accent); }

.fade-in { animation: fadeIn 0.5s ease forwards; opacity: 0; }
@keyframes fadeIn { to { opacity: 1; } }

.login-modal-bg { background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); }

.toast { animation: slideUp 0.4s ease, fadeOut 0.4s ease 2s forwards; }
@keyframes slideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes fadeOut { to{opacity:0;transform:translateY(-10px)} }

.account-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--color-surface); border-radius: 10px; border: 2px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 190px; z-index: 100;
  /* Notif/msg dropdowns set their own fixed inline width (320-330px) —
     this caps it so it can't run off the left edge on a narrow phone,
     same treatment #help-panel already gets. */
  max-width: calc(100vw - 32px);
}
.account-dropdown.open { display: block; }
.account-dropdown-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  font-size: 13px; font-weight: 600; color: var(--color-text); cursor: pointer; transition: background 0.2s;
}
.account-dropdown-item:hover { background: var(--color-surface-alt); color: var(--color-accent); }
.account-dropdown-item:last-child { border-radius: 0 0 8px 8px; }

.sidebar-section { border-bottom: 1px solid var(--color-border); padding-bottom: 12px; margin-bottom: 12px; }

/* ==========================================================================
   TOP CATEGORY BAR + HOVER MEGA-MENUS
   ---------------------------------------------------------------------------
   Replaces the always-visible sidebar category tree. Categories are a
   navigation decision, not a purchase one, so — same reasoning as the old
   sidebar — they use the calm accent teal rather than the reserved CTA coral.
   ========================================================================== */
/* Scrollable single-row category bar + arrow controls (replaces the old
   flex-wrap-to-a-second-line approach). Only this inner viewport scrolls —
   see the comment in index.html on why the mega-menu had to move to
   position:fixed for this to work without clipping it. */
.cat-bar-viewport {
  flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
}
.cat-bar-viewport::-webkit-scrollbar { display: none; }
.cat-scroll-arrow {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--color-surface-alt); color: var(--color-accent); transition: opacity 0.15s;
}
.cat-scroll-arrow:hover { background: var(--color-accent-soft); }
.cat-scroll-arrow svg { width: 16px; height: 16px; }
/* Hidden rather than just disabled when there's nothing to scroll to in
   that direction (see updateCatScrollArrows in app.js) — an arrow that's
   always visible but sometimes inert reads as broken, not as "at the end". */
.cat-scroll-arrow.hidden { display: none !important; }

.cat-nav-item { position: relative; flex-shrink: 0; }
/* Pill-style entries (was: plain text with an underline indicator). The
   rest of the site's interactive vocabulary is soft rounded chips (age
   chips, condition chips, offer buttons) — the nav was the one element
   still speaking "underlined text link". A filled pill on hover/active
   also gives a bigger, more obvious hit target than a 2px underline. */
/* Taller pills (margin 9px, padding 9px) make the bar a more substantial
   band under the header instead of a cramped strip — navigation this
   central deserves the breathing room, and the bigger hit area helps on
   touch screens too. */
.cat-nav-label {
  display: flex; align-items: center; gap: 6px; margin: 9px 1px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 700; color: var(--color-text); cursor: pointer;
  white-space: nowrap; border-radius: 8px; transition: background 0.15s, color 0.15s;
}
.cat-nav-label:hover { background: var(--color-surface-alt); color: var(--color-accent); }
.cat-nav-chevron { width: 12px; height: 12px; opacity: 0.6; }
.cat-nav-item.active .cat-nav-label,
.cat-nav-item.mega-open .cat-nav-label { background: var(--color-accent-soft); color: var(--color-accent); }
/* Category line icons: always accent teal, independent of the label's
   idle/hover color — a constant-color anchor per entry so a returning
   user relocates "their" category by its mark without re-reading nine
   labels (recognition over recall), while a single hue + uniform stroke
   keeps the bar reading as one designed system. */
.cat-nav-icon { width: 16px; height: 16px; color: var(--color-accent); flex-shrink: 0; }

/* The dropdown itself: a floating rounded card. Now that the trigger is a
   pill rather than an underlined tab, a flat-topped menu "attached" to the
   bar no longer lines up with anything — full corners + full border read
   as one coherent popover. Still anchored flush to the bar (no visual gap)
   so the cursor never crosses dead space that would fire the
   mouseleave-close timer.
   position:fixed (not absolute) + top/left set inline by openMegaMenu() in
   app.js: the trigger lives inside #category-bar-viewport, which scrolls
   (overflow-x:auto) — an absolutely-positioned descendant of a scrolling
   ancestor gets clipped the moment it extends past that ancestor's box
   (see the comment on #category-bar-viewport in index.html/style.css).
   Fixed positioning is computed against the viewport instead, so it's
   immune to that regardless of where in the DOM it lives. */
.mega-menu {
  display: none; position: fixed; min-width: 230px;
  background: var(--color-surface); border: 2px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,0.14);
  padding: 10px 0; z-index: 50;
}
.mega-menu.open { display: block; }
.mega-menu.two-col { columns: 2; column-gap: 4px; padding: 10px 8px; min-width: 400px; }
.mega-menu-item {
  display: block; padding: 7px 18px; font-size: 12.5px; font-weight: 600;
  color: var(--color-text-secondary); cursor: pointer; white-space: nowrap;
  break-inside: avoid; transition: background 0.15s, color 0.15s;
}
.mega-menu-item:hover { background: var(--color-surface-alt); color: var(--color-accent); }
/* Group header inside a merged dropdown (e.g. "Hrănire" vs "Igienă &
   Sănătate" within "Îngrijire & Hrănire Bebe") — same treatment the old
   Fete/Băieți sub-headers used, so a merged category still reads as two
   clearly labeled groups instead of one undifferentiated list. */
.mega-menu-group-label {
  display: block; padding: 8px 18px 2px; font-size: 11px; font-weight: 800;
  color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.3px;
  /* break-after:avoid stops the CSS column-balancer from stranding a group
     header at the bottom of one column while its items flow into the next —
     it forces the header to move down with its first item instead. */
  break-inside: avoid; break-before: auto; break-after: avoid;
}

/* Filters panel: hidden until a category is actually chosen (Hick's Law —
   don't show narrowing controls before there's anything to narrow). */
.filters-hidden { display: none !important; }

/* Color filter swatches — also reused read-only on the product page to show
   a listing's available colors. */
.color-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; display: inline-block;
  border: 2px solid var(--color-border); transition: transform 0.15s, border-color 0.15s;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }

.condition-chip {
  cursor: pointer; transition: all 0.2s; border: 2px solid var(--color-border);
  border-radius: 8px; padding: 3px 9px; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); background: #fff;
}
.condition-chip.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* Dual-handle range slider — accent teal instead of coral (filter UI, not a CTA) */
.dual-range-wrap { position: relative; height: 24px; margin: 6px 0; }
.dual-range-track { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; height: 4px; background: var(--color-border); border-radius: 2px; }
.dual-range-fill { position: absolute; height: 100%; background: var(--color-accent); border-radius: 2px; }
.dual-range-wrap input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 24px;
  -webkit-appearance: none; appearance: none; background: transparent;
  pointer-events: none; outline: none; margin: 0; padding: 0;
}
.dual-range-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: all;
  width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent);
  cursor: pointer; box-shadow: 0 2px 6px rgba(21,128,72,0.35); border: 2px solid #fff;
}
.dual-range-wrap input[type="range"]::-moz-range-thumb {
  pointer-events: all; width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-accent); cursor: pointer; box-shadow: 0 2px 6px rgba(21,128,72,0.35); border: 2px solid #fff;
}

/* Sidebar scrollbar */
.sidebar-scroll { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

/* Profile page */
/* Pill tabs (was folder tabs): same interactive vocabulary as the category
   bar — icon + label pills, filled when active. */
.profile-tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.2s; border-radius: 8px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; border: none;
}
.profile-tab-btn.active { background: #fff; color: var(--color-accent); box-shadow: 0 3px 10px rgba(35,48,43,0.10); }
.profile-tab-btn:not(.active) { background: rgba(35,48,43,0.06); color: var(--color-text-secondary); }
.profile-tab-btn:not(.active):hover { background: rgba(35,48,43,0.1); color: var(--color-text); }

/* Translucent stat tiles on the gradient header. */
.profile-stat-card {
  background: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.9);
  border-radius: 10px; padding: 10px 12px; text-align: center;
}
.profile-stat-icon { width: 15px; height: 15px; color: var(--color-accent); margin: 0 auto 3px; display: block; }

/* Toggle switch (settings): hidden checkbox + track/knob. */
.switch { position: relative; display: inline-flex; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  width: 38px; height: 22px; border-radius: 11px; background: var(--color-border);
  display: inline-block; transition: background 0.2s; position: relative;
}
.switch-knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.2s;
}
.switch input:checked + .switch-track { background: var(--color-accent); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(16px); }

.listing-card { transition: box-shadow 0.2s; }
.listing-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

/* Sell page */
#sell-subcategory-wrap { display: none; }
.sell-select {
  width: 100%; border: 2px solid var(--color-border); border-radius: 8px; padding: 10px 14px;
  font-size: 13px; background: var(--color-bg); outline: none; color: var(--color-text); transition: border-color 0.2s;
}
.sell-select:focus { border-color: var(--color-accent); }
/* Micro-labels: uppercase + letterspacing reads as a designed form system
   (the "editorial" register), and the extra letterforms make an 10.5px
   label as legible as a plain 11px one. */
.sell-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); display: block; margin-bottom: 4px; }
.sell-char-count { font-size: 10.5px; font-weight: 700; color: var(--color-text-secondary); opacity: 0.75; }

/* Numbered section header: number chip + title + one-line helper. */
.sell-section-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.sell-section-num {
  font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 700; color: var(--color-accent);
  background: var(--color-accent-soft); border-radius: 8px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* 5-slot photo grid. Empty slots are visible sockets (they say "up to 5"
   without prose); the first slot doubles as the cover. */
.photo-slot {
  aspect-ratio: 1; border: 2px dashed var(--color-border); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; background: var(--color-bg); transition: border-color 0.15s, background 0.15s;
  position: relative; overflow: hidden;
}
.photo-slot:hover { border-color: var(--color-accent); background: var(--color-surface-alt); }
.photo-slot.filled { border-style: solid; cursor: default; }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot-label { font-size: 9.5px; font-weight: 700; color: var(--color-text-secondary); }
.photo-slot-cover-badge {
  position: absolute; bottom: 4px; left: 4px; z-index: 2;
  font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 5px;
  background: rgba(35,48,43,0.75); color: #fff; letter-spacing: 0.3px;
}
.photo-slot-remove {
  position: absolute; top: 4px; right: 4px; z-index: 2; width: 18px; height: 18px;
  border: none; border-radius: 6px; background: rgba(35,48,43,0.75); color: #fff;
  font-size: 10px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* Delivery options as selectable cards (hidden radio, whole card is the
   control; :has() flips the selected state). */
.delivery-card {
  border: 2px solid var(--color-border); border-radius: 8px; padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  cursor: pointer; background: var(--color-bg); transition: border-color 0.15s, background 0.15s;
}
.delivery-card input { position: absolute; opacity: 0; pointer-events: none; }
.delivery-card:hover { border-color: var(--color-accent); }
.delivery-card:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.delivery-card-icon { width: 18px; height: 18px; color: var(--color-accent); }
.delivery-card-title { font-size: 12px; font-weight: 800; color: var(--color-text); }
.delivery-card-sub { font-size: 10.5px; color: var(--color-text-secondary); line-height: 1.3; }

/* Listing-strength meter */
.strength-track { height: 8px; border-radius: 4px; background: var(--color-border); overflow: hidden; }
.strength-fill { height: 100%; width: 0%; border-radius: 4px; background: var(--color-accent); transition: width 0.35s ease, background 0.35s ease; }

/* Age filter chips */
.age-chip { cursor: pointer; transition: all 0.2s; border: 2px solid var(--color-border); border-radius: 8px; padding: 4px 10px; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); background: #fff; display: inline-block; }
.age-chip:hover, .age-chip.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
/* !important + a class-specific selector, rather than relying on Tailwind's
   generic .hidden utility: this rule sets `display` too, and which of two
   same-specificity rules wins depends on injection order against Tailwind's
   runtime-generated stylesheet — not worth leaving to chance. */
.age-chip.hidden { display: none !important; }

/* Quick view seller card */
.qv-seller-card { background: var(--color-bg); border: 2px solid var(--color-border); border-radius: 10px; padding: 16px; }
.review-item { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.review-item:last-child { border-bottom: none; }

/* Image upload area */
.upload-area { border: 2px dashed var(--color-border); border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--color-bg); }
.upload-area:hover { border-color: var(--color-accent); background: var(--color-surface-alt); }

/* Chat & Messaging */
.conv-item { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; transition:background 0.2s; border-bottom:1px solid var(--color-border); }
.conv-item:hover { background:var(--color-bg); }
.conv-item.active { background:var(--color-surface-alt); border-left:3px solid var(--color-accent); }
/* Message preview dropdown rows (header icon) — same idea as .conv-item,
   compacted for a quick-glance popup rather than a full inbox pane. */
.msg-preview-item { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; cursor:pointer; transition:background 0.2s; border-bottom:1px solid var(--color-border); }
.msg-preview-item:hover { background:var(--color-bg); }
.msg-preview-item:last-child { border-bottom:none; }
.msg-row { display:flex; margin-bottom:10px; }
.msg-row.sent { justify-content:flex-end; }
.msg-row.received { justify-content:flex-start; }
/* max-width lives HERE, not on .msg-bubble — .msg-bubble-wrap is a flex
   item of .msg-row (which has a definite width), so a percentage here
   resolves unambiguously. Putting it on .msg-bubble instead (a grandchild,
   inside this same auto-sized wrapper) makes the percentage resolve
   against a containing block whose own size depends on ITS content in a
   circular way — engines fall back to treating it as ~0, so the bubble
   collapses to a couple pixels wide and every character of the message
   wraps onto its own line ("B" / "u" / "n" / "a" each on a separate row). */
.msg-bubble-wrap { max-width:72%; }
.msg-bubble { padding:9px 14px; font-size:13px; line-height:1.45; word-break:break-word; }
.msg-sent { background:var(--color-accent); color:#fff; border-radius:10px 10px 3px 10px; }
.msg-received { background:#F3F4F6; color:var(--color-text); border-radius:10px 10px 10px 3px; }
.msg-time { font-size:10px; margin-top:3px; opacity:0.55; }
.msg-row.sent .msg-time { text-align:right; }
.chat-input { border:2px solid var(--color-border); border-radius:8px; padding:10px 16px; font-size:13px; outline:none; flex:1; transition:border-color 0.2s; font-family:inherit; resize:none; max-height:80px; }
.chat-input:focus { border-color:var(--color-accent); }

/* Offer / counter-offer cards inside the chat thread (Vinted-style
   negotiation). A structured card instead of a plain text bubble so the
   price and status ("pending"/"accepted"/"declined") stay readable and
   the accept/decline/counter actions have somewhere to live — see
   renderOfferBubble() in app.js. */
/* width (not just max-width) is load-bearing here: .offer-card sits inside
   an un-widthed flex item (same wrapper .msg-bubble uses), so without a
   definite width its layout size is driven by its *content's* min-content
   — and the 3-button action row's min-content (esp. "Contraofertă", the
   longest label) is wider than the chat pane, pushing the whole card out
   past the visible message area instead of wrapping inside it. */
.offer-card { width:220px; max-width:78%; border:2px solid var(--color-border); border-radius:10px; padding:10px 12px; background:#fff; }
.msg-row.sent .offer-card { border-color:var(--color-accent); background:#F3FAF9; }
.offer-card-head { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:var(--color-accent); text-transform:uppercase; letter-spacing:0.3px; }
.offer-price { font-family:'Montserrat',sans-serif; font-size:20px; font-weight:700; color:var(--color-text); margin:2px 0 4px; }
.offer-status { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; }
.offer-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.offer-btn { flex:1 1 auto; min-width:0; border:none; cursor:pointer; border-radius:8px; padding:6px 3px; font-size:10.5px; font-weight:800; text-align:center; white-space:normal; overflow-wrap:break-word; transition:opacity 0.15s; }
.offer-btn:hover { opacity:0.8; }
.offer-btn-accept { background:#2E7D32; color:#fff; }
.offer-btn-decline { background:#F3F4F6; color:#B3261E; }
.offer-btn-counter { background:var(--color-accent-soft); color:var(--color-accent); }
.offer-checkout-btn { display:block; width:100%; margin-top:8px; border:none; cursor:pointer; border-radius:8px; padding:8px; font-size:12px; font-weight:800; background:var(--color-cta); color:#fff; }
.offer-checkout-btn:hover { opacity:0.9; }
/* Notification badges (unread dot, message count) are a deliberate
   exception: they don't ask the user to click anything, they signal
   "something changed" — a role red/coral badges universally play in
   consumer apps, distinct from a CTA. Kept coral here on purpose. */
.unread-dot { width:8px; height:8px; border-radius:50%; background:var(--color-cta); flex-shrink:0; }
.msg-nav-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; border-radius:9px; background:var(--color-cta); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* ==========================================================================
   Promoted cards — Contour Bias
   ---------------------------------------------------------------------------
   Previously: a 2px solid colored border ran around the whole card. A hard,
   saturated outline reads as a "fence" — it fights the soft, rounded,
   friendly language used everywhere else and adds clutter next to the
   product photo. Replaced with a soft, colored drop shadow: same "this is
   special" signal, but it reads as gentle depth/light instead of a barrier,
   which keeps the rounded-corner "safe and approachable" feeling intact.
   ========================================================================== */
.promoted-gold   { box-shadow: 0 10px 28px rgba(146,112,12,0.22); }
.promoted-silver { box-shadow: 0 10px 28px rgba(86,99,109,0.20); }
.promoted-bronze { box-shadow: 0 10px 28px rgba(138,75,35,0.20); }
/* The promo ribbon shrank from a full-width bar (competing with the product
   photo for attention) to a small rounded corner pill — same Social Proof
   signal ("this listing is promoted"), far less visual noise. Colors are
   solid (no gradient) and darkened so white text clears 4.5:1 AA.*/
.promo-tag {
  position:absolute; top:8px; right:8px; left:auto;
  display:flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:6px;
  font-size:10px; font-weight:800; letter-spacing:0.3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.promo-gold   { background: #92700C; color:#fff; }
.promo-silver { background: #56636D; color:#fff; }
.promo-bronze { background: #8A4B23; color:#fff; }

/* "Exemplu" marker on seed/demo sellers, their listings, reviews, and chat
   — neutral slate rather than any trust/brand color, so it never reads as
   an endorsement or a warning, just informational. See demoBadgeHtml() /
   isDemoSeller() in app.js. */
.demo-badge {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 800;
  letter-spacing: 0.3px; padding: 3px 8px; border-radius: 6px;
  background: #EDEFF5; color: #4B5670; border: 1px solid #D5D9E6;
}

/* Seller click hint */
.seller-clickable { cursor:pointer; transition:opacity 0.2s; }
.seller-clickable:hover { opacity:0.85; }

/* "În curând" pill for pre-launch pages (verification, donations). */
.coming-soon-pill {
  display: inline-block; padding: 3px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  background: rgba(35,48,43,0.08); color: var(--color-text-secondary);
}

/* Favorite (heart) button on product cards / product page. Filled state
   uses the coral CTA red — the universally-understood "saved" color. */
.fav-btn {
  width: 34px; height: 34px; border-radius: 8px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92); box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.15s;
}
.fav-btn:hover { transform: scale(1.1); }
.fav-btn svg { width: 17px; height: 17px; color: var(--color-text-secondary); }
.fav-btn.faved svg { color: var(--color-cta); fill: var(--color-cta); }

/* Promotion package cards (sell form step 06 + promote modal). Radio-card
   pattern like .delivery-card; tier identity via the small colored label
   in the existing bronze/silver/gold promo colors. */
.promo-pkg-card {
  position: relative; border: 2px solid var(--color-border); border-radius: 10px;
  padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; background: var(--color-bg); transition: border-color 0.15s, background 0.15s;
}
.promo-pkg-card input { position: absolute; opacity: 0; pointer-events: none; }
.promo-pkg-card:hover { border-color: var(--color-accent); }
.promo-pkg-card:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.promo-pkg-tier { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.promo-pkg-tier.t-none   { color: var(--color-text-secondary); }
.promo-pkg-tier.t-bronze { color: #8A4B23; }
.promo-pkg-tier.t-silver { color: #56636D; }
.promo-pkg-tier.t-gold   { color: #92700C; }
.promo-pkg-name { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: var(--color-text); }
.promo-pkg-price { font-size: 13px; font-weight: 800; color: var(--color-text); }
.promo-pkg-price small { font-weight: 600; color: var(--color-text-secondary); }
.promo-pkg-tag { font-size: 10.5px; color: var(--color-text-secondary); line-height: 1.35; }
.promo-pkg-popular {
  position: absolute; top: -8px; right: 8px; padding: 2px 8px; border-radius: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  background: var(--color-cta); color: #fff;
}

/* Recently-viewed strip cards (horizontal scroll). */
.recent-card {
  flex: 0 0 130px; border: 2px solid var(--color-border); border-radius: 10px;
  overflow: hidden; cursor: pointer; background: var(--color-surface);
  transition: transform 0.2s, box-shadow 0.2s;
}
.recent-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.10); }
.recent-card .recent-thumb {
  height: 90px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-surface-alt), var(--color-border));
  font-size: 34px; overflow: hidden; position: relative;
}
.recent-card .recent-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Help widget — floating corner button + panel that slides up from it.
   Kept in the DOM at all times (not display:none) so the transform/opacity
   transition can actually animate; .open is what makes it visible. */
#help-fab:hover { transform: scale(1.06); }
#help-panel {
  position: absolute; bottom: 68px; right: 0;
  width: 320px; max-width: calc(100vw - 40px);
  background: var(--color-surface); border: 2px solid var(--color-border);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  opacity: 0; transform: translateY(16px) scale(0.98);
  pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease;
  transform-origin: bottom right;
}
#help-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }


/* ==========================================================================
   MEGA-BATCH: skeletons, mobile bottom nav, micro-interactions, misc.
   ========================================================================== */

/* Skeleton loading — the catalog now loads over the network from Supabase;
   shimmering placeholders make the wait read as "fast site working" instead
   of "broken empty page" (perceived performance). */
.skeleton-card { border-radius: 12px; overflow: hidden; background: var(--color-surface); border: 2px solid var(--color-border); }
.skeleton-block { background: linear-gradient(90deg, var(--color-border) 25%, var(--color-surface-alt) 50%, var(--color-border) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton-img { aspect-ratio: 1; }
.skeleton-line { height: 12px; border-radius: 6px; margin: 8px 12px; }
.skeleton-line.short { width: 40%; }

/* Mobile bottom navigation — app-style tab bar; the center "Vinde" action
   is elevated because listing items is the marketplace's supply engine. */
#bottom-nav { display: none; }
@media (max-width: 1023px) {
  #bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
    background: var(--color-surface); border-top: 2px solid var(--color-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: flex-end;
  }
  /* keep page content + floating helpers clear of the bar */
  #app { padding-bottom: 70px; }
  .help-fab-wrap { bottom: 84px !important; }
  #toast-container { bottom: 88px !important; }
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer; padding: 4px 10px;
  font-size: 10px; font-weight: 700; color: var(--color-text-secondary);
}
.bottom-nav-item svg { width: 21px; height: 21px; }
.bottom-nav-item.active { color: var(--color-accent); }
.bottom-nav-sell {
  width: 48px; height: 48px; border-radius: 14px; margin-top: -18px;
  background: var(--color-accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(21,128,72,0.35);
}
.bottom-nav-sell svg { width: 24px; height: 24px; }

/* Heart pop micro-interaction when a listing gets saved. */
@keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.fav-btn.faved svg { animation: fav-pop 0.35s ease; }

/* Second-photo-on-hover (fashion e-commerce classic): the card swaps to
   the listing's 2nd photo while hovered — more information, zero clicks. */
.card-img-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s ease; }
.product-card:hover .card-img-hover { opacity: 1; }

/* Toast types — colored, so success/error reads before the words do. */
.toast.t-success { background: var(--color-accent) !important; }
.toast.t-error   { background: #B3261E !important; }

/* Sold overlay badge on cards. */
.sold-overlay {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  background: rgba(58,69,104,0.45);
}
.sold-overlay span {
  background: #fff; color: var(--color-text); font-weight: 800; font-size: 13px;
  padding: 6px 18px; border-radius: 8px; letter-spacing: 0.5px; text-transform: uppercase;
}

/* Search suggestions dropdown. */
#search-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--color-surface); border: 2px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.14); overflow: hidden; display: none;
}
#search-suggest.open { display: block; }
.suggest-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; font-size: 13px; color: var(--color-text); }
.suggest-item:hover { background: var(--color-surface-alt); }
.suggest-item .s-cat { margin-left: auto; font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; }

/* Chat page on phones: the two-pane conversation-list + thread layout was
   fixed at width:280px for the list with no mobile handling at all, forcing
   either horizontal overflow or an unusably narrow thread pane. Below the
   site's existing 1023px breakpoint, only one pane shows at a time — the
   list by default, the thread once #page-chat gets .thread-open (toggled by
   openConversation()/backToConvList() in app.js) — with a back button
   (.chat-back-btn, rendered into #chat-subheader) to return to the list. */
.chat-back-btn { display: none; }
@media (max-width: 1023px) {
  .chat-panes { height: 75vh; }
  .chat-list-col { width: 100% !important; border-right: none !important; }
  .chat-thread-col { display: none !important; }
  #page-chat.thread-open .chat-list-col { display: none !important; }
  #page-chat.thread-open .chat-thread-col { display: flex !important; }
  .chat-back-btn { display: inline-flex !important; }
}

/* Size-guide table */
.size-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.size-table th { text-align: left; padding: 7px 10px; background: var(--color-surface-alt); color: var(--color-accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.size-table td { padding: 7px 10px; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.size-table tr:last-child td { border-bottom: none; }


/* Mobile filters bottom-sheet: on phones the (desktop-sticky) sidebar
   becomes a slide-up sheet when .mobile-open is set. */
@media (max-width: 1023px) {
  #filters-sidebar.mobile-open {
    display: block !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0; top: auto !important;
    width: 100% !important;
    max-height: 78vh !important;
    z-index: 48;
    background: var(--color-surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,0.25);
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto !important;
    animation: sheetUp 0.25s ease;
  }
  #filters-sidebar.mobile-open > div { border: none !important; }
  #filters-sidebar.mobile-open #mobile-filters-close { display: flex !important; }
}
@keyframes sheetUp { from { transform: translateY(40%); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
#mobile-filters-btn { display: none; }
@media (max-width: 1023px) { #mobile-filters-btn.available { display: inline-flex !important; } }

/* Share buttons on the product page */
.share-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800;
  padding: 6px 12px; border-radius: 8px; border: none; cursor: pointer; }
.share-wa { background: #E7F8EE; color: #128C7E; }
.share-copy { background: var(--color-surface-alt); color: var(--color-accent); }


/* Mobile category tiles (horizontal scroll under the hero). */
.cat-tile {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: 10px; border: 2px solid var(--color-border);
  background: var(--color-surface); font-size: 12px; font-weight: 800;
  color: var(--color-text); cursor: pointer; white-space: nowrap;
}
.cat-tile svg { width: 15px; height: 15px; color: var(--color-accent); }
.cat-tile.active { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }