/* V65.7 — ABBONAMENTI: card piani, ora su una pagina dedicata
   (abbonamenti.html, raggiungibile dal link in oro nella nav) invece che
   dentro la home + stili condivisi per il blocco "SBLOCCA" usato in
   Dashboard (Partite / Trading Sportivo). Caricato da abbonamenti.html e
   da dashboard.html. */

.subs-section{padding-top:10px}
/* Pagina a sé stante (niente hero sopra): un po' più di respiro in cima. */
.subs-page{padding-top:70px}
.subs-status{margin:0 0 18px;text-align:center}
.subs-empty{color:#7f9bc0;text-align:center}
.subs-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  width:min(1180px,92vw);margin:0 auto;
}
.subs-plan-card{
  background:#0a1a34;border:1px solid #1d3a63;border-radius:18px;
  padding:26px 22px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .2s ease,transform .2s ease;
}
.subs-plan-card:hover{border-color:#2f5c96;transform:translateY(-2px)}
.subs-plan-card.active{border-color:#e2a927;box-shadow:0 0 0 1px #e2a92740,0 14px 40px #e2a92716}
.subs-plan-card h3{margin:0;font-size:19px;color:#fff;display:flex;align-items:center;gap:9px}
.subs-plan-emoji{font-size:22px;line-height:1}
.subs-plan-desc{margin:0;color:#9fb4cf;font-size:13.5px;line-height:1.55;flex:1}
.subs-plan-price{display:flex;align-items:baseline;gap:5px}
.subs-plan-price b{font-size:30px;color:#fff}
.subs-plan-price span{color:#7f9bc0;font-size:13px}
.subs-plan-price.subs-plan-soon{font-size:15px;font-weight:800;color:#7f9bc0;letter-spacing:.02em}
.subs-plan-active{
  text-align:center;background:#182d0f;color:#8fe8b0;border:1px solid #2f6b3d;
  border-radius:11px;padding:11px 14px;font-weight:700;font-size:13.5px;
}
@media (max-width:980px){.subs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.subs-grid{grid-template-columns:1fr}}

/* ===== Blocco SBLOCCA condiviso (riga Partite + card Trading Sportivo) =====
   V65.6 — tastino SBLOCCA a dimensione piena (pillola dorata, centrata come
   le scritte delle squadre) + percentuale come grafico a torta, colorato
   rosso/arancione/verde in base al valore. Nella riga Partite (.match-row)
   questo richiede una colonna più larga del solito bottone Analisi: quando
   la riga è bloccata riceve la classe .match-row-locked, che allarga solo
   l'ultima colonna (vedi dashboard.css). Sotto gli 850px la riga torna
   comunque a tutta larghezza (vedi dashboard.css), quindi lo spazio non
   manca mai. */
.tr-locked-pick{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-width:0;max-width:100%;
}
.tr-locked-donut{
  position:relative;width:56px;height:56px;flex:0 0 auto;border-radius:50%;
  background:conic-gradient(var(--pct-color,#3a4a63) 0 calc(var(--pct,0)*1%), #16304f calc(var(--pct,0)*1%) 100%);
  box-shadow:0 0 0 1px #21446e inset;display:flex;align-items:center;justify-content:center;
}
.tr-locked-donut:before{content:'';position:absolute;inset:6px;border-radius:50%;background:#0a1c33}
.tr-locked-pct{
  position:relative;z-index:1;font-weight:900;font-size:13.5px;line-height:1;
  letter-spacing:-.01em;text-align:center;
}
.tr-locked-pct.tr-pct-red{color:#ff5a5f}
.tr-locked-pct.tr-pct-orange{color:#f5a623}
.tr-locked-pct.tr-pct-green{color:#3ddc84}
.tr-unlock-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
  background:linear-gradient(135deg,#f3cf6a,#e2a927 55%,#b8800f);
  color:#241a04;font-weight:800;font-size:12.5px;letter-spacing:.02em;
  border:none;border-radius:999px;padding:8px 14px;cursor:pointer;max-width:100%;
  box-shadow:0 6px 18px #e2a92740;transition:transform .15s ease,box-shadow .15s ease;
}
.tr-unlock-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px #e2a92760}

/* V72 — ACCESSO PER SEZIONE: blocco a schermo intero per le sezioni TR ENGINE che non
   hanno (ancora) un blocco parziale dedicato come Partite/Trading Sportivo qui sopra
   (vedi applySectionGate() in app.js). Appare solo se l'Admin assegna quella sezione a
   un piano o la blocca per uno specifico utente: finché nessuno dei due accade resta
   sempre sbloccata, come oggi. */
.view.tr-section-gated{position:relative;min-height:60vh;overflow:hidden}
.view.tr-section-gated>*:not(.tr-section-lock-banner){filter:blur(7px) saturate(.6);pointer-events:none;user-select:none}
.tr-section-lock-banner{
  position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#0a1c3399,#071326cc);
}
.tr-section-lock-card{
  text-align:center;max-width:320px;padding:28px 26px;border-radius:18px;
  background:#0d2140;border:1px solid #21446e;box-shadow:0 20px 50px -14px rgba(0,0,0,.6);
}
.tr-section-lock-card b{display:block;font-size:17px;color:#fff;margin-bottom:8px}
.tr-section-lock-card p{margin:0 0 16px;color:#9fb4cf;font-size:13px;line-height:1.5}
.tr-section-lock-card button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,#f3cf6a,#e2a927 55%,#b8800f);color:#241a04;
  font-weight:800;font-size:13px;letter-spacing:.02em;border:none;border-radius:999px;
  padding:10px 18px;cursor:pointer;box-shadow:0 6px 18px #e2a92740;
}