/* Fuel Impact NZ - Styles (Redesign) */
/* Last updated: 3 April 2026 */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0A0A0A;
  --surface:#141414;
  --surface-2:#1C1C1C;
  --surface-3:#252525;
  --border:#222;
  --border-hover:#333;
  --text:#E5E5E5;
  --text-mid:#AAA;
  --text-dim:#888;
  --orange:#D4622A;
  --orange-light:#E8844A;
  --orange-glow:rgba(212,98,42,0.12);
  --orange-hover:#c05820;
  --red:#EF4444;
  --red-light:#F87171;
  --red-glow:rgba(239,68,68,0.10);
  --blue:#7ABED9;
  --blue-bg:rgba(122,190,217,0.08);
  --blue-border:rgba(122,190,217,0.2);
  --green:#6BCB8B;
  --green-bg:rgba(107,203,139,0.08);
  --green-border:rgba(107,203,139,0.2);
  --yellow:#EAB308;
  --yellow-bg:rgba(234,179,8,0.07);
  --yellow-border:rgba(234,179,8,0.18);
  --radius:12px;
  --radius-sm:8px;
  --header-h:52px;
}
/* ═══════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════ */
[data-theme="light"]{
  --bg:#F5F2EC;
  --surface:#FFFFFF;
  --surface-2:#EDE9E1;
  --surface-3:#E4DFD6;
  --border:rgba(60,50,40,0.10);
  --border-hover:rgba(60,50,40,0.18);
  --text:#2C2825;
  --text-mid:#5C5550;
  --text-dim:#8A847D;
  --orange:#C4612E;
  --orange-light:#D87A4A;
  --orange-glow:rgba(196,97,46,0.08);
  --orange-hover:#B0552A;
  --red:#C0475A;
  --red-light:#D4606F;
  --red-glow:rgba(192,71,90,0.07);
  --blue:#4A8EA8;
  --blue-bg:rgba(74,142,168,0.08);
  --blue-border:rgba(74,142,168,0.20);
  --green:#4A8F64;
  --green-bg:rgba(74,143,100,0.08);
  --green-border:rgba(74,143,100,0.20);
  --yellow:#A8841E;
  --yellow-bg:rgba(168,132,30,0.07);
  --yellow-border:rgba(168,132,30,0.18);
}
[data-theme="light"] .app-header{background:rgba(245,242,236,0.92)}
[data-theme="light"] .fuel-option label{background:var(--surface-2)}
[data-theme="light"] .vehicle-search-input{background:var(--surface-2)}
[data-theme="light"] .input-wrap input{background:var(--surface-2)}
[data-theme="light"] .poll-opt{background:var(--surface-2)}
[data-theme="light"] input[type="range"]::-webkit-slider-thumb{border-color:var(--surface)}
[data-theme="light"] .mode-btn.active{color:var(--orange)}

/* Theme toggle button - pill on desktop, circle on mobile */
.theme-toggle{padding:6px 14px;background:var(--surface);border:1px solid var(--border);border-radius:20px;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;font-family:'Plus Jakarta Sans',sans-serif;-webkit-tap-highlight-color:transparent}
.theme-toggle:hover{border-color:var(--border-hover);color:var(--text);background:var(--surface-2)}
.theme-toggle svg{width:14px;height:14px;flex-shrink:0}
.theme-label{font-size:.68rem;font-weight:600;letter-spacing:.02em}

html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
html,body{max-width:100vw;overflow-x:hidden}
body{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* ═══════════════════════════════════════════
   APP HEADER BAR
   ═══════════════════════════════════════════ */
.app-header{position:sticky;top:0;z-index:100;background:rgba(10,10,10,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);height:var(--header-h);padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.header-left{display:flex;align-items:center;gap:16px}
.header-logo{display:flex;align-items:center;gap:4px}
.logo-fuel{font-size:1.1rem;font-weight:800;color:var(--text);letter-spacing:-.03em}
.logo-impact{font-size:1.1rem;font-weight:800;color:var(--orange);letter-spacing:-.03em}
.header-sep{width:1px;height:22px;background:var(--border)}
.header-tagline{font-size:.72rem;color:var(--text-dim)}
.header-tagline strong{color:var(--text-mid);font-weight:700}
.header-right{display:flex;align-items:center;gap:16px}
.header-date{font-size:.68rem;color:var(--text-dim)}
.header-by{font-size:.68rem;color:var(--text-dim)}
.header-by a{color:var(--text-mid);text-decoration:none;font-weight:600;transition:color .15s}
.header-by a:hover{color:var(--text)}
.header-share{padding:7px 14px;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-dim);font-family:'Plus Jakarta Sans',sans-serif;font-size:.7rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s}
.header-share:hover{border-color:var(--border-hover);color:var(--text)}
.header-share svg{width:12px;height:12px}

/* ═══════════════════════════════════════════
   TWO-PANEL LAYOUT
   ═══════════════════════════════════════════ */
.app-body{max-width:560px;margin:0 auto;padding:20px 20px 0;overflow-x:hidden}
.panel-left,.panel-right{width:100%}
.panel-right{display:none}
.panel-right.show{display:block}

@media(min-width:1080px){
  .app-body{max-width:1360px;display:flex;flex-wrap:wrap;gap:0;padding:0}
  .panel-left{width:460px;min-width:460px;height:calc(100vh - var(--header-h));position:sticky;top:var(--header-h);overflow-y:auto;padding:28px 28px 48px 32px;border-right:1px solid var(--border);background:var(--bg)}
  .panel-right{flex:1;min-width:0;padding:28px 32px 48px}
  .panel-left::-webkit-scrollbar,.panel-right::-webkit-scrollbar{width:3px}
  .panel-left::-webkit-scrollbar-thumb,.panel-right::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
  .price-strip{grid-template-columns:repeat(4,1fr)}
  .price-strip .pg-price{font-size:.82rem}
  .price-strip .pg-cell{padding:8px 8px;gap:5px}
  .app-footer{flex:0 0 100%}
}

/* ═══════════════════════════════════════════
   PRICE STRIP (compact)
   ═══════════════════════════════════════════ */
.price-strip{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.price-strip .pg-cell{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:0;overflow:hidden}
.price-strip .pg-label{font-size:.62rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.price-strip .pg-prices{display:flex;flex-direction:column;gap:1px;min-width:0}
.price-strip .pg-price{font-size:.92rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.price-strip .pg-was{font-size:.56rem;color:var(--text-dim);font-weight:400;white-space:nowrap}
.price-strip .pg-pct{font-size:.52rem;font-weight:700;color:var(--red-light);background:var(--red-glow);padding:2px 6px;border-radius:10px;white-space:nowrap;margin-left:auto;flex-shrink:0}
.price-strip .pg-pct.down{color:var(--green);background:var(--green-bg)}

/* ═══════════════════════════════════════════
   CUSTOM PRICES TOGGLE
   ═══════════════════════════════════════════ */
.custom-prices-toggle-wrap{margin:0 0 12px;text-align:center}
.custom-prices-toggle-btn{background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--radius-sm);padding:12px 16px;width:100%;cursor:pointer;transition:all .15s;font-family:'Plus Jakarta Sans',sans-serif;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:space-between}
.custom-prices-toggle-btn:hover{border-color:rgba(14,165,233,0.45)}
.custom-prices-toggle-btn .cpt-text{font-size:.76rem;color:var(--text-dim);font-weight:500;text-align:left}
.custom-prices-toggle-btn .cpt-text strong{color:var(--blue);font-weight:700}
.custom-prices-toggle-btn .cpt-arrow{transition:transform .3s;font-size:.6rem;color:var(--text-dim)}
.custom-prices-toggle-btn.open .cpt-arrow{transform:rotate(180deg)}
.custom-prices-toggle-wrap.open{background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--radius);padding:16px;margin-bottom:12px;transition:all .3s}
.custom-prices-panel{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease;opacity:0}
.custom-prices-panel.open{max-height:500px;opacity:1}
.custom-prices-inner{padding:16px 0 0}
.cp-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:14px}
.cp-mode-btn{padding:10px 8px;text-align:center;cursor:pointer;font-size:.76rem;font-weight:600;color:var(--text-dim);transition:all .15s;background:transparent;border:0;font-family:'Plus Jakarta Sans',sans-serif;border-right:1px solid var(--border);-webkit-tap-highlight-color:transparent}
.cp-mode-btn:last-child{border-right:0}
.cp-mode-btn:hover{color:var(--text-mid);background:var(--surface-2)}
.cp-mode-btn.active{color:var(--text);background:var(--blue-bg);border-color:var(--blue-border)}
.cp-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cp-field{display:flex;flex-direction:column;gap:5px}
.cp-label{font-size:.72rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.cp-simple-field{display:none}
.cp-simple-field.show{display:block}

/* ═══════════════════════════════════════════
   STEP CARDS & FORM
   ═══════════════════════════════════════════ */
.step-card{padding:22px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;transition:all .15s}
.step-card:hover{border-color:var(--border-hover)}
.step-card.collapsed{padding:0}
.step-card.collapsed:hover{border-color:var(--border)}
.step-content{}
.step-card.collapsed .step-content{display:none}
.step-summary{display:none;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.step-card.collapsed .step-summary{display:flex}
.step-summary .step-badge{width:26px;height:26px;min-width:26px;flex-shrink:0}
.step-summary-text{flex:1;font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step-edit-btn{background:0;border:0;color:var(--orange-light);font-family:'Plus Jakarta Sans',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .15s;flex-shrink:0}
.step-edit-btn:hover{color:var(--orange);background:var(--orange-glow)}
.step-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.step-badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 10px;border-radius:20px;background:var(--orange);border:none;color:#fff;font-size:.65rem;font-weight:700;flex-shrink:0;letter-spacing:.04em}
.step-badge.done{background:var(--green)}
.step-title{font-size:.84rem;font-weight:700;letter-spacing:-.01em}

.field-group{margin-bottom:14px}
.field-group:last-child{margin-bottom:0}
.field-group label{display:block;font-size:.74rem;font-weight:600;color:var(--text-dim);margin-bottom:6px}

.field{display:flex;flex-direction:column;gap:7px}
.field-label{font-size:.78rem;font-weight:600;color:var(--text-mid);letter-spacing:.02em}

/* Mode toggle (Find my car / I know my L/100km) */
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:6px}
.mode-btn{padding:12px 10px;text-align:center;cursor:pointer;font-size:.76rem;font-weight:600;color:var(--text-dim);background:var(--surface);border:0;font-family:'Plus Jakarta Sans',sans-serif;border-right:1px solid var(--border);transition:all .15s;-webkit-tap-highlight-color:transparent}
.mode-btn:last-child{border-right:0}
.mode-btn:hover{color:var(--text-mid);background:var(--surface-2)}
.mode-btn.active{color:#fff;background:var(--orange-glow);border-color:var(--orange)}
.mode-btn .mode-label,.mode-btn .m-label{display:block;font-weight:700;font-size:.8rem;margin-bottom:2px}
.mode-btn .mode-sub,.mode-btn .m-sub{display:block;font-size:.62rem;font-weight:400;color:var(--text-dim)}

.mode-search,.mode-manual-entry{display:none}
.mode-search.active,.mode-manual-entry.active{display:block}

/* Vehicle search */
.vehicle-search-wrap{position:relative}
.vehicle-search-input{width:100%;padding:13px 16px;padding-right:44px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.92rem;font-weight:500;outline:0;transition:border-color .15s,box-shadow .15s}
.vehicle-search-input::placeholder{color:var(--text-dim);font-weight:400}
.vehicle-search-input:focus{border-color:var(--text-mid)}
.search-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none}
.vehicle-results{display:none;margin-top:6px;background:var(--surface-2);border:1px solid var(--border-hover);border-radius:var(--radius-sm);overflow:hidden}
.vehicle-results.open{display:block}
.vr-item{padding:14px 16px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border);background:var(--surface-2);-webkit-tap-highlight-color:transparent}
.vr-item:last-child{border-bottom:0}
.vr-item:hover,.vr-item:active{background:var(--surface-3)}
.vr-item .vr-name{font-size:.88rem;font-weight:600;color:var(--text)}
.vr-item .vr-meta{font-size:.72rem;color:var(--text-dim);margin-top:3px;font-weight:400}
.vr-item.manual{border-top:2px solid var(--border-hover);background:var(--surface-3)}
.vr-item.manual .vr-name{color:var(--orange-light);font-weight:500}

/* Selected vehicle */
.selected-vehicle{display:none;padding:14px 16px;background:var(--surface);border:1px solid var(--orange);border-radius:var(--radius-sm)}
.selected-vehicle.show{display:flex;align-items:center;justify-content:space-between}
.sv-name{font-size:.9rem;font-weight:700;color:var(--text)}
.sv-stats{font-size:.74rem;color:var(--text-mid);margin-top:3px;font-weight:400}
.sv-clear{background:0;border:0;color:var(--text-dim);cursor:pointer;padding:8px;font-size:1.3rem;line-height:1;transition:color .15s;border-radius:4px}
.sv-clear:hover{color:var(--text);background:var(--surface-2)}

/* Auto-detected fuel type */
.auto-detected{display:none;padding:10px 14px;background:var(--orange-glow);border:1px solid rgba(212,98,42,0.25);border-radius:var(--radius-sm);font-size:.78rem;color:var(--orange-light);font-weight:500}
.auto-detected.show{display:flex;align-items:center;gap:8px}
.auto-detected svg{flex-shrink:0}

/* Fuel type options */
.fuel-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fuel-option{position:relative}
.fuel-option input{position:absolute;opacity:0;pointer-events:none}
.fuel-option label{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;text-align:center}
.fuel-option label:hover{border-color:var(--border-hover)}
.fuel-option input:checked+label{border-color:var(--orange);background:var(--orange-glow)}
.fuel-name{font-size:.95rem;font-weight:800}
.fuel-type{font-size:.62rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* Input fields */
.input-wrap{position:relative}
.input-wrap input{width:100%;padding:13px 16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.92rem;font-weight:500;outline:0;transition:border-color .15s;-webkit-appearance:none}
.input-wrap input::placeholder{color:var(--text-dim);font-weight:400}
.input-wrap input:focus{border-color:var(--text-mid)}
.input-wrap .unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:.74rem;color:var(--text-dim);pointer-events:none;font-weight:600}
.input-wrap input[type="number"]{padding-right:56px}

/* Selects (for IWTC) */
.select-wrap{position:relative}
.select-wrap select{width:100%;padding:13px 16px;padding-right:40px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.92rem;font-weight:500;outline:0;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .15s}
.select-wrap select:focus{border-color:var(--text-mid)}
.select-wrap::after{content:'';position:absolute;right:16px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--text-dim);pointer-events:none}

/* Commute helper */
.commute-toggle{background:0;border:0;color:var(--blue);font-family:'Plus Jakarta Sans',sans-serif;font-size:.74rem;font-weight:500;cursor:pointer;padding:8px 0 0;display:inline-flex;align-items:center;gap:5px;-webkit-tap-highlight-color:transparent;transition:opacity .15s}
.commute-toggle:hover{opacity:.8}
.commute-arrow{transition:transform .3s;display:inline-block;font-size:.6rem}
.commute-toggle.open .commute-arrow{transform:rotate(180deg)}
.commute-calc{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease;opacity:0}
.commute-calc.open{max-height:300px;opacity:1}
.commute-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.commute-field{display:flex;flex-direction:column;gap:5px}
.commute-label{font-size:.72rem;font-weight:500;color:var(--text-dim)}
.commute-result{font-size:.82rem;font-weight:600;color:var(--green);margin-top:10px;display:none}
.commute-result.show{display:block}
.commute-hint{font-size:.68rem;color:var(--text-dim);margin-top:6px;font-weight:400}

/* Distance mode toggle (weekly/trip) */
.dist-weekly,.dist-trip{display:none}
.dist-weekly.active,.dist-trip.active{display:block}
.trip-hint{font-size:.68rem;color:var(--text-dim);margin-top:8px;font-weight:400}

/* Trip result card */
.trip-result{display:none;margin-bottom:24px}
.trip-result.show{display:block}
.trip-result-hero{padding:28px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:center;margin-bottom:12px;position:relative;overflow:hidden}
.trip-result-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-light))}
.trip-result-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-weight:700;margin-bottom:10px}
.trip-result-amount{font-size:2.4rem;font-weight:800;color:var(--text);line-height:1}
.trip-result-litres{font-size:.74rem;color:var(--text-dim);margin-top:8px}
.trip-result-compare{padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px}
.trip-compare-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0}
.trip-compare-row:not(:last-child){border-bottom:1px solid var(--border)}
.trip-compare-label{font-size:.8rem;color:var(--text-dim)}
.trip-compare-value{font-size:.82rem;font-weight:700}
.trip-compare-hl{color:var(--red)}
.trip-result-note{font-size:.62rem;color:var(--text-dim);text-align:center;line-height:1.5;font-style:italic}

/* Manual efficiency slider */
.efficiency-field{padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.efficiency-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.efficiency-val{font-size:.9rem;font-weight:700;color:var(--orange)}
input[type="range"]{width:100%;height:4px;-webkit-appearance:none;background:var(--border);border-radius:2px;outline:0;cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--orange);border:3px solid var(--bg);box-shadow:0 0 0 3px var(--orange-glow);cursor:pointer}
input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--orange);border:3px solid var(--bg);cursor:pointer}
.eff-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:.64rem;color:var(--text-dim);font-weight:500}
.bk-label{font-size:.8rem;color:var(--text-dim)}

/* ═══════════════════════════════════════════
   IWTC INPUT (Step 4 toggle)
   ═══════════════════════════════════════════ */
.iwtc-toggle-wrap{margin-bottom:12px}
.iwtc-toggle-btn{background:var(--green-bg);border:1px solid var(--green-border);border-radius:var(--radius-sm);padding:14px 18px;width:100%;cursor:pointer;transition:all .15s;font-family:'Plus Jakarta Sans',sans-serif;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:space-between}
.iwtc-toggle-btn:hover{border-color:var(--green)}
.iwtc-toggle-text{font-size:.78rem;color:var(--text-dim);font-weight:500;text-align:left}
.iwtc-toggle-text strong{color:var(--green);font-weight:700}
.iwtc-toggle-arrow{transition:transform .3s;font-size:.6rem;color:var(--text-dim)}
.iwtc-toggle-btn.open .iwtc-toggle-arrow{transform:rotate(180deg)}
.iwtc-toggle-wrap.open{background:var(--green-bg);border:1px solid var(--green-border);border-radius:var(--radius);padding:16px;margin-bottom:12px;transition:all .3s}
.iwtc-panel{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease;opacity:0}
.iwtc-panel.open{max-height:800px;opacity:1}
.iwtc-inner{padding:16px 0 0}
.iwtc-note{font-size:.76rem;color:var(--text);line-height:1.55;margin-bottom:14px;font-weight:400}
.iwtc-checks{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.iwtc-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;font-size:.82rem;color:var(--text);font-weight:400;line-height:1.4}
.iwtc-check input{position:absolute;opacity:0;pointer-events:none}
.iwtc-check-box{width:20px;height:20px;min-width:20px;border:2px solid var(--border-hover);border-radius:5px;display:flex;align-items:center;justify-content:center;transition:all .15s;background:var(--surface);margin-top:1px}
.iwtc-check input:checked~.iwtc-check-box{background:var(--green);border-color:var(--green)}
.iwtc-check input:checked~.iwtc-check-box::after{content:'\2713';color:#fff;font-size:.7rem;font-weight:800}
.iwtc-check-label{flex:1}
.iwtc-extra-fields{display:none;flex-direction:column;gap:12px;margin-bottom:14px}
.iwtc-extra-fields.show{display:flex}
.iwtc-field{display:flex;flex-direction:column;gap:5px}
.iwtc-field-label{font-size:.72rem;font-weight:600;color:var(--text-mid);text-transform:uppercase;letter-spacing:.06em}
.iwtc-select{width:100%;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:.88rem;font-weight:500;outline:0;transition:border-color .15s;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.iwtc-select:focus{border-color:var(--text-mid)}
.iwtc-disclaimer{font-size:.68rem;color:var(--text);line-height:1.55;font-weight:400;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.iwtc-disclaimer a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
/* IWTC Preview Hint */
.iwtc-preview{display:none;padding:12px 14px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;line-height:1.4;margin-bottom:14px}
.iwtc-preview.show{display:block}
.iwtc-preview.eligible{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green)}
.iwtc-preview.not-eligible{background:var(--red-glow);border:1px solid rgba(239,68,68,0.2);color:var(--red-light)}
.iwtc-preview.partial{background:var(--yellow-bg);border:1px solid var(--yellow-border);color:var(--yellow)}
.iwtc-preview .iwtc-preview-sub{font-size:.72rem;font-weight:400;color:var(--text-mid);margin-top:4px}

/* ═══════════════════════════════════════════
   CTA BUTTON
   ═══════════════════════════════════════════ */
.cta-btn{width:100%;padding:16px;background:linear-gradient(135deg,#D4622A,#E8844A);color:#fff;border:0;border-radius:var(--radius-sm);font-family:'Plus Jakarta Sans',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s;margin-top:4px;margin-bottom:24px}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,98,42,0.25)}
.cta-btn:active{transform:translateY(0)}

/* ═══════════════════════════════════════════
   RESULTS — SECTION PILLS
   ═══════════════════════════════════════════ */
.section-pill{display:inline-flex;align-items:center;height:26px;padding:0 14px;background:var(--orange-glow);border:none;border-radius:20px;font-size:.65rem;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;white-space:nowrap}
.section-header-row{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;min-height:32px;overflow:hidden}
.section-header-row .section-pill{margin-bottom:0}
.section-context{font-size:.74rem;color:var(--text-dim)}
.section-context strong{color:var(--text);font-weight:700}

/* ═══════════════════════════════════════════
   RESULTS — COST CARDS (Red top bar)
   ═══════════════════════════════════════════ */
.cost-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.cost-card{padding:20px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:center;position:relative;overflow:hidden}
.cost-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--red)}
.cost-card.yearly{border-color:rgba(239,68,68,0.2);background:linear-gradient(180deg,rgba(239,68,68,0.06),transparent)}
.cost-card.yearly::before{height:3px;background:linear-gradient(90deg,#EF4444,#F87171)}
.cost-period{font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);font-weight:700;margin-bottom:8px}
.cost-amount{font-size:1.5rem;font-weight:800;color:var(--red);line-height:1}
.cost-card.yearly .cost-amount{font-size:1.85rem;color:var(--red-light)}
.cost-amounts{}
.cost-detail{font-size:.66rem;color:var(--text-dim);margin-top:6px}
/* Simple mode override — white numbers */
.cost-card.simple-mode .cost-amount{color:var(--text)}
.cost-card.yearly.simple-mode .cost-amount{color:var(--orange-light)}

/* ═══════════════════════════════════════════
   RESULTS — OFFSET CARDS
   ═══════════════════════════════════════════ */
.offset-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:28px}
.offset-card{padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:flex-start;gap:10px}
.offset-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.offset-text{font-size:.76rem;color:var(--text-dim);line-height:1.4}
.offset-text strong{color:var(--text);font-weight:600}
.offset-text .hi{color:var(--red-light);font-weight:700}
.offset-text .hi-save{color:var(--green);font-weight:700}

/* ═══════════════════════════════════════════
   RESULTS — DUO GRID (breakdown + poll, iwtc + tips)
   ═══════════════════════════════════════════ */
.duo{display:grid;gap:12px;margin-bottom:16px}
@media(min-width:1080px){.duo{grid-template-columns:1fr 1fr;align-items:stretch}
.duo>.breakdown,.duo>.poll-card,.duo>.iwtc-result,.duo>.iwtc-result.show,.duo>.tips-card{display:flex;flex-direction:column}
.duo>.iwtc-result .iwtc-result-inner{flex:1}}

/* Breakdown */
.breakdown{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.breakdown-row:not(:last-child){border-bottom:1px solid var(--border)}
.bk-value{font-size:.82rem;font-weight:700}
.bk-value.hl{color:var(--red)}

/* ═══════════════════════════════════════════
   POLL CARD
   ═══════════════════════════════════════════ */
.poll-card{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.poll-sub{font-size:.7rem;color:var(--text-dim);margin-bottom:12px;margin-top:4px}
.poll-q{font-size:.88rem;font-weight:700;margin-bottom:12px;line-height:1.35}
.poll-opts{display:flex;flex-direction:column;gap:6px}
.poll-opt{padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;color:var(--text-dim);cursor:pointer;transition:all .12s;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.poll-opt:hover{border-color:var(--text-mid);color:var(--text)}
.poll-opt.selected{border-color:var(--text-mid);background:var(--surface-2);color:var(--text)}
.poll-bar-fill{display:none}
.poll-opt-inner{position:relative;z-index:1;display:flex;justify-content:space-between}
.poll-pct{display:none}
.poll-answered .poll-opt{pointer-events:none;opacity:.5}
.poll-answered .poll-opt.selected{opacity:1;border-color:var(--green);color:var(--green)}
.poll-status{font-size:.68rem;color:var(--text-dim);margin-top:10px;text-align:center;display:none}
.poll-status.show{display:block}

/* ═══════════════════════════════════════════
   IWTC RESULT (in results panel)
   ═══════════════════════════════════════════ */
.iwtc-result{display:none;margin-bottom:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.iwtc-result.show{display:block}
.iwtc-result-inner{padding:20px;position:relative}
.iwtc-result-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-mid);font-weight:700;margin-bottom:8px}
.iwtc-result-status{font-size:.9rem;font-weight:700;line-height:1.35;margin-bottom:8px}
.iwtc-result-detail{font-size:.78rem;color:var(--text-mid);line-height:1.5;margin-bottom:8px}
.iwtc-result-link{font-size:.7rem}
.iwtc-result-link a{color:var(--text-dim);text-decoration:underline;text-underline-offset:2px;transition:color .15s}
.iwtc-result-link a:hover{color:var(--text)}
.iwtc-result.eligible{background:var(--green-bg);border-color:var(--green-border)}
.iwtc-result.eligible .iwtc-result-status{color:var(--green)}
.iwtc-result.not-eligible{background:var(--red-glow);border-color:rgba(239,68,68,0.2)}
.iwtc-result.not-eligible .iwtc-result-status{color:var(--red-light)}
.iwtc-result.partial{background:var(--yellow-bg);border-color:var(--yellow-border)}
.iwtc-result.partial .iwtc-result-status{color:var(--yellow)}

/* ═══════════════════════════════════════════
   TIPS CARD
   ═══════════════════════════════════════════ */
.tips-card{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.tips-text{font-size:.78rem;color:var(--text-dim);line-height:1.55}
.tips-text strong{color:var(--text);font-weight:600}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.app-footer{border-top:1px solid var(--border);padding:24px 24px 32px;overflow:hidden}
.footer-row-1{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.footer-share-row{display:flex;gap:8px}
.footer-share-btn{padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dim);font-family:'Plus Jakarta Sans',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s}
.footer-share-btn:hover{border-color:var(--border-hover);color:var(--text)}
.footer-share-btn svg{width:13px;height:13px}
.footer-logo-row{display:flex;align-items:center;gap:4px}
.fl-fuel{font-size:.95rem;font-weight:800;color:var(--text-dim);letter-spacing:-.03em}
.fl-impact{font-size:.95rem;font-weight:800;color:var(--orange);letter-spacing:-.03em}
.footer-links{display:flex;gap:16px}
.footer-links a{font-size:.64rem;color:var(--text-dim);text-decoration:none;letter-spacing:.08em;text-transform:uppercase;font-weight:600;transition:color .15s}
.footer-links a:hover{color:var(--orange)}
.footer-why{text-align:center;margin-bottom:16px}
.footer-why-btn{font-size:.76rem;font-weight:700;color:var(--orange);cursor:pointer;background:0;border:0;font-family:'Plus Jakarta Sans',sans-serif;display:inline-flex;align-items:center;gap:4px;transition:color .15s}
.footer-why-btn:hover{color:var(--orange-light)}
.why-content{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease;opacity:0;text-align:left;margin-top:0}
.why-content.open{max-height:600px;opacity:1;margin-top:16px}
.why-text{font-size:.82rem;color:var(--text-mid);line-height:1.65;font-weight:400;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);max-width:700px;margin:0 auto}
.why-text strong{color:var(--text);font-weight:600}
.why-text a{color:var(--orange-light);text-decoration:underline;text-underline-offset:2px}
.footer-disclaimer{max-width:900px;margin:0 auto 12px;text-align:center;font-size:.6rem;color:var(--text-dim);line-height:1.6}
.footer-disclaimer a{color:var(--text-dim);text-decoration:underline;text-underline-offset:2px}
.footer-disclaimer a:hover{color:var(--text)}
.footer-copy{text-align:center;font-size:.58rem;color:var(--text-dim);opacity:.4}

/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--surface-2);border:1px solid var(--border-hover);border-radius:var(--radius-sm);padding:10px 20px;font-size:.82rem;color:var(--text);z-index:1000;transition:transform .3s ease;white-space:nowrap;font-weight:500}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.panel-right.show .cost-card{opacity:0;animation:fadeUp .5s ease forwards}
.panel-right.show .cost-card:nth-child(1){animation-delay:.1s}
.panel-right.show .cost-card:nth-child(2){animation-delay:.2s}
.panel-right.show .cost-card:nth-child(3){animation-delay:.3s}
.panel-right.show .duo{opacity:0;animation:fadeUp .5s ease forwards;animation-delay:.4s}
.panel-right.show .duo:nth-of-type(2){animation-delay:.5s}
.panel-right.show .offset-row{opacity:0;animation:fadeUp .5s ease forwards;animation-delay:.35s}
.panel-right.show .footer-share-row-results{opacity:0;animation:fadeUp .5s ease forwards;animation-delay:.6s}

/* ═══════════════════════════════════════════
   MOBILE OVERRIDES
   ═══════════════════════════════════════════ */
@media(max-width:1079px){
  .header-tagline,.header-date,.header-share{display:none}
  .theme-label{display:none}
  .theme-toggle{padding:0;width:34px;height:34px;border-radius:50%}
  .app-body{padding:20px 20px 0}
  .app-footer{padding:24px 20px 32px}
  .footer-row-1{flex-direction:column;gap:14px}
  .cost-row{grid-template-columns:1fr}
  .cost-card{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:16px 20px}
  .cost-card::before{top:0;bottom:0;left:0;right:auto;width:3px;height:auto}
  .cost-card.yearly::before{width:4px;height:auto}
  .cost-card .cost-period{margin-bottom:0}
  .cost-card .cost-amount{font-size:1.3rem}
  .cost-card.yearly .cost-amount{font-size:1.5rem}
  .cost-card .cost-detail{margin-top:0;margin-left:4px}
  .cost-amounts{text-align:right}
  .offset-row{grid-template-columns:1fr}
}
@media(max-width:480px){
  .price-strip .pg-price{font-size:.85rem}
}