/* reluare.css - playerul si banda de oferta de pe pagina de reluare a workshopului.
 *
 * ═════════════════════════════════════════════════════════════════════════════════════════
 * DE UNDE VINE
 *
 * Regulile astea au trait in `live.css`, la transmisiunea proprie. Proiectul acela a fost
 * abandonat pe 15 septembrie 2026 si fisierul lui urmeaza sa dispara, dar bucata de aici
 * si-a dovedit valoarea: e rama de video si banda de cumparare care au fost gandite pentru
 * exact momentul in care omul tocmai a terminat de ascultat si e cel mai aproape de decizie.
 *
 * Copiate, nu importate, si cu prefix schimbat din `live-` in `rel-`: dependenta de un
 * fisier care se sterge ar fi o bomba cu ceas, iar prefixul vechi ar fi mintit despre unde
 * se foloseste.
 *
 * ⚠ COPERTILE NU SUNT AICI. `.video-coperta`, `.video-marca`, `.coperta-*` si ecranul de
 * final stau in `player.css`, care ramane fiindca il folosesc si lectiile din curs. Asa
 * coperta de la reluare si cea de la o lectie arata la fel, prin constructie - nu fiindca
 * si-a amintit cineva sa le tina la fel.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */

/* Rama videoului. `position: relative` NU e cosmetica: coperta si ecranul de final din
   player.css sunt `position: absolute; inset: 0`, deci au nevoie de un parinte pozitionat.
   Fara el ar acoperi toata pagina. */
.rel-player {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gold-pale);
  box-shadow: var(--shadow-lg);
}

.rel-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Banda de oferta ────────────────────────────────────────────────────────────────────
   Apare la secunda pusa in admin, sub video. Pana atunci nu exista pe ecran. */
.rel-oferta {
  margin-top: var(--space-6);
  text-align: center;
  padding: var(--space-6);
  border: 1px solid var(--gold-pale);
  border-radius: var(--radius-lg);
  background: var(--ink);
}

.rel-oferta[hidden] { display: none; }

.rel-oferta__text {
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
  font-size: var(--text-lg);
}

.rel-pachete {
  display: flex;
  gap: var(--space-8);
  justify-content: center;
  flex-wrap: wrap;
}

.rel-pachete[hidden] { display: none; }

.rel-pachet-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Doua butoane cu pret, nu un tabel comparativ: aici trebuie ceva ce se citeste dintr-o
   privire. Pro e dominant prin CULOARE (plin, nu conturat), nu prin pozitie - Basic ramane
   primul fiindca preturile cresc de la stanga la dreapta, cum se citeste. */
.rel-pachet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 170px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--gold);
  transition: transform 0.15s ease, background 0.15s ease;
}

.rel-pachet:hover { transform: translateY(-2px); background: rgba(var(--tint-rgb), 0.05); }

.rel-pachet--pro {
  background: var(--gold);
  color: var(--text-inverse);
  box-shadow: var(--shadow-gold);
}

.rel-pachet--pro:hover { background: var(--gold-dim); }

.rel-pachet__nume {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
}

.rel-pachet__pret {
  font-size: var(--text-base);
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

/* Rata sta SUB butonul Pro, nu pe un rand separat: e raspunsul la obiectia pe care o naste
   cifra de deasupra ei. Fara suma - o a doua cifra langa prima ar cere o comparatie. */
.rel-rate {
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rel-rate:hover { color: var(--gold); }
.rel-rate[hidden] { display: none; }

/* Cand pachetele au preturi, butonul generic isi schimba rostul: din „cumpara" (a treia
   varianta lipita sub doua care spun acelasi lucru) devine „vezi detaliile" - mic si
   discret, pentru cine vrea sa citeasca inainte sa decida. */
.rel-vezi-tot {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border: 1px solid rgba(var(--tint-rgb), 0.18);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.rel-vezi-tot:hover { color: var(--gold); border-color: var(--gold-pale); }