/* ==========================================================================
   Codice-POD — Tema "ELECTRIC EDITORIAL" (Fase 4, livello elevato)
   Direzione: editoriale/energetico. Carta calda, ambra elettrica (energia),
   smeraldo (risparmio), inchiostro caldo (fiducia). Firma: stepper connesso da
   una "linea di corrente" + CTA con glow. Tipografia distintiva self-hosted
   (Bricolage Grotesque + Hanken Grotesk) → niente CDN font (GDPR-safe).
   Layer sostituibile: veste le classi legacy, niente modifiche a markup/JS.
   ========================================================================== */

/* ---------- Font self-hosted ---------- */
@font-face { font-family:"Bricolage Grotesque"; src:url('../fonts/bricolage-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Bricolage Grotesque"; src:url('../fonts/bricolage-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url('../fonts/hanken-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url('../fonts/hanken-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url('../fonts/hanken-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
    --paper:    #faf6ef;
    --paper-2:  #f3ede2;
    --surface:  #ffffff;
    --ink:      #1a1410;
    --ink-2:    #5b5347;
    --ink-3:    #8a8275;
    --line:     #e9e0d2;
    --line-2:   #f2ebde;

    --amber:    #ef5a0c;   /* energia / brand (ancora dell'arancio storico) */
    --amber-600:#cf4e08;
    --amber-50: #fdeee1;
    --volt:     #ffb400;   /* scintilla / highlight */
    --emerald:  #0e9f6e;   /* risparmio / CTA */
    --emerald-600:#0a8a5e;
    --emerald-50:#e7f6ef;
    --trust:    #15324a;   /* fiducia (step, dettagli) */

    --r:    16px;
    --r-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(26,20,16,.05), 0 2px 6px rgba(26,20,16,.05);
    --shadow:    0 10px 30px rgba(26,20,16,.08);
    --shadow-lg: 0 30px 60px rgba(26,20,16,.18);
    --glow-amber:   0 10px 28px rgba(239,90,12,.30);
    --glow-emerald: 0 10px 26px rgba(14,159,110,.32);

    --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body:    "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
    --t: .22s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Atmosfera: carta calda + griglia elettrica ---------- */
html, body { background: var(--paper); color: var(--ink); }
body {
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
}
/* texture griglia + alone d'energia, layer fisso non invasivo */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(900px 480px at 88% -8%, rgba(255,180,0,.12), transparent 60%),
        radial-gradient(760px 420px at -6% 6%, rgba(14,159,110,.08), transparent 55%),
        linear-gradient(to right, rgba(26,20,16,.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26,20,16,.035) 1px, transparent 1px);
    background-size: auto, auto, 34px 34px, 34px 34px;
}
#page-wrapper.container { position: relative; z-index: 1; }

#page-content a, #main-content a {
    color: var(--emerald-600); font-weight: 600;
    text-decoration: none; transition: color var(--t);
    box-shadow: inset 0 -1px 0 rgba(14,159,110,.28);
}
#page-content a:hover, #main-content a:hover { color: var(--emerald); box-shadow: inset 0 -2px 0 var(--emerald); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .btn:focus-visible {
    outline: 3px solid rgba(239,90,12,.5); outline-offset: 2px; border-radius: 8px;
}

/* ---------- Layout ---------- */
/* Via di mezzo: più largo dell'originale (1160px) ma con margini sui monitor grandi
   (centrato, max 1440px). Su schermi piccoli resta a piena larghezza meno i gutter. */
#page-wrapper.container { width: 100% !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 clamp(16px, 2.5vw, 44px); }
#page-content {
    background: transparent; border: 0; padding: 0; margin-top: 0;
    margin-left: 0; margin-right: 0;
    display: flex; flex-wrap: wrap; gap: 26px;
}
#left-col { float: none; flex: 1 1 0; min-width: 0; padding-bottom: 0; }
#right-col { float: none; width: 312px; flex: 0 0 312px; }
@media (max-width: 1023px){ #right-col{ flex-basis: 250px; width: 250px; } }
@media (max-width: 767px){ #page-content{ gap: 18px; } #right-col{ flex: 1 1 100%; width: 100%; } }

/* ---------- Header ---------- */
#page-header {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.1) blur(6px);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    border-radius: 0 0 20px 20px;
    padding: 12px 22px;
    margin-bottom: 22px;
}
#page-header #page-logo h1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; width: 100%; }
#page-header #page-logo h1 .dx { margin-left: auto; }
#page-header .logo a.logo {
    font-family: var(--font-display); font-weight: 800; font-size: 30px;
    letter-spacing: -1px; color: var(--ink) !important;
}
#page-header .logo a.logo .glyphicon { color: var(--amber); filter: drop-shadow(0 0 10px rgba(255,180,0,.55)); }
#page-header .claim { color: var(--ink-3); font-size: 12.5px; }
.dx { color: var(--amber) !important; font-weight: 700; }
.dx i { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 0 4px var(--amber-50); }

/* Nav: tasti SEMPRE arancioni (come in origine), forma a pillola del tema */
#header-nav.navbar, #header-nav .navbar { background: transparent !important; border: 0 !important; margin: 8px 0 0; min-height: 0; }
#header-nav .nav.navbar-nav { display: flex; flex-wrap: nowrap; gap: 8px; float: none; width: 100%; }
.navbar-nav li.navigation-bar-button {
    float: none !important; background: var(--amber) !important; border: 0 !important;
    border-radius: 999px; margin: 0 !important; transition: all var(--t); box-shadow: var(--shadow-sm);
    flex: 1 1 auto; overflow: hidden; position: relative; min-height: 38px;
}
.navigation-bar-button a {
    color: #fff !important; font-family: var(--font-body); font-weight: 700;
    font-size: 11.5px; letter-spacing: .1px; padding: 0 10px !important; border-radius: 999px; display: flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap; position: absolute !important; inset: 0; max-width: none !important;
}
.navigation-bar-button:hover { background: var(--amber-600) !important; transform: translateY(-1px); box-shadow: var(--glow-amber); }
.navigation-bar-button:hover a { color: #fff !important; }
.navigation-bar-button.active { background: var(--amber-600) !important; box-shadow: var(--glow-amber); }
.navigation-bar-button.active a { color: #fff !important; }

/* ---------- Hero / form di verifica ---------- */
.central-box, .form-verify, .attention-wrapper, .one-col {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow); padding: 30px;
    overflow: hidden;
}
.form-verify {
    position: relative; overflow: hidden;
    background:
        radial-gradient(420px 200px at 100% 0%, rgba(255,180,0,.10), transparent 70%),
        var(--surface);
    animation: cp-rise .6s var(--t) both;
}
.form-verify::before { /* filo elettrico in cima */
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--amber), var(--volt) 45%, var(--emerald));
}
@keyframes cp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.box-title, h1.box-title {
    font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.15;
    letter-spacing: -1px; color: var(--ink); margin: 6px 0 4px;
}
.header-2 {
    font-family: var(--font-display); font-size: 21px !important; font-weight: 700;
    color: var(--ink); margin-top: 8px; letter-spacing: -.4px;
}
#main-content h2.header-2 { border-left: 3px solid var(--amber); padding-left: 13px; }
#main-content p { font-family: var(--font-body); color: var(--ink-2); font-size: 15.5px; }

/* FIRMA — stepper connesso da una "linea di corrente" */
.form-verify .row:has(> .form-steps) { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0; }
.form-verify .row:has(> .form-steps) > .form-steps { float: none !important; flex: 0 0 auto; }
.form-verify .row:has(> .form-steps) > .form-elements { float: none !important; flex: 1 1 auto; min-width: 0; }
.form-verify .row:has(> .form-steps) > .col-sm-12 { flex: 0 0 100%; width: 100%; padding-left: 0; padding-right: 0; }
.form-verify .row:has(> .form-steps) > .col-sm-12 #support-flags { padding-left: 0; }
.form-verify #support-flags table { margin-left: 32px; }
.form-verify .form-steps { position: relative; }
.form-verify .form-steps::before {
    content: ""; position: absolute; left: 50%; top: -28px; bottom: -28px; width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(239,90,12,.35) 18%, rgba(255,180,0,.5), rgba(239,90,12,.35) 82%, transparent);
    z-index: 0;
}
.form-verify .form-steps .circle strong {
    position: relative; z-index: 1; color: #fff; border: 0;
    background: radial-gradient(circle at 32% 28%, #ff8a3d, var(--amber) 55%, var(--amber-600));
    width: 44px; height: 44px; line-height: 44px; border-radius: 50%;
    box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--amber-50), var(--glow-amber);
    font-family: var(--font-display); font-weight: 700;
}
.form-verify .form-elements span, .form-verify .form-elements.custom label {
    color: var(--ink); font-weight: 600; font-size: 15.5px;
}

/* chip fornitori */
.form-partners label {
    border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px !important; margin: 3px !important;
    color: var(--ink-2); font-weight: 600; cursor: pointer; transition: all var(--t); display: inline-block;
}
.form-partners label:hover { border-color: var(--amber); color: var(--amber-600); text-decoration: none !important; transform: translateY(-1px); }
.form-partners input[type="radio"] { accent-color: var(--amber); margin-right: 5px; }
.form-partners input[type="radio"]:checked + label { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Campi e bottoni ---------- */
.form-control {
    border: 1.5px solid var(--line); border-radius: var(--r-sm); box-shadow: none; color: var(--ink);
    background: #fffdfa; height: auto; padding: 11px 15px; font-family: var(--font-body);
    transition: border-color var(--t), box-shadow var(--t);
}
.form-control:focus { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-50); outline: none; }
.input-pod, #pod { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

.btn {
    border-radius: var(--r-sm); font-family: var(--font-body); font-weight: 700; border: 0; letter-spacing: .2px;
    padding: 11px 24px; transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-success { background: var(--emerald); color: #fff; box-shadow: var(--glow-emerald); }
.btn-success:hover, .btn-success:focus { background: var(--emerald-600); color: #fff; }
.btn-primary { background: var(--trust); box-shadow: 0 10px 24px rgba(21,50,74,.3); }
.btn-primary:hover { background: #0f2436; }
.btn-lg { padding: 14px 34px; font-size: 16.5px; }

/* CTA verifica: glow elettrico più marcato, intensificato all'hover (no moto perpetuo) */
#verifica_codice_pod { position: relative; box-shadow: 0 12px 30px rgba(14,159,110,.42); }
#verifica_codice_pod:hover { box-shadow: 0 16px 40px rgba(14,159,110,.6); }

/* ---------- Sidebar ---------- */
#right-col .subnav, .subnav {
    background: var(--surface); border: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important;
    border-radius: var(--r); box-shadow: var(--shadow-sm); margin-bottom: 16px; overflow: hidden;
}
.subnav .ma { margin: 15px; }
.subnav h2.title, .subnav .title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
#right-col .subnav a { color: var(--ink-2); box-shadow: none; }
#right-col .subnav a:hover { color: var(--amber-600); }

#daily-rank { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 6px 0 12px; }
#daily-rank h2.ma { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); }
#daily-rank ul { padding: 0; margin: 0; }
li.rank { list-style: none; padding: 9px 15px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-2); }
li.rank strong { display: inline-block; min-width: 28px; text-align: center; background: var(--amber-50); color: var(--amber-600); border-radius: 7px; padding: 1px 7px; margin-right: 5px; font-family: var(--font-display); }

.icon_loghi ul { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.icon_loghi li { width: 100% !important; height: 58px !important; border: 1px solid var(--line) !important; border-radius: 12px; background: var(--surface); transition: all var(--t); }
.icon_loghi li:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); border-color: var(--amber) !important; }

/* ---------- Tabella comparatore (editoriale) ---------- */
/* Desktop: tabella che riempie la colonna e mostra SEMPRE tutte le colonne
   (table-layout:fixed → il testo va a capo, niente scroll che nasconde colonne). */
#tblComparator, #left-col table.table {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    border-collapse: separate; border-spacing: 0; box-shadow: var(--shadow-sm);
    width: 100%; max-width: 100%; table-layout: fixed;
}
#tblComparator thead th, #left-col table.table thead th {
    background: var(--paper-2); color: var(--ink); font-family: var(--font-display);
    text-transform: uppercase; font-size: 11px; letter-spacing: .4px; font-weight: 700;
    border-bottom: 2px solid var(--amber) !important; padding: 11px 10px; vertical-align: middle;
}
#tblComparator tbody td, #left-col table.table tbody td {
    border-top: 1px solid var(--line-2) !important; padding: 11px 10px !important; vertical-align: middle !important;
    color: var(--ink); word-wrap: break-word; overflow-wrap: break-word;
}
/* Ripartizione larghezze (5 colonne: logo / nome / spesa / tipo / azione) */
#tblComparator thead th:nth-child(1) { width: 17%; }
#tblComparator thead th:nth-child(2) { width: 31%; }
#tblComparator thead th:nth-child(3) { width: 16%; }
#tblComparator thead th:nth-child(4) { width: 15%; }
#tblComparator thead th:nth-child(5) { width: 21%; }
#tblComparator.table-striped > tbody > tr:nth-of-type(odd) > td,
#left-col table.table-striped > tbody > tr:nth-of-type(odd) > td { background: #fdfbf7; }
#tblComparator tbody tr { transition: background var(--t); cursor: pointer; }
#tblComparator tbody tr:hover td { background: var(--amber-50); }
#tblComparator tbody td:nth-child(3), #left-col table.table tbody td:nth-child(3) { font-family: var(--font-display); font-weight: 800; color: var(--emerald-600); font-size: 15px; }
#tblComparator .sugg-img { max-width: 100%; max-height: 30px; width: auto !important; object-fit: contain; }
/* Bottoni dentro la tabella: compatti, a tutta cella, testo a capo */
#tblComparator td .btn { display: block; width: 100%; padding: 7px 8px; font-size: 12px; white-space: normal; margin: 2px 0; box-shadow: none; }

/* Mobile: troppe colonne per <768px → scroll orizzontale (fallback) */
@media (max-width: 767px) {
    #tblComparator, #left-col table.table { display: block; overflow-x: auto; table-layout: auto; -webkit-overflow-scrolling: touch; }
    #tblComparator thead th { white-space: nowrap; }
    #tblComparator td .btn { display: inline-block; width: auto; }
}

/* Comparatore: più spazio alla tabella restringendo un po' la sidebar */
@media (min-width: 768px) {
    #right-col.col-lg-4 { flex: 0 0 264px; width: 264px; }
}

/* ---------- Card offerte ---------- */
.banner-offerte { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px; }
.banner-offerte > div {
    border: 1px solid var(--line) !important; border-radius: var(--r) !important; box-shadow: var(--shadow-sm) !important;
    margin: 0 !important; padding: 20px 20px 80px !important; background: var(--surface); flex: 1 1 220px;
    transition: box-shadow var(--t), transform var(--t); position: relative; overflow: hidden;
}
.banner-offerte > div::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--amber),var(--volt)); opacity:0; transition:opacity var(--t); }
.banner-offerte > div:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-4px); }
.banner-offerte > div:hover::before { opacity: 1; }
.banner-offerte > div center { height: 78px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; }
.banner-offerte > div h3 { font-family: var(--font-display); color: var(--amber-600); font-weight: 700; font-size: 17px; text-transform: none; letter-spacing: -.3px; }
.banner-offerte > div h4 { color: var(--ink-2); }
.banner-offerte button { border-radius: var(--r-sm); background: var(--emerald); color: #fff; font-weight: 700; box-shadow: var(--glow-emerald); left: 20px; right: 20px; width: auto; margin-left: 0; }
@media (max-width: 767px){ .banner-offerte > div{ padding-bottom: 20px !important; } .banner-offerte button{ position: relative; left:auto; right:auto; bottom:auto; margin-top: 12px; } }

/* ---------- Footer ---------- */
#page-footer {
    background: var(--ink); border: 1px solid var(--ink); border-top: 3px solid var(--amber);
    border-radius: var(--r); margin-top: 26px; padding: 24px;
}
#page-footer, #page-footer .info { color: #cabfae; font-size: 12px; }
#page-footer a { color: #e8dfd0; box-shadow: none; }
#page-footer a:hover { color: var(--volt); }
/* Logo InnovaSemplice: preservare l'identità (colori originali) su targhetta chiara,
   leggibile sul footer scuro. Solo il logo in .info, non i loghi delle offerte. */
#page-footer .info img {
    background: #fff;
    padding: 6px 11px;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    vertical-align: middle;
}

/* ---------- Privacy / note ---------- */
.privacy_check, .check.custom { color: var(--ink-3); }
.privacy_check a, .check.custom a, .privacy_check a:visited, .check.custom a:visited { color: var(--amber-600) !important; }
.flag-privacy { accent-color: var(--emerald); }
.note.custom a { color: var(--ink-2) !important; }

/* ---------- Modale lead ---------- */
.fancybox_container { border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; overflow-y: auto; }
.fancybox_container.form_contact .first { background: var(--emerald); }
.fancybox_container h3 { font-family: var(--font-display); color: var(--ink); text-transform: none; font-weight: 800; letter-spacing: -.4px; }
.fancybox_container.form_contact h3 span { color: var(--amber-600); }
.fancybox_container .button_link { background: var(--emerald); border-radius: var(--r-sm); text-transform: none; font-weight: 700; }
.fancybox_container .button_link:hover { background: var(--emerald-600); }
.fancybox_container .form-control, .fancybox_container input { border-radius: var(--r-sm); }

/* ---------- Reveal soft al load ---------- */
#main-content > .row, .banner-offerte > div { animation: cp-fade .5s ease both; }
#main-content > .row:nth-child(2){ animation-delay:.04s }
#main-content > .row:nth-child(3){ animation-delay:.08s }
#main-content > .row:nth-child(4){ animation-delay:.12s }
@keyframes cp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Fix mobile: passi del form (cerchio numerato + contenuto) ----------
   Sotto i 768px le colonne Bootstrap collassano e il cerchio-step (float) si
   sovrapponeva alla label. Con flex il cerchio e il contenuto restano affiancati
   in modo pulito, senza sovrapposizioni. */
@media (max-width: 767px) {
    .form-verify .row:has(> .form-steps) { display: flex; align-items: flex-start; gap: 10px; }
    .form-verify .row:has(> .form-steps) > .form-steps { float: none !important; width: 50px !important; flex: 0 0 50px; }
    .form-verify .row:has(> .form-steps) > .form-elements { float: none; width: auto !important; margin: 0 !important; flex: 1 1 auto; min-width: 0; }
    /* la "linea di corrente" resta centrata sul cerchio anche in flex */
    .form-verify .row:has(> .form-steps) .form-steps::before { left: 25px; }
}

/* ---------- Loghi fornitori (section_partner_content) ---------- */
.section_partner_content { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; position: relative; }
.section_partner_content .box_shadow { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; transition: box-shadow var(--t); }
.section_partner_content .box_shadow:hover { box-shadow: var(--shadow); }
.section_partner_content a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); }
.section_partner_content img { max-width: 80px; max-height: 40px; object-fit: contain; }
.section_partner_content small { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.section_partner_content .hide_element { position: absolute; width: 0; height: 0; overflow: hidden; }