/**
 * UndeStam.ro — Widget "Potriviri în timp real" (cerere-noua.php)
 * HOTFIX 3.4.21 (Task 20) — extras din inline, ca sa fie fisier separat
 * cerut explicit. Foloseste tokenii CSS (--a, --a2, --a3, --bo etc.)
 * definiti in :root din cerere-noua.php — acest fisier e incarcat DUPA
 * acel :root, deci variabilele exista deja cand se aplica regulile de mai
 * jos.
 *
 * Structura HTML necesara (randata de cerere-noua.php, ascunsa complet
 * cand ui_modules.matching_realtime e OFF):
 *   .match-card > .match-card-toggle (mereu vizibil) + .match-card-body
 *   (colapsabil doar sub 900px).
 */
.match-card{background:linear-gradient(135deg,var(--a) 0%,var(--primary-dark,#5c0a1e) 100%);color:#fff;border-radius:12px;padding:18px;position:relative;overflow:hidden}
.match-card::before{content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(107,27,36,.15),transparent 60%)}
.match-card-toggle{position:relative}
.match-hd{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.6;margin-bottom:6px;position:relative;display:flex;align-items:center;gap:4px}
.match-hd svg{opacity:.7;flex-shrink:0}
.match-n{font-size:44px;font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--a2);margin-bottom:3px;position:relative}
.match-l{font-size:12px;font-weight:600;opacity:.85;margin-bottom:0;position:relative}
.match-chevron{display:none;position:absolute;top:0;right:0;width:14px;height:14px;color:#fff;opacity:.7;transition:transform .2s ease}
.match-bar{height:4px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;margin:10px 0;position:relative}
.match-bar>div{height:100%;background:linear-gradient(90deg,var(--a),var(--a3));border-radius:2px;transition:width .5s ease}
.match-hint{font-size:11px;opacity:.8;line-height:1.5;position:relative}
.match-hint strong{color:var(--a2);font-weight:700}

/* Preview top 3 — mini-carduri poza + nume + scor */
.match-top3{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.15);display:flex;flex-direction:column;gap:8px;position:relative}
.match-top3-item{display:flex;align-items:center;gap:10px}
.match-top3-photo{width:60px;height:60px;border-radius:9px;background:rgba(255,255,255,.12) center/cover no-repeat;flex-shrink:0}
.match-top3-info{flex:1;min-width:0}
.match-top3-name{font-size:11px;font-weight:800;color:#fff;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-top3-score{display:inline-block;margin-top:4px;font-size:9px;font-weight:800;background:rgba(255,255,255,.18);color:#fff;padding:2px 8px;border-radius:999px}

/* Mobil (< 900px, acelasi breakpoint ca restul paginii cerere-noua.php):
   .match-card-body devine accordion, colapsat implicit, chevron vizibil. */
@media(max-width:899px){
  .match-card-toggle{cursor:pointer}
  .match-chevron{display:block}
  .match-card.expanded .match-chevron{transform:rotate(180deg)}
  .match-card-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
  .match-card.expanded .match-card-body{max-height:600px}
}