/*
Theme Name: VICE PULSE
Theme URI: https://www.vicepulse.it/
Author: VICE PULSE
Description: Tema notizie GTA 6 — design neon Vice City. Layout con hero, griglia articoli, sidebar e spazi pubblicitari a altezza riservata (no layout shift).
Version: 4.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vicepulse
*/

/* =========================================================
   NOTA SULLA VERSIONE 4.0
   ---------------------------------------------------------
   Questo file è stato riorganizzato per argomento invece che per
   "patch applicata quella sera" (le vecchie sezioni "v1.3", "v2.6",
   "FIX ... — v3.13" ecc). Il sito deve apparire IDENTICO a prima:
   nessun valore di colore, spaziatura o breakpoint è stato cambiato
   di proposito. Sono stati rimossi solo blocchi di codice che, per
   costruzione, non avevano più alcun effetto (superseduti da una
   regola successiva sullo stesso selettore) — principalmente i
   tentativi v1.6 e v1.7 sul layout dell'articolo, esplicitamente
   annullati dalla v1.8 ma mai cancellati dal file.
   ========================================================= */

/* =========================================================
   1. VARIABILI E RESET DI BASE
   ========================================================= */
:root{
  --bg:#0a0510;
  --bg-2:#12081f;
  --surface:#180b28;
  --surface-2:#1f0f33;
  --border:rgba(255,0,200,0.18);
  --text:#f3e9ff;
  --muted:#a892c2;
  --neon-pink:#ff2bd6;
  --neon-purple:#8a2be2;
  --neon-cyan:#00e5ff;
  --neon-yellow:#ffe600;
  --radius:14px;
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(138,43,226,.25), transparent 60%),
    radial-gradient(700px 500px at 0% 0%, rgba(255,43,214,.18), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

html, body{
  overflow-x:hidden;
  width:100%;
  min-width:100%;
}

body{--ov-top:.22;--ov-bot:.48}
body.scuro{--ov-top:.82;--ov-bot:.92}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,5,16,var(--ov-top)), rgba(10,5,16,var(--ov-bot))),
    url("assets/img/wallpaper.jpeg")
      center center / cover no-repeat fixed;
  transition:background .3s;
}
.bg-toggle{
  position:fixed;right:16px;bottom:16px;z-index:100;
  display:flex;gap:0;border:1px solid var(--border);border-radius:999px;
  background:rgba(10,5,16,.85);backdrop-filter:blur(10px);overflow:hidden;font-size:.76rem;font-weight:700;
}
.bg-toggle button{border:none;background:none;color:var(--muted);cursor:pointer;padding:8px 13px;transition:.18s}
.bg-toggle button.on{color:#0a0510;background:var(--neon-cyan)}

.skip-link{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  z-index:999;padding:12px 20px;
  background:var(--neon-purple);color:#fff;border-radius:0 0 8px 0;
}
.skip-link:focus{
  width:auto;height:auto;
  overflow:visible;
  clip:auto;
  white-space:normal;
  left:0;top:0;
}


/* =========================================================
   2. CONTENITORE DI PAGINA (.container)
   ========================================================= */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
}
@media(min-width:768px){
  .container{padding:0 32px}
}
@media(min-width:1200px){
  .container{
    width:min(92%, 1800px);
    max-width:none;
    padding:0;
  }
}
.topbar, .nav{width:100%}


/* =========================================================
   3. HEADER
   ========================================================= */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(10,5,16,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.admin-bar .topbar{top:32px}
@media screen and (max-width:782px){
  .admin-bar .topbar{top:0}
}
.admin-bar .widget--sticky{top:172px}

.topbar__row{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:18px;
  height:64px;
  min-height:64px;
  width:100%;
}
.topbar__row .logo{flex-shrink:0;order:1}
.topbar__row .search{flex:1 1 auto;order:2;min-width:0}
.topbar__row .lang{order:3;margin-left:auto;flex-shrink:0}
.topbar__row .user-link{order:4;margin-left:10px;flex-shrink:0}
.topbar__row .burger{order:5;margin-left:8px;flex-shrink:0}
.topbar__row > *{
  align-self:center;
  position:relative;
  top:0;
  margin-top:0;
  margin-bottom:0;
}

.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.35rem;letter-spacing:.04em;white-space:nowrap}
.logo .v{color:var(--neon-cyan);text-shadow:0 0 12px rgba(0,229,255,.7);font-style:italic}
.logo .p{color:var(--neon-pink);text-shadow:0 0 12px rgba(255,43,214,.7);font-style:italic}

.search{margin-left:auto;position:relative;flex:1;max-width:360px}
.search input{
  width:100%;padding:9px 14px 9px 38px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s;
}
.search input:focus{border-color:var(--neon-cyan);box-shadow:0 0 0 3px rgba(0,229,255,.18)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:var(--muted)}

.burger{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:6px}
.burger svg{width:26px;height:26px;fill:currentColor}

.lang{
  border:1px solid var(--border);border-radius:999px;padding:5px 10px;
  font-size:.75rem;font-weight:700;color:var(--muted);white-space:nowrap;
}
.lang b{color:var(--neon-cyan)}

.user-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  transition:color .2s, border-color .2s, box-shadow .2s, background .2s;
  flex-shrink:0;
}
.user-link svg{width:20px;height:20px;fill:currentColor}
.user-link:hover{color:var(--text);border-color:var(--neon-cyan);box-shadow:0 0 12px rgba(0,229,255,.35)}
.user-link--in{color:var(--neon-cyan);border-color:rgba(0,229,255,.4)}
.user-link--in:hover{color:#fff;box-shadow:0 0 14px rgba(0,229,255,.5)}
.topbar__row .user-link{align-self:center;top:0;vertical-align:middle}

.nav{border-top:1px solid var(--border);background:rgba(18,8,31,.6)}
.nav__row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.nav__row::-webkit-scrollbar{display:none}
.nav a{
  padding:12px 14px;font-size:.86rem;font-weight:600;color:var(--muted);
  white-space:nowrap;border-bottom:2px solid transparent;transition:.18s;
}
.nav a:hover,.nav a.active{color:var(--text);border-color:var(--neon-pink)}
@media(max-width:640px){
  .nav__row{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav__row::-webkit-scrollbar{display:none}
  .nav__row a{white-space:nowrap}
}

.nav__user{display:none}
@media(max-width:640px){
  .nav__user{
    display:flex;align-items:center;gap:8px;
    padding:12px 4px 4px;margin-top:6px;
    border-top:1px solid var(--border);
    color:var(--neon-cyan);font-weight:700;white-space:nowrap;
  }
  .nav__user svg{width:20px;height:20px;fill:currentColor}
}

@media(max-width:640px){
  .search{display:none}
  .burger{display:block;margin-left:auto}
}


/* =========================================================
   4. SPAZI PUBBLICITARI
   ========================================================= */
.ad{
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--surface),transparent);
  border:1px dashed var(--border);border-radius:12px;
  text-align:center;
  overflow:hidden;
}
.ad ins{display:block;width:100%}
.ad--leaderboard{min-height:100px;margin:14px auto}
@media(min-width:768px){.ad--leaderboard{min-height:90px}}
.ad--inline{min-height:250px;margin:26px 0}
.ad--sidebar{min-height:600px}
.ad--mobile{display:block;min-height:280px;margin:26px 0}
@media(min-width:1101px){.ad--mobile{display:none}}
@media(max-width:1100px){.ad--sidebar{display:none}}

.ad-wrap{margin:26px 0}
.ad-wrap__label{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);opacity:.6;margin-bottom:6px;text-align:center;
}


/* =========================================================
   5. HERO E CARD ARTICOLI
   ========================================================= */
.hero{padding:26px 0 6px}
.hero__grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
  transition:transform .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 34px rgba(255,43,214,.14)}
.card__media{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(135deg,#2a0f45,#54126b 60%,#0a2b3a)}
.card__media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:2rem;color:rgba(255,255,255,.12);letter-spacing:.2em}
.card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card:hover .card__media img{transform:scale(1.04);transition:transform .4s}
/* 16/9 e non 16/8: l'articolo in evidenza mostra l'immagine intera,
   nelle stesse proporzioni in cui viene caricata. Con 16/8 il tema
   tagliava circa il 6% sopra e il 6% sotto. */
.hero__lead .card__media{aspect-ratio:16/9}
.badge{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:5px 11px;border-radius:999px;font-size:.68rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#0a0510;
  background:var(--neon-cyan);box-shadow:0 0 16px rgba(0,229,255,.5)
}
.badge--hot{background:var(--neon-pink);color:#fff;box-shadow:0 0 16px rgba(255,43,214,.6)}
.card__body{padding:16px}
.card__cat{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--neon-pink)}
.card h2,.card h3{margin:6px 0 8px;line-height:1.25}
.hero__lead h2{font-size:1.9rem}
.card h3{font-size:1.02rem}
.card p{color:var(--muted);font-size:.9rem}
.card__meta{margin-top:12px;display:flex;gap:12px;font-size:.75rem;color:var(--muted)}
.hero__side{display:flex;flex-direction:column;gap:18px}
.hero__side .card{display:flex;flex-direction:row}
/* Le due card laterali dell'hero erano miniature QUADRATE da 112px:
   di un'immagine 16:9 sopravviveva solo il 56% centrale (22% tagliato
   per lato). Ora sono 16:9 come tutte le altre posizioni del sito.
   align-self:flex-start impedisce al riquadro di allungarsi fino
   all'altezza della card: senza, il flex lo stirerebbe e l'immagine
   verrebbe ritagliata di nuovo, stavolta in verticale. */
.hero__side .card__media{aspect-ratio:16/9;width:160px;flex:none;align-self:flex-start}
@media(max-width:640px){
  .hero__side .card__media{width:120px}
}
.hero__side .card__body{padding:12px 14px}
.hero__side h3{font-size:.95rem;margin:4px 0 0}

@media(max-width:640px){
  .hero__lead h2{font-size:1.5rem}
}


/* =========================================================
   6. LAYOUT PRINCIPALE (contenuto + sidebar)
   ========================================================= */
.layout{display:grid;grid-template-columns:1fr 300px;gap:30px;padding:30px 0 50px}
@media(max-width:1100px){
  .layout{grid-template-columns:1fr}
  .widget--sticky{position:static}
  .hero__grid{grid-template-columns:1fr}
}
.layout > main, .layout #contenuto{min-width:0;width:100%}

.section-title{display:flex;align-items:center;gap:12px;margin:28px 0 16px;font-size:1.3rem}
.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--neon-purple),transparent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;width:100%}
.no-results{
  grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--muted);
  background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);
}
.risultati-per{color:var(--muted);font-size:.95rem;margin-bottom:20px}

@media(min-width:1400px){
  .layout{grid-template-columns:1fr 320px;gap:36px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
}
@media(min-width:1700px){
  .layout{grid-template-columns:1fr 340px;gap:44px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:26px}
  .hero__grid{gap:24px}
  .hero__lead h2{font-size:2.2rem}
}
@media(min-width:2000px){
  .layout{grid-template-columns:1fr 360px;gap:48px}
}

.sidebar{display:flex;flex-direction:column;gap:24px}
.widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.widget h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--neon-cyan);margin-bottom:14px}
.widget--sticky{position:sticky;top:140px}
.trend{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.trend:last-child{border:none}
.trend span{font-weight:900;font-size:1.3rem;color:var(--neon-pink);opacity:.7;line-height:1}
.trend a{font-size:.9rem;font-weight:600}
.chip{display:inline-block;margin:4px 6px 0 0;padding:5px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.78rem;color:var(--muted)}
.chip:hover{color:var(--neon-cyan);border-color:var(--neon-cyan)}

.newsletter{background:linear-gradient(135deg,rgba(138,43,226,.35),rgba(255,43,214,.25));border:1px solid var(--border)}
.newsletter p{color:var(--text);font-size:.86rem;margin-bottom:12px;opacity:.9}
.newsletter input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(10,5,16,.5);color:var(--text);margin-bottom:8px}

.btn{
  display:inline-block;width:100%;text-align:center;cursor:pointer;
  padding:11px 16px;border-radius:10px;border:none;font-weight:800;font-size:.9rem;
  color:#0a0510;background:var(--neon-cyan);box-shadow:0 0 18px rgba(0,229,255,.4);transition:.18s
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn--alt{background:transparent !important;border:1px solid var(--border) !important;color:var(--text) !important}
.btn--alt:hover{border-color:var(--neon-cyan) !important}


/* =========================================================
   7. FOOTER
   ========================================================= */
.footer{border-top:1px solid var(--border);background:var(--bg-2);padding:40px 0 24px;margin-top:20px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.footer h5{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--neon-cyan);margin-bottom:14px}
.footer a{color:var(--muted);font-size:.88rem;display:block;padding:4px 0}
.footer a:hover{color:var(--text)}
.footer__about p{color:var(--muted);font-size:.88rem;max-width:44ch}
.disclaimer{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);color:var(--muted);font-size:.78rem;line-height:1.7}
.disclaimer strong{color:var(--text)}
@media(max-width:1100px){
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .footer__grid{grid-template-columns:1fr}
}


/* =========================================================
   8. ARTICOLO SINGOLO
   ========================================================= */
body.single .layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:34px;
  padding:26px 0 50px;
}
@media(max-width:1100px){
  body.single .layout{grid-template-columns:1fr}
}
body.single .sidebar{
  display:flex;
  flex-direction:column;
  gap:24px;
}
body.single .widget--sticky{
  display:flex;
  flex-direction:column;
  gap:24px;
  position:sticky;
  top:100px;
}
@media(max-width:1100px){
  body.single .widget--sticky{position:static}
}
.admin-bar body.single .widget--sticky,
body.single.admin-bar .widget--sticky{top:132px}
body.single .ad--sidebar{display:flex !important;min-height:600px}
@media(max-width:1100px){
  body.single .ad--sidebar{display:none !important}
}

.single,
body.single .single,
body.single .single__panel{max-width:none;width:100%}
.single{margin-inline:auto}

.single__head{margin-bottom:24px}
.single__title{font-size:2rem;line-height:1.25;margin:10px 0 12px}
@media(max-width:640px){.single__title{font-size:1.5rem}}
.single__meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.85rem}

.vp-like-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vp-like-wrap--top{margin-top:16px}
.vp-like-wrap--bottom{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--border)}

.single__panel{
  position:relative;
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(138,43,226,.20), transparent 70%),
    linear-gradient(180deg, rgba(31,15,51,.78), rgba(24,11,40,.88));
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.single__panel::before{
  content:"";
  position:absolute;left:24px;right:24px;top:-1px;height:1px;
  background:linear-gradient(90deg, transparent, var(--neon-pink), var(--neon-cyan), transparent);
  opacity:.55;
}
.single__panel .fonti{
  background:rgba(0,0,0,.22);
  border:0;
  border-left:3px solid var(--neon-cyan);
  margin-bottom:0;
}

body.single .single__panel{padding:40px 34px}
@media(min-width:1200px){ body.single .single__panel{padding:48px 52px} }
@media(min-width:1600px){ body.single .single__panel{padding:56px 64px} }
@media(max-width:640px){ body.single .single__panel{padding:26px 20px;border-radius:16px} }
@media(max-width:640px){ .single__panel::before{left:14px;right:14px} }

.single__cover{
  width:100%;
  max-width:100%;
  border-radius:14px;
  border:1px solid var(--border);
  margin:22px 0;
  display:block;
  object-fit:cover;
}
/* NB: il reset globale "img{max-width:100%}" clamperebbe qualunque
   sforamento oltre il 100% — per questo qui serve max-width:none
   esplicito, altrimenti calc(100% + Npx) viene tagliato di nuovo
   al 100% e l'immagine non sfora mai i bordi del pannello. */
body.single .single__cover{width:calc(100% + 68px);max-width:none;margin-left:-34px;margin-right:0;border-radius:0;border-left:0;border-right:0}
@media(min-width:1200px){ body.single .single__cover{width:calc(100% + 104px);margin-left:-52px} }
@media(min-width:1600px){ body.single .single__cover{width:calc(100% + 128px);margin-left:-64px} }
@media(max-width:640px){ body.single .single__cover{width:calc(100% + 40px);margin-left:-20px} }

body.single .single__body{font-size:1.12rem;line-height:1.78}
@media(min-width:1600px){
  body.single .single__body{font-size:1.18rem}
  body.single .single__title{font-size:2.5rem}
}
.single__body > *{margin-bottom:1.1em}
.single__body h2{font-size:1.45rem;margin:2em 0 .6em;color:var(--neon-cyan)}
.single__body h2:first-child{margin-top:0}
.single__body h3{font-size:1.15rem;margin:1.4em 0 .4em}
.single__body a{color:var(--neon-pink)}
.single__body img{max-width:100%;height:auto;border-radius:10px}
.single__body blockquote{
  border-left:3px solid var(--neon-purple);padding:8px 0 8px 18px;
  color:var(--muted);font-style:italic;
}
.single__body ul,.single__body ol{padding-left:1.3em}
.single__body li{margin-bottom:.4em}
.single__body code{background:var(--surface-2);padding:2px 6px;border-radius:5px;font-size:.9em}

.fonti{
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--neon-cyan);
  border-radius:10px;padding:16px 18px;margin:30px 0;font-size:.9rem;
}
.fonti h4{color:var(--neon-cyan);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.fonti a{color:var(--text);opacity:.85}

.interazioni{margin-top:10px}


/* =========================================================
   9. PAGINAZIONE, PAGINE STATICHE
   ========================================================= */
.pagina{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:40px 0}
.pagina .page-numbers{
  display:inline-block;padding:8px 14px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text);text-decoration:none;font-size:.9rem;
}
.pagina .page-numbers:hover{border-color:var(--neon-pink)}
.pagina .page-numbers.current{background:var(--neon-purple);border-color:var(--neon-purple);color:#fff}

.pagina-statica{max-width:760px;padding:30px 0 60px}
.pagina-statica h1{font-size:1.9rem;margin-bottom:20px}
.pagina-statica h2{font-size:1.3rem;margin:1.6em 0 .5em;color:var(--neon-cyan)}
.pagina-statica p,.pagina-statica li{margin-bottom:1em;line-height:1.8}
.pagina-statica ul{padding-left:1.3em}
.pagina-statica a{color:var(--neon-pink)}


/* =========================================================
   10. ULTIMATE MEMBER — login, registrazione, account
   ========================================================= */
.um-page-register .container,
.um-page-login .container,
.um-page-account .container,
.um-page-profile .container,
.um-page-user .container{
  width:100%;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
.um-page-register .pagina-statica,
.um-page-login .pagina-statica,
.um-page-account .pagina-statica,
.um-page-profile .pagina-statica,
.um-page-user .pagina-statica{
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}
.um-page-register .pagina-statica,
.um-page-login .pagina-statica,
.um-page-account .pagina-statica,
.um-page-profile .pagina-statica{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.um[class*="um-"]{
  max-width:480px !important;
  width:100% !important;
  margin:40px auto 60px !important;
  float:none !important;
  position:relative;
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(138,43,226,.20), transparent 70%),
    linear-gradient(180deg, rgba(31,15,51,.82), rgba(24,11,40,.92));
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border:1px solid var(--border);
  border-radius:20px;
  padding:38px 34px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  box-sizing:border-box;
}
.um[class*="um-"]::before{
  content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;
  background:linear-gradient(90deg, transparent, var(--neon-pink), var(--neon-cyan), transparent);
  opacity:.55;
}
.um[class*="um-"] .um-form,
.um[class*="um-"] form,
.um[class*="um-"] .um-row,
.um[class*="um-"] .um-col-1,
.um[class*="um-"] .um-col-alt{
  float:none !important;
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box;
}
.um[class*="um-"] .um-row{margin-bottom:0 !important}
.um[class*="um-"] .um-field{margin-bottom:18px}
.um[class*="um-"] .um-field-label label{
  color:var(--text) !important;font-weight:600 !important;
  font-size:.9rem !important;margin-bottom:6px !important;
}
.um[class*="um-"] input[type=text],
.um[class*="um-"] input[type=password],
.um[class*="um-"] input[type=email],
.um[class*="um-"] input[type=number],
.um[class*="um-"] textarea,
.um[class*="um-"] select{
  width:100% !important;border-radius:10px !important;
  border:1px solid var(--border) !important;
  background:#fff !important;color:#1a1030 !important;
  box-sizing:border-box;
}
.um[class*="um-"] input:focus{
  border-color:var(--neon-cyan) !important;
  box-shadow:0 0 0 3px rgba(0,229,255,.18) !important;
  outline:none !important;
}
.um[class*="um-"] .um-col-alt{margin-top:6px}
.um[class*="um-"] .um-left.um-half,
.um[class*="um-"] .um-right.um-half{
  width:100% !important;float:none !important;
  margin:0 0 12px 0 !important;padding:0 !important;
}
.um[class*="um-"] .um-button{
  width:100% !important;border-radius:10px !important;
  background:var(--neon-purple) !important;border:0 !important;
  font-weight:700 !important;
  box-shadow:0 6px 18px rgba(138,43,226,.4) !important;
  box-sizing:border-box;
}
.um[class*="um-"] .um-button.um-alt{
  background:transparent !important;border:1px solid var(--border) !important;
  color:var(--text) !important;box-shadow:none !important;
}
.um[class*="um-"] .um-button:hover{filter:brightness(1.1)}
.um[class*="um-"] a{color:var(--neon-pink) !important}
.um[class*="um-"] .um-field-checkbox label,
.um[class*="um-"] .um-field-radio label{
  color:var(--text) !important;line-height:1.5 !important;
}
.um-page-register .pagina-statica > h1,
.um-page-login .pagina-statica > h1{text-align:center;margin-bottom:4px}
@media(max-width:640px){
  .um[class*="um-"]{padding:28px 20px !important;margin:24px 12px 40px !important}
}

.um-page-user .um[class*="um-"],
.um-page-account .um[class*="um-"]{
  margin-left:auto !important;
  margin-right:auto !important;
  float:none !important;
}
.um-page-user .pagina-statica > h1,
.um-page-account .pagina-statica > h1{
  text-align:center;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}


/* =========================================================
   11. COMMENTI
   ========================================================= */
.commenti{
  margin:36px 0 10px;
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(138,43,226,.16), transparent 70%),
    linear-gradient(180deg, rgba(31,15,51,.72), rgba(24,11,40,.84));
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  border:1px solid var(--border);
  border-radius:18px;
  padding:30px 32px;
}
@media(max-width:640px){ .commenti{padding:22px 18px} }
.commenti__titolo{font-size:1.3rem;margin-bottom:22px;color:var(--text)}

.commenti__lista{list-style:none;margin:0 0 24px;padding:0}
.commenti__lista ol.children{list-style:none;margin:16px 0 0 26px;padding-left:16px;border-left:1px solid var(--border)}
.commenti__lista li{margin-bottom:18px}
.comment-body{background:rgba(0,0,0,.20);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.comment-author{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.comment-author .avatar{border-radius:50%;border:1px solid var(--border)}
.comment-author .fn{color:var(--neon-cyan);font-weight:700;font-style:normal;font-size:.95rem}
.comment-author .says{display:none}
.comment-meta{margin-bottom:8px}
.comment-meta a{color:var(--muted);font-size:.78rem;text-decoration:none}
.comment-content{color:var(--text);line-height:1.65;font-size:.96rem}
.comment-content p{margin-bottom:.6em}
.comment-body .reply{margin-top:8px}
.comment-reply-link,
.comment-edit-link{display:inline-block;font-size:.8rem;color:var(--neon-pink);text-decoration:none;font-weight:600}
.comment-reply-link:hover{text-decoration:underline}
.comment-awaiting-moderation{display:block;color:var(--neon-yellow);font-size:.8rem;margin-top:6px;font-style:italic}

.comment-respond{margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}
.comment-reply-title{font-size:1.1rem;color:var(--text);margin-bottom:14px}
.comment-reply-title small{margin-left:10px;font-weight:400}
.comment-reply-title small a{color:var(--neon-pink)}
.commenti__campo label,
.comment-form-comment label{display:block;color:var(--text);font-weight:600;font-size:.9rem;margin-bottom:6px}
.commenti textarea{
  width:100%;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.96);color:#1a1030;padding:12px 14px;
  font-family:inherit;font-size:.95rem;box-sizing:border-box;resize:vertical;
}
.commenti textarea:focus{outline:none;border-color:var(--neon-cyan);box-shadow:0 0 0 3px rgba(0,229,255,.18)}
.commenti__submit,.commenti .submit{margin-top:12px;cursor:pointer;width:auto;padding:12px 28px}
.form-submit{margin-top:14px}
.commenti__logged{color:var(--muted);font-size:.88rem;margin-bottom:14px}
.commenti__logged strong{color:var(--neon-cyan);font-weight:700}
.commenti__logged a{color:var(--neon-pink);text-decoration:none}
.commenti__logged a:hover{text-decoration:underline}

.commenti__gate{text-align:center;padding:26px 20px;background:rgba(0,0,0,.20);border:1px dashed var(--border);border-radius:12px}
.commenti__gate p{color:var(--text);margin-bottom:16px;font-size:1rem}
.commenti__gate-btn{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.commenti__chiusi{color:var(--muted);font-style:italic;font-size:.9rem}
.comment-navigation{display:flex;justify-content:space-between;gap:12px;margin:16px 0}
.comment-navigation a{color:var(--neon-pink);text-decoration:none;font-size:.9rem}


/* =========================================================
   12. MI PIACE, SALVA, SCHEDE PROFILO
   ========================================================= */
.vp-like{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:999px;
  padding:9px 18px;color:var(--text);cursor:pointer;font-size:1rem;font-weight:700;
  transition:border-color .2s, box-shadow .2s, transform .1s;
}
.vp-like:hover{border-color:var(--neon-pink)}
.vp-like:active{transform:scale(.96)}
.vp-like.is-busy{opacity:.6;pointer-events:none}
.vp-like__heart{width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:1.8;transition:fill .2s, stroke .2s, transform .2s}
.vp-like__count{min-width:12px;text-align:left;font-variant-numeric:tabular-nums}
.vp-like.is-liked .vp-like__heart{fill:var(--neon-pink);stroke:var(--neon-pink);filter:drop-shadow(0 0 6px rgba(255,43,214,.55))}
.vp-like.is-liked{border-color:rgba(255,43,214,.45)}
.vp-like.is-guest .vp-like__heart{opacity:.75}
@keyframes vp-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.vp-like.vp-pop .vp-like__heart{animation:vp-pop .35s ease}
.vp-like-invito{color:var(--muted);font-size:.92rem}
@media(max-width:640px){ .vp-like-invito{display:none} }

.vp-save{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:999px;
  padding:9px 18px;color:var(--text);cursor:pointer;font-size:.95rem;font-weight:700;
  transition:border-color .2s, transform .1s;
}
.vp-save:hover{border-color:var(--neon-cyan)}
.vp-save:active{transform:scale(.96)}
.vp-save.is-busy{opacity:.6;pointer-events:none}
.vp-save__ico{width:19px;height:19px;fill:none;stroke:var(--muted);stroke-width:1.8;transition:fill .2s, stroke .2s}
.vp-save.is-saved .vp-save__ico{fill:var(--neon-cyan);stroke:var(--neon-cyan);filter:drop-shadow(0 0 6px rgba(0,229,255,.5))}
.vp-save.is-saved{border-color:rgba(0,229,255,.45)}
.vp-save.is-guest .vp-save__ico{opacity:.75}
.vp-save.vp-pop .vp-save__ico{animation:vp-pop .35s ease}

.vp-likes-tab{padding:20px 0}
.vp-likes-vuoto{color:var(--muted);text-align:center;padding:30px 20px;line-height:1.6}
.vp-likes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;padding:6px 4px 10px}
.vp-liked-card{
  display:flex;flex-direction:column;background:rgba(0,0,0,.22);
  border:1px solid var(--border);border-radius:12px;overflow:hidden;
  text-decoration:none;transition:border-color .2s, transform .15s;
}
.vp-liked-card:hover{border-color:var(--neon-pink);transform:translateY(-3px)}
.vp-liked-card__img{aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.vp-liked-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.vp-liked-card__img--ph{display:flex;align-items:center;justify-content:center;font-size:2rem}
.vp-liked-card__body{padding:12px 14px}
.vp-liked-card__cat{color:var(--neon-pink);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.vp-liked-card__body h4{color:var(--text);font-size:.98rem;line-height:1.35;margin:6px 0 8px}
.vp-liked-card__meta{color:var(--muted);font-size:.78rem}

.vp-ordina{display:flex;align-items:center;gap:12px;margin:0 4px 18px;font-size:.88rem;color:var(--muted)}
.vp-ordina a{color:var(--muted);text-decoration:none;padding:4px 10px;border:1px solid var(--border);border-radius:999px;transition:all .2s}
.vp-ordina a:hover{border-color:var(--neon-pink);color:var(--text)}
.vp-ordina a.attivo{background:var(--neon-purple);border-color:var(--neon-purple);color:#fff}


/* =========================================================
   13. CONDIVISIONE
   ========================================================= */
.vp-share{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.vp-share::before{content:"";width:1px;height:24px;background:var(--border);margin:0 4px 0 2px}
.vp-share__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.22);border:1px solid var(--border);color:var(--muted);
  cursor:pointer;transition:color .2s, border-color .2s, transform .1s, background .2s;
}
.vp-share__btn svg{width:18px;height:18px;fill:currentColor}
.vp-share__btn:hover{transform:translateY(-2px);color:#fff}
.vp-share__btn:active{transform:scale(.94)}
.vp-share__btn--whatsapp:hover{background:#25d366;border-color:#25d366}
.vp-share__btn--telegram:hover{background:#229ED9;border-color:#229ED9}
.vp-share__btn--x:hover{background:#000;border-color:#000}
.vp-share__btn--reddit:hover{background:#ff4500;border-color:#ff4500}
.vp-share__btn--facebook:hover{background:#1877f2;border-color:#1877f2}
.vp-share__btn--copy:hover{background:var(--neon-purple);border-color:var(--neon-purple)}
.vp-share__btn--copy.copiato{background:var(--neon-cyan);border-color:var(--neon-cyan);color:#04121a}
@media(max-width:640px){
  .vp-share::before{display:none}
  .vp-share{width:100%;margin-top:8px}
}

/* =========================================================
   14. SEZIONE VIDEO
   ---------------------------------------------------------
   Tre blocchi: il bollino play sulle card, il player nella pagina
   del video, il credito al creator. Più la fascia "Dai creator"
   in home.
   ========================================================= */

/* ---- 14.1 Bollino play sulle card ---- */
.vp-play-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,5,16,.62);
  border:2px solid rgba(255,255,255,.9);
  backdrop-filter:blur(2px);
  transition:transform .25s, background .25s;
  pointer-events:none; /* il clic deve arrivare al link della card */
}
.vp-play-badge svg{width:24px;height:24px;fill:#fff;margin-left:2px}
.card--video:hover .vp-play-badge{
  transform:translate(-50%,-50%) scale(1.12);
  background:var(--neon-pink);
  border-color:var(--neon-pink);
}
.card__creator{color:var(--neon-cyan);font-weight:700}

/* ---- 14.2 Il player nella pagina del video ----
   Sta esattamente dove stava la copertina: stesso sconfinamento
   oltre i bordi del pannello satinato, breakpoint per breakpoint.
   L'aspect-ratio 16/9 riserva l'altezza PRIMA che la copertina
   arrivi: senza, la pagina salterebbe al caricamento (layout shift,
   che Google misura e AdSense penalizza). */
.vp-player{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  margin:22px 0;
  overflow:hidden;
  background:#000;
  border:1px solid var(--border);
  border-radius:14px;
  cursor:pointer;
}
.vp-player__thumb{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .4s, filter .3s;
}
.vp-player:hover .vp-player__thumb{transform:scale(1.03);filter:brightness(.82)}

.vp-player__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:84px; height:84px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,5,16,.55);
  border:3px solid #fff;
  color:#fff; cursor:pointer; padding:0;
  backdrop-filter:blur(3px);
  transition:transform .25s, background .25s, box-shadow .25s;
}
.vp-player__play svg{width:40px;height:40px;fill:currentColor;margin-left:3px}
.vp-player:hover .vp-player__play,
.vp-player__play:focus-visible{
  transform:translate(-50%,-50%) scale(1.08);
  background:var(--neon-pink);
  border-color:var(--neon-pink);
  box-shadow:0 0 30px rgba(255,43,214,.55);
}

/* Quando YouTube è stato caricato: via copertina e pulsante,
   dentro l'iframe a tutta area. */
.vp-player.attivo{cursor:default}
.vp-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* La riga che avvisa del cookie di YouTube. Deve restare visibile:
   è l'informativa che rende legittimo il caricamento al clic. */
.vp-player__avviso{
  margin:-10px 0 20px;
  font-size:.78rem;
  color:var(--muted);
  line-height:1.5;
}

/* Sconfinamento oltre il pannello, come fa .single__cover */
body.single .vp-player{
  width:calc(100% + 68px); margin-left:-34px; margin-right:0;
  border-radius:0; border-left:0; border-right:0;
}
@media(min-width:1200px){ body.single .vp-player{width:calc(100% + 104px);margin-left:-52px} }
@media(min-width:1600px){ body.single .vp-player{width:calc(100% + 128px);margin-left:-64px} }
@media(max-width:640px){
  body.single .vp-player{width:calc(100% + 40px);margin-left:-20px}
  .vp-player__play{width:62px;height:62px;border-width:2px}
  .vp-player__play svg{width:28px;height:28px}
}

/* ---- 14.3 Credito al creator ----
   Non è un vezzo: il video è di qualcun altro, e dirlo con il link
   al canale è il minimo. Sta subito sotto il player, come una
   didascalia. */
.vp-credito{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  justify-content:space-between;
  margin:0 0 18px;
  padding:12px 16px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
}
.vp-credito__eti{color:var(--muted);font-size:.85rem}
.vp-credito__testo strong{color:var(--text);font-size:1rem}
.vp-credito__link{display:flex;flex-wrap:wrap;gap:8px}
.vp-credito__link a{
  font-size:.82rem; font-weight:700;
  padding:7px 13px; border-radius:999px;
  background:rgba(0,229,255,.08);
  border:1px solid rgba(0,229,255,.3);
  color:var(--neon-cyan);
  white-space:nowrap;
  transition:background .2s, border-color .2s;
}
.vp-credito__link a:hover{background:rgba(0,229,255,.18);border-color:var(--neon-cyan)}

/* ---- 14.4 Fascia "Dai creator" in home ----
   .section-title è già un flex con una linea sfumata in ::after,
   quindi qui gli azzero il margine e lo lascio espandere: il link
   "Tutti i video" gli finisce accanto senza disallineamenti. */
.fascia-video{margin-top:34px}
.fascia-video__head{display:flex;align-items:center;gap:16px;margin:28px 0 16px}
.fascia-video__head .section-title{margin:0;flex:1;min-width:0}
.fascia-video__tutti{
  white-space:nowrap;
  font-size:.85rem; font-weight:700;
  color:var(--neon-cyan);
}
.fascia-video__tutti:hover{color:var(--neon-pink)}
@media(max-width:520px){
  .fascia-video__head{flex-wrap:wrap;gap:6px}
  .fascia-video__head .section-title{flex:1 1 100%}
}