:root { --ink:#11251d; --muted:#5b6c64; --green:#137a52; --mint:#e5f5ed; --line:#d9e4de; --paper:#fffdf9; }
* { box-sizing:border-box; }
body { margin:0; background:#f5f7f4; color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; line-height:1.45; }
.page { max-width:1120px; padding:56px 24px 80px; margin:auto; }
header { max-width:720px; margin-bottom:32px; }
.eyebrow { color:var(--green); font-size:.78rem; font-weight:800; letter-spacing:.09em; margin:0 0 8px; }
h1 { font-size:clamp(2.15rem, 5vw, 4rem); line-height:1.04; margin:0; letter-spacing:-.055em; }
h2 { font-size:1.25rem; margin:0 0 18px; letter-spacing:-.02em; } h3 { margin:28px 0 10px; font-size:1rem; }
.optional { color:var(--muted); font-weight:500; font-size:.83rem; }.field-note { color:var(--muted); font-size:.82rem; margin:-8px 0 16px; }
.intro { color:var(--muted); font-size:1.12rem; margin:16px 0 0; }
.layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr); gap:22px; align-items:start; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 7px 24px #11251d0a; }
form { padding:28px; } form section + section { border-top:1px solid var(--line); margin-top:26px; padding-top:26px; }
.grid { display:grid; gap:15px; }.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
label { display:grid; gap:7px; font-size:.86rem; font-weight:700; } .preset { margin-bottom:15px; } input,select { width:100%; border:1px solid #c8d5ce; border-radius:9px; background:#fff; color:var(--ink); font:inherit; font-weight:500; padding:11px 12px; } input:focus,select:focus { outline:3px solid #a5ddc2; border-color:var(--green); }
button { border:0; border-radius:9px; background:var(--green); color:#fff; cursor:pointer; width:100%; margin-top:26px; padding:14px 18px; font:inherit; font-weight:800; font-size:1rem; } button:hover { background:#0e6744; }.secondary { background:#e2f2e9; color:var(--green); margin-top:16px; }.secondary:hover { background:#d0eadb; }.text-button { background:transparent; color:var(--green); width:auto; margin:0; padding:4px; font-size:.85rem; }.text-button:hover { background:transparent; text-decoration:underline; }
.results { padding:28px; position:sticky; top:18px; }.total { font-size:3rem; line-height:1; font-weight:850; letter-spacing:-.06em; margin:4px 0 25px; }.highlights { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.highlights div { padding:12px; background:var(--mint); border-radius:10px; }.highlights span { display:block; color:var(--muted); font-size:.78rem; }.highlights strong { font-size:1.1rem; }.finance-result { margin-top:15px; padding:14px; border:1px solid #b9dbc9; border-radius:10px; background:#f2faf5; }.finance-result span,.finance-result small { display:block; color:var(--muted); font-size:.78rem; }.finance-result strong { display:block; font-size:1.45rem; letter-spacing:-.03em; margin:2px 0 4px; }.breakdown { list-style:none; padding:0; margin:0; }.breakdown li { display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.91rem; }.breakdown span { color:var(--muted); }.note { color:var(--muted); font-size:.78rem; margin:20px 0 0; }.comparison { padding:25px 28px; margin-top:22px; }.comparison-head { display:flex; justify-content:space-between; align-items:start; gap:16px; }.comparison-head h2 { margin-bottom:0; }.muted { color:var(--muted); }.comparison-scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; margin-top:12px; text-align:left; } th,td { border-top:1px solid var(--line); padding:13px 8px; white-space:nowrap; } th { color:var(--muted); font-size:.78rem; } td:first-child { font-weight:750; } td:last-child { text-align:right; }.how { margin-top:22px; padding:24px 28px; }.how p { color:var(--muted); margin:0; }
@media (max-width:760px) { .page { padding:34px 16px 50px; }.layout { grid-template-columns:1fr; }.results { position:static; }.two { grid-template-columns:1fr; }.total { font-size:2.6rem; } }
.compact { width:auto; margin-top:0; padding:10px 13px; font-size:.85rem; }
.budget-result { margin-top:15px; padding:14px; border:1px solid #b9dbc9; border-radius:10px; background:#f2faf5; }.budget-result span,.budget-result small { display:block; color:var(--muted); font-size:.78rem; }.budget-result strong { display:block; font-size:1.45rem; letter-spacing:-.03em; margin:2px 0 4px; }.budget-result.good { background:#eef9f2; border-color:#b9dbc9; }.budget-result.warn { background:#fff7df; border-color:#edd594; }.budget-result.high { background:#fff0ed; border-color:#f1b4a7; }
.cost-types { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:15px; }.cost-types div { padding:11px; border-radius:10px; background:#f3f5f3; }.cost-types span { display:block; color:var(--muted); font-size:.78rem; }.cost-types strong { font-size:.98rem; }
.comparison-insight { background:var(--mint); border-radius:10px; padding:12px; font-weight:700; }.comparison-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

.field-help { display:block; color:var(--muted); font-size:.72rem; font-weight:500; margin-top:2px; }
.ad-section { margin-top:22px; }
.ad-placeholder {
  min-height:90px;
  border:1px dashed #c8d5ce;
  border-radius:12px;
  background:#f8faf8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:4px;
  color:var(--muted);
}
.ad-placeholder span { font-size:.68rem; font-weight:800; letter-spacing:.12em; }
.ad-placeholder small { font-size:.72rem; }
.page-ad { margin-bottom:22px; }

.tax-result { margin-top:15px; border:1px solid #b9dbc9; border-radius:12px; background:#f2faf5; overflow:hidden; }
.tax-result > div { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid #d9e4de; }
.tax-result span { color:var(--muted); font-size:.8rem; }
.tax-result strong { font-size:1.08rem; }
.tax-result .tax-total { background:var(--mint); }
.tax-result .tax-total strong { font-size:1.3rem; }
.tax-result > small { display:block; padding:10px 14px; color:var(--muted); font-size:.72rem; }

.cost-type { position:relative; min-width:0; }
.cost-type-label { display:flex; align-items:center; gap:6px; justify-content:space-between; }
.info-button {
  width:20px;
  height:20px;
  margin:0;
  padding:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#dfe9e4;
  color:var(--green);
  font-size:.72rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  flex:0 0 20px;
}
.info-button:hover { background:#cfe2d8; }
.info-button:focus-visible { outline:3px solid #a5ddc2; outline-offset:2px; }
.info-popover strong { display:block; font-size:.82rem; margin-bottom:4px; }
.info-popover p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.4; }


/* === Cost information tooltip === */
.info-popover {
  position:absolute;
  z-index:100;
  top:calc(100% + 8px);
  left:0;
  width:280px;
  max-width:calc(100vw - 48px);
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 22px #11251d18;
  color:var(--ink);
  display:block;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.info-popover strong {
  display:block;
  font-size:.82rem;
  margin-bottom:4px;
}

.info-popover p {
  margin:0;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.4;
}

/* Hover opens only the tooltip belonging to the card under the cursor. */
.cost-type:hover .info-popover,
.cost-type:focus-within .info-popover,
.cost-type.info-open .info-popover {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/* When the user explicitly clicks one, suppress the other tooltip. */
.cost-types .cost-type:not(.info-open):not(:hover):not(:focus-within) .info-popover {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@media (max-width:760px) {
  .info-popover {
    left:auto;
    right:0;
    width:min(280px, calc(100vw - 48px));
  }
}

.real-cost-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.real-cost-summary>div{padding:14px;border-radius:12px;background:var(--mint);border:1px solid #c9e3d5}.real-cost-summary span,.fuel-grid span{display:block;color:var(--muted);font-size:.75rem}.real-cost-summary strong{display:block;margin-top:4px;font-size:1.2rem}.budget-preview{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fafcfb}.budget-preview>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #edf1ee}.budget-status{font-size:.78rem;font-weight:700}.fuel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.fuel-grid>div{padding:12px;border-radius:10px;background:#f3f5f3}.fuel-grid strong{display:block;margin-top:3px}.fuel-saving{margin-top:12px;padding:13px;border-radius:11px;background:#f2faf5;border:1px solid #c9e3d5}.fuel-saving span,.fuel-saving small{display:block}.comparison-insight{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.comparison-insight>div{padding:13px;border-radius:11px;background:#f2faf5;border:1px solid #c9e3d5}.comparison-insight span,.comparison-insight small{display:block;color:var(--muted);font-size:.75rem}@media(max-width:760px){.real-cost-summary,.fuel-grid,.comparison-insight{grid-template-columns:1fr}}

/* Calcolatore carburante compatto */
.fuel-calculator.fuel-compact{
  max-width:600px;
  padding:12px 14px;
}
.fuel-calculator.fuel-compact h2{font-size:.95rem;margin-bottom:3px}
.fuel-calculator.fuel-compact>p{font-size:.68rem;margin-bottom:7px}
.fuel-calculator.fuel-compact .grid{gap:6px}
.fuel-calculator.fuel-compact label{font-size:.67rem;gap:3px}
.fuel-calculator.fuel-compact input,.fuel-calculator.fuel-compact select{min-height:31px;padding:6px 8px;font-size:.74rem}
.fuel-calculator.fuel-compact .fuel-grid{gap:5px;margin-top:6px}
.fuel-calculator.fuel-compact .fuel-grid>div{padding:6px}
.fuel-calculator.fuel-compact .fuel-grid strong{font-size:.78rem}
@media(max-width:760px){.fuel-calculator.fuel-compact{max-width:100%}}

/* === V5: confronto sempre visibile dopo "Aggiungi al confronto" === */
.comparison-result {
  margin-top: 12px;
}
.comparison-result-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--mint);
}
.comparison-result-card strong {
  font-size: .95rem;
}
.comparison-result-card span {
  font-size: .78rem;
  color: var(--muted);
}

/* === Avviso aggiunta al confronto === */
.comparison-notice{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--mint);display:flex;flex-direction:column;gap:3px;font-size:.78rem}
.comparison-notice[hidden]{display:none}
.comparison-notice.show{animation:comparisonNoticeIn .18s ease-out}
@keyframes comparisonNoticeIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

.noscript-note{margin:16px auto;padding:12px 16px;max-width:1100px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text)}