:root {
  --iw-font: 'Plus Jakarta Sans', sans-serif;
  --iw-fc: #1a2332;
  --iw-fs-label: 13px;
  --iw-fs-value: 15px;
  --iw-fs-card: 13px;
  --iw-bg: #f0f4ff;
  --iw-panel-bg: #ffffff;
  --iw-accent: #4f8ef7;
  --iw-slider: #4f8ef7;
  --iw-slider-bg: #e2e8f0;
  --iw-card-bg: #ffffff;
  --iw-card-bdr: #e8edf5;
  --iw-card-text: #1a2332;
  --iw-hover-bg: #4f8ef7;
  --iw-hover-text: #ffffff;
  --iw-active-bg: #4f8ef7;
  --iw-active-text: #ffffff;
  --iw-invested: #f6ad55;
  --iw-returns: #48bb78;
  --iw-total: #e53e3e;
  --iw-table-header: #4f8ef7;
  --iw-table-header-text: #ffffff;
  --iw-table-even: #fafbff;
  --iw-table-hover: #f0f4ff;
  --iw-tab-active: #4f8ef7;
  --iw-tab-hover: #eef3ff;
  --iw-white: #ffffff;
}
/* PHP-injected :root will override these defaults */

/* Investwell Financial Calculators v1.0 — Left Sidebar Layout */
:root{
  --iw-font:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --iw-accent:#4f8ef7; --iw-fc:#1a2332; --iw-bg:#f0f4ff;
  --iw-fs-label:13px; --iw-fs-value:15px; --iw-fs-card:13px;
  --iw-white:#ffffff; --iw-slider:#4f8ef7; --iw-slider-bg:#e2e8f0;
  --iw-invested:#f6ad55; --iw-returns:#48bb78; --iw-total:#e53e3e;
  --iw-card-bg:#ffffff; --iw-card-bdr:#e8edf5; --iw-card-text:#1a2332;
  --iw-hover-bg:#4f8ef7; --iw-hover-text:#ffffff;
  --iw-active-bg:#4f8ef7; --iw-active-text:#ffffff; --iw-panel-bg:#ffffff;
  --iw-table-header:#4f8ef7; --iw-table-header-text:#ffffff;
  --r:16px; --r-sm:10px;
  --shadow:0 2px 12px rgba(30,50,90,var(--iw-shadow-opacity,0.08)); --shadow-md:0 6px 28px rgba(30,50,90,var(--iw-shadow-opacity-md,0.11));
}
.iw-suite-wrap,.iw-suite-wrap *{box-sizing:border-box!important;font-family:var(--iw-font)!important;}
.iw-suite-wrap{width:100%;}

/* ===== 3-COLUMN LAYOUT ===== */
.iw-layout{display:grid;grid-template-columns:var(--iw-sidebar-w,18%) 1fr var(--iw-donut-w,28%);grid-template-rows:auto auto;gap:16px;align-items:stretch;}
.iw-sidebar{grid-column:1;grid-row:1/3;}
.iw-center{grid-column:2;grid-row:1;}
.iw-donut-col{grid-column:3;grid-row:1;}
.iw-bottom-wrap{grid-column:2/4;grid-row:2;}

/* ===== SIDEBAR ===== */
.iw-sidebar-inner{background:var(--iw-white);border-radius:var(--r);padding:12px 10px;box-shadow:var(--shadow);border:1px solid #eef1f8;display:flex;flex-direction:column;gap:6px;}

.iw-calc-card{display:flex;flex-direction:row;align-items:center;gap:9px;width:100%;background:var(--iw-card-bg,#fff);border:1.5px solid var(--iw-card-bdr,#e8edf5);border-radius:var(--r-sm);cursor:pointer;padding:9px 11px;text-align:left;outline:none;-webkit-appearance:none;appearance:none;transition:all .2s ease;}
.iw-calc-card:hover{background:var(--iw-hover-bg,#4f8ef7)!important;border-color:var(--iw-hover-bg,#4f8ef7)!important;}
.iw-calc-card.iw-active{background:var(--iw-active-bg,#4f8ef7)!important;border-color:transparent!important;box-shadow:0 4px 14px rgba(79,142,247,.35)!important;}
.iw-calc-card:hover .iw-card-label{color:var(--iw-hover-text,#fff)!important;}
.iw-calc-card:hover .iw-card-icon{color:var(--iw-hover-text,#fff)!important;}
.iw-calc-card:hover .iw-card-icon{background:rgba(255,255,255,.22);transform:scale(1.08);}
.iw-calc-card.iw-active .iw-card-label{color:var(--iw-active-text,#fff)!important;}
.iw-card-icon{font-size:20px;flex-shrink:0;line-height:1;width:34px;height:34px;border-radius:8px;background:rgba(79,142,247,.08);display:flex;align-items:center;justify-content:center;transition:transform .2s;}
.iw-calc-card.iw-active .iw-card-icon{background:rgba(255,255,255,.22);}
.iw-card-label{font-size:var(--iw-fs-card,13px)!important;font-weight:600!important;color:var(--iw-card-text,#1a2332)!important;line-height:1.25;transition:color .2s;}

/* ===== CENTER CARD ===== */
.iw-center-card{background:var(--iw-panel-bg,#fff);border-radius:var(--r);padding:22px 22px 18px;box-shadow:var(--shadow-md);border:1px solid #eef1f8;position:relative;overflow:hidden;height:100%;box-sizing:border-box;}
.iw-center-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--iw-accent,#4f8ef7);}
.iw-ct{font-size:15px!important;font-weight:800!important;color:var(--iw-fc)!important;margin-bottom:16px!important;display:block;letter-spacing:-.01em;}

/* FIELDS */
.iw-field{margin-bottom:12px!important;}
.iw-lbl{display:flex!important;justify-content:space-between!important;align-items:center!important;font-size:var(--iw-fs-label,13px)!important;font-weight:600!important;color:#64748b!important;margin-bottom:6px!important;}

/* Slider row */
.iw-ig{display:flex!important;align-items:center!important;gap:10px!important;background:#f7f9fe!important;border:1.5px solid #edf1fa!important;border-radius:10px!important;padding:6px 10px!important;transition:border-color .2s,box-shadow .2s!important;}
.iw-ig:focus-within{border-color:var(--iw-accent)!important;box-shadow:0 0 0 3px rgba(79,142,247,.1)!important;}

/* SLIDER fill via --fill CSS var set by JS */
.iw-ig input[type="range"]{
  flex:1!important;-webkit-appearance:none!important;appearance:none!important;
  height:5px!important;border-radius:999px!important;outline:none!important;
  cursor:pointer!important;border:none!important;padding:0!important;margin:0!important;
  background:linear-gradient(to right,var(--iw-slider,#4f8ef7) 0%,var(--iw-slider,#4f8ef7) var(--fill,0%),var(--iw-slider-bg,#e2e8f0) var(--fill,0%),var(--iw-slider-bg,#e2e8f0) 100%)!important;
  transition:background .05s!important;
}
.iw-ig input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none!important;width:18px!important;height:18px!important;border-radius:50%!important;background:#fff!important;border:2.5px solid var(--iw-slider,#4f8ef7)!important;box-shadow:0 2px 6px rgba(79,142,247,.35)!important;cursor:pointer!important;transition:transform .15s!important;}
.iw-ig input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.25)!important;}
.iw-ig input[type="range"]::-moz-range-thumb{width:18px!important;height:18px!important;border-radius:50%!important;background:#fff!important;border:2.5px solid var(--iw-slider,#4f8ef7)!important;box-shadow:0 2px 6px rgba(79,142,247,.35)!important;cursor:pointer!important;}

/* Number input */
.iw-ig input[type="number"]{width:78px!important;flex-shrink:0!important;padding:5px 7px!important;border:none!important;border-radius:7px!important;background:#fff!important;font-size:13px!important;font-weight:700!important;text-align:center!important;color:var(--iw-fc)!important;outline:none!important;box-shadow:0 1px 4px rgba(30,50,90,.08)!important;}

/* RESULT BOX */
.iw-rbox{background:linear-gradient(135deg,#f7f9ff 0%,#eef3ff 100%)!important;border:1.5px solid rgba(79,142,247,.14)!important;border-radius:11px!important;padding:12px 14px!important;margin-top:12px!important;min-height:64px;transition:all .3s!important;}
.iw-rbox p{font-size:12.5px!important;color:#4a5568!important;margin:0 0 4px!important;line-height:1.5!important;font-weight:500!important;}
.iw-rbox p b{color:var(--iw-fc)!important;font-weight:700!important;}
.iw-rbox .iw-total{font-size:var(--iw-fs-value,15px)!important;font-weight:800!important;color:var(--iw-fc)!important;margin:8px 0 0!important;padding-top:8px!important;border-top:1px solid rgba(79,142,247,.14)!important;}
.iw-rbox .iw-total span{color:var(--iw-total,#e53e3e)!important;}
.iw-row{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:5px 0!important;border-bottom:1px solid rgba(0,0,0,.05)!important;font-size:12px!important;}
.iw-row:last-child{border-bottom:none!important;}
.iw-rl{color:#64748b!important;font-weight:500!important;}
.iw-rv{font-weight:700!important;color:var(--iw-fc)!important;}
.iw-rv.green{color:var(--iw-returns,#48bb78)!important;}
.iw-rv.orange{color:var(--iw-invested,#f6ad55)!important;}
.iw-rv.red{color:#e53e3e!important;}

/* ===== LOADING ===== */
.iw-spin-wrap{display:flex;align-items:center;gap:9px;padding:10px 0 2px;font-size:11.5px!important;color:#94a3b8!important;}
.iw-spinner{width:14px;height:14px;border:2px solid #e2e8f0;border-top-color:var(--iw-accent,#4f8ef7);border-radius:50%;animation:iw-spin .65s linear infinite;flex-shrink:0;}
@keyframes iw-spin{to{transform:rotate(360deg);}}

/* Skeleton shimmer on result box while loading */
.iw-rbox-skeleton{background:linear-gradient(135deg,#f1f5ff 0%,#e8edff 100%)!important;border:1.5px solid rgba(79,142,247,.08)!important;border-radius:11px!important;padding:12px 14px!important;margin-top:12px!important;min-height:64px;overflow:hidden;position:relative;}
.iw-rbox-skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%);animation:iw-shimmer 1.1s infinite;}
@keyframes iw-shimmer{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
.iw-skeleton-line{height:12px;background:rgba(79,142,247,.12);border-radius:6px;margin-bottom:8px;}
.iw-skeleton-line:last-child{width:55%;margin-bottom:0;}

/* Donut skeleton */
.iw-donut-pulse{animation:iw-pulse 1.1s ease-in-out infinite;}
@keyframes iw-pulse{0%,100%{opacity:.5;}50%{opacity:.15;}}

/* ===== DONUT COLUMN ===== */
.iw-donut-card{background:var(--iw-panel-bg,#fff);border-radius:var(--r);padding:18px 14px 14px;box-shadow:var(--shadow-md);border:1px solid #eef1f8;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;height:100%;box-sizing:border-box;}
.iw-donut-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--iw-accent,#4f8ef7);}

/* Legend */
.iw-legend{display:flex;gap:12px;align-items:center;margin-bottom:10px;justify-content:center;}
.iw-li{display:flex;align-items:center;gap:5px;font-size:10.5px!important;color:#64748b!important;font-weight:600!important;}
.iw-ld{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* Chart wrap */
.iw-cwrap{width:100%!important;position:relative!important;background:linear-gradient(135deg,#f7f9ff 0%,#edf1fe 100%)!important;border-radius:14px!important;padding:12px!important;border:1px solid rgba(79,142,247,.11)!important;box-shadow:inset 0 2px 8px rgba(79,142,247,.07),0 4px 16px rgba(30,50,90,.08)!important;transition:all .3s!important;}
.iw-cwrap canvas{width:100%!important;height:210px!important;display:block!important;}

/* Donut center */
.iw-donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;transition:opacity .3s;}
.iw-donut-label{font-size:8.5px!important;font-weight:700!important;color:#94a3b8!important;letter-spacing:.07em;text-transform:uppercase;line-height:1;}
.iw-donut-value{font-size:13px!important;font-weight:800!important;color:var(--iw-fc)!important;line-height:1.3;margin-top:3px;}

/* Tooltip */
.iw-chart-tooltip{position:absolute;background:rgba(22,33,55,.93);color:#fff;border-radius:9px;padding:7px 11px;min-width:95px;pointer-events:none;z-index:99;transform:translate(-50%,-120%);box-shadow:0 6px 18px rgba(0,0,0,.2);}
.iw-ctt-label{font-size:9.5px!important;font-weight:700!important;opacity:.75;margin-bottom:2px;}
.iw-ctt-val{font-size:12.5px!important;font-weight:800!important;color:#fff!important;}
.iw-ctt-arrow{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(22,33,55,.93);}

/* Donut result summary */
.iw-donut-summary{width:100%;margin-top:12px;padding:10px 12px;background:linear-gradient(135deg,#f7f9ff 0%,#edf1fe 100%);border-radius:11px;border:1px solid rgba(79,142,247,.11);}
.iw-donut-summary p{font-size:11.5px!important;color:#4a5568!important;margin:0 0 4px!important;line-height:1.4!important;font-weight:500!important;}
.iw-donut-summary p:last-child{margin-bottom:0!important;}
.iw-donut-summary p b{color:var(--iw-fc)!important;font-weight:700!important;}
.iw-donut-summary .iw-total{font-size:14px!important;font-weight:800!important;color:var(--iw-fc)!important;margin:7px 0 0!important;padding-top:7px!important;border-top:1px solid rgba(79,142,247,.13)!important;}
.iw-donut-summary .iw-total span{color:var(--iw-total,#e53e3e)!important;}
.iw-donut-summary .iw-row{padding:4px 0!important;font-size:11.5px!important;}

/* ===== BOTTOM SECTION ===== */
.iw-bottom-section{background:var(--iw-white);border-radius:var(--r);box-shadow:var(--shadow-md);border:1px solid #eef1f8;overflow:hidden;}
.iw-suite-wrap .iw-view-tabs{display:flex;gap:0;background:#f8faff;border-bottom:1px solid #eef1f8;padding:7px 14px 0;}
.iw-suite-wrap .iw-view-tab{padding:8px 16px 10px;border:none;background:none;cursor:pointer;font-size:12px!important;font-weight:700!important;color:#94a3b8;border-radius:8px 8px 0 0;transition:background .18s,color .18s,border-color .18s;font-family:var(--iw-font)!important;border-bottom:2.5px solid transparent;margin-bottom:-1px;box-shadow:none!important;}
.iw-suite-wrap .iw-view-tab:hover{color:var(--iw-fc)!important;background:var(--iw-tab-hover,rgba(79,142,247,.06))!important;outline:none!important;}
.iw-suite-wrap .iw-view-tab.active{color:var(--iw-tab-active,var(--iw-accent))!important;background:var(--iw-white)!important;border-bottom-color:var(--iw-tab-active,var(--iw-accent))!important;box-shadow:none!important;}
.iw-view-content{display:none;padding:16px 18px 20px;}
.iw-view-content.active{display:block;}
.iw-table-wrap{border-radius:10px;overflow:hidden;border:1px solid #eef1f8;}
.iw-table{width:100%;border-collapse:collapse;font-size:13px;}
.iw-table thead th{background:var(--iw-table-header,#4f8ef7);color:var(--iw-table-header-text,#fff);padding:11px 16px;text-align:left;font-weight:700!important;font-size:12px!important;}
.iw-table tbody td{padding:9px 16px;border-bottom:1px solid #f3f6fb;color:#374151!important;font-size:12.5px!important;font-weight:500!important;}
.iw-table tbody tr:last-child td{border-bottom:none;}
.iw-table tbody tr:nth-child(even) td{background:var(--iw-table-even,#fafbff);}
.iw-table tbody tr:hover td{background:var(--iw-table-hover,#f0f4ff);}
.iw-table td.green{color:var(--iw-returns,#48bb78)!important;font-weight:700!important;}
.iw-table td.orange{color:var(--iw-invested,#f6ad55)!important;font-weight:700!important;}
.iw-table td.red{color:#e53e3e!important;font-weight:700!important;}
.iw-bottom-chart-wrap{height:260px;position:relative;}

/* Placeholder */
.iw-calc-panel{min-height:0;padding:0;background:none;border:none;box-shadow:none;}
.iw-panel-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;background:linear-gradient(135deg,#f8faff 0%,#eef1ff 100%);border-radius:var(--r);border:2px dashed rgba(79,142,247,.2);gap:10px;color:#94a3b8;}
.iw-placeholder-icon{font-size:34px;}
.iw-panel-placeholder p{font-size:12.5px!important;font-weight:600!important;color:#94a3b8!important;margin:0!important;}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .iw-layout{grid-template-columns:1fr !important;grid-template-rows:auto !important;}
  .iw-sidebar{grid-column:1 !important;grid-row:1 !important;}
  .iw-sidebar-inner{flex-direction:row !important;flex-wrap:wrap !important;gap:6px !important;padding:10px 8px !important;}
  .iw-calc-card{width:auto !important;flex:0 0 auto !important;padding:7px 10px !important;}
  .iw-center{grid-column:1 !important;grid-row:2 !important;}
  .iw-donut-col{grid-column:1 !important;grid-row:3 !important;}
  .iw-bottom-wrap{grid-column:1 !important;grid-row:4 !important;}
  .iw-donut-card{flex-direction:row !important;align-items:flex-start !important;gap:12px !important;padding:14px !important;}
  .iw-cwrap{width:180px !important;flex-shrink:0 !important;}
  .iw-cwrap canvas{height:160px !important;}
  .iw-donut-summary{margin-top:0 !important;flex:1 !important;}
  .iw-legend{justify-content:flex-start !important;margin-bottom:8px !important;}
}
@media(max-width:600px){
  .iw-layout{grid-template-columns:1fr !important;}
  .iw-sidebar-inner{flex-direction:row !important;flex-wrap:wrap !important;}
  .iw-calc-card{flex:0 0 calc(50% - 4px) !important;}
  .iw-center-card{padding:14px 12px !important;}
  .iw-donut-card{flex-direction:column !important;align-items:center !important;}
  .iw-cwrap{width:100% !important;}
  .iw-cwrap canvas{height:190px !important;}
  .iw-donut-summary{margin-top:12px !important;width:100% !important;}
  .iw-field{margin-bottom:4px !important;}
  .iw-ig{padding:5px 8px !important;}
  .iw-ig input[type="number"]{width:65px !important;}
  .iw-table{font-size:11px !important;}
  .iw-table th,.iw-table tbody td{padding:7px 10px !important;}
}

/* ============================================================
   iw-tpl-wrap — wrapper for T2/T3/T4/T5 (replaces iw-layout)
   ============================================================ */
.iw-tpl-wrap {
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   TEMPLATE T2 — Horizontal Top Nav
   ============================================================ */
.iw-suite-wrap[data-tpl="t2"] .iw-sidebar { display:none!important; }
.iw-suite-wrap[data-tpl="t2"] .iw-layout  { display:block!important; }

.iw-t2-wrap { width:100%; }

/* Tab strip */
.iw-t2-tabs {
  display:flex; flex-wrap:wrap; gap:6px; padding:0 0 16px;
}
.iw-t2-tab {
  display:flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:10px;
  border:1.5px solid var(--iw-card-bdr,#e8edf5);
  background:var(--iw-card-bg,#fff);
  cursor:pointer; font-family:var(--iw-font); font-size:12px; font-weight:600;
  color:var(--iw-card-text,#1a2332);
  transition:all .2s ease; white-space:nowrap;
}
.iw-t2-tab:hover {
  background:var(--iw-hover-bg,#4f8ef7)!important;
  color:var(--iw-hover-text,#fff)!important;
  border-color:transparent!important;
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(79,142,247,.28);
}
.iw-t2-tab-active {
  background:var(--iw-active-bg,#4f8ef7)!important;
  color:var(--iw-active-text,#fff)!important;
  border-color:transparent!important;
  box-shadow:0 4px 14px rgba(79,142,247,.28);
}
.iw-t2-tab-icon { font-size:16px; line-height:1; }
.iw-t2-body {
  display:grid; grid-template-columns:1fr 272px; gap:16px; align-items:stretch;
}
.iw-t2-left  { /* uses .iw-center-card styles */ }
.iw-t2-right { width:100%; }
.iw-t2-bottom { margin-top:16px; }


/* ============================================================
   TEMPLATE T3 — Card Grid + Split Panel
   ============================================================ */
.iw-suite-wrap[data-tpl="t3"] .iw-sidebar { display:none!important; }
.iw-suite-wrap[data-tpl="t3"] .iw-layout  { display:block!important; }

.iw-t3-wrap { width:100%; }

.iw-t3-grid {
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  padding:0 0 18px;
}
.iw-t3-gcard {
  width:110px; min-height:96px;
  flex-direction:column; gap:6px;
  padding:14px 8px 10px;
}
/* Uses existing .iw-calc-card styles, just in a centered grid */

.iw-t3-body {
  display:grid; grid-template-columns:1fr 260px; gap:16px; align-items:stretch;
}
.iw-t3-bottom { margin-top:16px; }


/* ============================================================
   TEMPLATE T4 — Focus Mode (Dropdown, no sidebar)
   ============================================================ */
.iw-suite-wrap[data-tpl="t4"] .iw-sidebar { display:none!important; }
.iw-suite-wrap[data-tpl="t4"] .iw-layout  { display:block!important; }

.iw-t4-wrap { width:100%; }

.iw-t4-header {
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}

.iw-t4-select {
  flex:1; max-width:360px;
  padding:11px 18px; font-size:14px; font-weight:600;
  border:1.5px solid var(--iw-card-bdr,#e8edf5);
  border-radius:12px; background:var(--iw-card-bg,#fff);
  color:var(--iw-card-text,#1a2332);
  cursor:pointer; outline:none; font-family:var(--iw-font);
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%234f8ef7' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:40px;
  transition:border-color .2s, box-shadow .2s;
}
.iw-t4-select:focus {
  border-color:var(--iw-accent,#4f8ef7);
  box-shadow:0 0 0 3px rgba(79,142,247,.12);
}

.iw-t4-body {
  display:grid; grid-template-columns:1fr 272px; gap:16px; align-items:stretch;
}
.iw-t4-bottom { margin-top:16px; }


/* ============================================================
   TEMPLATE T5 — Stepper / Wizard
   ============================================================ */
.iw-suite-wrap[data-tpl="t5"] .iw-sidebar { display:none!important; }
.iw-suite-wrap[data-tpl="t5"] .iw-layout  { display:block!important; }

.iw-t5-wrap { width:100%; }

/* Step tabs — horizontal scrollable strip */
.iw-t5-steps {
  display:flex; gap:0; overflow-x:auto; margin-bottom:18px;
  border-bottom:2px solid var(--iw-card-bdr,#e8edf5);
  scrollbar-width:none;
}
.iw-t5-steps::-webkit-scrollbar { display:none; }

.iw-t5-step {
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:10px 18px 12px; border:none; background:none; cursor:pointer;
  font-family:var(--iw-font); font-size:12.5px; font-weight:600;
  color:#94a3b8; border-bottom:3px solid transparent;
  margin-bottom:-2px; transition:all .18s;
  flex-shrink:0;
}
.iw-t5-step:hover {
  color:var(--iw-fc,#1a2332);
  background:var(--iw-tab-hover,rgba(79,142,247,.06))!important;
}
.iw-t5-step-active {
  color:var(--iw-tab-active,#4f8ef7)!important;
  border-bottom-color:var(--iw-tab-active,#4f8ef7)!important;
  background:none!important;
}

/* Step number circle */
.iw-t5-stepnum {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  font-size:10px; font-weight:700; line-height:1;
  background:var(--iw-card-bdr,#e8edf5); color:#8896aa;
  transition:all .18s;
}
.iw-t5-step-active .iw-t5-stepnum {
  background:var(--iw-tab-active,#4f8ef7)!important;
  color:#fff!important;
}
.iw-t5-step:hover .iw-t5-stepnum {
  background:var(--iw-fc,#1a2332);
  color:#fff;
}
.iw-t5-steplbl { font-size:12px; }

.iw-t5-body {
  display:grid; grid-template-columns:1fr 272px; gap:16px; align-items:stretch;
}
.iw-t5-bottom { margin-top:16px; }


/* ============================================================
   RESPONSIVE — all templates
   ============================================================ */
@media(max-width:720px){
  .iw-t2-body,.iw-t3-body,.iw-t4-body,.iw-t5-body {
    grid-template-columns:1fr!important;
  }
  .iw-t2-tabs { gap:4px; }
  .iw-t2-tab  { padding:6px 10px; font-size:11px; }
  .iw-t4-select { max-width:100%; }
}
/* ================================================================
   Investwell Calculators — templates.css
   Layout overrides for T2, T3, T4, T5
   Default (T1/Classic Sidebar) uses existing style.css untouched.
   Each template is scoped to [data-tpl="X"] so zero conflict.
   ================================================================ */

/* ============================================================
   T2 — HORIZONTAL TOP NAV
   8 calc tabs in a single horizontal row at top.
   Below: center inputs (left) + donut (right) + table full width.
   ============================================================ */

[data-tpl="t2"] .iw-layout {
  display: block !important;
}

/* Top tab strip */
[data-tpl="t2"] .iw-sidebar {
  grid-column: unset !important;
  grid-row: unset !important;
  width: 100% !important;
  margin-bottom: 14px !important;
}

[data-tpl="t2"] .iw-sidebar-inner {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  border-bottom: none !important;
  background: var(--iw-panel-bg, #fff) !important;
  border: 1px solid #eef1f8 !important;
  border-bottom: none !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
[data-tpl="t2"] .iw-sidebar-inner::-webkit-scrollbar { display: none; }

[data-tpl="t2"] .iw-calc-card {
  flex-direction: row !important;
  width: auto !important;
  min-width: 110px !important;
  min-height: 52px !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  padding: 10px 16px !important;
  gap: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-right: 1px solid #eef1f8 !important;
  justify-content: flex-start !important;
}
[data-tpl="t2"] .iw-calc-card:first-child { border-radius: 14px 0 0 0 !important; }
[data-tpl="t2"] .iw-calc-card:hover {
  background: var(--iw-tab-hover, #eef3ff) !important;
  transform: none !important;
  box-shadow: none !important;
  border-bottom-color: var(--iw-accent, #4f8ef7) !important;
}
[data-tpl="t2"] .iw-calc-card.iw-active {
  background: var(--iw-tab-hover, #eef3ff) !important;
  border-bottom-color: var(--iw-active-bg, #4f8ef7) !important;
  box-shadow: none !important;
  transform: none !important;
}
[data-tpl="t2"] .iw-calc-card.iw-active .iw-card-label {
  color: var(--iw-active-bg, #4f8ef7) !important;
}
[data-tpl="t2"] .iw-card-icon {
  font-size: 18px !important;
  width: 28px !important; height: 28px !important;
  background: rgba(79,142,247,.08) !important;
  border-radius: 7px !important;
}
[data-tpl="t2"] .iw-card-label {
  font-size: 11px !important;
  white-space: nowrap !important;
  color: var(--iw-fc, #1a2332) !important;
}

/* Content area below tabs */
[data-tpl="t2"] .iw-calc-panel {
  display: block !important;
}
[data-tpl="t2"] .iw-center,
[data-tpl="t2"] .iw-donut-col,
[data-tpl="t2"] .iw-bottom-wrap {
  grid-column: unset !important;
  grid-row: unset !important;
}
[data-tpl="t2"] .iw-t2-body {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}
[data-tpl="t2"] .iw-center-card {
  border-radius: 0 0 var(--r, 16px) var(--r, 16px) !important;
  border-top: none !important;
}
[data-tpl="t2"] .iw-center-card::before { display: none !important; }

/* ============================================================
   T3 — CARD GRID TOP + SPLIT PANEL
   2-row icon cards grid at top (4 per row).
   Below: inputs left + donut right. Table full width.
   ============================================================ */

[data-tpl="t3"] .iw-layout {
  display: block !important;
}

[data-tpl="t3"] .iw-sidebar {
  grid-column: unset !important;
  grid-row: unset !important;
  width: 100% !important;
  margin-bottom: 14px !important;
}

[data-tpl="t3"] .iw-sidebar-inner {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 14px !important;
  background: var(--iw-panel-bg, #fff) !important;
  border-radius: var(--r, 16px) !important;
  border: 1px solid #eef1f8 !important;
  justify-content: center !important;
}

[data-tpl="t3"] .iw-calc-card {
  flex-direction: column !important;
  width: 100px !important;
  min-height: 88px !important;
  border-radius: 12px !important;
  padding: 12px 8px !important;
  gap: 6px !important;
  background: var(--iw-card-bg, #fff) !important;
  border: 1.5px solid var(--iw-card-bdr, #e8edf5) !important;
}
[data-tpl="t3"] .iw-card-icon {
  font-size: 24px !important;
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
  background: rgba(79,142,247,.08) !important;
}
[data-tpl="t3"] .iw-card-label { font-size: 10.5px !important; }
[data-tpl="t3"] .iw-calc-card:hover {
  transform: translateY(-3px) scale(1.04) !important;
  background: var(--iw-active-bg, #4f8ef7) !important;
  border-color: transparent !important;
}
[data-tpl="t3"] .iw-calc-card.iw-active {
  background: var(--iw-active-bg, #4f8ef7) !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
}
[data-tpl="t3"] .iw-calc-card:hover .iw-card-label,
[data-tpl="t3"] .iw-calc-card.iw-active .iw-card-label {
  color: var(--iw-active-text, #fff) !important;
}

[data-tpl="t3"] .iw-t3-body {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

/* ============================================================
   T4 — FOCUS MODE
   No visible sidebar. Dropdown to pick calculator at top.
   Full-width single column. Result summary under sliders.
   Donut large, centered above result box.
   ============================================================ */

[data-tpl="t4"] .iw-layout { display: block !important; }

[data-tpl="t4"] .iw-sidebar { display: none !important; }

[data-tpl="t4"] .iw-t4-picker {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
[data-tpl="t4"] .iw-t4-picker label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--iw-fc, #1a2332) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
[data-tpl="t4"] .iw-t4-picker select {
  flex: 1 !important;
  padding: 9px 14px !important;
  border: 1.5px solid #edf1fa !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--iw-fc, #1a2332) !important;
  background: var(--iw-panel-bg, #fff) !important;
  outline: none !important;
  cursor: pointer !important;
  font-family: var(--iw-font) !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234f8ef7' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}
[data-tpl="t4"] .iw-t4-picker select:focus {
  border-color: var(--iw-accent, #4f8ef7) !important;
  box-shadow: 0 0 0 3px rgba(79,142,247,.1) !important;
}

[data-tpl="t4"] .iw-t4-main {
  display: grid !important;
  grid-template-columns: 1fr 260px !important;
  gap: 14px !important;
  align-items: start !important;
  margin-bottom: 14px !important;
}

[data-tpl="t4"] .iw-donut-card {
  position: sticky !important;
  top: 20px !important;
}

/* ============================================================
   T5 — STEPPER / WIZARD
   All 8 calculators as pill tabs in a scrollable row.
   Below: inputs left, donut+result right. Table full width.
   ============================================================ */

[data-tpl="t5"] .iw-layout { display: block !important; }

[data-tpl="t5"] .iw-sidebar {
  grid-column: unset !important;
  grid-row: unset !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

[data-tpl="t5"] .iw-sidebar-inner {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 4px !important;
  background: #f1f4fb !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  align-items: center !important;
}
[data-tpl="t5"] .iw-sidebar-inner::-webkit-scrollbar { display: none; }

[data-tpl="t5"] .iw-calc-card {
  flex-direction: row !important;
  width: auto !important;
  min-width: auto !important;
  min-height: 38px !important;
  border-radius: 50px !important;
  border: none !important;
  padding: 7px 16px !important;
  gap: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
[data-tpl="t5"] .iw-calc-card:hover {
  background: rgba(255,255,255,.8) !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(30,42,90,.1) !important;
}
[data-tpl="t5"] .iw-calc-card.iw-active {
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(30,42,90,.12) !important;
  transform: none !important;
}
[data-tpl="t5"] .iw-calc-card.iw-active .iw-card-label {
  color: var(--iw-active-bg, #4f8ef7) !important;
}
[data-tpl="t5"] .iw-card-icon {
  font-size: 16px !important;
  width: 24px !important; height: 24px !important;
  background: none !important;
  border-radius: 0 !important;
}
[data-tpl="t5"] .iw-card-label {
  font-size: 12px !important;
  white-space: nowrap !important;
}

[data-tpl="t5"] .iw-t5-body {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

/* ============================================================
   SHARED RESPONSIVE — all templates go single column on mobile
   ============================================================ */
@media (max-width: 680px) {
  [data-tpl="t2"] .iw-t2-body,
  [data-tpl="t3"] .iw-t3-body,
  [data-tpl="t4"] .iw-t4-main,
  [data-tpl="t5"] .iw-t5-body {
    grid-template-columns: 1fr !important;
  }
  [data-tpl="t2"] .iw-sidebar-inner,
  [data-tpl="t5"] .iw-sidebar-inner {
    flex-wrap: wrap !important;
    border-radius: 14px !important;
  }
  [data-tpl="t2"] .iw-calc-card,
  [data-tpl="t5"] .iw-calc-card {
    flex: 0 0 calc(50% - 6px) !important;
    min-width: auto !important;
    border-radius: 10px !important;
  }
}

#iw-card-data { display:none!important; }