/* previsionicarburanti.it */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(fonts/barlow-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/barlow-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url(fonts/barlow-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }

:root {
  --ambra: #F59E0B;
  --ambra-scuro: #B45309;
  --asfalto: #14181C;
  --ardesia: #37424B;
  --grigio: #55606A;
  --bordo: #C4CDD3;
  --linea: #E1E6E9;
  --nebbia: #F2F4F5;
  --bianco: #FFFFFF;
  --link: #0B4F8A;
  --su: #C2410C;   --su-bg: #FDE7D6;   --su-fg: #9A3412;
  --giu: #0B4F8A;  --giu-bg: #E1ECF7;  --giu-fg: #0B4F8A;
  --st-bg: #E3E8EB; --st-fg: #37424B;
  --testo: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --stretto: "Barlow Condensed", "Arial Narrow", "Barlow", sans-serif;
  --raggio: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nebbia); color: var(--asfalto); font-family: var(--testo); font-size: 16px; line-height: 1.45; }
a { color: var(--link); }
a:hover { color: #083A66; }
h1, h2, h3, h4 { font-family: var(--stretto); font-weight: 700; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(28px, 6vw, 40px); }
h2 { font-size: 24px; }
p { margin: 0; }
small { font-size: .8em; }
:focus-visible { outline: 3px solid var(--ambra); outline-offset: 2px; }
.visivo-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--ambra); color: var(--asfalto); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.salta:focus { top: 8px; }

.contenitore { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 16px; }
.pagina { padding-top: 16px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.blocco { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.riquadro { background: var(--bianco); border-radius: var(--raggio); padding: 18px 16px; }
.centrato { align-items: flex-start; }
.nota { color: var(--grigio); font-size: 14px; }
.intro { font-size: 16px; color: var(--ardesia); max-width: 64ch; }
.intro strong { color: var(--asfalto); }

/* testata */
.testata { background: var(--asfalto); color: var(--bianco); }
.testata-riga { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }
.logo-testo { font-family: var(--stretto); font-size: 22px; line-height: 1; white-space: nowrap; }
.logo-testo b { font-weight: 700; color: var(--bianco); }
.logo-testo span { font-weight: 500; color: #C9D1D6; }
.logo-testo i { font-style: normal; font-weight: 700; color: var(--ambra); }
.logo-testo.piccolo { font-size: 18px; }
.aggiornato { font-size: 12px; color: #C9D1D6; text-align: right; line-height: 1.3; }

/* avviso dati non aggiornati */
.dati-vecchi { background: #FEF3C7; color: #78350F; border-bottom: 3px solid var(--ambra); padding: 12px 0; font-size: 15px; }

/* barra di ricerca delle pagine interne */
.barra-ricerca { display: flex; gap: 8px; align-items: flex-start; padding-bottom: 14px; position: relative; }
.barra-ricerca-sfondo, body > .barra-ricerca { max-width: none; background: var(--asfalto); padding-left: max(16px, calc((100% - 860px) / 2 + 16px)); padding-right: max(16px, calc((100% - 860px) / 2 + 16px)); }
.cerca { position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cerca input[type=search] { width: 100%; height: 46px; border: 1px solid var(--bordo); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--asfalto); background: var(--bianco); -webkit-appearance: none; appearance: none; }
.barra-ricerca .cerca input { border: none; }
.cerca label { font-size: 14px; color: var(--grigio); }
.cerca .campo { position: relative; }
.cerca .campo svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--grigio); pointer-events: none; }
.cerca .campo input { padding-left: 44px; }
.cerca.grande input[type=search] { height: 54px; font-size: 18px; border-radius: var(--raggio); }
.btn-icona { flex: none; width: 46px; height: 46px; border-radius: 8px; background: var(--ambra); color: var(--asfalto); display: inline-flex; align-items: center; justify-content: center; }
.btn-icona:hover { background: #FBBF24; color: var(--asfalto); }

.suggerimenti { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--bianco); border-radius: var(--raggio); box-shadow: 0 10px 30px rgba(20, 24, 28, .22); max-height: 340px; overflow: auto; }
.cerca:has(label:not(.visivo-nascosto)) .suggerimenti { top: calc(100% + 0px); }
.suggerimenti li { display: flex; justify-content: space-between; gap: 8px; padding: 11px 12px; border-radius: 6px; cursor: pointer; color: var(--asfalto); }
.suggerimenti li small { color: var(--grigio); }
.suggerimenti li[aria-selected=true], .suggerimenti li:hover { background: var(--nebbia); }
.suggerimenti li.vuoto { cursor: default; color: var(--grigio); }

/* pulsanti */
.btn-primario { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 22px; border-radius: var(--raggio); background: var(--ambra); color: var(--asfalto); font-weight: 700; font-size: 18px; text-decoration: none; border: 0; cursor: pointer; }
.btn-primario:hover { background: #FBBF24; color: var(--asfalto); }
.btn-primario[aria-busy=true] { opacity: .75; cursor: progress; }
.btn-secondario { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--bordo); background: var(--bianco); color: var(--asfalto); font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.btn-secondario:hover { border-color: var(--ardesia); color: var(--asfalto); }
.btn-secondario svg { flex: none; }
.btn-secondario[data-salva] svg path { fill: none; }
.btn-secondario[aria-pressed=true] { border-color: var(--ambra-scuro); background: #FEF3C7; }
.btn-secondario[aria-pressed=true] svg path { fill: var(--ambra); stroke: var(--ambra-scuro); }
.messaggio-posizione { font-size: 14px; color: var(--su-fg); background: var(--su-bg); padding: 10px 12px; border-radius: 8px; }

.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bordo); background: var(--bianco); color: var(--asfalto); font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.chip:hover { border-color: var(--ardesia); color: var(--asfalto); }
.chip.attivo, .chip[aria-pressed=true] { background: var(--asfalto); border-color: var(--asfalto); color: var(--bianco); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; background: var(--bianco); border: 1px solid var(--linea); color: var(--link); font-weight: 600; text-decoration: none; }
.chip-link:hover { border-color: var(--link); }

/* homepage */
.eroe { background: var(--asfalto); color: var(--bianco); padding: 18px 0 26px; }
.eroe .contenitore { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.eroe h1 { font-size: clamp(32px, 8vw, 48px); }
.eroe .sottotitolo { color: #C9D1D6; font-size: 17px; max-width: 60ch; }
.eroe .btn-primario { align-self: flex-start; }
.eroe .cerca label { color: #C9D1D6; }
.eroe .cerca input[type=search] { border: none; }
.scelta-carb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: #C9D1D6; }
.eroe .chip { background: transparent; color: var(--bianco); border-color: #55606A; }
.eroe .chip.attivo, .eroe .chip[aria-pressed=true] { background: var(--ambra); border-color: var(--ambra); color: var(--asfalto); }
@media (max-width: 520px) { .eroe .btn-primario { align-self: stretch; } }

.riga-titolo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.miei { display: grid; gap: 8px; }
.mio { display: flex; flex-direction: column; gap: 10px; background: var(--bianco); border-radius: var(--raggio); padding: 14px 16px; text-decoration: none; color: var(--asfalto); border: 1px solid transparent; }
.mio:hover { border-color: var(--bordo); color: var(--asfalto); }
.mio-riga { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mio-nome { display: flex; flex-direction: column; min-width: 0; }
.mio-nome b { font-size: 17px; }
.mio-nome small { color: var(--grigio); font-size: 14px; }
.mio-prezzi { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.mio-prezzi .p { font-family: var(--stretto); font-weight: 700; font-size: 28px; }
.mio-prezzi .dopo { font-family: var(--stretto); font-weight: 600; font-size: 18px; color: var(--grigio); }
.mio-prezzi .dopo.aumento { color: var(--su); }
.mio-prezzi .dopo.calo { color: var(--giu); }

.griglia-italia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .griglia-italia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.media { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 8px; background: var(--nebbia); }
.media .valore { font-family: var(--stretto); font-weight: 700; font-size: 30px; line-height: 1.1; }
.media .valore small { font-size: 15px; font-weight: 600; color: var(--grigio); }
.quota { font-size: 14px; font-weight: 600; }
.t-aumento { color: var(--su); }
.t-calo { color: var(--giu); }
.t-stabile { color: var(--ardesia); }
.passi { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.affidabilita { display: flex; align-items: center; gap: 14px; background: var(--nebbia); border-radius: 8px; padding: 12px 14px; }
.affidabilita .grande { font-family: var(--stretto); font-weight: 700; font-size: 34px; line-height: 1; white-space: nowrap; color: var(--asfalto); }

/* consiglio */
.consiglio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; font-size: 15px; background: var(--st-bg); color: var(--st-fg); }
.consiglio .icona { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--bianco); }
.consiglio strong { color: inherit; }
.consiglio.oggi { background: var(--su-bg); color: var(--su-fg); }
.consiglio.aspetta { background: var(--giu-bg); color: var(--giu-fg); }

/* badge tendenza */
.badge { display: inline-flex; align-items: center; gap: 2px; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; background: var(--st-bg); color: var(--st-fg); }
.badge.aumento { background: var(--su-bg); color: var(--su-fg); }
.badge.calo { background: var(--giu-bg); color: var(--giu-fg); }

/* percorso */
.percorso { padding-top: 12px; font-size: 14px; }
.percorso ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; color: var(--grigio); }
.percorso li + li::before { content: "›"; margin-right: 4px; color: var(--bordo); }

/* pagina comune */
.schede-carb { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; }
.schede-carb a { min-height: 46px; border-radius: 8px; border: 1px solid var(--bordo); background: var(--bianco); color: var(--asfalto); font-weight: 600; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.schede-carb a.attivo { background: var(--asfalto); border-color: var(--asfalto); color: var(--bianco); font-weight: 700; }
.filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filtri .nota { margin-left: auto; }
.filtri .separatore { width: 1px; height: 24px; background: var(--bordo); margin: 0 4px; }

.lista-dist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dist a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--raggio); background: var(--bianco); text-decoration: none; color: var(--asfalto); border: 1px solid transparent; }
.dist a:hover { border-color: var(--bordo); color: var(--asfalto); }
.dist.top a { border: 2px solid var(--ambra); }
.dist-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.etichetta { align-self: flex-start; background: var(--ambra); color: var(--asfalto); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 4px; margin-bottom: 4px; }
.dist-nome { font-family: var(--testo); font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.dist-ind { font-size: 14px; color: var(--ardesia); overflow-wrap: anywhere; }
.dist-meta { font-size: 13px; color: var(--grigio); }
.dist-prezzo { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.dist-prezzo .p { font-family: var(--stretto); font-weight: 700; font-size: 30px; line-height: 1; white-space: nowrap; }
.dist-prezzo .p small { font-size: 14px; font-weight: 600; color: var(--grigio); }
.nota-modo { font-size: 12px; color: var(--grigio); }
.domani { font-size: 13px; font-weight: 600; white-space: nowrap; }
.domani.su { color: var(--su); }
.domani.su::before { content: "↑ "; }
.domani.giu { color: var(--giu); }
.domani.giu::before { content: "↓ "; }
.lista-dist.compatta .dist a { padding: 12px 14px; }
.lista-dist.compatta .dist-prezzo .p { font-size: 26px; }

.paginazione { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: var(--grigio); }
.paginazione a { font-weight: 700; font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; }
.fonte { margin-top: 8px; }

/* scheda distributore */
.scheda-testa { display: flex; flex-direction: column; gap: 6px; }
.scheda-testa .indirizzo { font-size: 17px; color: var(--ardesia); }
.azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.salti { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.salti a { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--bianco); border: 1px solid var(--linea); text-decoration: none; }
.avviso { background: #FEF3C7; color: #78350F; border-left: 4px solid var(--ambra); padding: 10px 14px; border-radius: 6px; }
.carb { background: var(--bianco); border-radius: var(--raggio); padding: 16px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 12px; }
.carb-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tabella-scorre { overflow-x: auto; }
.prezzi { width: 100%; border-collapse: collapse; font-size: 15px; }
.prezzi caption { text-align: left; font-size: 13px; color: var(--grigio); padding-bottom: 4px; }
.prezzi th, .prezzi td { padding: 9px 6px; border-bottom: 1px solid var(--linea); text-align: right; vertical-align: middle; }
.prezzi th:first-child { text-align: left; font-weight: 600; }
.prezzi thead th { font-size: 13px; font-weight: 600; color: var(--grigio); line-height: 1.2; }
.prezzi tbody th small { display: block; font-weight: 400; color: var(--grigio); }
.prezzi td { font-family: var(--stretto); font-weight: 600; font-size: 20px; white-space: nowrap; }
.prezzi td.oggi { font-weight: 700; font-size: 22px; }
.prezzi thead th.oggi { color: var(--asfalto); }
.prezzi td.su { color: var(--su); }
.prezzi td.giu { color: var(--giu); }
.prezzi tbody tr:last-child > * { border-bottom: 0; }
.carb .dopo { display: flex; flex-wrap: wrap; gap: 6px; font-size: 15px; color: var(--ardesia); padding-top: 4px; }
.carb .dopo strong.aumento { color: var(--su); }
.carb .dopo strong.calo { color: var(--giu); }

/* risultati ricerca */
.risultati { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.risultati a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; background: var(--bianco); border-radius: 8px; text-decoration: none; color: var(--asfalto); }
.risultati a:hover { outline: 1px solid var(--bordo); }

/* prezzi da verificare */
.nota-verifica { font-size: 12px; font-weight: 600; color: #78350F; background: #FEF3C7; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.dist.verificare .dist-prezzo .p { color: var(--grigio); }
.separatore-lista { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.separatore-lista h2 { font-size: 20px; }

/* verifica delle previsioni */
.verifica { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ardesia); border-top: 1px solid var(--linea); padding-top: 10px; }
.verifica .icona { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.verifica.giusta .icona { background: #DCFCE7; color: #166534; }
.verifica.sbagliata .icona { background: var(--st-bg); color: var(--ardesia); }
.verifica-gruppo { font-size: 14px; color: var(--ardesia); background: var(--bianco); border-radius: 8px; padding: 10px 12px; }

/* data di aggiornamento */
.aggiornamento { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; color: var(--grigio); }
.aggiornamento svg { flex: none; margin-top: 2px; }
.aggiornamento time { font-weight: 600; color: var(--ardesia); }
.riquadro .aggiornamento { margin-top: -4px; }

/* regioni */
.regioni { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.regioni a { display: flex; flex-direction: column; justify-content: center; min-height: 54px; padding: 8px 12px; border-radius: 8px; background: var(--bianco); border: 1px solid var(--linea); text-decoration: none; color: var(--link); font-weight: 600; }
.regioni a:hover { border-color: var(--link); }
.regioni .nota { font-weight: 400; font-size: 13px; }
.sottotitolo-carb { font-size: 20px; margin-top: 8px; }
.provincia { background: var(--bianco); border-radius: var(--raggio); }
.provincia summary { cursor: pointer; padding: 14px 16px; min-height: 48px; list-style-position: inside; }
.provincia summary h3 { display: inline; font-size: 20px; }
.provincia summary small { font-family: var(--testo); font-weight: 400; font-size: 14px; color: var(--grigio); }
.provincia[open] summary { border-bottom: 1px solid var(--linea); }
.provincia .tabella-scorre { padding: 4px 16px 12px; }
.tabella-comuni { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabella-comuni th, .tabella-comuni td { padding: 9px 6px; border-bottom: 1px solid var(--linea); text-align: right; }
.tabella-comuni th:first-child { text-align: left; font-weight: 600; }
.tabella-comuni thead th { font-size: 13px; font-weight: 600; color: var(--grigio); }
.tabella-comuni td.num { font-family: var(--stretto); font-weight: 600; font-size: 18px; white-space: nowrap; }
.tabella-comuni tbody tr:last-child > * { border-bottom: 0; }

/* pagine di testo */
.testo-lungo { max-width: 720px; }
.testo-lungo h2 { margin-top: 12px; }
.testo-lungo p, .testo-lungo li { font-size: 17px; line-height: 1.55; }
.segnala { font-size: 15px; color: var(--ardesia); }
.segnala a { font-weight: 600; }

/* piede */
.piede { background: var(--asfalto); color: #C9D1D6; padding: 28px 0 36px; font-size: 14px; }
.piede .contenitore { display: flex; flex-direction: column; gap: 10px; }
.piede a { color: #FCD34D; }
.piede .logo { align-self: flex-start; }
.link-piede { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.link-piede a { min-height: 32px; display: inline-flex; align-items: center; }

@media (min-width: 700px) {
  .pagina { padding-top: 24px; }
  .dist-nome { font-size: 18px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print {
  .testata, .barra-ricerca, .piede, .azioni, .salti, .filtri, .paginazione { display: none; }
  body { background: #fff; }
}