/* ============================================================
   Easy Scope — smart-home cost calculator
   Uses the theme's own tokens (--gold/--navy/--ice/--panel/--bdr/--shadow
   from main.css :root, redefined again under body.light-mode) so it
   never looks like a bolted-on widget in either theme.

   Color rules followed throughout this file:
   - Text/icon color: var(--ice) for primary text, var(--dim)/var(--muted)
     for secondary text, var(--gold) for accent text/icons. Never a
     literal #fff or #000 — those only work in one theme.
   - --gold-l (a pale blue tuned for glowing on a DARK ground) is used
     only for decorative low-opacity glows, never for text or icons —
     on the light theme's white panel it has too little contrast to read.
   - Subtle card/input backgrounds use a low-alpha tint of --gold's own
     rgb (21,87,235) rather than translucent white — translucent white
     is invisible once the page background itself is white.
   ============================================================ */

.calc-wrap .sp-hero{padding-top:clamp(76px,9vw,110px);padding-bottom:1.6rem}
.calc-wrap .sp-breadcrumb{margin-bottom:.6rem}

.calc-app{padding:0 clamp(1rem,4vw,4rem) 3rem;max-width:1180px;margin:0 auto}

.calc-grid{display:grid;grid-template-columns:1fr 380px;gap:2.2rem;align-items:start}

/* ---------- Progress + step nav ---------- */
.calc-progress{height:4px;border-radius:999px;background:rgba(21,87,235,.12);overflow:hidden;margin-bottom:1.6rem}
.calc-progress-bar{height:100%;width:25%;background:linear-gradient(90deg,var(--gold-d),var(--gold));border-radius:999px;transition:width .45s cubic-bezier(.22,1,.36,1)}

.calc-steps-nav{display:flex;gap:.4rem;margin-bottom:1.2rem;flex-wrap:wrap}
.calc-step-dot{flex:1;min-width:70px;text-align:center;font-size:.74rem;font-weight:700;font-family:inherit;color:var(--muted);background:none;padding:.55rem .4rem;border-radius:8px;border:1px solid transparent;transition:.25s;cursor:pointer}
.calc-step-dot.is-active{color:var(--gold);background:rgba(21,87,235,.14);border-color:rgba(21,87,235,.4)}
.calc-step-dot.is-done{color:var(--ice)}

/* ---------- Steps ---------- */
.calc-step{display:none;animation:calcFadeIn .4s ease both}
.calc-step.is-active{display:block}
@keyframes calcFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.calc-step-title{font-size:1.2rem;font-weight:900;color:var(--ice);margin:0 0 .35rem}
.calc-step-hint{font-size:.82rem;color:var(--dim);line-height:1.6;margin:0 0 .9rem}

.calc-tile-grid{display:flex;flex-wrap:wrap;gap:.6rem}

.calc-tile{flex:1 1 150px;max-width:220px;background:rgba(21,87,235,.04);border:1px solid var(--bdr);color:var(--ice);border-radius:10px;padding:.75rem .7rem;font-size:.85rem;font-weight:700;cursor:pointer;transition:.2s;text-align:center;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem}
.calc-tile:hover{border-color:rgba(21,87,235,.5);background:rgba(21,87,235,.08)}
.calc-tile[aria-pressed="true"]{border-color:var(--gold);background:rgba(21,87,235,.16);color:var(--ice);box-shadow:0 0 0 1px var(--gold) inset}
.calc-tile .ctl-spec{font-size:.68rem;color:var(--gold);font-weight:700}

.calc-stepper{display:flex;align-items:center;justify-content:space-between;background:rgba(21,87,235,.04);border:1px solid var(--bdr);border-radius:10px;padding:.9rem 1.1rem;margin-bottom:1.1rem}
.calc-stepper-label{font-size:.88rem;font-weight:800;color:var(--ice)}
.calc-stepper-ctrl{display:flex;align-items:center;gap:1rem}
.calc-stepper-ctrl button{width:36px;height:36px;border-radius:8px;border:1px solid rgba(21,87,235,.4);background:rgba(21,87,235,.1);color:var(--gold);font-size:1.3rem;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;line-height:1;font-family:inherit}
.calc-stepper-ctrl button:hover{background:var(--gold);color:#fff}
.calc-stepper-ctrl button:disabled{opacity:.3;cursor:not-allowed;background:rgba(21,87,235,.1);color:var(--gold);border-color:rgba(21,87,235,.4)}
.calc-stepper-val{min-width:2.4ch;text-align:center;font-size:1.3rem;font-weight:900;color:var(--ice);font-family:Barlow,sans-serif}

.calc-group-title{font-size:.8rem;font-weight:800;color:var(--gold);margin:1rem 0 .5rem;text-transform:uppercase;letter-spacing:.4px}
.calc-group-title:first-of-type{margin-top:0}

.calc-addons{display:grid;gap:.5rem}
.calc-addon-row{display:flex;align-items:center;gap:.6rem;background:rgba(21,87,235,.04);border:1px solid var(--bdr);border-radius:10px;padding:.55rem .7rem;transition:.2s;flex-wrap:wrap}
.calc-addon-row:hover{border-color:rgba(21,87,235,.4)}
.calc-addon-row.is-on{border-color:rgba(21,87,235,.35);background:rgba(21,87,235,.08)}

.calc-addon-toggle{display:flex;align-items:center;gap:.6rem;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;flex:1;min-width:140px;text-align:right}
.calc-addon-check{width:19px;height:19px;border-radius:6px;border:1px solid rgba(21,87,235,.4);flex-shrink:0;position:relative;transition:.2s}
.calc-addon-toggle[aria-pressed="true"] .calc-addon-check{background:var(--gold);border-color:var(--gold)}
.calc-addon-toggle[aria-pressed="true"] .calc-addon-check::after{content:"";position:absolute;inset:0;margin:auto;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.calc-addon-label{font-size:.85rem;font-weight:700;color:var(--ice)}

.calc-addon-qtybox,.calc-tier-select{display:none;align-items:center;gap:.5rem}
.calc-addon-row.is-on .calc-addon-qtybox,.calc-addon-row.is-on .calc-tier-select{display:flex}
.calc-addon-qtybox button{width:28px;height:28px;border-radius:7px;border:1px solid rgba(21,87,235,.4);background:rgba(21,87,235,.1);color:var(--gold);font-size:1rem;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;line-height:1}
.calc-addon-qtybox button:hover{background:var(--gold);color:#fff}
.calc-addon-qtybox button:disabled{opacity:.3;cursor:not-allowed}
.calc-addon-qtybox span{min-width:2ch;text-align:center;font-size:.9rem;font-weight:800;color:var(--ice);font-family:Barlow,sans-serif}

.calc-tier-select button{padding:.35rem .6rem;border-radius:7px;border:1px solid var(--bdr);background:rgba(21,87,235,.03);color:var(--muted);font-size:.74rem;font-weight:700;cursor:pointer;font-family:inherit}
.calc-tier-select button[aria-pressed="true"]{border-color:var(--gold);background:rgba(21,87,235,.16);color:var(--ice)}

.calc-badge{margin-top:.6rem;font-size:.72rem;font-weight:700;color:var(--gold);background:rgba(21,87,235,.1);border:1px solid rgba(21,87,235,.25);border-radius:999px;padding:.35rem .8rem;display:inline-block}

.calc-nav-btns{display:flex;gap:.8rem;margin-top:1.3rem}
.calc-nav-btns button{flex:1}
.calc-nav-btns button:disabled{opacity:.35;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.calc-nav-btns .calc-next-finish{background:linear-gradient(135deg,var(--gold-d),var(--gold))}

/* ---------- Summary sidebar ---------- */
.calc-summary{position:sticky;top:96px}
.calc-summary-card{background:var(--panel);border:1px solid var(--bdr);border-radius:14px;box-shadow:var(--shadow);padding:1.8rem 1.6rem;text-align:center}

.calc-radar{width:128px;height:128px;margin:0 auto 1rem}
.calc-radar-svg{width:100%;height:100%}
.cr-ring{fill:none;stroke:var(--gold);stroke-opacity:.3;stroke-width:1}
.cr-sweep{stroke:var(--gold);stroke-width:1.5;transform-origin:60px 60px;animation:crSpin 3.4s linear infinite;filter:drop-shadow(0 0 5px rgba(21,87,235,.6))}
@keyframes crSpin{to{transform:rotate(360deg)}}
.cr-blip{fill:var(--gold)}

.calc-price-range{font-family:Tajawal,sans-serif;font-size:clamp(1.5rem,3vw,1.9rem);font-weight:900;direction:ltr;unicode-bidi:isolate;color:var(--gold);display:flex;align-items:baseline;justify-content:center;gap:.5ch}
.calc-price-sep{color:var(--muted)}
.calc-price-unit{font-size:.74rem;color:var(--muted);margin:.4rem 0 1.3rem}

.calc-breakdown-toggle{width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem;background:none;border:none;color:var(--gold);font-size:.82rem;font-weight:700;cursor:pointer;padding:.4rem;font-family:inherit}
.calc-breakdown-toggle svg{transition:transform .25s}
.calc-breakdown-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

.calc-lines{text-align:right;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--bdr);font-size:.78rem}
.calc-lines>div{display:flex;justify-content:space-between;gap:.6rem;padding:.4rem 0;color:var(--dim)}
.calc-lines .calc-line-sum{border-top:1px solid var(--bdr);margin-top:.3rem;padding-top:.6rem;color:var(--ice);font-weight:800}
.calc-lines b{font-weight:800;color:var(--ice);direction:ltr;unicode-bidi:isolate}

.calc-contact{display:grid;gap:.7rem;margin-top:1.4rem;text-align:right}
.calc-fg label{display:block;font-size:.74rem;color:var(--muted);margin-bottom:4px;font-weight:600}
.calc-fg input{width:100%;background:rgba(21,87,235,.045);border:1px solid var(--bdr);border-radius:7px;padding:10px 12px;font-size:.86rem;color:var(--ice);outline:none;transition:border-color .2s,background .2s;direction:rtl;font-family:inherit}
.calc-fg input[dir="ltr"]{direction:ltr;text-align:left}
.calc-fg input:focus{border-color:var(--gold);background:rgba(21,87,235,.07)}
.calc-fg input::placeholder{color:var(--muted)}

.calc-wa-btn{width:100%;margin-top:.9rem;padding-top:11px;padding-bottom:11px}
.calc-fineprint{font-size:.68rem;color:var(--muted);line-height:1.5;margin:.6rem 0 0}

@media(max-width:900px){
  .calc-wrap .sp-hero-visual{display:none}
  .calc-grid{grid-template-columns:1fr;gap:1.1rem}
  .calc-summary{position:static;order:-1}
  .calc-summary-card{padding:1.2rem}
  .calc-radar{width:88px;height:88px;margin-bottom:.5rem}
}
@media(max-width:480px){
  .calc-step-dot{font-size:.68rem;min-width:60px}
  .calc-summary-card{padding:1rem}
}

/* ---------- Keyboard focus ---------- */
.calc-wrap :is(.calc-tile,.calc-addon-toggle,.calc-addon-qtybox button,.calc-tier-select button,.calc-stepper-ctrl button,.calc-step-dot,.calc-breakdown-toggle,.calc-fg input):focus-visible{
  outline:2px solid var(--gold);outline-offset:2px
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .calc-step{animation:none}
  .cr-sweep{animation:none}
}