/* Cardurile de plan și comutatorul Lunar / Anual, comune paginii /inscriere (peste inscriere.css) și Setări → Abonament
   (peste app.css). Culorile vin din variabilele temei (--accent, --roz-bg, --linie…), deci merg pe ambele. Comutatorul e doar
   CSS: radio-urile #per-lunar / #per-anual stau înaintea comutatorului și a planurilor, în același container .alegere-plan. */
.alegere-plan .per { position: absolute; opacity: 0; pointer-events: none; }
.comutator { display: inline-flex; gap: 2px; padding: 4px; margin: 18px 0 20px; border: 1px solid var(--linie); border-radius: 999px; background: var(--bg); }
.comutator label { margin: 0; padding: 8px 18px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted); }
.comutator label .mic { color: var(--accent-txt); font-weight: 600; }
#per-lunar:checked ~ .comutator label[for=per-lunar], #per-anual:checked ~ .comutator label[for=per-anual] { background: var(--buton); color: #FFF; }
#per-anual:checked ~ .comutator label[for=per-anual] .mic { color: #FFF; }
#per-lunar:focus-visible ~ .comutator label[for=per-lunar], #per-anual:focus-visible ~ .comutator label[for=per-anual] { box-shadow: 0 0 0 3px rgba(255,51,102,.35); }
.alegere-plan .pret-anual, .alegere-plan .doar-anual { display: none; }
#per-anual:checked ~ .planuri .pret-anual, #per-anual:checked ~ .addonuri .pret-anual { display: inline; }
#per-anual:checked ~ .planuri .doar-anual { display: flex; }
#per-anual:checked ~ .planuri .pret-lunar, #per-anual:checked ~ .addonuri .pret-lunar, #per-anual:checked ~ .planuri .doar-lunar { display: none; }

/* planurile: carduri (cel ales la înscriere / planul actual: contur accent) */
.planuri { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.plan-card { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 24px; border: 1px solid var(--linie); border-radius: 10px;
  background: var(--bg); font-size: 14px; font-weight: 400; color: var(--text); }
label.plan-card { cursor: pointer; }
label.plan-card:hover { border-color: var(--linie2); }
.plan-card:has(input:checked), .plan-card.actual { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--roz-bg); }
.plan-card input { align-self: flex-start; }
.plan-nume { font: 700 21px/1.25 var(--font); color: var(--tare); }
.plan-pret { color: var(--muted); }
.plan-pret b { font: 800 30px/1.1 var(--font); letter-spacing: -.5px; color: var(--tare); }
.plan-card ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.5; }
.plan-card li { margin: 4px 0; }
.plan-card .pastila { color: var(--accent-txt); border-color: var(--roz-linie); background: var(--roz-bg); }

/* Setări → Abonament: marcajul planului actual și acțiunea de pe card (jos, aliniată între carduri) */
.plan-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.plan-card .eticheta-actual { font-size: 12px; font-weight: 700; color: var(--accent-txt); border: 1px solid var(--roz-linie); border-radius: 999px; padding: 2px 10px; }
.plan-actiune { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.plan-actiune button { width: 100%; justify-content: center; white-space: normal; height: auto; min-height: 38px; padding: 8px 14px; }
.plan-actiune .mic { margin: 0; color: var(--muted); }
.plan-actiune .motiv { color: var(--atentie, var(--muted)); }

/* rândurile de extra / addonuri: descriere și preț clar */
.randuri-abonament { display: grid; gap: 10px; }
.rand-abonament { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 10px; background: var(--bg); }
.rand-abonament > div:first-child { min-width: 0; }
.rand-abonament b { color: var(--tare); }
.rand-abonament .mic { margin: 2px 0 0; color: var(--muted); }
.rand-abonament input[type=number] { width: 90px; }
.rand-abonament:has(input:checked) { border-color: var(--accent); background: var(--roz-bg); }
.rand-abonament label.bifa { margin: 0; }

/* confirmarea schimbării */
.rezumat-schimbare { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 12px 0 18px; }
.rezumat-schimbare dt { color: var(--muted); }
.rezumat-schimbare dd { margin: 0; color: var(--tare); }

@media (max-width: 600px) {
  .comutator label { padding: 8px 14px; }
  .plan-card { padding: 18px; }
  .rand-abonament { flex-direction: column; align-items: stretch; }
  .rezumat-schimbare { grid-template-columns: 1fr; gap: 2px; }
  .rezumat-schimbare dd { margin-bottom: 8px; }
}