/* ==========================================================================
   Colecto — sistem de stiluri
   OLX brand tokens · font Geomanist · greutate maximă: Medium (500)

   Cuprins
   01. Fonturi
   02. Tokeni
   03. Bază
   04. Layout
   05. Header
   06. Butoane
   07. Containere & formulare
   08. Chips, pastile, etichete
   09. Cartonaș item
   10. Selecție multiplă
   11. Progres
   12. Hero campanie
   13. Hartă
   14. Listă colecționari
   15. Mesagerie
   16. Note, stări goale, subsol, modal
   ========================================================================== */

/* ==========================================================================
   01. FONTURI — assets/fonts/
   Book 350 · Regular 400 · Medium 500. Nu există bold: accentul se face
   prin dimensiune, culoare și letter-spacing, nu prin greutate.
   ========================================================================== */
@font-face{
  font-family:'Geomanist';
  src:url('../fonts/geomanist-book-webfont.woff2') format('woff2'),
      url('../fonts/geomanist-book-webfont.woff')  format('woff');
  font-weight:350;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Geomanist';
  src:url('../fonts/geomanist-regular-webfont.woff2') format('woff2'),
      url('../fonts/geomanist-regular-webfont.woff')  format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Geomanist';
  src:url('../fonts/geomanist-medium-webfont.woff2') format('woff2'),
      url('../fonts/geomanist-medium-webfont.woff')  format('woff');
  font-weight:500;font-style:normal;font-display:swap;
}

/* ==========================================================================
   02. TOKENI
   ========================================================================== */
:root{
  /* --- Brand OLX --- */
  --olx-ink:#002F34;
  --olx-ink-2:#01474F;
  --olx-teal:#23E5DB;
  --olx-teal-dk:#0FB9AF;

  /* --- Neutre --- */
  --paper:#F2F4F5;
  --card:#FFFFFF;
  --line:#DFE4E6;
  --line-2:#EDF1F2;
  --text:#002F34;
  --text-2:#4A6165;
  /* Recalculat la revizuirea frontendului (Etapa 13): #7B9195 dădea 3.32:1
     pe fundal alb, sub pragul AA de 4.5:1 pentru text normal — folosit în
     17+ locuri (meta-text, preview-uri conversație, stări goale). Noua
     valoare dă 4.93:1, cu marjă, și rămâne mai deschisă decât --text-2
     (6.60:1), ca ierarhia dintre cele două să rămână vizibilă. */
  --mute:#5F7478;

  /* --- Statusuri item --- */
  --have:#00A868;
  --have-bg:#E6F6EF;
  --dup:#01474F;
  --dup-bg:#E4EAEB;
  --want:#D9A211;
  --want-bg:#FDF4E0;
  --want-ink:#8A6A05;
  --miss:#C0392B;

  /* --- Rarități --- */
  --rar:#2E5FAB;
  --rar-bg:#E4ECFB;
  --leg:#B4820C;
  --leg-bg:#FBF0D5;

  /* --- Brand campanie (suprascris per campanie) --- */
  --brand:#E10915;
  --brand-ink:#FFFFFF;

  /* --- Tipografie --- */
  --font:'Geomanist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --w-book:350;
  --w-normal:400;
  --w-med:500;

  /* --- Geometrie: OLX are colțuri aproape drepte --- */
  --r-btn:4px;
  --r-box:4px;
  --r-img:14px;
  --r-pill:100px;

  --shadow:0 1px 2px rgba(0,47,52,.05);
  --shadow-l:0 8px 28px rgba(0,47,52,.13);
  --wrap:1180px;
}

/* ==========================================================================
   03. BAZĂ
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-weight:var(--w-normal);
  background:var(--paper);color:var(--text);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;background:var(--line-2)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* Titlurile folosesc Medium + tracking negativ.
   Fără bold, ierarhia se face din dimensiune și spațiere. */
h1,h2,h3,h4{margin:0;font-weight:var(--w-med);line-height:1.18;letter-spacing:-.02em}
h1{font-size:30px;letter-spacing:-.03em}
h2{font-size:21px}
h3{font-size:16px;letter-spacing:-.01em}
h4{font-size:14.5px;letter-spacing:-.005em}

/* `b` și `strong` nu îngroașă — schimbă doar culoarea și greutatea la Medium */
b,strong{font-weight:var(--w-med)}

:focus-visible{outline:2px solid var(--olx-teal-dk);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   04. LAYOUT
   ========================================================================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.row{display:flex;align-items:center;gap:12px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.spread{margin-left:auto}
.section{padding:30px 0}
/* .section de mai sus anula padding-ul lateral al lui .wrap pe elementele
   cu ambele clase (13 pagini) — pe mobil continutul atingea marginea
   ecranului, pe desktop era decalat 20px fata de header. */
.wrap.section{padding-left:20px;padding-right:20px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-head h2{font-size:20px}
.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);font-weight:var(--w-med);
}

/* ==========================================================================
   05. HEADER
   ========================================================================== */
.masthead{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1010}
.masthead .wrap{display:flex;align-items:center;gap:20px;height:62px}
.logo{
  font-size:21px;font-weight:var(--w-med);letter-spacing:-.04em;
  text-decoration:none;white-space:nowrap;
}
.logo .dot{color:var(--olx-teal-dk)}
.logo .by{font-size:11px;font-weight:var(--w-normal);color:var(--mute);letter-spacing:0;margin-left:5px}
.nav{display:flex;gap:2px;margin-left:4px}
.nav a{
  padding:8px 12px;border-radius:var(--r-btn);font-size:14px;font-weight:var(--w-normal);
  color:var(--text-2);text-decoration:none;transition:.15s;white-space:nowrap;
}
.nav a:hover{background:var(--line-2);color:var(--text)}
.nav a[aria-current]{color:var(--text);font-weight:var(--w-med);box-shadow:inset 0 -2px 0 var(--olx-ink)}
.masthead .tools{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Clopotelul = centrul de notificari (2026-09-16, design-reference/notificari.html).
   SVG galben propriu (nu emoji), numarul intr-un cerc — peste 9 devine „9+". */
.bellwrap{position:relative}
.bell{
  position:relative;width:38px;height:38px;border-radius:var(--r-btn);
  border:1px solid var(--line);background:var(--card);cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
}
.bell svg{width:24px;height:24px;overflow:visible;transform-origin:50% 12%}
.bell:hover svg,.bell.has-new svg{animation:bell-ring .9s ease-in-out}
.bell.has-new svg{animation-iteration-count:2}
@keyframes bell-ring{
  0%,100%{transform:rotate(0)} 15%{transform:rotate(14deg)} 30%{transform:rotate(-12deg)}
  45%{transform:rotate(8deg)} 60%{transform:rotate(-5deg)} 75%{transform:rotate(2deg)}
}
.bell[aria-expanded="true"],.bell[aria-current]{background:var(--want-bg);border-color:var(--want)}
.bell .count{
  position:absolute;top:-6px;right:-7px;width:18px;height:18px;padding:0;
  border-radius:50%;background:var(--miss);color:#fff;border:2px solid var(--card);
  font-family:var(--mono);font-size:10px;font-weight:var(--w-med);line-height:18px;text-align:center;
  box-sizing:content-box;letter-spacing:-.04em;
}
/* Bubble cu numarul de mesaje necitite, langa "Mesaje" din nav — acelasi
   numar din View::composer ca la .bell (AppServiceProvider), doar afisat
   ca cifra, nu doar ca punct rosu, ca sa se vada dintr-o privire cate sunt. */
.nav .unread-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;margin-left:5px;border-radius:var(--r-pill);
  background:var(--miss);color:#fff;font-size:10.5px;font-weight:var(--w-med);
  font-family:var(--mono);vertical-align:2px;
}
.burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;padding:4px}
/* Iesirea din cont: buton in .tools pe desktop, ultimul rand din meniu pe mobil. */
.nav-logout{display:none}
.nav-logout button{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:8px 12px;border-radius:var(--r-btn);font:inherit;font-size:14px;color:var(--text-2);
}
.nav-logout button:hover{background:var(--line-2);color:var(--text)}
/* Header autentificat (clopotel + avatar + „Ieși din cont" + meniu) depasea
   cu 5px la 375px — spatii mai stranse doar pe ecrane inguste. */
@media(max-width:420px){
  .masthead .wrap{gap:12px}
  .masthead .tools{gap:6px}
}
@media(max-width:900px){
  .nav{
    display:none;position:absolute;top:62px;left:0;right:0;background:var(--card);
    border-bottom:1px solid var(--line);flex-direction:column;padding:8px;gap:2px;box-shadow:var(--shadow-l);
  }
  .nav.open{display:flex}
  .nav-logout{display:block;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
  .tools-logout{display:none}
  .nav a[aria-current]{box-shadow:none;background:var(--line-2)}
  .burger{display:block}
}

/* ==========================================================================
   06. BUTOANE (stil OLX)
   Toate butoanele sunt Medium — e greutatea maximă disponibilă.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--r-btn);border:2px solid transparent;
  font-family:var(--font);font-size:14.5px;font-weight:var(--w-med);
  cursor:pointer;text-decoration:none;transition:.15s;white-space:nowrap;line-height:1.2;
}
.btn-primary{background:var(--olx-ink);color:#fff;border-color:var(--olx-ink)}
.btn-primary:hover{background:var(--olx-ink-2);border-color:var(--olx-ink-2)}
.btn-secondary{background:var(--card);border-color:var(--olx-ink);color:var(--olx-ink)}
.btn-secondary:hover{background:var(--line-2)}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--text-2)}
.btn-brand{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn-brand:hover{filter:brightness(.92)}
.btn-quiet{background:transparent;color:var(--text-2);border-color:transparent}
.btn-quiet:hover{color:var(--text);background:var(--line-2)}

/* variante pe fundal închis / colorat */
.btn-onDark{background:var(--card);border-color:var(--card);color:var(--olx-ink)}
.btn-onDark:hover{background:#E8F0F0;border-color:#E8F0F0}
.btn-lineDark{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-lineDark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-onBrand{background:var(--card);border-color:var(--card);color:var(--brand)}
.btn-onBrand:hover{background:#F6F6F6;border-color:#F6F6F6}
.btn-lineBrand{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn-lineBrand:hover{border-color:#fff;background:rgba(255,255,255,.1)}

.btn-sm{padding:7px 13px;font-size:13px;border-width:1.5px}
.btn-lg{padding:14px 26px;font-size:16px}
.btn-block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* formular POST deja trimis (colecto.js) — al doilea click nu mai pleaca */
form.is-sending [type=submit]{opacity:.6;cursor:progress}

/* ==========================================================================
   07. CONTAINERE & FORMULARE
   ========================================================================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-box)}
.card-pad{padding:16px}

.field{margin-bottom:14px}
.field > label{display:block;font-size:13px;font-weight:var(--w-med);color:var(--text-2);margin-bottom:6px}
.field .hint{font-size:12px;color:var(--mute);margin-top:5px;line-height:1.45}
.input,select.input,textarea.input{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-box);
  background:var(--card);font-family:var(--font);font-size:14.5px;transition:.15s;
}
.input:focus{outline:none;border-color:var(--olx-ink);box-shadow:0 0 0 3px rgba(0,47,52,.1)}
.input:disabled{background:var(--line-2);color:var(--mute);cursor:not-allowed}
textarea.input{resize:vertical;min-height:76px}

.search{position:relative}
.search .input{padding-left:38px}
.search::before{
  content:"⌕";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--mute);font-size:17px;pointer-events:none;
}

/* Bara de filtre (chips + căutare/sortare) — un singur loc, refolosit pe
   pagina de campanie și pe pagina de piesă (erau doua clase aproape identice,
   .toolbar si .filterbar, definite separat in fiecare view). */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .search{flex:1;min-width:210px;max-width:340px}

/* ==========================================================================
   08. CHIPS, PASTILE, ETICHETE
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);color:var(--text-2);
  font-family:var(--font);font-size:13.5px;font-weight:var(--w-normal);cursor:pointer;transition:.15s;
}
.chip:hover{border-color:var(--text-2);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--olx-ink);border-color:var(--olx-ink);color:#fff;font-weight:var(--w-med)}
.chip .n{font-family:var(--mono);font-size:11.5px;opacity:.7}
a.chip{text-decoration:none}
.chip[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none}

/* Paginare (partials/pagination.blade.php) — chip-uri, fara stiluri noi de buton. */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pager-info{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.pager .chip{min-width:36px;justify-content:center}
.chip .swatch{width:8px;height:8px;border-radius:50%;flex:none}

.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:9.5px;font-weight:var(--w-med);letter-spacing:.07em;text-transform:uppercase;
}
.pill-have{background:var(--have-bg);color:var(--have)}
.pill-dup{background:var(--dup-bg);color:var(--dup)}
.pill-want{background:var(--want-bg);color:var(--want-ink)}
.pill-miss{background:#FBE9E7;color:var(--miss)}
.pill-live{background:var(--brand);color:var(--brand-ink)}
.pill-live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1.8s infinite}
@keyframes blink{50%{opacity:.25}}

/* Logo de brand (brands.logo_path, <x-brand-logo>) — inaltime fixa, latime
   libera: logourile sunt des wordmark-uri late, un patrat le-ar micsora
   ilizibil. Fundal alb + contur, ca sa ramana vizibil si pe hero-ul colorat
   al colectiei (un logo in culoarea brandului ar disparea pe --brand). */
.brandlogo{
  display:block;flex:none;width:auto;height:40px;max-width:140px;object-fit:contain;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-btn);padding:5px 7px;
}
.brandlogo-sm{height:34px;max-width:110px;padding:4px 6px}
.brandlogo-lg{height:48px;max-width:170px}
/* Fara logo: initiala pe culoarea brandului (era doar pe homepage, acum
   refolosita si in lista de colectii). */
.brandmark{
  width:38px;height:38px;border-radius:var(--r-btn);background:var(--brand);color:var(--brand-ink);
  display:flex;align-items:center;justify-content:center;font-weight:var(--w-med);font-size:18px;flex:none;
}

/* etichete de raritate — setate din admin */
.tag{
  display:inline-flex;align-items:center;padding:2px 7px;border-radius:3px;
  font-family:var(--mono);font-size:9px;font-weight:var(--w-med);letter-spacing:.08em;text-transform:uppercase;
}
.tag-rara{background:var(--rar-bg);color:var(--rar)}
.tag-legendara{background:var(--leg-bg);color:var(--leg)}

/* ==========================================================================
   09. CARTONAȘ ITEM
   Imaginea e mereu 1:1 cu colț rotunjit; cardul are colț aproape drept.
   ========================================================================== */
.grid-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
@media(max-width:560px){.grid-items{grid-template-columns:repeat(2,1fr);gap:12px}}

.item{
  position:relative;z-index:1;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-box);padding:10px;transition:border-color .15s,box-shadow .15s;
}
.item:hover{border-color:var(--text-2)}
/* Cartonașele care se pot selecta (dashboard, ecranul de ofertă, pagina unui
   colecționar) — click oriunde pe ele, nu doar pe bifa din colț. */
.item.is-selectable{cursor:pointer}

.item .pic{
  position:relative;aspect-ratio:1;border-radius:var(--r-img);overflow:hidden;
  background:var(--line-2);margin-bottom:10px;
}
.item .pic img{width:100%;height:100%;object-fit:contain;padding:8%;transition:opacity .15s}

/* lipsă = niciun status ales → imaginea e doar puțin stinsă, nu ilizibilă
   (opacity .22 + grayscale(1) inițial era prea întunecat — corectat la
   cererea userului). */
.item[data-status="none"] .pic img{opacity:.7;filter:grayscale(.5)}
.item[data-status="none"] .name{color:var(--mute)}

.item.is-have{border-color:var(--have)}
.item.is-dup{border-color:var(--dup)}
.item.is-want{border-color:var(--want)}
.item.is-picked{border-color:var(--olx-ink);box-shadow:0 0 0 2px var(--olx-ink)}

.item .tags-abs{
  position:absolute;top:7px;right:7px;display:flex;flex-direction:column;
  gap:4px;align-items:flex-end;z-index:2;
}

.pick{
  position:absolute;top:7px;left:7px;z-index:3;width:22px;height:22px;border-radius:var(--r-btn);
  border:1.5px solid var(--line);background:rgba(255,255,255,.94);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;
  transition:.14s;padding:0;
}
.pick:hover{border-color:var(--olx-ink)}
.pick[aria-pressed="true"]{background:var(--olx-ink);border-color:var(--olx-ink);color:#fff}

.item .name{font-size:13.5px;font-weight:var(--w-med);line-height:1.3;letter-spacing:-.01em}
.item .num{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:2px}

/* butoane de status: Îl am / Dublură / Mi-l doresc */
.statusbar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}
.statusbar button{
  border:1px solid var(--line);background:var(--card);border-radius:var(--r-btn);
  padding:7px 2px;cursor:pointer;font-family:var(--font);font-size:10px;
  font-weight:var(--w-normal);color:var(--text-2);line-height:1.25;transition:.14s;
}
.statusbar button span{display:block;font-family:var(--mono);font-size:12px;font-weight:var(--w-med);margin-bottom:2px}
.statusbar button:hover{border-color:var(--text-2)}
.statusbar button[aria-pressed="true"]{color:#fff;border-color:transparent;font-weight:var(--w-med)}
.statusbar button[data-s="have"][aria-pressed="true"]{background:var(--have)}
.statusbar button[data-s="dup"][aria-pressed="true"]{background:var(--dup)}
.statusbar button[data-s="want"][aria-pressed="true"]{background:var(--want)}

/* comutator „îl dau la schimb” */
.trade-toggle{
  display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;
  border:0;border-top:1px solid var(--line-2);background:none;
  font-family:var(--font);font-size:11.5px;color:var(--text-2);
  cursor:pointer;width:100%;text-align:left;
}
.trade-toggle .sw{
  width:32px;height:19px;border-radius:var(--r-pill);background:var(--line);
  position:relative;flex:none;transition:.16s;
}
.trade-toggle .sw::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;transition:.16s;box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.trade-toggle[aria-pressed="true"] .sw{background:var(--have)}
.trade-toggle[aria-pressed="true"] .sw::after{transform:translateX(13px)}
.trade-toggle[aria-pressed="true"]{color:var(--have);font-weight:var(--w-med)}

/* rândul de statistici — pe TOATE cardurile din pagina brandului */
.item .stats-row{
  display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line-2);font-family:var(--mono);font-size:10.5px;
}
.item .stats-row b{font-weight:var(--w-med)}
.item .stats-row .give{color:var(--have)}
.item .stats-row .seek{color:var(--want-ink)}
.item .stats-row .sep{color:var(--line);margin:0 -2px}

/* ==========================================================================
   10. SELECȚIE MULTIPLĂ
   ========================================================================== */
.bulkbar{
  position:sticky;top:70px;z-index:30;background:var(--olx-ink);color:#fff;
  border-radius:var(--r-box);padding:11px 14px;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:16px;
}
.bulkbar[hidden]{display:none}
.bulkbar .cnt{font-size:13.5px;font-weight:var(--w-med)}
.bulkbar .acts{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.bulkbar .acts button{
  padding:6px 12px;border-radius:var(--r-btn);border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;font-family:var(--font);font-size:12.5px;
  font-weight:var(--w-med);cursor:pointer;transition:.14s;
}
.bulkbar .acts button:hover{background:rgba(255,255,255,.14)}

/* ==========================================================================
   11. PROGRES
   ========================================================================== */
.progress{display:flex;align-items:center;gap:14px}
.ring{
  --p:0;width:64px;height:64px;border-radius:50%;flex:none;position:relative;
  background:conic-gradient(var(--olx-ink) calc(var(--p)*1%),var(--line) 0);
}
.ring::after{content:"";position:absolute;inset:7px;background:var(--card);border-radius:50%}
.ring b{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;font-weight:var(--w-med);z-index:1;
}

/* ==========================================================================
   12. HERO CAMPANIE
   ========================================================================== */
.brandhero{background:var(--brand);color:var(--brand-ink)}
.brandhero .wrap{padding-top:24px;padding-bottom:28px}
.crumbs{font-size:12.5px;opacity:.85;margin-bottom:16px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.brandhero .cols{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
@media(max-width:860px){.brandhero .cols{grid-template-columns:1fr;gap:22px}}
.brandhero h1{font-size:clamp(26px,4.2vw,38px);margin:6px 0 10px}
.brandhero p.lead{font-size:15px;line-height:1.6;opacity:.94;max-width:52ch}
.stats{display:flex;gap:26px;flex-wrap:wrap;margin:22px 0}
.stats b{display:block;font-size:26px;font-weight:var(--w-med);line-height:1;letter-spacing:-.02em}
.stats span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.herogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.herogrid div{aspect-ratio:1;background:#fff;border-radius:var(--r-img);overflow:hidden}
.herogrid img{width:100%;height:100%;object-fit:contain;padding:9%}
/* Alternativele grilei din hero: cover sau video YouTube — acelasi cadru
   16:9, ca sa fie interschimbabile fara sa sara layout-ul. */
.heromedia{display:block;aspect-ratio:16/9;border-radius:var(--r-img);overflow:hidden;background:#fff}
.heromedia img{width:100%;height:100%;object-fit:cover;background:transparent}
.heromedia iframe{display:block;width:100%;height:100%;border:0}
/* Inainte de click: niciun request catre Google (nici thumbnail-ul
   i.ytimg.com) — doar un cadru neutru cu buton de redare. */
.yt-lite{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:var(--olx-ink);color:#fff;text-decoration:none;font-size:13.5px;font-weight:var(--w-med);
}
.yt-lite .play{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.75);font-size:21px;padding-left:4px;
  transition:background .15s;
}
.yt-lite:hover .play{background:rgba(255,255,255,.28)}

/* Cartonas de colectie + numaratoare inversa — erau inline pe homepage,
   mutate aici ca sa le refoloseasca si pagina /colectii. */
.colgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.colgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.colgrid{grid-template-columns:1fr}}
.colcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-box);
  text-decoration:none;display:block;transition:border-color .15s;padding:10px;position:relative;
}
.colcard:hover{border-color:var(--text-2)}
.colcard .rank{
  position:absolute;top:16px;left:16px;z-index:2;width:22px;height:22px;border-radius:var(--r-btn);
  background:var(--olx-ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:var(--w-med);
}
.colcard .pics{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.colcard .pics div{aspect-ratio:1;border-radius:var(--r-img);overflow:hidden;background:var(--line-2)}
.colcard .pics img{width:100%;height:100%;object-fit:contain;padding:11%}
.colcard .meta{padding:12px 4px 4px}
.colcard .meta h3{font-size:14.5px;font-weight:var(--w-med);margin:3px 0 5px}
.colcard .meta .views{font-family:var(--mono);font-size:11px;color:var(--mute)}
/* Randul brand+logo din cartonasul de colectie — folosit si pe homepage (Top
   colectii) si pe /colectii; logo/initiala micsorate fata de marimea standard
   (.brandlogo/.brandmark), care sunt gandite pentru hero-uri, nu cartonase mici. */
.colcard .brandrow{display:flex;align-items:center;gap:8px}
.colcard .brandlogo{height:22px;max-width:80px;padding:2px 4px;border-radius:3px}
.colcard .brandmark{width:22px;height:22px;font-size:11px;border-radius:3px}

.clock{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:9px;font-family:var(--mono)}
.clock b{background:var(--line-2);padding:6px 9px;border-radius:var(--r-btn);font-size:15px;font-weight:var(--w-med)}
.clock span{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-right:6px}
.clock i{color:var(--mute);font-style:normal}
@media(max-width:400px){
  .clock{gap:3px}
  .clock b{padding:5px 6px;font-size:14px}
  .clock span{margin-right:3px}
}

/* ==========================================================================
   13. HARTĂ
   ========================================================================== */
.mapwrap{border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;background:var(--card)}
.mapbar{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap;
}
.mapbar .badge{
  font-family:var(--mono);font-size:9.5px;font-weight:var(--w-med);letter-spacing:.08em;
  text-transform:uppercase;background:var(--brand);color:var(--brand-ink);padding:3px 8px;border-radius:3px;
}
.map{height:380px;position:relative;background:#E8EDE9}
.map .fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:var(--mute);font-size:13.5px;
}
.map-legend{
  display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2);
  padding:12px 14px;border-top:1px solid var(--line);
}
.map-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;flex:none}
.map-legend span{display:inline-flex;align-items:center}
.map-legend i.lg-coll{
  width:18px;height:18px;background:var(--olx-ink);color:#fff;font-style:normal;
  font-family:var(--mono);font-size:10px;display:inline-flex;align-items:center;justify-content:center;
}
.map-legend i.lg-store{
  width:12px;height:12px;background:#fff;border:2px solid var(--brand);
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
}
.map-layers{padding:10px 14px;border-bottom:1px solid var(--line)}
@media (max-width:420px){.map-layers .chip{padding:6px 11px;font-size:13px}}
/* Markerii hartii colectiei (initCollectionMap) — colectionarii: bulina
   inchisa cu numarul; magazinele: pin alb cu logo, in culoarea brandului. */
.mk{background:none;border:0}
.mk-coll{
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--olx-ink);color:#fff;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,47,52,.35);
  font-family:var(--mono);font-size:12px;font-weight:var(--w-med);cursor:pointer;box-sizing:border-box;
}
.mk-coll.is-group{outline:3px solid rgba(0,47,52,.25)}
.mk-store{position:relative;display:block;width:34px;height:42px;cursor:pointer}
.mk-store .face{
  position:absolute;left:2px;top:0;width:30px;height:30px;box-sizing:border-box;
  background:#fff;border:2px solid var(--brand);border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  box-shadow:0 1px 3px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;overflow:hidden;
  margin-top:4px;
}
.mk-store .face img{width:20px;height:20px;object-fit:contain;transform:rotate(45deg);background:none}
.mk-store .face b{transform:rotate(45deg);color:var(--brand);font-size:13px}
.mk-store .cnt{
  position:absolute;top:-2px;right:-6px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;
  border-radius:9px;background:var(--brand);color:var(--brand-ink);border:1.5px solid #fff;
  font-family:var(--mono);font-style:normal;font-size:10px;line-height:15px;text-align:center;
}
.judet-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:8px;padding:14px}
.judet{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;
  border:1px solid var(--line);border-radius:var(--r-box);background:var(--card);
  font-family:var(--font);cursor:pointer;font-size:13.5px;transition:.14s;
  color:var(--text);text-decoration:none;
}
.judet:hover{border-color:var(--olx-ink);background:var(--line-2)}
.judet b{font-family:var(--mono);font-size:13px;font-weight:var(--w-med)}
.leaflet-marker-icon, .leaflet-marker-shadow{ background: transparent}

/* ==========================================================================
   14. LISTĂ COLECȚIONARI
   ========================================================================== */
.people{border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;background:var(--card)}
.person{display:flex;align-items:center;gap:13px;padding:14px 16px;flex-wrap:wrap}
.person + .person{border-top:1px solid var(--line-2)}
.avatar{
  width:42px;height:42px;border-radius:var(--r-box);flex:none;display:flex;
  align-items:center;justify-content:center;font-weight:var(--w-med);font-size:15px;
  background:var(--olx-ink);color:#fff;letter-spacing:-.01em;
}
.avatar.v2{background:var(--olx-teal);color:var(--olx-ink)}
.avatar.v3{background:var(--have)}
.avatar.v4{background:var(--want);color:var(--olx-ink)}

/* Culoare de avatar dupa identitate (App\Support\PersonColor, 2026-09-14) —
   deterministic dupa id-ul userului, ca aceeasi persoana sa arate la fel
   peste tot. Patru variante, deliberat putine, refolosind DOAR tokeni deja
   existenti in paleta (raritate + status), nu culori noi — diferentiere
   fara sa dilueze brandul. Separat de .v2/.v3/.v4 de mai sus (acelea sunt
   "tu vs. celalalt" in firul unui schimb, nu identitatea unei persoane). */
.avatar.id-2{background:var(--rar);color:#fff}
.avatar.id-3{background:var(--leg);color:#fff}
.avatar.id-4{background:var(--have);color:#fff}
.person .who{min-width:0;flex:1}
.person .nm{font-size:14.5px;font-weight:var(--w-med)}
.person .meta{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:2px}

/* Widget "Potriviri pentru tine" (dashboard) — pe piesa, nu pe colectionar:
   nu avea deloc stil propriu inainte (folosea .who/.nm/.meta scopate sub
   .person, care nu se aplicau aici — text nestilizat). */
.match{display:flex;align-items:center;gap:12px}
.match + .match{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.match-pic{
  width:38px;height:38px;border-radius:var(--r-box);flex:none;object-fit:contain;
  background:var(--line-2);padding:4px;
}
.match .who{min-width:0;flex:1}
.match .nm{font-size:13.5px;font-weight:var(--w-med);line-height:1.3}
.match .meta{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:2px}
.person .tags{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.person .acts{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap}
@media(max-width:600px){.person .acts{margin-left:0;width:100%}}

/* ==========================================================================
   15. MESAGERIE — în container, ca restul site-ului
   ========================================================================== */
.msg-shell{border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;background:var(--card)}
.msg-layout{display:grid;grid-template-columns:300px 1fr;height:600px}
/* Pe desktop, cutia nu mai are o inaltime fixa arbitrara (600px) — umple tot
   ce ramane din viewport sub header si titlu, ca partea de jos sa cada
   exact unde se termina ecranul (2026-09-15, cerinta userului). Necesita
   clasa .msg-wrap pe <div class="wrap section">-ul paginii (doar /mesaje si
   /schimburi/{id}, singurele doua cu aceasta cutie) — restul paginilor cu
   .wrap.section raman neatinse. 63px = header-ul sticky (.masthead, 62px +
   bordura de 1px), singura valoare fixa ramasa — inaltimea titlului de
   deasupra (.section-head) o calculeaza flexbox-ul singur, nu mai e
   hardcodata. */
@media(min-width:861px){
  /* height, nu min-height: un fir lung (multe mesaje) trebuie sa opreasca
     cutia la aceasta inaltime si sa deruleze INTERN (.feed/.list), nu sa
     creasca in continuare si sa impinga scroll-ul pe toata pagina — bug
     gasit chiar la implementare, pe un fir cu 40+ mesaje (min-height nu
     pune niciun plafon, doar un prag minim). */
  .msg-wrap{display:flex;flex-direction:column;height:calc(100vh - 63px)}
  .msg-wrap .msg-shell{flex:1;display:flex;flex-direction:column;min-height:0}
  .msg-wrap .msg-layout{flex:1;min-height:0;height:auto}
}
@media(max-width:860px){
  .msg-layout{grid-template-columns:1fr;height:auto;min-height:560px}
  .msg-layout.thread-open .threads{display:none}
  .msg-layout:not(.thread-open) .panel{display:none}
}

/* tab-uri de cont în stil OLX */
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tabs a{
  padding:12px 0;font-size:14.5px;color:var(--text-2);text-decoration:none;
  white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tabs a:hover{color:var(--text)}
.tabs a[aria-current]{color:var(--text);font-weight:var(--w-med);border-bottom-color:var(--olx-ink)}

.threads{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--card)}
.threads .head{padding:14px;border-bottom:1px solid var(--line)}
.threads .list{overflow-y:auto;flex:1}
.thread{
  display:flex;gap:11px;padding:12px 14px;border:0;border-bottom:1px solid var(--line-2);
  border-left:3px solid transparent;cursor:pointer;background:none;width:100%;text-align:left;
  font-family:var(--font);text-decoration:none;
}
.thread:hover{background:var(--line-2)}
.thread[aria-selected="true"]{background:var(--line-2);border-left-color:var(--olx-ink)}
.thread .who{min-width:0;flex:1}
.thread .nm{font-size:13.5px;font-weight:var(--w-med);display:flex;align-items:center;gap:7px}
.thread .prev{font-size:12px;color:var(--mute);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread .when{font-family:var(--mono);font-size:10px;color:var(--mute);flex:none}
.unread{
  background:var(--miss);color:#fff;font-family:var(--mono);font-size:9.5px;font-weight:var(--w-med);
  min-width:17px;height:17px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
}

.panel{display:flex;flex-direction:column;min-height:0;background:var(--paper)}
.panel .bar{
  background:var(--card);border-bottom:1px solid var(--line);padding:11px 16px;
  display:flex;align-items:center;gap:11px;flex:none;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
  z-index: 1;
}
.panel .bar h3{font-size:15px}
.panel .bar .sub{font-size:11.5px;color:var(--mute);margin-top:1px}
/* Sageata inapoi: zona de atingere de 40px (nu doar glyph-ul „‹" de cativa
   pixeli), culoare plina, margine negativa ca sageata sa ramana aliniata. */
.backlink{
  display:none;align-items:center;justify-content:center;width:40px;height:40px;margin-left:-8px;flex:none;
  border-radius:50%;color:var(--olx-ink);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.backlink:hover,.backlink:active,.backlink:focus-visible{background:var(--line-2);outline:none}
@media(max-width:860px){.backlink{display:inline-flex}}
.thread-bottom{flex:none}
/* Mobil (2026-09-16, cerinta userului): cutia de mesagerie lipita de marginile
   ecranului (fara bordura, peste padding-ul de 20px al .wrap), iar bara
   „Pasul tău" + caseta de scris raman lipite jos. Pe mobil pagina intreaga se
   deruleaza (nu .feed), deci sticky pe .thread-bottom; overflow:hidden de pe
   .msg-shell ar anula sticky-ul, de aceea e scos aici. */
@media(max-width:860px){
  .msg-shell{border:0;border-radius:0;margin-left:-20px;margin-right:-20px;overflow:visible}
  .thread-bottom{position:sticky;bottom:0;z-index:5;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
  .stepbar::before{display:none}
}
.feed{flex:1;overflow-y:auto;padding:18px 16px}

.bubble{max-width:78%;padding:11px 14px;border-radius:var(--r-box);font-size:14px;line-height:1.5;margin-bottom:10px}
.bubble.them{background:var(--card);border:1px solid var(--line)}
/* Mesajele proprii — albe, cu text normal, la fel ca ale celuilalt (2026-09-15,
   cerinta userului); singura diferenta ramasa e pozitia (dreapta). Inainte
   erau verde-inchis cu text alb. */
.bubble.me{background:var(--card);border:1px solid var(--line);margin-left:auto}
.bubble .who{
  font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute);margin-bottom:4px;
}
.bubble .bfoot{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:5px}
.bubble .time{font-family:var(--mono);font-size:9.5px;color:var(--mute)}
/* Bifele de status (2026-09-15, "cum e la WhatsApp") — doar pe mesajele
   proprii. Gri = trimis, necitit inca; verde (acelasi ton ca .pill-have) =
   celalalt a deschis firul dupa acest mesaj (messages.read_at, setat de
   MessageFlow::markThreadRead — nu e un semnal separat de "livrare", firul
   asta n-are notificari push, doar polling, deci un singur prag conteaza).
   NESCOPAT la .bubble — de la 2026-09-15 apare si pe cardul de oferta
   (.offer .acts), nu doar pe bulele de chat, deci componenta trebuie sa
   mearga oriunde e pusa, nu doar in interiorul unei bule. */
.ticks{display:inline-flex;align-items:center;color:var(--mute);flex:none}
.ticks.is-read{color:var(--have)}
/* --- Mesageria v2 (2026-09-13, machete: design-reference/mesaje-v2*.html) ---
   Firul unei negocieri, scris din perspectiva cititorului. Carduri cu aceeasi
   carcasa (.offer/.ask/.meet), evenimente in doua randuri (.event), piese ca
   randuri mici (.piece) care deschid fereastra piesei (.desc-modal). */
.swapdir{text-align:center;color:var(--line);margin:12px 0;font-size:15px}

/* .msgfeed, nu .thread — .thread e deja folosit pentru randul dintr-o
   conversatie (lista din stanga). Aceleasi nume ar fi produs o coliziune
   reala: proprietatile comune (display, gap) se suprascriu intre cele doua
   reguli cu aceeasi specificitate, iar flex-direction:column de aici ar fi
   stricat randul din lista (avatarul cadea deasupra numelui). */
/* Mesageria v3 (2026-09-16): fara max-width — .msgfeed e chiar containerul
   cu overflow-y, iar cu 520px bara de scroll cadea in mijlocul panoului.
   Limita de 520px ramane pe carduri/evenimente (max-width propriu). */
.msgfeed{display:flex;flex-direction:column;gap:14px}
/* Pe tot panoul, bulele (max 78%) ar deveni randuri foarte lungi. */
.msgfeed .bubble{max-width:min(78%,440px)}

.offer,.ask,.meet{background:var(--card);border:1px solid var(--line);border-radius:var(--r-box);max-width:520px}
.offer .head,.ask .head,.meet .head{display:flex;align-items:center;gap:12px;padding:14px 16px}
.offer .head .avatar,.ask .head .avatar,.meet .head .avatar{width:36px;height:36px;font-size:14px}
.offer .head .t,.ask .head .t,.meet .head .t{font-size:15px;font-weight:var(--w-med);line-height:1.3}
.offer .head .meta,.ask .head .meta,.meet .head .meta{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:3px}
.offer .head .st,.ask .head .st,.meet .head .st{margin-left:auto;flex:none}
.offer .acts,.ask .acts,.meet .acts{padding:12px 16px 14px;border-top:1px solid var(--line-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.offer .acts .hint,.ask .acts .hint,.meet .acts .hint{flex-basis:100%;font-size:12.5px;color:var(--mute);line-height:1.5}
.offer .acts form,.ask .acts form,.meet .acts form{display:contents}
/* Bifa de citire pe oferta trimisa (2026-09-15) — .hint de deasupra are
   flex-basis:100%, deci bifa incepe automat pe randul urmator in .acts
   (flex-wrap); margin-left:auto o impinge in dreapta jos a cardului. */
.offer .acts .ticks{margin-left:auto}

/* Doar rundele refuzate/expirate/inlocuite se estompeaza — runda acceptata e
   intelegerea in sine, ramane la vedere. Refuzul facut de cine citeste nu e o
   alarma: pastila neutra, nu rosie. */
.offer.is-declined{opacity:.72}
.pill-off{background:var(--line-2);color:var(--text-2)}
.pill-wait{background:var(--want-bg);color:var(--want-ink)}

/* Doua casete separate, fata in fata. Bara de sus a fiecareia spune ce e:
   verde = ce intra la tine, inchis = ce pleaca de la tine. .box/.bar nu mai
   sunt scopate la .offer (2026-09-14) — acelasi limbaj vizual „Primești/Dai"
   se refoloseste si pe ecranul de construire a ofertei (trades/build), ca
   sa se inteleaga la fel de clar cine da si cine primeste peste tot. */
.offer .sides{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start;padding:0 16px 16px}
.box{border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;min-width:0;background:var(--card)}
.box .bar{
  padding:8px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:var(--w-med);color:#fff;
}
.box.get .bar{background:var(--have)}
.box.give .bar{background:var(--olx-ink)}
.box .bar small{display:block;font-family:var(--font);font-size:11.5px;letter-spacing:0;text-transform:none;opacity:.85;margin-top:2px}
/* Cerinta userului (2026-09-15): pe ecranul de construire a ofertei, era
   ambiguu cine da/primeste — bara colorata spunea doar "Primești"/"Dai",
   generic. Acum arata si litera + numele. Scopat la .buildbox, NU la
   .box .bar in general — acelasi .bar se refoloseste si in cardul de
   oferta din fir (Mesageria v2), unde spatiul e mult mai stramt (doua
   casete pe un card de 520px) si perspectiva cititorului deja lamureste
   cine e cine ("Primești de la X"/"Dai din colecția ta"), fara sa fie
   nevoie de un avatar in plus acolo. */
.buildbox .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.buildbox .bar .who{display:flex;align-items:center;gap:6px;font-family:var(--font);text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:var(--w-med)}
.buildbox .bar .who .avatar{width:22px;height:22px;font-size:11px;background:#fff;color:var(--olx-ink);flex:none}
.offer .swap{align-self:center;color:var(--mute);font-size:16px}
.offer .cash{padding:9px 10px;border-top:1px solid var(--line-2);font-size:13px;font-weight:var(--w-med);color:#00794C;background:var(--have-bg)}

/* ecranul de construire a ofertei (trades/build.blade.php): aceleasi .box/.bar,
   dar cele doua randuri stau unul sub altul (nu fata in fata ca la card), iar
   piesele sunt un singur rand cu scroll orizontal, poze mici — userul a cerut
   explicit sa nu mai fie grila mare (multe piese faceau pagina foarte lunga
   si nu se intelegea clar cine da/cine primeste). */
.buildbox+.buildbox{margin-top:14px}
.pickstrip{display:flex;gap:10px;overflow-x:auto;padding:14px 16px 16px;-webkit-overflow-scrolling:touch}
.pickstrip .item{flex:none;width:104px;padding:7px}
.pickstrip .item .pic{margin-bottom:7px}
.pickstrip .item .name{font-size:11.5px;line-height:1.25}
.pickstrip .item .num{font-size:9.5px;margin-top:1px}
.pickstrip .ask-link{font-size:10px}
.pickstrip-empty{padding:16px;color:var(--mute);font-size:13px}
@media(max-width:480px){.pickstrip .item{width:88px}}

/* Carousel cu sageti (2026-09-15) — peste scrollul nativ ramas activ, nu in
   locul lui. Ascunse sub 600px, unde swipe-ul de pe telefon e suficient. */
.pickstrip-wrap{position:relative}
.pickstrip-wrap .pickstrip{padding-left:40px;padding-right:40px}
.pickstrip-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--text-2);cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);padding:0;
}
.pickstrip-arrow:hover{border-color:var(--olx-ink);color:var(--text)}
.pickstrip-arrow:disabled{opacity:.3;cursor:default}
.pickstrip-arrow.prev{left:5px}
.pickstrip-arrow.next{right:5px}
@media(max-width:600px){
  .pickstrip-arrow{display:none}
  .pickstrip-wrap .pickstrip{padding-left:16px;padding-right:16px}
}

/* Supapa "Întreabă oricum" (BRIEF 6.3), acum intr-un modal — link + nota
   discreta sub caseta „Primești", nu mai un link pe fiecare piesa gri. */
.ask-trigger{padding:12px 16px 14px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ask-picked-note{font-size:12px;color:var(--want-ink);display:flex;align-items:center;gap:8px}

/* Rezumatul selectiei, sub cele doua casete (2026-09-15) — actualizat live
   din JS, la fiecare bifare (initTradeBuilder, colecto.js). */
.offer-summary{border:1px solid var(--line);border-radius:var(--r-box);background:var(--card);padding:14px 16px;margin:16px 0}
.summary-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:480px){.summary-cols{grid-template-columns:1fr;gap:14px}}
.summary-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);font-weight:var(--w-med);margin-bottom:8px}
.summary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.summary-list li{display:flex;align-items:center;gap:8px;font-size:13px}
.summary-list .thumb{width:28px;height:28px;flex:none;border-radius:6px;background:var(--line-2);overflow:hidden}
.summary-list .thumb img{width:100%;height:100%;object-fit:contain;padding:6%}
.summary-empty{color:var(--mute)}
/* Randul de suma in rezumat (2026-09-16) — fara poza, un badge in loc de
   .thumb cu imagine; culoarea de bani (aceeasi ca .cash din cardul de
   oferta) — text ingrosat, ca suma sa se distinga de numele pieselor. */
.thumb-cash{display:flex;align-items:center;justify-content:center;background:var(--have-bg);color:#00794C;font-size:9px;font-weight:var(--w-med);text-transform:uppercase}
.summary-cash{font-weight:var(--w-med);color:#00794C}

/* Piesa: un rand mic (poza 40px, nume, numar). Buton, nu link — deschide
   fereastra piesei fara sa paraseasca mesageria. */
.piece{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;border-top:1px solid var(--line-2);
  padding:8px 10px;cursor:pointer;font-family:var(--font);color:var(--text);
}
.bar + .piece{border-top:0}
.piece:hover,.piece:focus-visible{background:var(--line-2);outline:none}
.piece .img{width:40px;height:40px;flex:none;border-radius:8px;background:var(--line-2);overflow:hidden}
.piece .img img{width:100%;height:100%;object-fit:contain;padding:6%}
/* .info in loc de <br> intre nume si numar — un <br> intre doua span-uri
   inline mostenea line-height-ul lui body (1.55), nu pe cel al .nm (1.25),
   ceea ce lasa un gol vizibil intre randuri. */
.piece .info{display:flex;flex-direction:column;min-width:0}
.piece .nm{font-size:13px;font-weight:var(--w-med);line-height:1.25}
.piece .no{font-family:var(--mono);font-size:10px;color:var(--mute);margin-top:2px}
/* Randul ales in modalul "Întreabă oricum" (trades/build.blade.php). */
.piece[data-trade-tile].is-asked{background:var(--want-bg)}
.piece[data-trade-tile].is-asked .nm{color:var(--want-ink)}

/* Link mic, discret — folosit pentru "Întreabă oricum" (trades/build) si,
   scopat mai jos, in interiorul unui .pickstrip. */
.ask-link{
  display:inline;background:none;border:none;padding:0;margin:0;
  font-family:var(--font);font-size:12px;color:var(--mute);text-decoration:underline;cursor:pointer;
}
.ask-link:hover{color:var(--text)}

/* Telefon (2026-09-16, captura userului la ~412px): pragul de 400px nu prindea
   telefoanele obisnuite (390-430px), iar cardul are doar ~340px in panou —
   titlul ajungea un cuvant pe rand, casetele Primești/Dai ~150px fiecare.
   Sub 600px: antetul se rupe ca mai jos, casetele stau una sub alta. */
@media(max-width:600px){
  .feed{padding:14px 10px}
  .offer .head,.ask .head,.meet .head{flex-wrap:wrap;padding:12px}
  .offer .head > .avatar + div,.ask .head > .avatar + div,.meet .head > .avatar + div{flex:1 1 calc(100% - 48px);min-width:0}
  .offer .head .st,.ask .head .st,.meet .head .st{margin-left:48px;flex:0 1 auto;max-width:calc(100% - 48px);white-space:normal}
  .offer .sides{grid-template-columns:1fr;gap:6px;padding:0 12px 12px}
  .offer .swap{justify-self:center;transform:rotate(90deg);line-height:1}
  .ask .body{padding:0 12px 12px}
  .ask .body p{min-width:0;flex-basis:100%}
}
@media(max-width:400px){
  /* Pe ecran ingust pastila coboara pe randul ei, aliniata cu titlul — altfel
     strange titlul si meta-ul intr-o coloana de cateva cuvinte. */
  .offer .head,.ask .head,.meet .head{flex-wrap:wrap}
  /* Titlul ia tot randul de langa avatar (36px + gap 12px), deci pastila
     coboara sigur pe randul urmator, la latimea ei naturala. Inainte avea
     flex-basis:100% + margin-left:48px si iesea din card in dreapta. */
  .offer .head > .avatar + div,.ask .head > .avatar + div,.meet .head > .avatar + div{flex:1 1 calc(100% - 48px);min-width:0}
  .offer .head .st,.ask .head .st,.meet .head .st{margin-left:48px;flex:0 0 auto;max-width:calc(100% - 48px)}
  /* In fereastra intalnirii, ✕ sta fix in colt, nu pe un rand al lui. */
  .meet-modal .meet .head{position:relative;padding-right:52px}
  .meet-modal .closebtn{position:absolute;top:10px;right:8px;margin:0}
  .offer .sides{gap:6px;padding:0 12px 14px}
  .offer .box .bar small{font-size:11px}
  .piece{padding:7px 8px;gap:7px}
  .piece .img{width:34px;height:34px}
  .piece .nm{font-size:12px}
}

/* Eveniment de sistem: ce s-a intamplat + ce urmeaza, scris pentru cititor. */
.event{
  display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--r-box);
  background:var(--line-2);color:var(--text-2);font-size:13px;line-height:1.5;max-width:520px;
}
.event .ic{flex:none;width:20px;height:20px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-2)}
.event b{color:var(--text)}
.event .next{display:block;color:var(--mute);margin-top:2px}
.event.ok .ic{background:var(--have-bg);border-color:#BFE7D5;color:#00794C}

/* Ora evenimentului + separatorul de zi (Mesageria v3). */
.event .when{margin-left:auto;padding-left:10px;flex:none;font-family:var(--mono);font-size:10px;color:var(--mute);padding-top:3px}
.event[hidden]{display:none}
.daysep{
  align-self:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px
}

/* Bara „Pasul tău" (Mesageria v3, 2026-09-16, machetă design-reference/mesaje-v3.html):
   lipita jos in panou, deasupra casetei de scris — singurul loc cu actiuni.
   Accentul din stanga: galben = e randul tau, gri = astepti, verde = stabilit. */
.stepbar{
  flex:none;background:var(--card);border-top:1px solid var(--line);
  padding:12px 16px;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;position:relative;
}
.stepbar[hidden]{display:none}
.stepbar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.stepbar.is-you::before{background:var(--want)}
.stepbar.is-done::before{background:var(--have)}
.stepbar .txt{flex:1;min-width:230px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.stepbar .eyebrow-s{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);margin-bottom:3px;font-weight:var(--w-med)
}
.stepbar.is-you .eyebrow-s{color:var(--want-ink)}
.stepbar.is-done .eyebrow-s{color:#00794C}
.stepbar .txt b{display:block;font-size:14.5px;color:var(--text);line-height:1.35}
.stepbar .txt a{color:var(--text-2)}
.stepbar .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stepbar .acts form{display:contents}
.meetline{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:3px;font-size:13.5px;color:var(--text)}
.meetline .when{font-weight:var(--w-med)}
.meetline .sep{color:var(--line)}
.meetline .map-link{background:none;border:0;padding:0;font-family:var(--font);font-size:12.5px;color:var(--text-2);text-decoration:underline;cursor:pointer}
@media(max-width:600px){
  .stepbar{padding:11px 14px}
  .stepbar .txt{min-width:0;flex-basis:100%}
  .stepbar .acts{width:100%}
  .stepbar .acts .btn-primary{flex:1}
}

/* Fereastra intalnirii (Mesageria v3): cardul .meet, scos din fir.
   .modal.meet-modal, nu doar .meet-modal — .modal (padding propriu) e
   definit mai jos in foaie si ar castiga la aceeasi specificitate. */
.modal.meet-modal{padding:0;overflow:hidden;max-width:520px}
.meet-modal .meet{border:0;border-radius:0;max-width:none}
.meet-modal .closebtn{margin-left:8px}
.meet .courier{margin:0 16px 16px}

/* Antetul panoului pe mobil (2026-09-16): „Vezi profilul" + „Blochează" in
   rand rupeau numele pe doua randuri la 375px — sub 600px trec intr-un
   meniu „⋯". Numele ramane pe un rand, taiat cu „…" daca e foarte lung. */
.panel .bar .bar-who{flex:1;min-width:0}
.panel .bar .bar-who h3,.panel .bar .bar-who .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-actions{display:flex;align-items:center;gap:8px}
.bar-actions form{display:contents}
.bar-more{display:none;position:relative;flex:none}
.bar-more summary{
  list-style:none;cursor:pointer;width:36px;height:36px;border-radius:var(--r-btn);
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--text-2)
}
.bar-more summary::-webkit-details-marker{display:none}
.bar-more summary:hover,.bar-more[open] summary{background:var(--line-2)}
.bar-more-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:180px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-box);box-shadow:0 8px 24px rgba(0,47,52,.12);
  padding:6px;display:flex;flex-direction:column;gap:2px
}
.bar-more-menu form{display:contents}
.bar-more-menu .btn{justify-content:flex-start;width:100%}
@media(max-width:600px){
  .bar-actions{display:none}
  .bar-more{display:block}
}

/* „Intreaba oricum": o singura piesa, o intrebare. */
.ask .body{padding:0 16px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ask .body .piece{width:auto;border:1px solid var(--line);border-radius:var(--r-box);padding:6px 10px 6px 6px;background:var(--card);flex:none}
.ask .body .piece:hover{border-color:var(--olx-ink);background:var(--card)}
.ask .body p{margin:0;flex:1;min-width:200px;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.ask.is-answered{opacity:.85}

/* Cardul intalnirii: harta (Leaflet local), Loc, Cand, telefoane. */
.meet .map{height:150px;background:var(--line-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.meet .rows{padding:6px 16px 4px}
.meet .r{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-2);align-items:flex-start}
.meet .r:last-child{border-bottom:0}
.meet .r .k{flex:none;width:72px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);padding-top:3px;overflow:hidden;text-overflow:ellipsis}
.meet .r .v{font-size:14px;line-height:1.4;min-width:0}
.meet .r .v small{display:block;font-size:12px;color:var(--mute);margin-top:1px}
.meet .r .v .ph{font-family:var(--mono);font-size:14.5px;font-weight:var(--w-med)}
.meet .r .v .ph a{color:inherit;text-decoration:none}
.meet .r .v .st{display:block;font-size:12px;margin-top:2px;color:#00794C}
.meet .r .v .unshare{background:none;border:0;padding:0;font-family:var(--font);font-size:12px;color:var(--mute);text-decoration:underline;cursor:pointer}

/* Navigheaza direct la pin — Waze / Google Maps, sub locul propus. */
.navlinks{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.navlinks a{
  display:inline-flex;align-items:center;padding:5px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);font-size:11.5px;font-weight:var(--w-med);
  color:var(--text-2);text-decoration:none;
}
.navlinks a:hover{border-color:var(--olx-ink);color:var(--text)}

/* Textul liber, inca blocat (Mesageria v3): caseta de scris dezactivata, pe
   un rand — inlocuieste nota mare .locked de dinainte. */
.composer-v2.is-locked .send-row{opacity:.7}
.composer-v2.is-locked textarea{background:var(--line-2);cursor:not-allowed}

/* Bulele de chat + caseta de scris (chipurile pre-completeaza, nu trimit).
   .composer-v2 traieste acum in .panel (cutia de chat, ca pe /mesaje) —
   fixata jos, latime intreaga, fara card propriu. */
.msgfeed .bubble{margin-bottom:0}
.composer-v2{flex:none;background:var(--card);border-top:1px solid var(--line);padding:11px 14px 12px}
.composer-v2 .send-row{display:flex;gap:9px;align-items:flex-end}
.composer-v2 textarea{
  flex:1;border:1px solid var(--line);border-radius:var(--r-box);padding:11px 14px;
  resize:none;height:44px;max-height:110px;font-family:var(--font);font-size:14px;
}
.composer-v2 textarea:focus{outline:none;border-color:var(--olx-ink);box-shadow:0 0 0 3px rgba(0,47,52,.1)}
.sendbtn{
  width:44px;height:44px;border-radius:var(--r-btn);border:none;
  background:var(--olx-ink);color:#fff;cursor:pointer;font-size:17px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.sendbtn svg{margin-left:2px}
.sendbtn:disabled{background:var(--line);color:var(--mute);cursor:not-allowed}
.counter{font-family:var(--mono);font-size:10px;color:var(--mute);text-align:right;margin-top:6px}

/* Fereastra piesei — aceeasi ca „Vezi mai mult" de pe pagina piesei, acum
   globala (folosita si din fir). */
.desc-modal .pic{aspect-ratio:1;max-height:280px;margin:0 auto 16px;border-radius:var(--r-img);overflow:hidden;background:var(--line-2)}
.desc-modal .pic img{width:100%;height:100%;object-fit:contain;padding:8%;background:transparent}
.desc-modal h3{margin-bottom:2px}
.desc-modal .num{font-family:var(--mono);font-size:11px;color:var(--mute);margin-bottom:10px}
.desc-modal .desc{white-space:pre-line;color:var(--text-2);font-size:14px;line-height:1.6;margin:0 0 18px}

/* ==========================================================================
   16. NOTE, STĂRI GOALE, SUBSOL, MODAL
   ========================================================================== */
.note{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-box);font-size:13px;line-height:1.55}
.note .ic{flex:none;font-size:15px;line-height:1.35}
/* Bug real (2026-09-16, gasit de user): un .note cu atributul hidden tot
   aparea — [hidden] din browser si .note{display:flex} de mai sus au
   aceeasi specificitate, iar regula proprie castiga. Acelasi tipar deja
   intalnit la .veil/.bulkbar, acelasi fix: regula proprie pentru [hidden]. */
.note[hidden]{display:none}
.note-info{background:var(--line-2);color:var(--text-2);border:1px solid var(--line)}
.note-ok{background:var(--have-bg);color:#00794C;border:1px solid #BFE7D5}
.note-warn{background:var(--want-bg);color:var(--want-ink);border:1px solid #F0DFB4}
.note-danger{background:#FBE9E7;color:var(--miss);border:1px solid #F0C4BE}
/* Blocul de curier in varianta imagine (Admin > Bloc curier) — aceeasi latime
   maxima ca varianta text, imaginea intreaga, nedecupata. */
.courier-img{max-width:520px}
.courier-img a{display:block}
.courier-img img{display:block;width:100%;height:auto;border-radius:var(--r-box);border:1px solid var(--line)}

.empty{text-align:center;padding:44px 22px;color:var(--mute)}
.empty h3{font-size:17px;color:var(--text);margin-bottom:7px}
.empty p{font-size:13.5px;max-width:38ch;margin:0 auto 16px;line-height:1.6}

/* Toast — feedback pentru eșecuri AJAX (statusuri, acțiuni în masă, mesaje)
   și, ca variantă .is-success, confirmare scurtă la fiecare salvare reușită
   de status (fără ea, userul caută din reflex un buton "Salvează" care nu
   există — statusurile se salvează automat, la fiecare click).
   Înlocuiește alert()-urile native, care blocau firul JS și ieșeau din
   sistemul de design. Auto-dispare, nu fură focus (aria-live="polite"). */
.toaster{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  width:min(92vw,340px);pointer-events:none;
}
.toast{
  pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;
  border-radius:var(--r-box);font-size:13px;line-height:1.5;box-shadow:var(--shadow-l);
  background:#FBE9E7;color:var(--miss);border:1px solid #F0C4BE;
  animation:toast-in .18s ease-out;
}
.toast.is-success{background:var(--have);color:#fff;border-color:var(--have)}
/* Confirmarea salvarii, mai vizibila (2026-09-21, cerinta userului): mai mare,
   cu bifa intr-un cerc si o aparitie cu "pop". */
.toast.is-success{
  align-items:center;gap:12px;padding:14px 22px 14px 16px;
  font-size:15.5px;font-weight:var(--w-med);line-height:1.3;
  box-shadow:0 10px 30px rgba(0,47,52,.28);animation:toast-pop .26s cubic-bezier(.2,1.4,.4,1);
}
.toast.is-success::before{
  content:"\2713";flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:#fff;color:var(--have);font-size:15px;font-weight:700;
}
@keyframes toast-pop{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.adslot{
  border:1px dashed var(--line);border-radius:var(--r-box);padding:28px;text-align:center;
  color:var(--mute);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--card);
}

.foot{background:var(--olx-ink);color:#9FBCBF;padding:32px 0;margin-top:40px;font-size:13.5px}
.foot .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.foot a{color:#CFE3E5;text-decoration:none}
.foot a:hover{text-decoration:underline}

.veil{
  position:fixed;inset:0;background:rgba(0,47,52,.55);z-index:1020;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.veil[hidden]{display:none}
.modal{
  background:var(--card);border-radius:var(--r-box);max-width:440px;width:100%;
  padding:24px;box-shadow:var(--shadow-l);
  /* Un continut lung (ex. descrierea completa a unei piese) derulează in
     modal, nu iese din ecran. */
  max-height:calc(100vh - 40px);overflow-y:auto;
}
.modal h3{font-size:20px;margin-bottom:8px}
.modal p{color:var(--text-2);font-size:14px;margin:0 0 18px}
/* Variantă lată, pentru continut cu doua coloane (ex. formularul de
   propunere a intalnirii, harta + data/ora, randat acum si intr-un modal
   din fir — 2026-09-15). */
.modal.modal-wide{max-width:880px}
@media(max-width:560px){.veil{align-items:flex-end;padding:0}.modal{max-width:none;max-height:90vh}}

/* Formularul de loc/ora (Etapa 7) — mutat din trades/meeting.blade.php in
   colecto.css (2026-09-15), ca sa fie identic si pe ecranul separat, si in
   modalul din fir (trades/_meeting-form.blade.php, inclus din amandoua). */
.meeting-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media(max-width:800px){.meeting-cols{grid-template-columns:1fr}}
#meeting-map, #meeting-map-readonly{border-radius:var(--r-box);border:1px solid var(--line);margin:10px 0}
#meeting-map{height:300px}
#meeting-map-readonly{height:220px}
.place-list{max-height:140px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-box);margin-top:10px}
.place-list button{
  display:block;width:100%;text-align:left;padding:9px 12px;border:none;background:none;
  cursor:pointer;font-size:13px;border-bottom:1px solid var(--line-2);
}
.place-list button:last-child{border-bottom:none}
.place-list button:hover,.place-list button[aria-pressed="true"]{background:var(--line-2)}
.place-search{display:flex;gap:8px;margin-top:10px}
.place-search .input{flex:1}
.datetime-row{display:flex;gap:10px}
.datetime-row .field{flex:1;margin-bottom:0}
/* .hint e definit doar imbricat sub .field in restul foii — aici apare si
   de sine statator (langa lista de repere, langa harta). */
.hint{font-size:12px;color:var(--mute);line-height:1.45}

/* Comutator "Arată-i numărul meu" (2026-09-16) — acelasi limbaj vizual ca
   .trade-toggle ("de dat la schimb"), dar CSS-only pe un checkbox real
   (appearance:none), nu buton+JS — formularul de intalnire se trimite
   clasic prin POST. Cutie cu fundal, nu doar text mic langa o bifa: bifa
   simpla se pierdea vizual sub campul de telefon completat deasupra. */
.tel-share{
  display:flex;align-items:flex-start;gap:12px;margin-top:10px;cursor:pointer;
  background:var(--line-2);border:1px solid var(--line);border-radius:var(--r-box);padding:12px 13px;
}
.tel-share input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:none;margin-top:2px;
  width:32px;height:19px;border-radius:var(--r-pill);background:var(--line);
  position:relative;cursor:pointer;transition:background .16s;
}
.tel-share input[type="checkbox"]::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;transition:transform .16s;box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.tel-share input[type="checkbox"]:checked{background:var(--have)}
.tel-share input[type="checkbox"]:checked::after{transform:translateX(13px)}
.tel-share .txt{font-size:13px;line-height:1.45}
.tel-share .txt b{display:block;font-weight:var(--w-med);color:var(--text)}
.tel-share .txt small{display:block;color:var(--mute);margin-top:1px}

/* Rezumatul propunerii, deasupra butonului de trimis (2026-09-16) —
   completat live din JS (initMeetingMap). Aceleasi tokeni ca .meet .r/.k/.v
   (cardul intalnirii din fir), dar scopate separat: aici traieste in
   .meeting-cols, nu in .meet. */
.meeting-summary{background:var(--line-2);border:1px solid var(--line);border-radius:var(--r-box);padding:2px 14px;margin:16px 0}
.meeting-summary .r{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.meeting-summary .r:last-child{border-bottom:0}
.meeting-summary .k{flex:none;width:48px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);padding-top:1px}
.meeting-summary .v{font-size:13.5px;line-height:1.4;color:var(--text)}
.meeting-summary .v.is-empty{color:var(--mute)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Bannerul de campanie din mesagerie (admin > colectie > „Banner mesagerie") —
   randat doar in panoul gol de pe /mesaje (nicio conversatie deschisa inca),
   niciodata langa un fir activ — nu mai are loc natural intr-o cutie de chat
   compacta (2026-09-14, dupa unificarea vizuala cu /mesaje, vezi mai jos). */
.campaign-banner{max-width:320px;margin:auto}
.campaign-banner img{display:block;width:100%;height:auto;border-radius:var(--r-box);border:1px solid var(--line);background:var(--line-2)}
.campaign-banner a{display:block}
.campaign-banner .eyebrow{display:block;margin-bottom:8px}
.panel .campaign-banner{padding:24px}

/* ==========================================================================
   17. PAGINI STATICE (2026-09-16)
   ========================================================================== */
/* Randeaza continutul HTML scris din admin (Termeni, Confidentialitate,
   Cookie, Cum functioneaza) — tipografie simpla, aceiasi tokeni ca restul
   site-ului, fara sa depinda de clasele Blade specifice din alte pagini. */
.prose{font-size:14.5px;line-height:1.7;color:var(--text-2);max-width:72ch}
.prose h2{font-size:18px;color:var(--text);font-weight:var(--w-med);margin:28px 0 8px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin-bottom:4px}
.prose a{color:var(--olx-ink);text-decoration:underline}

/* Editorul WYSIWYG din admin (Pagini statice, Warning box) — Quill
   (public/vendor/quill/), auto-gazduit local ca Leaflet: fara CDN, fara
   Node/build step, fara pachet Composer (e doar JS/CSS static). Ales in
   locul unui textarea cu HTML brut (varianta initiala) pentru ca adminii
   care completeaza aceste texte nu sunt tehnici — cerinta explicita a
   userului, 2026-09-16, comparat cu editorul din WordPress. Textarea-ul
   real (cu valoarea trimisa la submit) ramane in DOM, ascuns — vezi
   initQuillEditor in admin.js. */
.quill-wrap{border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;background:var(--card)}
.quill-wrap .ql-toolbar.ql-snow{border:none;border-bottom:1px solid var(--line);background:var(--line-2);font-family:var(--font)}
.quill-wrap .ql-container.ql-snow{border:none;font-family:var(--font);font-size:14.5px}
.quill-wrap .ql-editor{min-height:280px}

/* ==========================================================================
   Notificari (clopotelul, 2026-09-16) — panoul de sub clopotel (desktop,
   adus de initBell) si pagina /notificari (telefon, „Vezi toate").
   ========================================================================== */
.nt-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-box);display:flex;flex-direction:column}
/* display:flex de mai sus bate [hidden] din browser — fara asta panoul ramanea
   vizibil dupa inchidere (click in afara, Escape, click pe clopotel). */
.nt-panel[hidden]{display:none}
.nt-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:400px;
  box-shadow:var(--shadow-l);max-height:min(640px,calc(100vh - 90px));
}
.nt-top{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;min-height:60px}
.nt-top h2{font-size:21px}
.nt-menu{position:relative}
.nt-menu summary{list-style:none;width:34px;height:34px;border-radius:var(--r-btn);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-2);font-size:18px;letter-spacing:1px}
.nt-menu summary::-webkit-details-marker{display:none}
.nt-menu summary:hover,.nt-menu[open] summary{background:var(--line-2);color:var(--text)}
.nt-menu .pop{position:absolute;right:0;top:38px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-box);box-shadow:var(--shadow-l);padding:4px;z-index:3;white-space:nowrap}
.nt-menu .pop button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 12px;font:inherit;font-size:13.5px;color:var(--text);border-radius:var(--r-btn);cursor:pointer}
.nt-menu .pop button:hover{background:var(--line-2)}
.nt-tabs{padding:0 16px 8px}
.nt-tabs .chip{cursor:pointer;font-family:var(--font)}
.nt-scroll{overflow-y:auto;flex:1;min-height:0;padding-bottom:6px}
.nt-loading{padding:40px 16px;text-align:center;color:var(--mute);font-size:13.5px}
.nt-group{display:flex;align-items:baseline;justify-content:space-between;padding:12px 16px 4px}
.nt-group h3{font-size:15px}
.nt-group a{font-size:13px;color:var(--rar);text-decoration:none}
.nt-group a:hover{text-decoration:underline}

.nt{
  display:grid;grid-template-columns:52px 1fr 12px;gap:12px;align-items:center;
  margin:0 6px;padding:8px 10px;border-radius:var(--r-box);text-decoration:none;color:var(--text);
}
.nt:hover{background:var(--line-2)}
.nt-pic{position:relative;width:52px;height:52px}
.nt-pic .avatar{width:52px;height:52px;font-size:19px}
.nt-pic .avatar.is-gone{background:var(--line);color:var(--mute)}
.nt-pic .thumb{display:block;width:52px;height:52px;border-radius:var(--r-box);border:1px solid var(--line);background:var(--card);overflow:hidden}
.nt-pic .thumb img{width:100%;height:100%;object-fit:contain;padding:8%;background:none}
.nt-pic .brandmark{width:52px;height:52px;font-size:21px}
.nt-ico{
  position:absolute;right:-6px;bottom:-5px;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--card);display:flex;align-items:center;justify-content:center;color:#fff;
}
.nt-ico svg{width:12px;height:12px}
.ico-offer,.ico-new{background:var(--olx-ink)}
.ico-ok{background:var(--have)}
.ico-no{background:var(--miss)}
.ico-ask{background:var(--want);color:var(--olx-ink)}
.ico-meet{background:var(--rar)}
.ico-flag{background:var(--olx-teal-dk);color:var(--olx-ink)}
.ico-clock,.ico-match{background:var(--leg)}
.ico-msg{background:var(--olx-teal);color:var(--olx-ink)}
.ico-gone{background:var(--mute)}
.nt-txt{font-size:14px;line-height:1.38;min-width:0;overflow-wrap:anywhere}
.nt-txt .ctx{color:var(--text-2)}
.nt-meta{display:block;font-size:12.5px;color:var(--mute);margin-top:3px}
.nt-dot{width:11px;height:11px;border-radius:50%}
.nt.is-unread .nt-dot{background:var(--rar)}
.nt.is-unread .nt-meta{color:var(--rar);font-weight:var(--w-med)}
.nt:not(.is-unread) .nt-txt{color:var(--text-2)}
.nt:not(.is-unread) .nt-txt b{color:var(--text)}
.nt-empty{padding:34px 24px;text-align:center;color:var(--mute);font-size:14px;line-height:1.5}
.nt-empty b{display:block;color:var(--text);font-size:15px;margin-bottom:4px}
.nt-foot{padding:10px 16px 14px;border-top:1px solid var(--line-2)}
.nt-foot .btn{width:100%;justify-content:center}

.nt-page{max-width:640px;margin:0 auto}
.nt-page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.nt-page-head h1{font-size:26px}
.nt-panel-page .nt-tabs{padding-top:14px}
@media(max-width:600px){
  .nt-page .nt-panel-page{border-left:0;border-right:0;border-radius:0;margin:0 -20px}
  .nt-page .nt{margin:0 4px;padding:9px 8px}
}

/* ==========================================================================
   Ghidul de inceput (Driver.js, 2026-09-21) — peste public/vendor/driver/
   driver.css, doar cu clasa .colecto-tour (popoverClass din initTour).
   Butoanele copiaza .btn-primary / .btn-ghost.
   ========================================================================== */
.driver-popover.colecto-tour{
  font-family:var(--font);background:var(--card);color:var(--text);
  border-radius:var(--r-box);box-shadow:var(--shadow-l);padding:18px 18px 14px;max-width:340px;
}
.driver-popover.colecto-tour .driver-popover-title{font-family:var(--font);font-size:16px;font-weight:var(--w-med);color:var(--text);line-height:1.3}
.driver-popover.colecto-tour .driver-popover-description{font-family:var(--font);font-size:13.5px;line-height:1.5;color:var(--text-2);margin-top:6px}
.driver-popover.colecto-tour .driver-popover-progress-text{font-family:var(--mono);font-size:11px;color:var(--mute)}
.driver-popover.colecto-tour .driver-popover-footer{margin-top:14px;gap:8px}
.driver-popover.colecto-tour .driver-popover-footer button{
  font-family:var(--font);font-size:13.5px;font-weight:var(--w-med);text-shadow:none;
  padding:8px 14px;border-radius:var(--r-btn);border:2px solid var(--line);background:var(--card);color:var(--text);
}
.driver-popover.colecto-tour .driver-popover-footer button:hover,
.driver-popover.colecto-tour .driver-popover-footer button:focus{background:var(--line-2)}
.driver-popover.colecto-tour .driver-popover-footer .driver-popover-next-btn{background:var(--olx-ink);border-color:var(--olx-ink);color:#fff}
.driver-popover.colecto-tour .driver-popover-footer .driver-popover-next-btn:hover,
.driver-popover.colecto-tour .driver-popover-footer .driver-popover-next-btn:focus{background:var(--olx-ink-2);border-color:var(--olx-ink-2);color:#fff}
.driver-popover.colecto-tour .driver-popover-close-btn{color:var(--mute)}
.driver-popover.colecto-tour .driver-popover-close-btn:hover{color:var(--text)}