/* ===== ICD Cost Estimator — Sleek Glass Pro (Dark Accents + Gating) ===== */

/* ---------- Theme Tokens ---------- */
:root{
  /* Text */
  --text:#0e1526;
  --text-strong:#0a1324;
  --muted:#5a6b86;
  --muted-2:#6f7f99;

  /* Background (light cool) */
  --bg-1:#f3f6fb;
  --bg-2:#eaf0f8;

  /* Brand header (deep navy) */
  --brand-a:#0a1b36;
  --brand-b:#0d2a55;
  --brand-stroke:#1f3a68;

  /* Glass surfaces */
  --glass: rgba(255,255,255,0.76);
  --glass-strong: rgba(255,255,255,0.94);
  --glass-tint: rgba(14, 30, 56, 0.06);

  /* Cards / Sections */
  --panel-bg: rgba(255,255,255,0.78);
  --panel-stroke:#8aa0bf;
  --panel-stroke-strong:#6c7fa1;

  /* Buttons */
  --calc:#1c3aa9;
  --calc-2:#112a86;
  --danger:#b01717;
  --danger-2:#8f1313;
  --success:#14823a;
  --success-2:#0f6b2f;

  /* Inputs */
  --input-bg:#ffffff;
  --input-border:#b8c7de;
  --input-border-2:#aebfd9;
  --input-focus:#1c3aa9;
  --ring: rgba(28,58,169,0.28);

  /* Tables */
  --thead-bg:#d6e0f3;
  --thead-border:#b4c3df;
  --cat-bg:#c7d6f2;
  --cat-border:#98afd5;
  --row-alt:#f7faff;
  --money:#0b1222;

  /* Shadows */
  --shadow-1: 0 12px 28px rgba(10,16,28,0.10);
  --shadow-2: 0 18px 44px rgba(10,16,28,0.16);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.85);

  /* Gating accents */
  --gate-dim: rgba(10,16,28,0.12);
  --gate-dim-strong: rgba(10,16,28,0.18);
  --fade-mask: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 72%);
}
@supports(backdrop-filter: blur(12px)){
  :root{
    --glass: rgba(255,255,255,0.64);
    --panel-bg: rgba(255,255,255,0.68);
  }
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html, body{
  margin:0; padding:0;
  color:var(--text);
  font-family: Inter, "SF Pro Text", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  line-height:1.5;
  background:
    radial-gradient(1100px 700px at 100% 0%, rgba(17,42,134,0.12), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(20,130,58,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
}
a{ color:var(--calc); text-decoration:none; }
a:hover{ text-decoration:underline; }
#icdce{ max-width:1120px; margin:0 auto; padding:20px 18px 120px; }

/* ---------- Brand Bar ---------- */
._brandbar{
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg, var(--brand-a), var(--brand-b));
  color:#e9f1ff;
  border:1.5px solid var(--brand-stroke);
  border-radius:16px;
  padding:18px 20px;
  box-shadow: var(--shadow-1);
}
._brandleft{ display:flex; flex-direction:column; gap:4px; }
._mark{ font-weight:900; font-size:22px; letter-spacing:.2px; color:#f5f9ff; }
._mark span{ font-weight:800; opacity:.95; margin-left:2px; }
._tagline{ font-size:13px; color:#b9c9e6; }
._pill{
  background: rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.25);
  color:#dbe7ff;
  padding:6px 10px; font-size:12px; border-radius:999px;
}

/* ---------- Panels / Sections ---------- */
._panel{
  background: linear-gradient(180deg, var(--panel-bg), var(--glass));
  border: 1.5px solid var(--panel-stroke);
  border-radius:16px;
  padding:20px;
  margin-bottom:16px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px) saturate(140%);
  position:relative; overflow:hidden;
}
._panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(0deg, transparent, var(--glass-tint));
}
._section{ margin-bottom:18px; }
._sectionTitle{
  font-size:18px; font-weight:900; margin:0 0 12px;
  color:var(--text-strong); letter-spacing:.2px;
  border-left:4px solid var(--brand-b);
  padding-left:10px;
}
._sectionSubtitle{
  font-size:14px; font-weight:900; margin:12px 0 8px; color:var(--text-strong);
}
._grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:12px; }
._inline{ display:flex; align-items:center; gap:10px; }
._inline-stack{ display:flex; flex-wrap:wrap; gap:12px; }
._wide, ._full{ grid-column:1 / -1; }
._results-pad{ margin-top:8px; }

/* ---------- Fields & Inputs ---------- */
._label{ display:block; font-size:13px; font-weight:800; color:var(--text-strong); margin-bottom:6px; }
._hint{ margin-top:6px; font-size:12px; color:var(--muted-2); }
._input{
  width:100%;
  background: var(--input-bg);
  color: var(--text);
  border: 1.4px solid var(--input-border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-shadow: var(--shadow-inset);
}
._input::placeholder{ color:#7686a1; }
._input:focus, ._input:focus-visible{
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px var(--ring), var(--shadow-inset);
}
select._input{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:
    linear-gradient(180deg, #ffffff, #f7faff) padding-box,
    url("data:image/svg+xml;charset=UTF-8,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23111b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat right 12px center / 14px 14px;
  padding-right: 36px;
  color-scheme: light;
}
select._input option{ color: var(--text); background: #ffffff; }

/* Number inputs: remove spinners */
input[type=number]._input::-webkit-outer-spin-button,
input[type=number]._input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input[type=number]._input{ -moz-appearance: textfield; }

/* Range slider */
input[type=range]._input{
  appearance:none; -webkit-appearance:none;
  height: 8px; padding:0;
  background: linear-gradient(to right, var(--calc) var(--fill, 50%), #c8d5ee var(--fill, 50%));
  border-radius: 999px;
  border: 1px solid var(--input-border-2);
}
input[type=range]._input:focus{ outline:none; box-shadow: 0 0 0 3px var(--ring); }
input[type=range]._input::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#ffffff; border: 2px solid var(--calc);
  box-shadow: 0 2px 8px rgba(14,21,38,0.18);
  cursor: pointer;
}
input[type=range]._input::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#ffffff; border: 2px solid var(--calc);
  box-shadow: 0 2px 8px rgba(14,21,38,0.18);
  cursor: pointer;
}
._badge{
  display:inline-block; padding:4px 8px; font-size:12px; font-weight:800;
  color:var(--text); background:#e8efff; border:1px solid #cad9ff; border-radius:8px;
}
._ticks{ display:flex; justify-content:space-between; font-size:11px; color:#637598; margin-top:6px; }

/* ---------- Buttons ---------- */
._btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:900; letter-spacing:.2px;
  padding:10px 16px; border-radius:12px;
  border:1.4px solid rgba(10,16,28,0.24);
  background: linear-gradient(180deg, #ffffff, #f4f7fd);
  color: var(--text-strong);
  cursor:pointer;
  transition: transform .06s ease, box-shadow .2s, filter .2s, background .2s, border-color .2s;
  user-select:none;
  box-shadow: var(--shadow-1);
}
._btn:hover{ transform: translateY(-1px); }
._btn:active{ transform: translateY(0); }
._btn:focus-visible{ outline:none; box-shadow: 0 0 0 3px var(--ring), var(--shadow-1); }

/* Variants */
._btn._primary{ background: linear-gradient(180deg, var(--calc), var(--calc-2)); color:#ffffff; border-color: rgba(10,16,28,0.28); }
._btn._danger{ background: linear-gradient(180deg, var(--danger), var(--danger-2)); color:#ffffff; border-color: rgba(10,16,28,0.28); }
._btn._good{ background: linear-gradient(180deg, var(--success), var(--success-2)); color:#eafff0; border-color: rgba(10,16,28,0.28); }
._btn._primary:hover{ filter: brightness(1.06); }
._btn._danger:hover{ filter: brightness(1.06); }
._btn._good:hover{ filter: brightness(1.05); }
._btn._secondary{ background: linear-gradient(180deg, #ffffff, #f3f6ff); color: var(--text); }

/* ---------- Summary Cards ---------- */
._cards{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
._card{
  background: linear-gradient(180deg, var(--panel-bg), var(--glass));
  border: 1.5px solid var(--panel-stroke);
  border-radius:14px;
  padding:16px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(8px) saturate(130%);
}
._card h3{ margin:0 0 8px; font-size:14px; font-weight:900; color:var(--text-strong); }
._big{
  font-size:22px; font-weight:700;
  color:var(--money);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
._small{ font-size:13px; color:var(--muted); }

/* ---------- Assumptions (chips) ---------- */
#ce_assumptions_grid ._section{ margin-bottom:14px; }
#ce_assumptions_grid ._sectionSubtitle{
  font-size:13px; font-weight:900; color:var(--text-strong); margin-bottom:8px;
}
#ce_assumptions_grid ._grid{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
#ce_assumptions_grid ._field{
  background:#ffffff;
  border:1.5px solid var(--panel-stroke);
  border-radius:10px;
  padding:10px 12px;
  box-shadow: 0 1px 0 #fff inset, 0 1px 12px rgba(14,21,38,0.05);
}
#ce_assumptions_grid ._label{
  font-size:11px; font-weight:900; color:#516488; margin-bottom:6px;
}
#ce_assumptions_grid ._badge{
  background:#e8efff; border-color:#cad9ff; color:#0b1222;
}

/* ---------- Breakdown Table ---------- */
._breakdown table{
  width:100%;
  border-collapse: collapse;
  border-radius:12px;
  border: 1.5px solid var(--panel-stroke-strong);
  background:#ffffff;
  overflow:hidden;
}
._breakdown thead th{
  text-align:left; font-size:13px; font-weight:900;
  background: var(--thead-bg);
  color:#0a1324;
  padding:12px 10px;
  border-bottom: 2px solid var(--thead-border);
}
._breakdown td{
  padding:12px 10px; font-size:13px; vertical-align:top;
  border-bottom: 1px solid #e0e9f8;
  color:var(--text);
  font-variant-numeric: tabular-nums;
}
._breakdown tr:nth-child(even) td{ background: var(--row-alt); }

/* Category divider rows (injected by JS) */
#ce_breakdown td[colspan="4"]{
  background: var(--cat-bg) !important;
  color:#0a1324 !important;
  font-weight:900 !important;
  letter-spacing:.2px;
  border-top: 2px solid var(--cat-border);
  border-bottom: 1px solid var(--cat-border);
  font-size:12.5px;
}
._breakdown td._right{
  text-align:right; color:var(--money); font-weight:800;
}

/* ---------- Disclaimer ---------- */
._disclaimer{ margin-top:10px; font-size:12px; color:var(--muted); }

/* ---------- Sticky Action Bar ---------- */
._stickybar{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; justify-content:center; gap:12px;
  padding:12px;
  background:
    linear-gradient(180deg, rgba(16,40,92,0.88), rgba(16,40,92,0.55));
  border-top: 1.5px solid #244a88;
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 -14px 36px rgba(10,16,28,0.18);
  z-index:50;
}

/* ---------- Modal (Paywall) ---------- */
._modalBackdrop{
  display:none; position:fixed; inset:0;
  background: rgba(10,16,28,0.38);
  justify-content:center; align-items:center;
  z-index:100; backdrop-filter: blur(2px);
}
._modal{
  background: var(--glass-strong);
  border: 1.5px solid var(--panel-stroke);
  border-radius:14px;
  max-width:520px;
  padding:22px;
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(10px) saturate(140%);
}
._modal h3{ margin:0 0 10px; font-size:18px; font-weight:900; color:var(--text-strong); }
._modal p{ font-size:14px; color:var(--text); margin:10px 0 12px; }
._divider{ border-top:1.5px solid var(--panel-stroke); margin:16px 0; }
._codeRow ._input{ flex:1; }

/* ---------- Unlock Toast ---------- */
#icdce_unlocked{
  position: fixed; top:12px; left:50%; transform: translateX(-50%);
  display:none; align-items:center; gap:10px;
  background:#e9fbf0;
  color:#0e5132;
  border:1px solid #b7f0cd;
  padding:10px 14px; border-radius:999px; font-size:14px;
  z-index:200; box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
#icdce_unlocked ._btn{ border-radius:999px; padding:6px 12px; }
#icdce_unlocked._show{ display:flex; animation: slideDown .25s ease-out; }
@keyframes slideDown{ from{opacity:0; transform:translate(-50%,-10px);} to{opacity:1; transform:translate(-50%,0);} }

/* ---------- Checkbox polish ---------- */
label > input[type="checkbox"]{
  vertical-align: middle; margin-right:8px; width:16px; height:16px;
  accent-color: var(--calc);
}

/* ---------- Responsive ---------- */
@media (max-width: 560px){
  #icdce{ padding-bottom: 150px; }
  ._brandbar{ flex-direction: column; align-items:flex-start; gap: 8px; }
}

/* ======== GATING / LOCKING ADDITIONS (PER-CONTROL, NO BIG BLUR) ======== */

/* Show modal when aria-hidden="false" is toggled by JS */
._modalBackdrop[aria-hidden="false"]{ display:flex; }

/* Disabled inputs (generic) */
._input:disabled{
  background:#f1f5fb;
  color:#6b7a94;
  opacity:0.75;
  cursor:not-allowed;
}

/* Compact widths for small numeric inputs */
#ce_driveLen{ max-width:160px; }
#ce_ncDomes, #ce_ncSf{ max-width:180px; }
#ce_regionIdxVal._badge{ margin-left:4px; }
._ticks span{ min-width: 34px; text-align:center; }

/* Assumption badges clipping */
#ce_assumptions_grid ._badge{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* -------- Section Locking (no giant blur) -------- */
.section--locked{
  /* Keep panel visible and readable */
  filter: none;
  opacity: 1;
  position: relative;
}

/* Visually gray out disabled controls in locked sections */
.section--locked input._input,
.section--locked select._input,
.section--locked textarea._input{
  background:#f1f5fb !important;
  border-color: var(--input-border-2) !important;
  color:#6b7a94 !important;
  opacity:0.85 !important;
  cursor:not-allowed !important;
}

/* Slightly dim helper text */
.section--locked ._label{ opacity:0.9; }
.section--locked ._hint{ opacity:0.8; }

/* Small ribbon CTA in top-right of locked panel */
.sectionLockRibbon{
  position:absolute; top:10px; right:10px;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  z-index:2; pointer-events:auto;
}
.sectionLockRibbon ._rWrap{
  display:flex; align-items:center; gap:8px;
  background:#ffffff;
  border:1px solid rgba(10,16,28,0.12);
  border-radius:999px;
  padding:6px 8px;
  box-shadow: var(--shadow-1);
}
.sectionLockRibbon ._rTitle{
  font-size:12px; font-weight:900; color:#0a1324;
}
.sectionLockRibbon ._rCTA{
  background: linear-gradient(180deg, var(--success), var(--success-2));
  color:#eafff0; font-weight:900; font-size:12px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.3); cursor:pointer;
}
.sectionLockRibbon ._rCTA:hover{ filter:brightness(1.05); }
.sectionLockRibbon ._rSub{
  font-size:11px; color:var(--muted);
  background: rgba(255,255,255,0.9);
  padding:4px 8px; border-radius:8px;
  border:1px solid rgba(10,16,28,0.08);
}

/* -------- Price Gate (mask overall dollars) -------- */
._moneyMask{ filter:blur(4px); pointer-events:none; user-select:none; }
._breakdown td._right._moneyMask{ filter:blur(3px); }

._moneyWrap{ position:relative; }
._moneyMaskOverlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(10,16,28,0.04), rgba(10,16,28,0.10));
  border-radius:10px; cursor:pointer;
}
._moneyMaskCTA{
  padding:6px 12px; border-radius:10px;
  background: linear-gradient(180deg, var(--success), var(--success-2));
  color:#ffffff; font-weight:900; font-size:12px; border:1px solid rgba(255,255,255,0.25);
  box-shadow: var(--shadow-1);
}

/* -------- Breakdown Teaser (preview more rows, fade bottom) -------- */
._teaserArea{
  position:relative;
  max-height: 360px;
  overflow: hidden;
  border-radius:12px;
}
._teaserArea::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:120px;
  background: var(--fade-mask);
  pointer-events:none;
}
._teaserArea.--open{ max-height:none; }
._teaserNote{
  display:flex; justify-content:center; gap:8px; align-items:center;
  margin-top:8px; font-size:12px; color:var(--muted);
}
._teaserNote ._btn{ padding:6px 12px; font-size:12px; }

/* -------- Gate utility modifiers -------- */
._priceOnlyCard ._big._moneyMask + ._small{ opacity:1; }

._premiumBadge{
  position:absolute; top:10px; right:10px;
  font-size:11px; font-weight:900; color:#0a1324;
  background:#ffffff; border:1px solid rgba(10,16,28,0.12);
  border-radius:999px; padding:4px 8px; box-shadow: var(--shadow-1);
}

/* -------- Accessibility helpers -------- */
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}