/* ============================================================
   THEME 2026 - Restyling grafico "Lotto Scientifico"
   File SOLO ADDITIVO: viene caricato DOPO style.css e tools.css.
   Non rinomina nessuna classe: raffina i componenti esistenti
   e aggiunge i nuovi (grafici, upsell, cerchio SVG, quota).
   Per tornare alla grafica precedente basta togliere il link
   a questo file da includes/header.php.
   ============================================================ */

:root {
    --primary-blue: #14276b;
    --accent-gold: #f5a80b;
    --t26-navy: #0b1430;
    --t26-navy-2: #14276b;
    --t26-indigo: #3b5bdb;
    --t26-sky: #eef3ff;
    --t26-gold: #f5a80b;
    --t26-gold-2: #ffd166;
    --t26-green: #0f9d63;
    --t26-red: #e5484d;
    --t26-ink: #101828;
    --t26-muted: #5b6577;
    --t26-radius: 20px;
    --t26-shadow: 0 14px 40px rgba(11, 20, 48, .10);
    --t26-shadow-hover: 0 22px 60px rgba(11, 20, 48, .16);
}

body {
    color: var(--t26-ink);
    background:
        radial-gradient(1200px 500px at 85% -200px, rgba(59, 91, 219, .07), transparent 60%),
        radial-gradient(900px 420px at -10% 30%, rgba(245, 168, 11, .05), transparent 55%),
        #ffffff;
}

/* ---------- Header e menu ---------- */
.header {
    background: linear-gradient(120deg, var(--t26-navy) 0%, var(--t26-navy-2) 55%, #27419b 100%);
    box-shadow: 0 6px 24px rgba(11, 20, 48, .35);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.logo h1 {
    letter-spacing: -.02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.nav-link {
    padding: .35rem .6rem;
    border-radius: 999px;
    transition: background .25s ease, color .25s ease, transform .2s ease;
}

.nav-link::after { display: none; }

.nav-link:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    transform: translateY(-1px);
}

.nav-link.active {
    background: linear-gradient(135deg, var(--t26-gold) 0%, var(--t26-gold-2) 100%);
    color: var(--t26-navy);
}

/* Badge "novità" nel menu (es. 10eLotto) */
.nav-badge {
    display: inline-block;
    margin-left: .3rem;
    background: var(--t26-red);
    color: #fff;
    font-size: .62rem;
    font-weight: 900;
    padding: .12rem .4rem;
    border-radius: 999px;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ---------- Hero ---------- */
.hero,
.section.bg-gradient {
    background:
        radial-gradient(900px 420px at 15% -10%, rgba(245, 168, 11, .22), transparent 55%),
        radial-gradient(1100px 520px at 110% 15%, rgba(99, 132, 255, .28), transparent 60%),
        linear-gradient(130deg, #101c46 0%, #1d2f77 55%, #37439b 100%);
}

.hero-title { letter-spacing: -.03em; }

.text-gradient {
    background: linear-gradient(90deg, var(--t26-gold) 0%, #ffe08a 60%, var(--t26-gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-number { text-shadow: 0 4px 22px rgba(245, 168, 11, .35); }

/* ---------- Card e sezioni ---------- */
.card,
.prediction-card, .login-card, .article-card, .sidebar-card,
.draw-full-card, .draw-hero-card, .draw-preview-card {
    border-radius: var(--t26-radius);
    box-shadow: var(--t26-shadow);
    border: 1px solid rgba(20, 39, 107, .08);
}

.card:hover { box-shadow: var(--t26-shadow-hover); }

.section-title { color: var(--t26-navy-2); letter-spacing: -.02em; }

.eyebrow { color: var(--t26-indigo); }

/* ---------- Bottoni ---------- */
.btn { border-radius: 12px; }

.btn-primary {
    background: linear-gradient(135deg, var(--t26-navy-2) 0%, var(--t26-indigo) 100%);
    box-shadow: 0 6px 18px rgba(20, 39, 107, .32);
}

/* Bottone "oro" per le azioni di vendita/abbonamento */
.btn-gold {
    background: linear-gradient(135deg, var(--t26-gold) 0%, #f7c548 100%);
    color: #221803;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(245, 168, 11, .40);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(245, 168, 11, .55);
    color: #221803;
}

/* ---------- Palline numeri ---------- */
.ball-number {
    background: linear-gradient(160deg, #ffffff 0%, #e9efff 100%);
    border: 1px solid rgba(59, 91, 219, .30);
    color: #14276b;
    box-shadow: 0 2px 6px rgba(20, 39, 107, .12), inset 0 1px 0 #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

.ball-number:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 14px rgba(20, 39, 107, .22);
}

.ball-number.big {
    background: linear-gradient(160deg, #fff8e7 0%, #ffe9b3 100%);
    border-color: rgba(245, 168, 11, .55);
    color: #7c5200;
}

/* ---------- Tabelle estrazioni ---------- */
.draw-table thead th { background: linear-gradient(120deg, #14276b, #29429c) !important; }

/* ============================================================
   NUOVI COMPONENTI
   ============================================================ */

/* ---------- Grafici a barre (senza librerie esterne) ---------- */
.ls-chart { display: grid; gap: .5rem; margin: 1rem 0; }

.ls-chart-row {
    display: grid;
    grid-template-columns: 3.2rem 1fr 3.4rem;
    align-items: center;
    gap: .6rem;
}

.ls-chart-row .ls-chart-label {
    font-weight: 900;
    color: var(--t26-navy-2);
    text-align: right;
    font-size: .95rem;
    white-space: nowrap;
}

.ls-chart-track {
    background: #eef1f7;
    border-radius: 999px;
    height: 1.15rem;
    overflow: hidden;
}

.ls-chart-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--t26-indigo), #7b96ff);
    min-width: 4px;
    animation: ls-bar-grow .8s ease both;
    transform-origin: left center;
}

.ls-chart-bar.gold { background: linear-gradient(90deg, #e08f00, var(--t26-gold-2)); }
.ls-chart-bar.red { background: linear-gradient(90deg, #c22b30, #ff8a8d); }
.ls-chart-bar.green { background: linear-gradient(90deg, #0b7c4e, #43d69a); }

.ls-chart-value { font-size: .85rem; color: var(--t26-muted); font-weight: 700; }

@keyframes ls-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    .ls-chart-bar { animation: none; }
}

.ls-chart-note { font-size: .85rem; color: var(--t26-muted); margin-top: .35rem; }

/* ---------- Cerchio ciclometrico SVG ---------- */
.ls-cerchio-wrap {
    display: grid;
    grid-template-columns: minmax(0, 480px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

.ls-cerchio-svg-box {
    background: radial-gradient(circle at 50% 45%, #ffffff 0%, #f2f6ff 70%, #e8eefc 100%);
    border: 1px solid rgba(20, 39, 107, .10);
    border-radius: 24px;
    padding: 1rem;
    box-shadow: var(--t26-shadow);
}

.ls-cerchio-svg-box svg { width: 100%; height: auto; display: block; }

/* Il cerchio si adatta sempre alla larghezza del contenitore, anche fuori
   dal riquadro .ls-cerchio-svg-box. */
.ls-cerchio { width: 100%; height: auto; display: block; }

.ls-cerchio-panel { display: grid; gap: 1rem; }

/* I numeri del cerchio non hanno piu' il cerchietto intorno: si vede solo la
   cifra. Il <circle> resta nell'SVG ma e' trasparente e serve solo come area
   da toccare col dito. Evidenziazione e selezione si vedono quindi dal colore
   e dallo spessore del testo. */
.ls-cerchio-num circle { fill: transparent; stroke: none; }
.ls-cerchio-num text { transition: fill .15s ease; }
/* La mano e l'effetto al passaggio del mouse solo dove i numeri sono
   davvero cliccabili (modalita' interattiva: hanno l'attributo data-n). */
.ls-cerchio-num[data-n] { cursor: pointer; }
.ls-cerchio-num[data-n]:hover text { fill: #0b1430; font-weight: 900; }
.ls-cerchio-num.sel text { fill: #b97800; font-weight: 900; }
.ls-cerchio-num.evid text { fill: #14276b; font-weight: 900; }

@media (max-width: 860px) {
    .ls-cerchio-wrap { grid-template-columns: 1fr; }
}

/* Su smartphone il cerchio deve usare tutta la larghezza disponibile:
   si riducono i bordi arrotondati e l'imbottitura, che rubavano spazio
   proprio ai numeri. */
@media (max-width: 560px) {
    .ls-cerchio-svg-box {
        padding: .35rem;
        border-radius: 16px;
        margin-left: -.35rem;
        margin-right: -.35rem;
    }
}

/* ---------- Freemium: quota, lucchetti, upsell ---------- */
.quota-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #eef7f1;
    border: 1px solid rgba(15, 157, 99, .35);
    color: #0b6b45;
    font-weight: 800;
    font-size: .88rem;
    border-radius: 999px;
    padding: .4rem .85rem;
    margin: .5rem 0;
}

.quota-badge.exhausted {
    background: #fdf0f0;
    border-color: rgba(229, 72, 77, .4);
    color: #a52328;
}

.locked-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--t26-radius);
}

.locked-panel .locked-content {
    filter: blur(7px);
    pointer-events: none;
    user-select: none;
    opacity: .75;
}

.locked-panel .locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .88) 70%);
}

.upsell-box {
    background:
        radial-gradient(600px 220px at 90% -40px, rgba(245, 168, 11, .18), transparent 60%),
        linear-gradient(130deg, #101c46 0%, #1d2f77 70%, #2c3d92 100%);
    color: #fff;
    border-radius: 24px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 18px 50px rgba(16, 28, 70, .35);
    text-align: center;
}

.upsell-box h3 { color: #fff; font-size: 1.5rem; margin-bottom: .5rem; }
.upsell-box p { opacity: .92; max-width: 640px; margin: 0 auto .6rem; }

.upsell-box ul {
    list-style: none;
    margin: 1rem auto;
    padding: 0;
    max-width: 560px;
    text-align: left;
    display: grid;
    gap: .4rem;
}

.upsell-box ul li { padding-left: .2rem; }

.upsell-actions {
    display: flex;
    gap: .8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}

.upsell-note { font-size: .82rem; opacity: .75; margin-top: 1rem; }

/* Tabella confronto Gratis vs Premium */
.compare-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--t26-shadow); }
.compare-table th, .compare-table td { padding: .8rem .9rem; border-bottom: 1px solid #eef1f7; text-align: center; }
.compare-table th { background: #14276b; color: #fff; }
.compare-table td:first-child { text-align: left; font-weight: 700; color: var(--t26-ink); }
.compare-table .ok { color: var(--t26-green); font-weight: 900; }
.compare-table .no { color: #b6bdca; font-weight: 900; }
.compare-table tr.hl td { background: #fffbef; }

/* Schemi esplicativi nelle guide */
.schema-box {
    background: linear-gradient(180deg, #f8faff, #eef3ff);
    border: 1px solid rgba(59, 91, 219, .18);
    border-radius: 18px;
    padding: 1.25rem;
    margin: 1.25rem 0;
}

.schema-box h4 { color: var(--t26-navy-2); margin-bottom: .5rem; }

.schema-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-top: .8rem; }

.schema-step {
    background: #fff;
    border: 1px solid rgba(20, 39, 107, .10);
    border-radius: 14px;
    padding: .8rem;
    text-align: center;
    position: relative;
}

.schema-step b { display: block; color: var(--t26-navy-2); margin-bottom: .25rem; }
.schema-step small { color: var(--t26-muted); line-height: 1.4; display: block; }

.schema-step .step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 999px;
    background: var(--t26-gold);
    color: #221803;
    font-weight: 900;
    font-size: .85rem;
    margin-bottom: .4rem;
}

/* Sezione anni 10eLotto */
.year-tab { transition: transform .15s ease, box-shadow .15s ease; }
.year-tab:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 39, 107, .12); }
.year-tab.locked { opacity: .78; }
.year-tab.locked::after { content: "🔒"; margin-left: .3rem; font-size: .8rem; }

/* Piccole rifiniture responsive */
@media (max-width: 640px) {
    .upsell-box { padding: 1.4rem 1rem; border-radius: 18px; }
    .ls-chart-row { grid-template-columns: 2.6rem 1fr 2.9rem; }
}

/* ==== Prezzi con sconto (gestito da admin > Impostazioni / Prodotti) ==== */
.price-old {
    text-decoration: line-through;
    opacity: .6;
    font-size: .78em;
    font-weight: 600;
    margin-right: .25rem;
}
.price-new { font-weight: 900; }
.price-badge {
    display: inline-block;
    background: #dc2626;
    color: #fff;
    font-size: .62em;
    font-weight: 900;
    padding: .15em .5em;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: .3rem;
}

/* ==== Anteprima parziale dei contenuti riservati ==== */
.partial-panel { border-radius: 12px; overflow: hidden; }

/* ==== Banner pubblicitari (slot configurabili da admin) ==== */
.ad-slot { text-align: center; margin: 1rem auto; max-width: 100%; overflow: hidden; }

/* ==== Statistiche avanzate "Lotto Scientifico" (pagine portate dalla webapp) ==== */
.ball-sm {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: #14276b; color: #fff; font-weight: 800; font-size: .9rem;
}
.ball-sm.evid { background: #d9a600; color: #221803; }
.val-rit  { color: #b45309; font-weight: 800; }  /* ritardi */
.val-freq { color: #15803d; font-weight: 800; }  /* frequenze/presenze */
.val-max  { color: #b91c1c; font-weight: 800; }  /* massimi storici */
.stat-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.stat-form label { display: block; font-weight: 600; margin-bottom: .3rem; }
.stat-form select, .stat-form input {
    padding: .55rem .7rem; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem;
}
.stat-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }