main.container.page { display: none !important;}
html, html body { background: var(--mv-bg) !important;}
/* footer lipit direct de fundal — anulează golul de 80px (margin-top global din footer.php) */
.site-footer { margin-top: 0 !important;}

:root {
  --sp-bg: var(--mv-bg);
  --sp-surface: rgba(12,18,40,0.7);
  --sp-border: rgba(130,100,255,0.12);
  --sp-cyan: var(--mv-accent);
  --sp-violet: var(--mv-accent);
  --sp-teal: var(--mv-accent);
  --sp-gold: #f5c842;
  --sp-green: var(--mv-success);
  --sp-red: var(--mv-danger);
  --sp-text: var(--mv-text-soft); --sp-muted: var(--mv-text-2);}

/* ── Scene ── */
.sp-page {
  position: relative; min-height: 100vh; overflow: hidden;
  background: radial-gradient(ellipse at 40% 20%, #0c1535 0%, var(--mv-bg) 50%, var(--mv-bg) 100%);
  padding: 90px 24px 60px;
  font-family: 'DM Sans', sans-serif; color: var(--sp-text);}

/* ── Hero ── */

/* ── Grid ── */
/* CARDURI EGALE, INDIFERENT DE CÂTE BENEFICII AU
   `align-items: stretch` (implicit la grid) face toate cardurile cât cel mai înalt.
   Cardul devine coloană flex, lista de beneficii crește (`flex: 1`), iar butonul
   rămâne lipit jos. Adaugi sau scoți beneficii → toate se ajustează singure. */
.sp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1100px; margin: 0 auto 40px; align-items: stretch;}

/* ── Card ── */
.sp-card {
  position: relative; border-radius: 8px; padding: 0;
  background: none; display: flex;}

.sp-card-inner {
  background: var(--mv-bg);
  border: 1px solid var(--mv-border);
  border-radius: 8px; padding: 28px 24px 24px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; width: 100%;}

/* ── Featured ── */
.sp-card--featured { padding: 0; background: none;}

.sp-popular {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 5px 16px; border-radius: 0 0 6px 6px;
  background: var(--mv-elev-3);
  font-size: 0.62rem; font-weight: 700; color: var(--mv-text-soft);}

/* ── Card icon (SVG) ── */

/* ── Card header ── */
.sp-card-name {
  font-size: 1.3rem; font-weight: 700;
  text-align: center; margin: 0 0 4px; color: var(--mv-text-soft);}
.sp-card-tag { text-align: center; font-size: 0.78rem; color: var(--sp-muted); margin: 0 0 18px;}

/* ── Preț ── (o singură culoare, fără gradient pe text) */
.sp-price { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 6px;}
.sp-price-cur { font-size: 0.82rem; color: var(--sp-muted); margin-top: 4px; align-self: flex-start;}
.sp-price-val { font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--mv-text-soft);}
.sp-price-per { font-size: 0.82rem; color: var(--sp-muted);}

.sp-original { text-align: center; margin-bottom: 4px;}
.sp-original span { font-size: 0.9rem; color: var(--sp-muted); text-decoration: line-through;}

.sp-savings {
  text-align: center; padding: 5px 14px; margin: 0 auto 16px;
  border-radius: 6px; font-size: 0.72rem; font-weight: 600; width: fit-content;
  background: var(--mv-elev-1); color: var(--mv-text-soft);}

/* ── Beneficii ── (cresc pe verticală ca să egalizeze cardurile) */
.sp-features { list-style: none; padding: 0; margin: 0 0 20px; flex: 1;}
.sp-features li {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--mv-border-soft); font-size: 0.84rem;
  line-height: 1.45;}
.sp-features li:last-child { border-bottom: none;}
/* Bifa: caracter simplu, fără cerc colorat — doar marchează inclus / neinclus. */
.sp-features .sp-feat-icon {
  flex-shrink: 0; font-size: 0.8rem; line-height: 1.5; width: 12px;}
.sp-feat-icon--ok { color: var(--mv-text-2);}
.sp-feat-icon--no { color: var(--mv-text-2);}
.sp-features li.disabled { opacity: 0.4;}
.sp-features li.highlight span { font-weight: 700;}

/* ── Buton ── (lipit jos, ca să fie aliniate între carduri) */
.sp-btn {
  width: 100%; padding: 12px; border-radius: 6px; margin-top: auto;
  font-size: 0.88rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--mv-border); background: transparent; color: var(--mv-text-soft);
  transition: background 0.15s ease, border-color 0.15s ease;}
.sp-btn:hover { background: var(--mv-elev-2); border-color: var(--mv-border-strong);}

/* Doar planul recomandat e plin, ca reper vizual — restul au contur. */
.sp-btn--pro { background: var(--mv-accent); border-color: var(--mv-accent); color: var(--mv-text-inverse);}
.sp-btn--pro:hover { background: #2861d6; border-color: #2861d6;}

/* ── Trust ── */
.sp-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  max-width: 800px; margin: 0 auto 40px;}
.sp-trust-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: var(--mv-elev-1); border: 1px solid var(--mv-border-soft);
  border-radius: 24px; font-size: 0.78rem; color: var(--sp-muted);
  transition: all 0.2s;}
.sp-trust-item:hover { border-color: rgba(168,85,247,0.2); background: rgba(168,85,247,0.04); color: var(--sp-text);}
.sp-trust-item i { color: var(--sp-violet);}

/* ── FAQ ── */
.sp-faq { max-width: 700px; margin: 0 auto 40px;}
.sp-faq-title { font-family: 'Merienda', cursive; font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 18px;}
.sp-faq-item {
  background: var(--mv-elev-1); border: 1px solid var(--mv-border-soft);
  border-radius: 12px; margin-bottom: 8px; overflow: hidden; transition: border-color 0.2s;}
.sp-faq-item:hover { border-color: rgba(168,85,247,0.2);}
.sp-faq-q {
  padding: 14px 20px; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; font-weight: 600; font-size: 0.9rem; color: var(--sp-text);
  transition: background 0.2s;}
.sp-faq-q:hover { background: rgba(168,85,247,0.04);}
.sp-faq-q i { color: var(--sp-violet); transition: transform 0.3s; font-size: 0.75rem;}
.sp-faq-item.active .sp-faq-q i { transform: rotate(180deg);}
.sp-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s; padding: 0 20px; color: var(--sp-muted); line-height: 1.7; font-size: 0.88rem;}
.sp-faq-item.active .sp-faq-a { max-height: 300px; padding: 0 20px 16px;}

/* ── Cancel banner ── */
.sp-cancel {
  max-width: 700px; margin: 0 auto 24px; padding: 16px 20px;
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
  border-radius: 14px; display: flex; align-items: center; gap: 14px;
  animation: fadeDown 0.4s ease;}
.sp-cancel-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(239,68,68,0.12); display: flex; align-items: center; justify-content: center; color: var(--mv-danger); flex-shrink: 0;}
.sp-cancel-title { font-weight: 700; font-size: 0.9rem; color: var(--mv-danger); margin-bottom: 2px;}
.sp-cancel-text { font-size: 0.82rem; color: var(--mv-text-soft);}
@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px);} to { opacity: 1; transform: translateY(0);} }

/* ── Responsive ── */
@media (max-width: 1024px) { .sp-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));} .sp-card--featured { transform: none;} }
@media (max-width: 768px) { .sp-grid { grid-template-columns: 1fr; max-width: 400px;} .sp-trust { flex-direction: column; align-items: center;} }
@media (max-width: 480px) { .sp-page { padding: 80px 14px 40px;} .sp-card-inner { padding: 22px 18px 20px;} }

/* ── Checkout modal (preserved) ── */
.checkout-modal-overlay { position: fixed;inset: 0;background: rgba(0,0,0,0.75);z-index: 10000;display: none;align-items: center;justify-content: center;padding: 20px;opacity: 0;transition: opacity 0.3s;}
.checkout-modal-overlay.active { display: flex;opacity: 1;}
.checkout-modal { background: #141e32;border: 1px solid rgba(168,85,247,0.2);border-radius: 24px;padding: 40px 36px;max-width: 420px;width: 100%;text-align: center;position: relative;animation: chkIn 0.4s cubic-bezier(0.16,1,0.3,1);}
@keyframes chkIn { from{opacity: 0;transform: scale(0.9) translateY(20px);} to{opacity: 1;transform: scale(1) translateY(0);} }
.checkout-modal-close { position: absolute;top: 16px;right: 16px;background: var(--mv-elev-2);border: 1px solid var(--mv-border);border-radius: 50%;width: 36px;height: 36px; color: var(--mv-text-2);font-size: 20px;cursor: pointer;transition: all 0.2s;display: flex;align-items: center;justify-content: center;}
.checkout-modal-close:hover { background: rgba(239,68,68,0.15);border-color: rgba(239,68,68,0.4);color: var(--mv-danger);}
.checkout-modal-icon { width: 72px;height: 72px;border-radius: 50%; background: var(--mv-success);display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;font-size: 28px; color: var(--mv-text-inverse);}
.checkout-modal-icon.pro { background: var(--mv-accent); color: var(--mv-text-inverse);}
.checkout-modal-icon.elite { background: #f5c842;}
.checkout-modal-title { font-size: 14px;font-weight: 600;text-transform: uppercase; color: var(--mv-text-2);margin-bottom: 8px;}
.checkout-modal-plan { font-family: 'Merienda',cursive;font-size: 26px;font-weight: 800;color: var(--mv-text);margin-bottom: 16px;}
.checkout-modal-price { display: flex;align-items: baseline;justify-content: center;gap: 6px;margin-bottom: 20px;padding: 16px 0;border-top: 1px solid var(--mv-border-soft);border-bottom: 1px solid var(--mv-border-soft);}
.checkout-price-amount { font-family: 'Merienda',cursive;font-size: 42px;font-weight: 900; color: var(--mv-text);}
.checkout-price-currency { font-size: 16px;font-weight: 600; color: var(--mv-text-2);}
.checkout-price-period { font-size: 14px; color: var(--mv-text-2);}
.checkout-modal-desc { font-size: 13px; color: var(--mv-text-2);margin-bottom: 20px;line-height: 1.5;}
.checkout-trial-notice { display: flex;align-items: flex-start;gap: 10px;padding: 14px 16px;background: rgba(16,185,129,0.08);border: 1px solid rgba(16,185,129,0.2);border-radius: 12px;margin-bottom: 20px;text-align: left;font-size: 12.5px; color: var(--mv-text-soft);line-height: 1.5;}
.checkout-trial-notice i { color: var(--mv-success);font-size: 16px;margin-top: 1px;flex-shrink: 0;}
.checkout-trial-notice strong { color: var(--mv-success);}
.checkout-modal-security { display: flex;justify-content: center;gap: 16px;margin-bottom: 28px;flex-wrap: wrap;}
.security-item { font-size: 11px; color: var(--mv-text-2);display: flex;align-items: center;gap: 5px;}
.security-item i { color: var(--mv-success);font-size: 12px;}
.checkout-modal-actions { display: flex;flex-direction: column;gap: 10px;}
.checkout-btn-confirm { width: 100%;padding: 16px 24px; background: var(--mv-success);border: none;border-radius: 14px; color: var(--mv-text-inverse);font-size: 16px;font-weight: 700;cursor: pointer;display: flex;align-items: center;justify-content: center;gap: 10px;transition: all 0.3s;}
.checkout-btn-confirm:hover {}
.checkout-btn-confirm:disabled { opacity: 0.7;cursor: not-allowed; transform: none;}
.checkout-btn-confirm.pro { background: var(--mv-accent); color: var(--mv-text-inverse);}
.checkout-btn-confirm.elite { background: #f5c842;}
.checkout-btn-cancel { width: 100%;padding: 12px;background: transparent;border: 1px solid var(--mv-border-soft);border-radius: 12px; color: var(--mv-text-2);font-size: 14px;cursor: pointer;transition: all 0.2s;}
.checkout-btn-cancel:hover { border-color: var(--mv-border); color: var(--mv-text-soft);}