/* =====================================================================
   VENOM Shop — pagina de produs, checkout, top, comanda
   ===================================================================== */

.erou.mic{padding:20px 0 26px}
.erou-actiuni{margin-top:22px}

/* ------------------------------------------------------- firimituri */
.firimituri{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; color:var(--text-3); margin-bottom:22px;
}
.firimituri b{color:var(--text-2); font-weight:600}
.firimituri span{opacity:.5}

/* ----------------------------------------------------------- grupe */
.grupa{margin-bottom:46px}
.grupa-cap{margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--linie)}
.grupa-cap h2{margin:0; font-size:1.3rem; letter-spacing:-.02em}
.grupa-desc{margin:6px 0 0; color:var(--text-2); font-size:13.5px}

.produs-link{display:block; color:inherit}
.produs-link:hover h3{color:var(--brand-clar)}
.produs h3{margin:0 0 8px; font-size:1.12rem; letter-spacing:-.01em; transition:color .15s}

/* -------------------------------------------------- pagina de produs */
.produs-pagina{
  display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(22px,4vw,48px); align-items:start; margin-bottom:46px;
}
.produs-vizual{
  position:relative; display:grid; place-items:center; padding:34px;
  border:1px solid var(--linie); border-radius:var(--radius);
  background:
    radial-gradient(circle at 50% 35%, rgba(31,107,255,.18), transparent 65%),
    linear-gradient(165deg,#0b1428,#070d1c);
}
.produs-vizual img{width:min(100%,300px); height:auto}
.produs-detalii h1{margin:0 0 18px; font-size:clamp(1.6rem,3.6vw,2.4rem); letter-spacing:-.03em}

.produs-cifre{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.cifra-mare{
  flex:1 1 140px; padding:16px 18px; border-radius:14px;
  border:1px solid var(--linie); background:rgba(10,17,32,.55);
}
.cifra-mare b{display:block; font-size:1.7rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--brand-clar)}
.cifra-mare span{display:block; margin-top:4px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}

.produs-text{
  color:var(--text-2); font-size:14.5px; line-height:1.7;
  white-space:pre-line; /* pastreaza randurile scrise de admin */
}
.puncte{margin:22px 0 0; padding-left:20px; color:var(--text-3); font-size:13px}
.puncte li{margin-bottom:5px}

.btn-mare{padding:14px 26px; font-size:15px; border-radius:12px}

@media (max-width:820px){ .produs-pagina{grid-template-columns:1fr} }

/* -------------------------------------------------------------- file */
.file{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.fila{
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600;
  border:1px solid var(--linie-2); background:rgba(255,255,255,.03); color:var(--text-2);
}
.fila:hover{color:var(--text); border-color:var(--brand)}
.fila.activa{
  background:linear-gradient(135deg,var(--brand),var(--brand-clar));
  border-color:transparent; color:#fff;
}

/* --------------------------------------------------------- top/clasament */
.tabel-top .loc{font-family:ui-monospace,Consolas,monospace; color:var(--text-3); font-size:13px}
.tabel-top .vcoins{color:var(--brand-clar); font-size:1.05rem}
/* Locurile fruntase au si bara colorata, nu doar culoarea cifrei: cine nu
   distinge nuantele vede tot ierarhia. */
.podium td:first-child{position:relative}
.podium td:first-child::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:3px;
}
.podium-1 td:first-child::before{background:#ffd166}
.podium-2 td:first-child::before{background:#c9d4e4}
.podium-3 td:first-child::before{background:#d08b5b}
.podium-1 .loc{color:#ffd166}
.podium-2 .loc{color:#c9d4e4}
.podium-3 .loc{color:#d08b5b}

/* ----------------------------------------------------------- checkout */
.checkout{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,0.7fr); gap:22px; align-items:start}
@media (max-width:860px){ .checkout{grid-template-columns:1fr} }

.sumar{
  padding:22px; border-radius:var(--radius);
  border:1px solid var(--linie); background:linear-gradient(165deg,#0b1428,#070d1c);
  position:sticky; top:84px;
}
.sumar h3{margin:0 0 14px; font-size:1rem}
.sumar-produs{display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--linie)}
.sumar-produs img{border-radius:10px; background:rgba(3,7,18,.5); padding:4px; object-fit:contain}
.sumar-linii{margin:14px 0; display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:13.5px}
.sumar-linii dt{color:var(--text-3)}
.sumar-linii dd{margin:0; text-align:right; color:var(--text)}

/* ------------------------------------------------------------ comanda */
.auth-card.lat{width:min(100%,560px)}
.stare-mare{
  padding:18px; border-radius:14px; margin-bottom:20px;
  border:1px solid var(--linie-2); background:rgba(255,255,255,.03);
}
.stare-mare b{display:block; font-size:1.1rem; margin-bottom:5px}
.stare-mare span{font-size:13.5px; color:var(--text-2)}
.stare-mare.bun{background:rgba(46,204,113,.1); border-color:rgba(46,204,113,.3)}
.stare-mare.bun b{color:#b6f5d0}
.stare-mare.asteptare{background:rgba(31,107,255,.1); border-color:rgba(61,155,255,.3)}
.stare-mare.asteptare b{color:var(--brand-moale)}

.kv{display:grid; grid-template-columns:auto 1fr; gap:10px 18px; margin:0 0 16px; font-size:13.5px}
.kv dt{color:var(--text-3)}
.kv dd{margin:0; text-align:right; color:var(--text)}