/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── Root vars ── */
.css-calc-wrap {
  --bg: #f9f8f6;
  --surface: #ffffff;
  --border: #e5e2dc;
  --border-md: #ccc8c0;
  --ink: #18170f;
  --ink2: #6b6760;
  --ink3: #aeaba4;
  --blue: #2563eb;
  --blue-bg: #eff4ff;
  --blue-border: #c7d7fe;
  --green: #16a34a;
  --green-bg: #f0fdf4;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --yellow: #d97706;
  --r: 10px;
  --r-sm: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ── */
.csc-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  align-items: start;
}
@media(max-width:800px){
  .csc-layout { grid-template-columns: 1fr; }
  .csc-quote-col { order: -1; }
}

/* ── Card ── */
.csc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.3rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.csc-card-head { display:flex; align-items:center; gap:9px; margin-bottom:1rem; }
.csc-step {
  width:20px;height:20px;background:var(--ink);color:#fff;
  border-radius:50%;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.csc-card-title { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink2); }

/* ── Fields ── */
.csc-field { margin-bottom:.85rem; }
.csc-field:last-child { margin-bottom:0; }
.csc-lbl { display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);margin-bottom:5px; }
.csc-hint { font-size:11px;color:var(--ink3);margin-top:4px;display:block; }

.csc-calc-wrap select,
.csc-calc-wrap input[type=number],
.csc-calc-wrap input[type=text],
.csc-calc-wrap input[type=email],
.csc-calc-wrap input[type=tel],
.csc-calc-wrap textarea {
  width:100%;padding:9px 36px 9px 11px;
  border:1px solid var(--border-md);border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif;font-size:14px;color:var(--ink);
  background:var(--surface);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  transition:border-color .12s,box-shadow .12s;
}
.csc-calc-wrap select:focus,
.csc-calc-wrap input:focus,
.csc-calc-wrap textarea:focus {
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.csc-sel-wrap { position:relative; display:block; }
.csc-sel-wrap::after {
  content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid var(--ink2);
  pointer-events:none;
  z-index:1;
}
.csc-grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:.85rem; }
.csc-grid-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:.85rem; }
@media(max-width:460px){.csc-grid-2,.csc-grid-3{grid-template-columns:1fr;}}
.csc-calc-wrap textarea { resize:vertical;min-height:80px; }

/* ── Pills ── */
.csc-pills { display:flex;flex-wrap:wrap;gap:5px; }
.csc-pill {
  padding:5px 12px;border:1px solid var(--border-md);border-radius:20px;
  font-size:13px;font-weight:500;color:var(--ink2);
  background:var(--surface);cursor:pointer;transition:all .12s;user-select:none;
}
.csc-pill:hover{border-color:var(--blue);color:var(--blue);}
.csc-pill.csc-on{background:var(--blue);border-color:var(--blue);color:#fff;}

/* ── Methods ── */
.csc-methods { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1rem; }
.csc-mc {
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:12px;cursor:pointer;transition:all .12s;position:relative;background:var(--bg);
}
.csc-mc:hover{border-color:var(--blue-border);}
.csc-mc.csc-on{border-color:var(--blue);background:var(--blue-bg);}
.csc-mc-name{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px;}
.csc-mc.csc-on .csc-mc-name{color:var(--blue);}
.csc-mc-desc{font-size:12px;color:var(--ink2);line-height:1.4;}
.csc-rec-tag {
  position:absolute;top:-8px;right:10px;
  background:var(--green);color:#fff;
  font-size:9px;font-weight:700;padding:2px 7px;
  border-radius:10px;letter-spacing:.05em;text-transform:uppercase;
}

/* ── Rec notice ── */
.csc-rec-box {
  border-radius:var(--r-sm);padding:10px 12px;font-size:13px;
  display:flex;align-items:flex-start;gap:8px;margin-bottom:1rem;line-height:1.4;
  background:var(--green-bg);border:1px solid #bbf7d0;color:#166534;
}
.csc-rec-box.csc-rec-dtf{background:#fff7ed;border-color:#fed7aa;color:#9a3412;}
.csc-rec-icon{font-size:15px;flex-shrink:0;margin-top:1px;}

/* ── Tiers ── */
.csc-tiers { display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:8px; }
@media(max-width:460px){.csc-tiers{grid-template-columns:repeat(3,1fr);}}
.csc-tier {
  border:1px solid var(--border-md);border-radius:var(--r-sm);
  padding:8px 3px;text-align:center;cursor:pointer;
  transition:all .12s;background:var(--surface);
}
.csc-tier:hover{border-color:var(--blue);}
.csc-tier.csc-on{border-color:var(--blue);background:var(--blue-bg);}
.csc-tn{display:block;font-size:15px;font-weight:600;font-family:'DM Mono',monospace;color:var(--ink);}
.csc-tier.csc-on .csc-tn{color:var(--blue);}
.csc-tl{display:block;font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;font-weight:500;}

/* ── Locations ── */
.csc-locs{display:flex;gap:5px;}
.csc-loc {
  flex:1;padding:7px 4px;border:1px solid var(--border-md);border-radius:var(--r-sm);
  text-align:center;cursor:pointer;font-size:12px;font-weight:500;
  color:var(--ink2);background:var(--surface);transition:all .12s;user-select:none;
}
.csc-loc:hover{border-color:var(--blue);color:var(--blue);}
.csc-loc.csc-on{background:var(--blue);border-color:var(--blue);color:#fff;}

/* ── Quote card ── */
.csc-qcard {
  background:var(--ink);border-radius:var(--r);
  overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.12);color:#fff;
  position:sticky;top:80px;
}
.csc-qhead {
  padding:.85rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.03);
}
.csc-qhead-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);}
.csc-live{display:flex;align-items:center;gap:5px;font-size:10px;color:#4ade80;font-weight:500;}
.csc-live::before{content:'';width:5px;height:5px;border-radius:50%;background:#4ade80;animation:blink 1.8s ease infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.csc-qbody{padding:1.2rem;}

.csc-bignum{text-align:center;padding:1.1rem;background:rgba(255,255,255,.05);border-radius:var(--r-sm);margin-bottom:1rem;}
.csc-bignum-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.35);font-weight:500;margin-bottom:3px;}
.csc-bignum-val{font-family:'DM Mono',monospace;font-size:2.5rem;font-weight:500;line-height:1;letter-spacing:-.02em;}
.csc-bignum-sub{font-size:11px;color:rgba(255,255,255,.35);margin-top:4px;}

.csc-brs{margin-bottom:.85rem;}
.csc-br{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px;}
.csc-br:last-child{border-bottom:none;}
.csc-br-l{color:rgba(255,255,255,.5);}
.csc-br-v{font-weight:500;font-family:'DM Mono',monospace;font-size:12px;}
.csc-green{color:#86efac;font-size:14px !important;}

.csc-total-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:rgba(255,255,255,.06);border-radius:var(--r-sm);margin-bottom:.9rem;}
.csc-total-l{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.5);}
.csc-total-v{font-family:'DM Mono',monospace;font-size:1.2rem;font-weight:500;color:#86efac;}

.csc-savings{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.18);border-radius:var(--r-sm);padding:8px 11px;font-size:12px;color:#86efac;display:flex;align-items:center;gap:6px;margin-bottom:.9rem;}

.csc-cta-btn{display:block;width:100%;background:#fff;color:var(--ink);border:none;padding:11px;border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .12s;text-align:center;}
.csc-cta-btn:hover{background:#f0eeea;transform:translateY(-1px);}

.csc-empty{text-align:center;padding:2rem 1rem;color:rgba(255,255,255,.25);font-size:13px;line-height:1.7;}
.csc-fine{font-size:11.5px;color:var(--ink2);margin-top:.75rem;line-height:1.6;}
.css-calc-wrap .csc-hidden,.csc-hidden{display:none!important;}

/* ── Modal ── */
#csc-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;}
.csc-modal{background:#fff;border-radius:var(--r);padding:2rem;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.csc-modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink2);line-height:1;}
.csc-modal-title{font-size:1.3rem;font-weight:700;margin-bottom:.3rem;}
.csc-modal-sub{font-size:13px;color:var(--ink2);margin-bottom:1.25rem;}

.csc-form-summary{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:.85rem;margin-bottom:1.25rem;}
.csc-summary-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;}
.csc-summary-row span{color:var(--ink2);}

.csc-submit-btn{display:block;width:100%;background:var(--blue);color:#fff;border:none;padding:12px;border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .12s;margin-top:.5rem;}
.csc-submit-btn:hover{background:#1d4ed8;}
.csc-submit-btn:disabled{opacity:.6;cursor:not-allowed;}

.csc-form-error{background:var(--red-bg);border:1px solid #fca5a5;color:var(--red);border-radius:var(--r-sm);padding:10px 12px;font-size:13px;margin-bottom:.75rem;}
.csc-form-success{text-align:center;padding:2rem;}
.csc-success-icon{font-size:3rem;color:var(--green);margin-bottom:.5rem;}
.csc-form-success h3{font-size:1.2rem;margin-bottom:.5rem;}
.csc-form-success p{font-size:14px;color:var(--ink2);}

/* ── Internal styles ── */
.csi-topbar{background:#18170f;color:#fff;padding:.6rem 1.2rem;border-radius:var(--r) var(--r) 0 0;display:flex;align-items:center;justify-content:space-between;margin-bottom:0;}
.csi-badge{background:#ef4444;color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:.06em;text-transform:uppercase;}
.csi-topbar-right{font-size:11px;color:rgba(255,255,255,.4);}

.csi-panel-card{background:#181c24 !important;}
.csi-panel-inner{}

.csi-alert{border-radius:var(--r-sm);padding:9px 12px;font-size:13px;margin-bottom:1rem;display:flex;align-items:center;gap:6px;}
.csi-alert-green{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:#4ade80;}
.csi-alert-yellow{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:#fbbf24;}
.csi-alert-red{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#f87171;}

.csi-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1rem;}
.csi-kpi{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);padding:10px 12px;}
.csi-kpi-lbl{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:4px;}
.csi-kpi-val{font-family:'DM Mono',monospace;font-size:1.3rem;font-weight:500;line-height:1;color:#e8e6e0;}
.csi-kpi-sub{font-size:11px;color:rgba(255,255,255,.3);margin-top:3px;}
.csi-kpi-green .csi-kpi-val{color:#4ade80;}
.csi-kpi-red .csi-kpi-val{color:#f87171;}
.csi-kpi-yellow .csi-kpi-val{color:#fbbf24;}

.csi-bar-wrap{margin-bottom:1rem;}
.csi-bar-labels{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.35);margin-bottom:5px;}
.csi-bar-bg{background:rgba(255,255,255,.06);border-radius:4px;height:7px;overflow:hidden;}
.csi-bar-fill{height:100%;border-radius:4px;transition:width .3s;}
.csi-bar-green{background:#4ade80;}
.csi-bar-yellow{background:#fbbf24;}
.csi-bar-red{background:#f87171;}

.csi-section-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.3);margin-bottom:.6rem;}

.csi-costs{width:100%;border-collapse:collapse;margin-bottom:1rem;font-size:12px;}
.csi-costs td{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.55);}
.csi-costs td:last-child{text-align:right;font-family:'DM Mono',monospace;font-weight:500;}
.csi-costs tr:last-child td{border-bottom:none;}
.csi-neg{color:#f87171 !important;}
.csi-pos{color:#4ade80 !important;}
.csi-costs-total td{color:rgba(255,255,255,.8) !important;font-weight:600;border-top:1px solid rgba(255,255,255,.12);padding-top:8px;}

.csi-quote-preview{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);padding:.9rem;margin-bottom:.85rem;}
.csi-qline{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;}
.csi-qline span{color:rgba(255,255,255,.4);}
.csi-qline strong{color:#e8e6e0;font-weight:500;}

.csi-copy-btn{display:block;width:100%;background:var(--blue);color:#fff;border:none;padding:10px;border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .12s;margin-bottom:6px;text-align:center;}
.csi-copy-btn:hover{background:#1d4ed8;}
.csi-copy-sec{background:rgba(255,255,255,.08);color:#e8e6e0;}
.csi-copy-sec:hover{background:rgba(255,255,255,.15);}

/* ── Size upcharge label inside pill ── */
.csc-upcharge {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.75;
  margin-left: 2px;
}
.csc-pill.csc-on .csc-upcharge {
  opacity: 0.9;
}