/* SpesaChiara — blocco Pro: UN solo aspetto in tutto il sito.

   Regola: una funzione Pro NON si nasconde all'utente free, si MOSTRA
   censurata. L'utente vede che il dato esiste, quante righe sono, come è
   fatto — solo sfocato. Cornice ambra (mai grigia), badge PRO oro, CTA verde
   (mai nera): l'ambra dice "a pagamento", il verde resta l'azione del brand.

   Prima esistevano due varianti scollegate: la card oro con anteprima sfocata
   del confronto carrello e una card grigia col bottone nero nello storico
   prezzi. Questo file è l'unico posto in cui quell'aspetto è definito;
   pro-gate.js costruisce il markup. Token da colors_and_type.css.

   Le pagine che lo usano devono linkare colors_and_type.css PRIMA. */

.pgate{
  position:relative;
  border:1.5px solid var(--amber-500);
  border-radius:18px;
  padding:20px 18px;
  overflow:hidden;
  background:linear-gradient(135deg, var(--amber-50), #fff);
}
.pgate-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:900; letter-spacing:.06em;
  color:var(--amber-950);
  background:linear-gradient(135deg, var(--amber-400), var(--amber-500));
  padding:3px 10px; border-radius:var(--r-pill);
  margin-bottom:10px;
}
.pgate-badge svg{width:11px;height:11px;}
.pgate-title{
  font-size:17px; font-weight:800; color:var(--slate-900);
  margin:0 0 6px; letter-spacing:var(--ls-normal);
}
.pgate-sub{margin:0 0 12px;font-size:13px;color:var(--slate-500);line-height:var(--lh-base);}

/* ── Anteprima censurata ──
   Il contenuto è sfocato e non selezionabile; il click va comunque a /premium
   (il wrapper <a> resta cliccabile, il contenuto no). */
.pgate-preview{
  display:block; text-decoration:none;
  margin:2px 0 14px;
  border:1px solid var(--amber-200);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#fff;
}
.pgate-preview > .pgate-blur{
  filter:blur(4px);
  opacity:.75;
  user-select:none;
  pointer-events:none;
}
/* Righe fittizie: stessa altezza/ritmo delle righe reali, così il free vede
   quante ne otterrebbe. */
.pgate-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--slate-100);
}
.pgate-row:last-child{border-bottom:none;}
.pgate-row .l{display:flex;align-items:center;gap:9px;color:var(--slate-500);font-size:14px;font-weight:600;}
.pgate-row .lock{color:var(--amber-600);display:inline-flex;}
.pgate-row .lock svg{width:15px;height:15px;}
.pgate-row .val{color:var(--slate-500);font-size:14px;font-weight:600;}

.pgate-list{list-style:none;margin:0 0 14px;padding:0;}
.pgate-list li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--slate-600);padding:4px 0;}
.pgate-list li svg{width:16px;height:16px;color:var(--green-600);flex-shrink:0;margin-top:2px;}
.pgate-list b{color:var(--slate-800);}

.pgate-cta{
  display:inline-flex; align-items:center; gap:7px;
  height:46px; padding:0 22px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--green-500), var(--green-600));
  color:#fff; font-weight:800; font-size:14.5px; text-decoration:none;
  box-shadow:0 8px 20px -8px rgba(var(--green-500-rgb), .6);
  transition:transform .15s ease;
}
.pgate-cta:hover{color:#fff;transform:translateY(-1px);}
.pgate-cta svg{width:16px;height:16px;}

/* ── Variante compatta ──
   Per gli spazi stretti (sezione dentro una modale): niente elenco vantaggi,
   CTA piccola sovrapposta all'anteprima. */
.pgate--compact{padding:0;border-radius:var(--r-lg);}
.pgate--compact .pgate-preview,
.pgate--compact .pgate-blur{height:100%;}
.pgate--compact .pgate-preview{margin:0;border:none;border-radius:0;background:transparent;}
.pgate--compact .pgate-over{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  text-align:center; padding:0 20px;
  background:linear-gradient(135deg, rgba(255,251,235,.72), rgba(255,255,255,.72));
}
.pgate--compact .pgate-over p{margin:0;font-size:12.5px;font-weight:700;color:var(--amber-800);}
.pgate--compact .pgate-badge{margin:0;}
.pgate--compact .pgate-cta{
  height:32px; padding:0 15px; font-size:12.5px; border-radius:var(--r-md);
  box-shadow:0 4px 12px -4px rgba(var(--green-500-rgb), .55);
}

@media (prefers-reduced-motion: reduce){
  .pgate-cta{transition:none;}
  .pgate-cta:hover{transform:none;}
}