/* =========================================================
   SGPV — HERO full-screen + Wizard (stili isolati)
   ========================================================= */

/* ================= HERO FULL-BLEED FULL SCREEN ================= */

/* Full-bleed anche in temi boxed */
.hero-wrapper{
  position:relative;
  width:100vw;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  min-height:100vh;
  background:url('https://www.sinergeticagroup.com/wp-content/uploads/2025/08/hero-fv.jpg') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
}

/* Oscuramento leggero per leggere i testi */
.hero-wrapper .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
  z-index:0;
}

/* Contenuti centrati e responsivi */
.hero-content{
  position:relative; z-index:1;
  width:100%; max-width:1100px;
  padding: clamp(16px, 3vw, 32px);
  text-align:center; color:#fff;
}

/* Titolo e sottotitolo sopra al box */
.hero-title{
  margin:0 0 .4rem;
  font-weight:800;
  letter-spacing:-.015em;
  font-size: clamp(20px, 3.5vw, 40px);
  color:#f8fafc;
  text-transform: uppercase;
}
.hero-subtitle{
  margin:0 auto clamp(18px, 3vh, 28px);
  max-width: 900px;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height:1.5;
  color:#e5e7eb;
}

/* ================= WIZARD BOX (scoping: #sgpv-app) ================= */

#sgpv-app, #sgpv-app * { box-sizing: border-box; }

#sgpv-app{
  --brand: #16a34a;
  --brand-700:#15803d;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --chip:#ffffff;
  --chip-line:#d1d5db;
  --chip-active:#f0fdf4;
  --shadow: 0 12px 34px rgba(0,0,0,.22);

  position:relative; z-index:1;
  max-width: 820px; width:100%;
  margin: 0 auto;
  padding: 28px 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);

  background: rgba(255,255,255,.95);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Progress */
#sgpv-app .sgpv-progress{
  text-align:center; font-size:.9rem; color:var(--muted); margin-bottom:18px;
}
#sgpv-app .sgpv-bar{
  width:100%; height:6px; background:#edf2f7; border-radius:999px; overflow:hidden; margin-top:6px;
}
#sgpv-app .sgpv-bar>div{
  height:100%; background:var(--brand); border-radius:999px;
}

/* Titoli wizard */
#sgpv-app .sgpv-title{
  text-align:center; font-size:1.6rem; font-weight:800; margin:6px 0 .4rem; color:var(--text);
}
#sgpv-app .sgpv-sub{
  text-align:center; font-size:1rem; color:var(--muted); margin:4px auto 18px; max-width:720px;
}

/* Grid / Row */
#sgpv-app .sgpv-grid{ display:grid; gap:12px; margin-bottom:16px; }
#sgpv-app .sgpv-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
#sgpv-app .sgpv-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
#sgpv-app .sgpv-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* Cards & Chips (unificato) */
#sgpv-app .sgpv-card,
#sgpv-app .sgpv-chip{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 16px; min-height:46px;
  border:1.5px solid var(--chip-line); border-radius:12px; background:var(--chip);
  color:var(--text); font-weight:700; font-size:1rem; cursor:pointer;
  transition:all .2s ease;
}
#sgpv-app .sgpv-card:hover,
#sgpv-app .sgpv-chip:hover{ border-color:var(--brand); }
#sgpv-app .sgpv-card.is-active,
#sgpv-app .sgpv-chip.is-active{
  border-color:var(--brand); background:var(--chip-active); color:#166534;
}

/* Campi / Input */
#sgpv-app .sgpv-field{ margin:10px 0 14px; text-align:center; }
#sgpv-app .sgpv-field label{ display:block; font-size:1rem; font-weight:700; margin-bottom:8px; }
#sgpv-app .sgpv-input-group{ display:flex; justify-content:center; align-items:center; gap:6px; }
#sgpv-app .sgpv-input-group.inline input{ max-width:240px; }

#sgpv-app .sgpv-field input[type="number"],
#sgpv-app .sgpv-field input[type="text"],
#sgpv-app .sgpv-field input[type="email"],
#sgpv-app .sgpv-field input[type="tel"]{
  width:100%; max-width:280px; height:48px; padding:0 12px;
  border:1.5px solid var(--chip-line); border-radius:12px; font-size:1rem; background:#fff;
}
#sgpv-app .sgpv-unit{ font-size:1rem; color:var(--muted); }

/* Range slider (consumi) */
#sgpv-app input[type="range"]{
  width:min(720px,88%); -webkit-appearance:none; height:6px;
  border-radius:999px; background:#e6eef6; outline:none;
}
#sgpv-app input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:#1e63c7; box-shadow:0 0 0 4px rgba(30,99,199,.15);
}

/* KPI */
#sgpv-app .sgpv-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px; margin:1.3rem 0;
}
#sgpv-app .sgpv-kpi{
  background:#f9fafb; border:1.5px solid var(--line); border-radius:12px; padding:14px; text-align:center;
}
#sgpv-app .sgpv-kpi-label{ font-size:.95rem; color:var(--muted); }
#sgpv-app .sgpv-kpi-value{ font-size:1.35rem; font-weight:800; color:var(--brand); }

/* Navigazione */
#sgpv-app .sgpv-nav{ display:flex; justify-content:center; gap:12px; margin-top:14px; }
#sgpv-app .sgpv-btn{
  padding:14px 22px; border-radius:12px; border:none; font-size:1rem; font-weight:800; cursor:pointer; transition:.2s background, .2s transform;
}
#sgpv-app .sgpv-btn:not(.sgpv-primary){ background:#f3f4f6; color:var(--text); }
#sgpv-app .sgpv-btn.sgpv-primary{ background:var(--brand); color:#fff; }
#sgpv-app .sgpv-btn.sgpv-primary:hover{ background:var(--brand-700); }
#sgpv-app .sgpv-btn:active{ transform: translateY(1px); }
#sgpv-app .is-disabled{ opacity:.55; cursor:not-allowed; }

/* Form finale */
#sgpv-app .sgpv-form{ display:grid; gap:12px; margin:1.3rem 0; }
#sgpv-app .sgpv-form input{
  width:100%; height:48px; border:1.5px solid var(--chip-line); border-radius:12px; padding:0 12px; font-size:1rem; background:#fff;
}
#sgpv-app .sgpv-form label{ font-size:.9rem; display:flex; align-items:center; gap:6px; }

/* Thank you */
#sgpv-app .sgpv-thanks{text-align:center; padding:2rem 1rem;}
#sgpv-app .sgpv-thanks h2{ font-size:1.8rem; color:var(--brand); margin-bottom:.5rem; }

/* Responsive */
@media (max-width: 640px){
  #sgpv-app{ padding:22px 14px; }
  #sgpv-app .sgpv-grid.cols-3{ grid-template-columns:1fr 1fr; }
  #sgpv-app .sgpv-title{ font-size:1.4rem; }
}
/* ====== Schermata finale: layout 2 colonne e sticky summary ====== */
#sgpv-app .sgpv-final-grid{
  display:grid; grid-template-columns: 1.35fr .85fr; gap:16px; align-items:start;
}
#sgpv-app .final-main{ min-width:0; }
#sgpv-app .sgpv-summary{ position:sticky; top:16px; align-self:start; }
#sgpv-app .summary-box{
  background:#ffffff; border:1.5px solid var(--line); border-radius:12px; padding:14px 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
#sgpv-app .summary-title{ font-weight:800; margin-bottom:10px; }
#sgpv-app .summary-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed #edf2f7; }
#sgpv-app .summary-row:last-child{ border-bottom:0; }
#sgpv-app .summary-row span{ color:var(--muted); font-size:.95rem; }
#sgpv-app .summary-row strong{ font-weight:800; color:#0f172a; }

/* Breakdown economico */
#sgpv-app .sgpv-breakdown{
  margin:10px 0 12px; background:#f9fafb; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
}
#sgpv-app .sgpv-breakdown .b-row{
  display:grid; grid-template-columns: 1fr auto auto; gap:12px; align-items:center; padding:6px 0;
}
#sgpv-app .sgpv-breakdown .b-row span{ color:var(--muted); }
#sgpv-app .sgpv-breakdown .b-row strong{ font-weight:800; color:#0f172a; }
#sgpv-app .sgpv-breakdown .b-row em{ font-style:normal; color:#065f46; font-weight:700; }
#sgpv-app .sgpv-breakdown hr{ border:none; border-top:1px solid #eaeef4; margin:6px 0; }
#sgpv-app .sgpv-breakdown .total strong{ color:#0e7490; }
#sgpv-app .sgpv-breakdown .cost strong{ color:#991b1b; }
#sgpv-app .sgpv-breakdown .margin strong{ color:#15803d; }
#sgpv-app .sgpv-breakdown .b-foot{ margin-top:6px; font-size:.95rem; color:#334155; }

@media (max-width: 900px){
  #sgpv-app .sgpv-final-grid{ grid-template-columns: 1fr; }
  #sgpv-app .sgpv-summary{ position:relative; top:auto; }
}
/* ====== Step finale semplificato: layout e stile ====== */
#sgpv-app .kpi-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin:12px 0 8px;
}
#sgpv-app .kpi-card{
  background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding:14px 16px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
#sgpv-app .kpi-value{
  font-size:1.5rem; font-weight:800; color:#0f172a; line-height:1.1;
}
#sgpv-app .kpi-label{ margin-top:4px; color:var(--muted); font-weight:700; }

/* breakdown semplice */
#sgpv-app .sgpv-simple{
  margin:10px 0 16px; background:#f9fafb; border:1.5px solid var(--line);
  border-radius:12px; padding:12px 14px;
}
#sgpv-app .sgpv-simple .s-row{
  display:grid; grid-template-columns: 1fr auto auto;
  gap:10px; align-items:center; padding:6px 0; border-bottom:1px dashed #e8edf3;
}
#sgpv-app .sgpv-simple .s-row:last-child{ border-bottom:0; }
#sgpv-app .sgpv-simple .s-row span{ color:var(--muted); }
#sgpv-app .sgpv-simple .s-row strong{ font-weight:800; color:#0f172a; }
#sgpv-app .sgpv-simple .s-row em{ font-style:normal; color:#065f46; font-weight:700; }
#sgpv-app .sgpv-simple .co2 strong{ color:#0e7490; }

/* layout due colonne */
#sgpv-app .sgpv-final-grid{
  display:grid; gap:16px; grid-template-columns: 1.35fr .85fr; align-items:start;
}
#sgpv-app .final-main{ min-width:0; }

#sgpv-app .sgpv-summary{ position:sticky; top:16px; align-self:start; }
#sgpv-app .summary-box{
  background:#ffffff; border:1.5px solid var(--line); border-radius:12px; padding:14px 14px;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}
#sgpv-app .summary-title{ font-weight:800; margin-bottom:10px; }
#sgpv-app .summary-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed #edf2f7; }
#sgpv-app .summary-row:last-child{ border-bottom:0; }
#sgpv-app .summary-row span{ color:var(--muted); font-size:.95rem; }
#sgpv-app .summary-row strong{ font-weight:800; color:#0f172a; }

/* checkbox custom */
#sgpv-app .chk{
  display:flex; align-items:center; gap:10px; margin-top:8px; user-select:none;
}
#sgpv-app .chk input{ position:absolute; opacity:0; pointer-events:none; }
#sgpv-app .chk .box{
  width:20px; height:20px; border-radius:6px; border:2px solid #cbd5e1;
  display:inline-block; position:relative; background:#fff; transition:.15s;
}
#sgpv-app .chk input:checked + .box{
  border-color: var(--brand); background: var(--brand);
  box-shadow:0 0 0 3px rgba(22,163,74,.15);
}
#sgpv-app .chk input:checked + .box:after{
  content:''; position:absolute; left:4px; top:1px; width:7px; height:12px;
  border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg);
}

/* responsive */
@media (max-width: 900px){
  #sgpv-app .sgpv-final-grid{ grid-template-columns:1fr; }
  #sgpv-app .sgpv-summary{ position:relative; top:auto; }
  #sgpv-app .kpi-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 540px){
  #sgpv-app .kpi-grid{ grid-template-columns:1fr; }
}

/* Hero styles */
.spv-hero{position:relative;min-height:60vh;padding:24px 16px}
.spv-hero.has-image{min-height:100vh;background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,.35)), var(--spv-hero) center/cover no-repeat}
.spv-hero__inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;text-align:center;color:#fff}
.spv-hero__title{font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(22px,3.6vw,40px);margin:0 0 8px;color:#fff}
.spv-hero__sub{font-size:clamp(14px,1.8vw,18px);margin:0 0 18px;color:#fff}
.spv-hero:not(.has-image) .spv-hero__inner{color:#0f172a}.spv-hero:not(.has-image) .spv-hero__title{color:#0f172a}.spv-hero:not(.has-image) .spv-hero__sub{color:#475569}
.spv-stage{position:relative;z-index:2;max-width:1100px;margin:12px auto 24px}

/* Group card + picklist */
.spv-group-card{border:1px solid #e5e7eb;background:#fff;border-radius:14px;padding:12px 14px;margin:12px 0;box-shadow:0 6px 16px rgba(2,6,23,.06)}
.spv-group-title{margin:0 0 8px;font-weight:800;color:#0f172a;font-size:14px}
#sgpv-app .spv-picklist{width:100%;appearance:none;border:1px solid #e5e7eb;background:#fff;color:#0f172a;padding:12px 14px;border-radius:12px;font-size:1rem;line-height:1.25;box-shadow:inset 0 1px 2px rgba(2,6,23,.05);}

/* Address full */
#sgpv-app .spv-address-full{width:100%;border:1px solid #e5e7eb;background:#fff;color:#0f172a;padding:12px 14px;border-radius:12px;font-size:1rem;line-height:1.25;box-shadow:inset 0 1px 2px rgba(2,6,23,.05);margin-bottom:6px}