:root{
  --bg:#f6f8f5;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#516071;
  --line:#d9e1d7;
  --blue:#0f4c92;
  --green:#22c55e;
  --lime:#d9ff66;
  --lime-border:#9dd61a;
  --tiffany:#dffaf6;
  --tiffany-border:#7dd3c7;
  --orange:#fff0d9;
  --orange-border:#f5b561;
  --red:#ffe5e5;
  --red-border:#f59b9b;
  --shadow:0 18px 40px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#f8fbf7 0%,#ffffff 45%,#f4f7f2 100%);
}
a{color:inherit;text-decoration:none}
.container{width:min(1180px, calc(100% - 32px)); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(8px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.topbar-inner{
  min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand-mini{display:flex; align-items:center; gap:12px; font-weight:900; font-size:1.2rem}
.brand-mini img{width:46px; height:auto; display:block}
.brand-mini span b{color:var(--green)}
.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.nav a{
  padding:10px 14px; border:1px solid rgba(15,23,42,.08); border-radius:999px; background:#fff;
  color:#334155; font-weight:700; font-size:.95rem;
}
.hero{
  margin-top:28px;
  padding:28px 28px 34px;
  border:1px solid #d9e8d7;
  border-radius:34px;
  background:
    radial-gradient(circle at 12% 82%, rgba(236,255,143,.23), transparent 23%),
    radial-gradient(circle at 92% 16%, rgba(164,243,209,.28), transparent 24%),
    linear-gradient(180deg,#fbfdfb 0%,#f8fbf8 100%);
  box-shadow:var(--shadow);
  text-align:center;
}
.hero img{
  display:block;
  width:min(540px, 95%);
  height:auto;
  margin:0 auto -26px;
}
.payoff{
  font-size:1.12rem; font-weight:900; color:#334155; margin-top:0; margin-bottom:16px;
}
.payoff mark{
  background:linear-gradient(transparent 58%, #d9ff66 58%);
  color:#1f2937; padding:0 .08em;
}
.hero h1{
  margin:0;
  font-size:clamp(2rem, 5vw, 4.15rem);
  line-height:1.02;
  letter-spacing:-.05em;
  text-align:left;
}
.hero-copy{
  max-width:900px; margin:0 auto;
}
.hero p{
  text-align:left; font-size:1.13rem; line-height:1.6; color:#334155; max-width:860px; margin:18px 0 0;
}
.hero strong{
  display:block; text-align:left; margin-top:14px; color:var(--blue); font-size:1.05rem;
}
.info-box{
  margin-top:22px;
  padding:20px 22px;
  border:1px solid #d7e46a;
  border-radius:28px;
  background:linear-gradient(180deg,#fbffec 0%,#ffffff 100%);
  box-shadow:var(--shadow);
}
.info-box h2{margin:0 0 8px; color:#7a4a00; font-size:1.5rem}
.info-box p{margin:0; color:#334155; line-height:1.6; font-size:1.04rem}
.section{margin-top:26px}
.form-card, .card, .summary, .page-card, .map-box{
  background:var(--card);
  border:1px solid #e5ebe2;
  border-radius:26px;
  box-shadow:var(--shadow);
}
.form-card{padding:24px}
.section-title{
  margin:0 0 14px;
  font-size:1.85rem; line-height:1.1; letter-spacing:-.03em;
}
.section-title.centered{
  text-align:center;
}
.grid-form{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr auto;
  gap:16px;
  align-items:end;
}
.field label{
  display:block;
  margin-bottom:8px;
  font-weight:800;
  color:#334155;
}
.field input[type=text], .field select{
  width:100%; height:54px;
  border:1px solid #d6dfd4;
  border-radius:16px;
  padding:0 16px;
  font-size:1rem;
  background:#fff;
}
.range-wrap{padding:8px 0 0}
.range-wrap .liters-val{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
  font-weight:900; color:#ef4444;
}
input[type=range]{width:100%}
.toggle-line{display:flex; align-items:center; gap:10px; padding-bottom:10px}
.switch{
  position:relative; width:56px; height:32px; display:inline-block;
}
.switch input{opacity:0; width:0; height:0}
.slider{
  position:absolute; inset:0; background:#d1d5db; border-radius:999px; transition:.2s;
}
.slider:before{
  content:""; position:absolute; width:24px; height:24px; left:4px; top:4px;
  background:#fff; border-radius:50%; transition:.2s; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.switch input:checked + .slider{background:#ef4444}
.switch input:checked + .slider:before{transform:translateX(24px)}
.segmented{
  display:flex; background:#eef4ee; border-radius:18px; padding:4px; gap:4px;
}
.segmented button{
  flex:1; height:44px; border:0; border-radius:14px; background:transparent; font-weight:800; color:#475569; cursor:pointer;
}
.segmented button.active{background:#fff; color:#0f172a; box-shadow:0 6px 18px rgba(15,23,42,.06)}
.segmented button.active.highway{background:#ecfeff; color:#0f766e}
.cta{
  height:54px; border:0; border-radius:16px; padding:0 18px;
  background:linear-gradient(180deg,#2ad164 0%, #16a34a 100%);
  color:#fff; font-weight:900; font-size:1rem; cursor:pointer;
  box-shadow:0 12px 24px rgba(34,197,94,.22);
}
.results-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.card{padding:22px}
.card.kickered .kicker, .kicker{
  font-size:.82rem; text-transform:uppercase; letter-spacing:.09em; font-weight:900; color:#64748b; margin-bottom:10px;
}
.card h3{margin:0; font-size:1.9rem; line-height:1.05; letter-spacing:-.03em}
.card .address{margin:10px 0 0; color:#667085; line-height:1.45}
.pill-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.pill, .soft-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; font-size:.96rem; font-weight:900; border:1px solid transparent;
}
.soft-pill{
  background:#f4f6f4; color:#334155; border-color:#e7ede6; font-weight:800;
}
.pill.blue{background:#e6f0ff; border-color:#91b8ff; color:#1d4ed8}
.pill.green{background:#e8f9ec; border-color:#90e3a7; color:#137a37}
.pill.lime{background:#f1ff9f; border-color:#a3e635; color:#486313; box-shadow:0 0 0 4px rgba(219,255,102,.35) inset}
.pill.orange{background:#fff1d9; border-color:#f3bd63; color:#9a5a02}
.pill.red{background:#ffe8e8; border-color:#f3a0a0; color:#b42318}
.pill.tiffany{background:#ddfbf6; border-color:#7bdacb; color:#0f766e}
.metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px;
}
.metrics > div{
  background:#fbfcfb; border:1px solid #edf2ec; border-radius:18px; padding:14px;
}
.metrics b{display:block; font-size:1.45rem; line-height:1.1}
.metrics span{display:block; margin-top:4px; color:#667085}
.near-card{border-color:#b9d5ff; background:linear-gradient(180deg,#f7fbff 0%, #fff 100%)}
.best-card{border-color:#8ee6a8; background:linear-gradient(180deg,#f1fdf4 0%, #fff 100%)}
.highway-card{border-color:var(--tiffany-border); background:linear-gradient(180deg,#effcfb 0%, #fff 100%)}
.summary{
  margin-top:16px; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.summary span{display:block; color:#64748b; font-weight:800}
.summary b{display:block; font-size:2.4rem; line-height:1.05; margin-top:4px}
.summary strong{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:230px; height:56px; border-radius:999px; padding:0 20px;
  font-size:1.05rem; font-weight:900; border:1px solid #a3e635; background:#f1ff9f; color:#486313;
}
.notice{
  margin-top:16px; padding:14px 16px; border-radius:16px; border:1px solid #cae4ff; background:#eef6ff; color:#285d9a; font-weight:700;
}
.alt-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.map-box{
  margin-top:22px; padding:24px; min-height:260px; display:flex; align-items:center; justify-content:center;
  color:#64748b; font-weight:800;
  background:
    linear-gradient(135deg, rgba(16,185,129,.08), transparent 32%),
    linear-gradient(225deg, rgba(59,130,246,.08), transparent 28%),
    #fff;
}
.map-live{
  display:block;
  padding:0;
  height:360px;
  min-height:360px;
  overflow:hidden;
  border:1px solid #dbe7d7;
  border-radius:18px;
}
.map-message{
  margin-top:10px;
  color:#64748b;
  font-weight:800;
}
.rp-map-icon{
  background:transparent;
  border:0;
}
.rp-map-marker{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff;
  font-size:.72rem;
  font-weight:950;
  border:3px solid #fff;
  box-shadow:0 10px 20px rgba(15,23,42,.22);
}
.rp-map-marker.origin{background:#2563eb}
.rp-map-marker.reference{background:#64748b}
.rp-map-marker.best{background:#16a34a}
.rp-map-marker.alternative{background:#0f766e}
.leaflet-popup-content{
  font-family:inherit;
  color:#0f172a;
  line-height:1.45;
}
.origin-notice{
  margin:16px 0 0;
}
.status-card{
  margin-top:16px;
  padding:13px 15px;
  border-radius:16px;
  border:1px solid #cae4ff;
  background:#eef6ff;
  color:#285d9a;
  font-weight:800;
}
.status-card p{
  margin:0;
  line-height:1.45;
}
.status-card.status-error{
  border-color:#fecaca;
  background:#fff1f1;
  color:#b42318;
}
.status-card.status-ok{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#166534;
}
.footer{
  margin-top:24px; padding:24px 0 40px; color:#667085; font-size:.95rem; line-height:1.6;
}
.footer-links{
  margin-top:10px; display:flex; gap:10px; flex-wrap:wrap;
}
.footer-links a{
  padding:8px 12px; border:1px solid rgba(15,23,42,.08); border-radius:999px; background:#fff; font-weight:700;
}
.page-card{padding:28px; margin-top:24px}
.page-card h1{margin:0 0 10px; font-size:2.3rem; letter-spacing:-.04em}
.page-card h2{margin:28px 0 10px; font-size:1.35rem}
.page-card p, .page-card li{line-height:1.7; color:#334155}
.page-card ul{padding-left:20px}
.hidden{display:none !important}
@media (max-width: 980px){
  .grid-form{grid-template-columns:1fr 1fr}
  .results-grid, .alt-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .topbar-inner{padding:12px 0}
  .nav{display:none}
  .hero{padding:20px 18px 26px}
  .hero img{width:min(320px,88%)}
  .hero h1{text-align:left; font-size:2.2rem}
  .hero p,.hero strong{text-align:left}
  .grid-form{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr}
  .summary{flex-direction:column; align-items:flex-start}
  .summary strong{width:100%}
  .section-title{font-size:1.65rem}
}

.collab-card{
  margin-top:24px;
  padding:24px 26px;
  border:1px solid #cfe0ff;
  border-radius:28px;
  background:
    radial-gradient(circle at 94% 15%, rgba(34,197,94,.12), transparent 26%),
    linear-gradient(180deg,#f8fbff 0%, #ffffff 100%);
  box-shadow:var(--shadow);
}
.collab-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:#eef4ff; border:1px solid #c9d9ff; color:#1e40af; font-size:.9rem; font-weight:900;
  margin-bottom:12px;
}
.collab-card h3{margin:0 0 8px; font-size:1.55rem; letter-spacing:-.03em}
.collab-card p{margin:0; color:#334155; line-height:1.65; font-size:1.03rem; max-width:860px}
.collab-actions{margin-top:16px}
.link-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 18px; border-radius:14px;
  background:linear-gradient(180deg,#1e63c9 0%, #0f4c92 100%); color:#fff; font-weight:900;
  box-shadow:0 12px 24px rgba(15,76,146,.18);
}

/* v0.9: card collaborazione pulita, senza doppio badge gigante */
.ps-collab{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:28px;
  align-items:center;
  margin-top:24px;
  padding:26px;
  border:1px solid #b9d5ff;
  border-radius:30px;
  background:
    radial-gradient(circle at 92% 18%, rgba(34,197,94,.20), transparent 25%),
    radial-gradient(circle at 8% 92%, rgba(37,99,235,.12), transparent 28%),
    linear-gradient(135deg,#f8fbff 0%, #ffffff 62%, #f1fff8 100%);
  box-shadow:0 22px 54px rgba(15,23,42,.10);
  overflow:hidden;
}
.ps-logo-box{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  border-radius:26px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(37,99,235,.18);
  box-shadow:0 14px 28px rgba(37,99,235,.10);
}
.ps-logo-box img{
  width:250px;
  max-width:100%;
  height:auto;
  display:block;
}
.ps-copy{min-width:0}
.ps-eyebrow{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#2563eb 0%,#10b981 100%);
  color:#fff;
  font-size:.9rem;
  font-weight:950;
  box-shadow:0 10px 22px rgba(37,99,235,.18);
  margin-bottom:12px;
}
.ps-collab h3{
  margin:0 0 8px;
  font-size:1.8rem;
  letter-spacing:-.035em;
}
.ps-collab p{
  margin:0;
  color:#334155;
  line-height:1.65;
  font-size:1.05rem;
}
.collab-actions{margin-top:18px}
.link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 20px;
  border-radius:16px;
  background:linear-gradient(180deg,#2563eb 0%,#0f4c92 100%);
  color:#fff;
  font-weight:950;
  box-shadow:0 14px 26px rgba(15,76,146,.22);
}
.data-status-card{
  margin-top:16px;
  padding:16px;
  border-radius:20px;
  border:1px solid #dbeafe;
  background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
}
.data-status-head{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.data-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#eef6ff;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
  font-weight:900;
}
.data-status-card p{
  margin:10px 0 0;
  color:#475569;
  line-height:1.55;
}
.secondary-btn{
  border:1px solid #bfdbfe;
  border-radius:14px;
  background:#fff;
  color:#1d4ed8;
  font-weight:950;
  min-height:42px;
  padding:0 14px;
  cursor:pointer;
}
.secondary-btn:disabled{opacity:.65;cursor:wait}
@media (max-width: 760px){
  .ps-collab{grid-template-columns:1fr;padding:20px}
  .ps-logo-box{justify-content:flex-start}
  .ps-logo-box img{width:220px}
}


/* v0.10 collaborazione PrezzoSchietto: solo titolo, testo e bottone */
.ps-collab{
  display:block;
  margin-top:24px;
  padding:26px 30px;
  border:1px solid #b9d5ff;
  border-radius:30px;
  background:
    radial-gradient(circle at 92% 18%, rgba(34,197,94,.20), transparent 26%),
    radial-gradient(circle at 8% 92%, rgba(37,99,235,.10), transparent 30%),
    linear-gradient(135deg,#f8fbff 0%, #ffffff 62%, #f1fff8 100%);
  box-shadow:0 22px 54px rgba(15,23,42,.10);
}
.ps-collab .ps-copy.solo{max-width:980px;}
.ps-collab h3{
  margin:0 0 12px;
  font-size:1.75rem;
  letter-spacing:-.035em;
  color:#0f172a;
}
.ps-collab p{
  margin:0;
  color:#334155;
  line-height:1.65;
  font-size:1.05rem;
}
.ps-collab .collab-actions{margin-top:18px;}
.ps-collab .link-btn{
  min-height:52px;
  padding:0 22px;
  border-radius:16px;
  background:linear-gradient(180deg,#2d6fe3 0%, #1753a9 100%);
  color:#fff;
  font-weight:950;
  box-shadow:0 14px 26px rgba(15,76,146,.22);
}
.ps-logo-box,.ps-eyebrow{display:none !important;}

.consumption-note{
  margin:14px 0 0;
  color:#667085;
  font-size:.96rem;
  line-height:1.5;
}
.consumption-note b{
  color:#475569;
}

.geo-btn{
  margin-top:10px;
  min-height:42px;
  width:100%;
  border:1px solid #bfdbfe;
  border-radius:14px;
  background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
  color:#1d4ed8;
  font-weight:950;
  cursor:pointer;
}
.geo-btn:disabled{
  opacity:.7;
  cursor:wait;
}
.geo-status{
  margin:8px 0 0;
  color:#667085;
  font-size:.9rem;
  line-height:1.35;
}
.geo-status.ok{
  color:#166534;
  font-weight:800;
}
.nav-action{
  margin-top:16px;
}
.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border-radius:14px;
  background:linear-gradient(180deg,#22c55e 0%,#16a34a 100%);
  color:#fff;
  font-weight:950;
  box-shadow:0 12px 24px rgba(34,197,94,.20);
}


/* v0.24 - allineamento form e posizione nota consumi */
.hero-card,
.tool-card,
.search-card,
.calculator-card,
.panel-card{
  align-self:start;
}

/* Riduce il vuoto sopra il blocco carburante/consumi e compatta la card */
.form-grid,
.controls-grid,
.input-grid,
.fuel-grid{
  align-items:end;
  row-gap:10px;
}

/* Se il form usa una grid generica dentro la card principale, compattiamo senza rompere mobile */
.card form,
.tool-card form,
.search-card form{
  margin-top:0;
}

/* La nota consumi deve vivere subito sotto Carburante/Litri/Consumo, non in fondo al mondo */
.consumption-note{
  margin:8px 0 14px !important;
  color:#667085;
  font-size:.94rem;
  line-height:1.45;
  grid-column:1 / -1;
}
.consumption-note b{
  color:#344054;
  font-weight:800;
}

/* Alza visivamente il blocco del pieno rispetto a prima */
.fuel-section,
.consumption-section,
.controls-section{
  margin-top:4px !important;
}

/* In caso il blocco modalità abbia troppo respiro sopra, lo avviciniamo */
.mode-label,
.section-kicker{
  margin-top:10px !important;
}

/* Mobile: mantieni leggibilità */
@media (max-width: 760px){
  .consumption-note{
    margin:6px 0 12px !important;
    font-size:.9rem;
  }
}


/* v0.26 - form pulito: posizione a sinistra, controlli alzati a destra */
.search-controls-layout{
  display:grid;
  grid-template-columns: minmax(260px, .95fr) minmax(520px, 2.05fr);
  gap:20px;
  align-items:start;
}

.fuel-controls-block{
  align-self:start;
}

.fuel-controls-row{
  display:grid;
  grid-template-columns: minmax(170px, .95fr) minmax(190px, 1.05fr) minmax(180px, .95fr) 86px;
  gap:16px;
  align-items:end;
}

.fuel-controls-row .field,
.location-field{
  align-self:start;
}

.self-field .toggle-line{
  height:54px;
  padding-bottom:0;
  align-items:center;
}

.liters-field .range-wrap{
  height:54px;
  padding:3px 0 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.consumption-note{
  margin:10px 0 0 !important;
  color:#667085;
  font-size:.94rem;
  line-height:1.45;
}

.consumption-note b{
  color:#344054;
  font-weight:900;
}

.mode-action-row{
  margin-top:16px;
  display:grid;
  grid-template-columns:minmax(260px, 1fr) auto;
  gap:20px;
  align-items:end;
}

.mode-block label{
  display:block;
  margin-bottom:8px;
  font-weight:800;
  color:#334155;
}

.mode-action-row .cta{
  min-width:220px;
  height:54px;
}

.geo-btn{
  margin-top:10px;
  min-height:42px;
  width:100%;
  border:1px solid #bfdbfe;
  border-radius:14px;
  background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
  color:#1d4ed8;
  font-weight:950;
  cursor:pointer;
}

.geo-btn:disabled{
  opacity:.7;
  cursor:wait;
}

.geo-status{
  margin:8px 0 0;
  color:#667085;
  font-size:.9rem;
  line-height:1.35;
}

.geo-status.ok{
  color:#166534;
  font-weight:800;
}

.nav-action{
  margin-top:16px;
}

.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border-radius:14px;
  background:linear-gradient(180deg,#22c55e 0%,#16a34a 100%);
  color:#fff;
  font-weight:950;
  box-shadow:0 12px 24px rgba(34,197,94,.20);
}

@media (max-width: 980px){
  .search-controls-layout{
    grid-template-columns:1fr;
  }
  .fuel-controls-row{
    grid-template-columns:1fr 1fr;
  }
  .mode-action-row{
    grid-template-columns:1fr;
  }
  .mode-action-row .cta{
    width:100%;
  }
}

@media (max-width: 640px){
  .fuel-controls-row{
    grid-template-columns:1fr;
  }
}
/* Fix Leaflet map layout on Vercel */
.leaflet-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}

.leaflet-tile {
  max-width: none !important;
  max-height: none !important;
  user-select: none;
}

.leaflet-tile-pane {
  z-index: 200;
}

.leaflet-overlay-pane {
  z-index: 400;
}

.leaflet-marker-pane {
  z-index: 600;
}

.leaflet-popup-pane {
  z-index: 700;
}

.leaflet-control {
  position: relative;
  z-index: 800;
}

.map-live {
  width: 100%;
  height: 360px;
  min-height: 360px;
}