/* Navigazione e leggibilita' di analizza.veringo.it: solo presentazione. */

/* ---------- attesa a passi (sostituisce lo spinner) ---------- */
#loader.vr-stepped .spinner{display:none}
#loader.vr-stepped #loadText{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vr-steps{list-style:none;margin:18px auto 0;padding:0;max-width:420px;text-align:left}
.vr-step{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:16px;line-height:1.35;color:#5b7187}
.vr-step.now{color:#082b62;font-weight:800}
.vr-step.done{color:#067a35;font-weight:700}
.vr-step-dot{flex:0 0 auto;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid #cbd8e2;background:#fff;font-size:15px;font-weight:900;color:#fff;box-sizing:border-box}
.vr-step.done .vr-step-dot{background:#067a35;border-color:#067a35}
.vr-step.now .vr-step-dot{border-color:#0a9a43;border-top-color:transparent;animation:vrspin .9s linear infinite}
@keyframes vrspin{to{transform:rotate(360deg)}}
.vr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.vr-step.now .vr-step-dot{animation:none;border-top-color:#0a9a43;background:#e8f7ee}}

/* ---------- risultato ripristinato dopo un refresh ---------- */
.vr-restored{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;margin:0 0 14px;padding:12px 14px;border:1px solid #cfe9da;border-radius:12px;background:#f5fcf8;font-size:15px;color:#082b62}
.vr-restored a{display:inline-flex;align-items:center;min-height:44px;font-weight:800;color:#067a35}

/* ---------- tooltip sui termini tecnici ---------- */
.vr-term{position:relative;white-space:nowrap}
.vr-tip{display:inline-grid;place-items:center;width:20px;height:20px;margin:0 2px 0 4px;padding:0;border:1.5px solid #0b5cb9;border-radius:50%;background:#fff;color:#0b5cb9;font:700 12px/1 Georgia,serif;font-style:italic;cursor:pointer;vertical-align:middle;position:relative}
.vr-tip::after{content:"";position:absolute;inset:-12px}          /* area di tocco 44x44 senza ingrandire l'icona */
.vr-tip:focus-visible{outline:3px solid #0d75e8;outline-offset:2px}
.vr-tip-pop{position:absolute;z-index:30;left:0;top:calc(100% + 8px);width:max-content;max-width:min(280px,80vw);padding:10px 12px;border-radius:10px;background:#082b62;color:#fff;font-size:14px;font-weight:500;line-height:1.45;white-space:normal;text-align:left;box-shadow:0 10px 24px rgba(8,43,98,.25)}
@media (hover:hover){.vr-term:hover .vr-tip-pop[hidden]{display:block}}

/* ---------- offerte: prima evidenziata, poi compatte; prime 5 ---------- */
#offerList .offer-item.vr-first{border:2px solid #0a9a43;box-shadow:0 10px 28px rgba(10,154,67,.14);padding:16px}
#offerList .offer-item.vr-compact{padding:11px 14px;margin-top:8px;background:#fff}
#offerList .offer-item.vr-compact .veringo-offer-meta{display:none}
#offerList .offer-item.vr-more-hidden{display:none!important}
.vr-more-offers{display:block;width:100%;max-width:420px;min-height:48px;margin:14px auto 4px;padding:10px 16px;border:2px solid #082b62;border-radius:12px;background:#fff;color:#082b62;font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.vr-more-offers:hover,.vr-more-offers:focus-visible{background:#f2f7fc}

/* ---------- contrasto WCAG AA (testi verdi e grigi chiari del risultato) ---------- */
#step5 [style*="color:#079d43"],#step5 [style*="color: #079d43"]{color:#067a35!important}
#step5 [style*="background:#079d43"]{background:#067a35!important}
#offerList .veringo-direct-link,#vrReviewOpenBtn{background:#067a35!important;border-color:#067a35!important;color:#fff!important}
#offerList .veringo-offer-meta,#vrDatasetUpdatedLabel{color:#4f6273!important}
#vrFilterCount,#vrGaugeState,.vr-gauge-legend .green,.saving-legend .green{color:#067a35!important}
.vr-gauge-legend .red,.gauge-labels .r{color:#b3261e!important}
.vr-gauge-legend .yellow,.gauge-labels .y{color:#805a00!important}
button.back{color:#067a35!important}

/* ---------- target di tocco minimo 44 px ---------- */
button.opt{min-height:44px}
button.back{min-height:44px;padding-top:10px;padding-bottom:10px}
#vrFilterBar button,#vrFilterFixed,#vrFilterVariable,#vrFilterMono,#vrFilterMulti,#vrFilterReset,#vrReviewOpenBtn,#offerList .veringo-detail-btn{min-height:44px}
#offerList .veringo-direct-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px}

/* ---------- testo minimo 14 px su smartphone (solo percorso e risultato) ---------- */
@media (max-width:767px){
  #step4 label,#step4 label span,#step4 label a{font-size:14px!important}
  #step5 small,#step5 .vr-label,#step5 .vr-sub,#savingTitle,#savingMonthly,#savingProof,#vrGaugeDesc,#vrMetricConsumptionLabel,
  #step5 .vr-info-link,#step5 .vrg-lead,#step5 .vrg-foot,#step5 .vrg-privacy-note,#vrFilterCount,#vrDatasetUpdatedLabel,
  #offerList .veringo-offer-meta,#offerList .veringo-direct-link,#offerList .veringo-detail-btn,#offerList .veringo-detail,
  #vrFilterFixed,#vrFilterVariable,#vrFilterMono,#vrFilterMulti,#vrFilterReset,#vrReviewOpenBtn,
  .vr-gauge-legend span,.gauge-labels span{font-size:14px!important}
  #step5 [style*="font-size:9px"],#step5 [style*="font-size:10px"],#step5 [style*="font-size:10.5px"],#step5 [style*="font-size:11px"],
  #step5 [style*="font-size:12px"],#step5 [style*="font-size:12.5px"],#step5 [style*="font-size:13px"]{font-size:14px!important}
  .vr-gauge-legend{gap:6px!important}
  /* regole originali con #veringoAppRoot .classe !important: qui due ID per prevalere */
  #step5 #savingTitle,#step5 #savingMonthly,#step5 #vrGaugeDesc,#step5 #savingProof,#step5 #savingProof b,
  #step5 .vr-metric span,#step5 #vrFilterCount b,#step5 #offerNote,#step5 #offerNote b{font-size:14px!important}
  /* numeri della scala sull'arco: a 14px si sovrappongono; le stesse fasce sono nella legenda leggibile sotto */
  #step5 .g0,#step5 .g5,#step5 .g20,#step5 .g35{display:none!important}
}

/* ---------- barra dei passi: contrasto; su smartphone una sola etichetta leggibile ---------- */
.progress .stepdot{color:#4f6273}
#vrStepLabel{display:none}
@media (max-width:767px){
  .progress .stepdot b{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap}
  #vrStepLabel{display:block;margin:0;padding:0 16px 12px;text-align:center;font-size:15px;font-weight:800;color:#082b62}
  #vrStepLabel span{font-weight:600;color:#4f6273}
}