/* ============================================================================
   codicemigrazione.com — Tema "modern" (Fase 4)
   Veste le CLASSI ESISTENTI del markup legacy. Nessuna modifica alle viste.
   Attivo con CDM_THEME=modern (rollback istantaneo a 'legacy').
   Direzione: il codice di migrazione come artefatto monospace + motivo "da → a".
   ============================================================================ */

/* ---- Font self-hosted (GDPR: niente CDN Google Fonts) ---- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/inter-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/fonts/spacegrotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/fonts/spacegrotesk-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('/fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('/fonts/jetbrainsmono-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---- Token system ---- */
:root{
  --ink:#14181F;          /* testo principale (near-black caldo, non puro) */
  --ink-soft:#5A6270;     /* testo secondario */
  --paper:#F5F6F3;        /* sfondo pagina (off-white freddo, non cream) */
  --surface:#FFFFFF;      /* superfici/card */
  --rule:#E6E7E2;         /* hairline */
  --brand:#FF5A2C;        /* arancio segnale — brand + azione (ancora storica) */
  --brand-ink:#C2390F;    /* arancio scuro per hover/testo */
  --brand-tint:#FFF1EB;   /* arancio tenue di sfondo */
  --signal:#0E9D6E;       /* verde = risparmio/prezzo (ancora semantica) */
  --port:#2563EB;         /* blu = destinazione, nel motivo "da → a" + link */
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(20,24,31,.04), 0 12px 30px -12px rgba(20,24,31,.12);
  --shadow-sm:0 1px 2px rgba(20,24,31,.05);
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Base ---- */
*,*::before,*::after{ box-sizing:border-box; }
/* reset.css legacy imposta 62.5% (1rem=10px): ripristino 16px per il nostro scale rem */
html{ font-size:100%; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; }
a{ color:var(--port); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4,h5{ font-family:var(--font-display); color:var(--ink); line-height:1.18; font-weight:600; margin:0 0 .5em; letter-spacing:-.01em; }
p{ margin:0 0 1rem; }
strong{ font-weight:600; }
::selection{ background:var(--brand); color:#fff; }

/* ---- Layout container ---- */
#page-wrapper.container{ max-width:1100px; width:100%; margin:0 auto; padding:0 20px 64px; }
#page-content.row{ display:block; }
@media (min-width:768px){
  #page-content.row{ display:flex; gap:32px; align-items:flex-start; margin:0; }
  #left-col.col-sm-8{ flex:1 1 auto; min-width:0; float:none; width:auto; padding:0; }
  #right-col.col-sm-4{ flex:0 0 320px; max-width:320px; float:none; padding:0; }
  #left-col.one-col{ flex:1 1 100%; }
}
.clearb{ clear:both; }
.spacer-10{ height:10px; } .spacer-20{ height:20px; } .spacer-30{ height:32px; }

/* ---- Header / brand ---- */
#page-header{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:22px 0 18px; margin-bottom:22px; border-bottom:1px solid var(--rule);
  height:auto !important;
}
#page-logo.logo-long{ width:auto; }
#page-logo h1{ margin:0; font-size:0; }
#page-logo .logo a.logo,
.logo a.logo{
  font-family:var(--font-display); font-weight:700; font-size:1.5rem; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:9px;
}
#page-logo .logo a.logo:hover{ text-decoration:none; }
#page-logo .logo .glyphicon{ color:var(--brand); font-size:1.35rem; transform:translateY(1px); }
.claim a.claim{ color:var(--ink-soft); font-size:.86rem; font-weight:400; display:block; margin-top:3px; white-space:nowrap; }
.claim a.claim:hover{ text-decoration:none; color:var(--ink-soft); }

/* Nav: override Bootstrap navbar-default → pulsanti arancioni in evidenza (come l'originale) */
#header-nav.navbar,
#header-nav.navbar-default{
  background:transparent; border:none; box-shadow:none; margin:0; min-height:0; border-radius:0;
  flex:1 1 100%; width:100%; padding:0;   /* nav su riga propria, full-width sotto il logo */
}
/* Griglia a 5 colonne uguali: pulsanti allineati edge-to-edge (equal-width/height) */
#header-nav .nav.navbar-nav{
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px; margin:0; padding:0; width:100%; float:none; list-style:none;
}
/* Bootstrap aggiunge clearfix ::before/::after su .nav/.row: con flex/grid diventano
   celle/elementi fantasma (sfasano l'allineamento) → disattivati dove uso flex/grid. */
#header-nav .nav.navbar-nav::before,
#header-nav .nav.navbar-nav::after,
#page-content.row::before, #page-content.row::after,
.form-verify .row::before, .form-verify .row::after,
.banner-offerte::before, .banner-offerte::after{ content:none; display:none; }
@media (max-width:767px){ #header-nav .nav.navbar-nav{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:460px){ #header-nav .nav.navbar-nav{ grid-template-columns:1fr; } }
#header-nav .nav.navbar-nav > li{ float:none; margin:0; display:flex; }
#header-nav .nav.navbar-nav > li > a,
#header-nav li a{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:44px; line-height:1.2;
  font-family:var(--font-display); font-weight:600; font-size:.9rem; color:#fff;
  background:var(--brand); padding:8px 14px; border-radius:9px; border:0;
  box-shadow:0 1px 2px rgba(194,57,15,.25); position:relative;
  transition:background .15s ease, transform .08s ease, box-shadow .15s ease;
}
#header-nav .nav.navbar-nav > li > a:hover,
#header-nav li a:hover{
  color:#fff; background:var(--brand-ink); text-decoration:none;
  box-shadow:0 4px 12px -3px rgba(194,57,15,.45); transform:translateY(-1px);
}
#header-nav .nav.navbar-nav > li.active > a,
#header-nav li.active a{
  color:#fff; background:var(--brand-ink);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4), 0 1px 3px rgba(194,57,15,.35);
}

/* ---- Headings di sezione ---- */
.box-title{
  font-family:var(--font-display); font-weight:600; color:var(--ink);
  font-size:clamp(1.3rem,2.4vw,1.7rem); margin:0 0 14px; letter-spacing:-.015em;
}
#main-content > h4{
  font-family:var(--font-display); font-weight:500; font-size:1.05rem; color:var(--ink-soft);
  margin:0 0 18px;
}

/* ============================================================================
   FIRMA 1 — Il form di verifica: il codice come artefatto monospace
   ============================================================================ */
.form-verify.central-box,
.central-box{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 26px 28px; margin-bottom:8px;
}
.form-verify .row{ display:flex; align-items:flex-start; gap:14px; margin:0 0 18px; }
.form-verify .row:last-child{ margin-bottom:0; }
.form-steps{ flex:0 0 auto; width:auto; padding:0; }
.form-steps .circle{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:#fff; font-family:var(--font-display); font-weight:600; font-size:.95rem;
}
.form-steps .circle strong{ font-weight:600; }
.form-elements{ flex:1 1 auto; min-width:0; padding:0; color:var(--ink); font-size:.95rem; }

/* L'input del codice è la star: grande, monospace, spaziato */
.input-cdm.form-control,
input.input-cdm{
  display:block; width:100%; margin-top:8px; height:auto;
  font-family:var(--font-mono); font-weight:500; font-size:1.4rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); background:#FBFBF9;
  border:1.5px solid var(--rule); border-radius:var(--radius-sm); padding:14px 16px;
  transition:border-color .15s ease, box-shadow .15s ease; box-shadow:none;
}
.input-cdm.form-control::placeholder{ color:#AEB4BD; letter-spacing:.05em; }
.input-cdm.form-control:focus,
input.input-cdm:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-tint);
}

/* Operatori: radio come chip selezionabili */
.form-partners{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.form-partners nobr{ display:inline-flex; }
.form-partners label{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1.5px solid var(--rule);
  border-radius:999px; background:var(--surface); color:var(--ink); font-size:.9rem; cursor:pointer;
  transition:border-color .12s ease, background .12s ease; margin:0; font-weight:500;
}
.form-partners label:hover{ border-color:#C9CCC4; }
.form-partners input[type=radio]{ accent-color:var(--brand); margin:0; cursor:pointer; }
.form-partners input[type=radio]:checked + label{ border-color:var(--brand); background:var(--brand-tint); color:var(--brand-ink); }

/* ---- Bottoni (override Bootstrap) ---- */
.btn{
  font-family:var(--font-display); font-weight:600; border-radius:var(--radius-sm);
  padding:11px 20px; border:1px solid transparent; transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
  text-shadow:none; box-shadow:none; font-size:.96rem; line-height:1.2;
}
.btn:active{ transform:translateY(1px); }
.btn.btn-success,
.btn-success,
button.btn-success{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.btn.btn-success:hover,
.btn-success:hover,
button.btn-success:hover{ background:var(--brand-ink); border-color:var(--brand-ink); color:#fff; }
.btn.btn-lg{ padding:14px 26px; font-size:1.05rem; }

/* ---- iplookup banner + offerta del giorno (FIRMA 2 — motivo "da → a") ---- */
#iplookup{ background:var(--brand-tint) !important; border:1px solid #FAD9CB; border-radius:var(--radius-sm); }
#iplookup .box-title a{ color:var(--brand-ink); }

.attention-wrapper{
  display:flex; gap:22px; flex-wrap:wrap; align-items:stretch;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; margin-top:6px;
}
.attention-box{
  flex:0 0 220px; max-width:220px; background:var(--ink); color:#fff; border-radius:var(--radius-sm);
  padding:18px; display:flex; flex-direction:column; gap:8px;
}
.attention-box .title strong{ color:var(--brand); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; }
.attention-box .content a{ color:#fff; }
.attention-box .content .big{ font-family:var(--font-display); font-size:1.05rem; }
.attention-box img{ margin-top:10px; background:#fff; border-radius:6px; padding:6px; }
.best-text{ flex:1 1 280px; min-width:0; }
.best-text p{ color:var(--ink); }
.best-text a{ color:var(--port); font-weight:500; }

/* ---- Sidebar (#right-col) widget ---- */
#right-col .subnav,
#right-col #daily-rank{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:16px 18px; margin-bottom:16px;
}
#right-col h1, #right-col h2{ font-family:var(--font-display); font-size:1rem; font-weight:600; margin:0 0 12px; color:var(--ink); }
#daily-rank .rank{ font-size:.9rem; color:var(--ink-soft); padding:7px 0; border-bottom:1px dashed var(--rule); }
#daily-rank ul.ma{ list-style:none; margin:0; padding:0; }
#daily-rank .rank:last-child{ border-bottom:0; }
#daily-rank .rank strong{ display:inline-block; min-width:26px; font-family:var(--font-mono); color:var(--brand-ink); font-weight:700; }
#daily-rank .rank a{ color:var(--port); font-weight:500; }
.paolo-valenti.ma a{ color:var(--ink); }
.paolo-valenti .title{ font-family:var(--font-display); font-size:1rem; color:var(--ink); margin:6px 0 2px; }
.subnav ul.ma{ list-style:none; margin:0; padding:0; }
.subnav ul.ma li{ padding:5px 0; }

/* ---- Footer ---- */
#page-footer{ margin-top:40px; padding-top:26px; border-top:1px solid var(--rule); }
.banner-offerte{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:26px; }
.banner-offerte .col{ float:none; }
.banner-offerte .col-sm-3{
  flex:1 1 200px; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:18px; text-align:center; display:flex; flex-direction:column; gap:6px;
}
.banner-offerte .logo-oper img{ max-height:42px; width:auto; margin:0 auto 6px; }
.banner-offerte h3{ font-family:var(--font-display); font-size:1rem; margin:0; }
.banner-offerte h4{ font-family:var(--font-body); font-weight:400; font-size:.86rem; color:var(--ink-soft); margin:0 0 8px; }
.banner-offerte .btn-success{ margin-top:auto; align-self:center; }
.info{ color:var(--ink-soft); font-size:.85rem; text-align:center; line-height:1.7; }
.info a{ color:var(--ink-soft); }
.info a:hover{ color:var(--brand-ink); }
.info font{ font-size:.95rem !important; }
.info img{ vertical-align:middle; }

/* ---- Offerte / comparatore (generico) ---- */
.list-group-item{ border:1px solid var(--rule); border-radius:var(--radius-sm) !important; margin-bottom:8px; background:var(--surface); }
.widget-offer{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:16px; margin-bottom:14px; }
table{ border-collapse:collapse; width:100%; }
td, th{ padding:8px 10px; }

/* Numeri/prezzo: il verde = risparmio (ancora semantica) */
.discount, .risparmio, .price-save{ color:var(--signal); font-weight:600; }

/* ---- Pagina risultato verifica (frameset/new_top): il codice a segmenti ---- */
#cow, #cor, #cos, #chk{ font-family:var(--font-mono); font-weight:700; color:var(--ink); }

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width:767px){
  #page-wrapper.container{ padding:0 16px 48px; }
  #page-header{ flex-direction:column; align-items:flex-start; gap:12px; }
  #header-nav .nav.navbar-nav{ gap:2px; }
  .input-cdm.form-control{ font-size:1.15rem; letter-spacing:.08em; }
  .attention-box{ flex:1 1 100%; max-width:none; }
}

/* ============================================================================
   Qualità (senza annunciarla): focus visibile, motion ridotto
   ============================================================================ */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:3px; }
a:focus-visible, .btn:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}