/* ==========================================================================
   SimpliWealth — SIP / Step-up SIP calculator
   Loaded after site.css and glass.css. Self-contained: nothing here restyles
   an existing component, so it can be removed by deleting one <link>.
   ========================================================================== */

:root{
  --c-invested:#3E63C8;   /* validated pair — see calculators.js */
  --c-returns:#EF1963;
}

.calc{
  background:var(--glass,rgba(255,255,255,.56));
  border:1px solid var(--glass-line,rgba(255,255,255,.68));
  border-radius:24px;
  box-shadow:var(--glass-shadow,0 18px 50px rgba(32,28,24,.08));
  padding:30px 32px 26px;
  overflow:hidden;
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .calc{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
}

/* ---- Segmented mode switch ---- */
.calc-tabs{
  display:inline-flex;gap:4px;padding:4px;margin-bottom:28px;
  background:rgba(27,28,30,.05);border-radius:100px;
}
.calc-tab{
  border:0;background:transparent;cursor:pointer;
  padding:10px 22px;border-radius:100px;
  font-size:14.5px;font-weight:600;color:var(--grey);
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.calc-tab:hover{color:var(--ink)}
.calc-tab.is-on{background:#fff;color:var(--rose-text);box-shadow:0 2px 10px rgba(32,28,24,.10)}

/* ---- Two-column body: controls on the left, the read-out on the right ---- */
.calc-main{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:44px;align-items:start;
}

/* ---- Fields ---- */
.calc-fields{display:grid;gap:26px}
.field-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;
}
.field-top label{font-size:14.5px;font-weight:500;color:var(--ink-soft);line-height:1.35}
.field-val{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  background:rgba(255,255,255,.72);border:1px solid var(--line-strong);
  border-radius:10px;padding:7px 12px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field-val:focus-within{border-color:var(--rose);box-shadow:0 0 0 3px rgba(239,25,99,.12)}
.field-val .adorn{font-size:14.5px;font-weight:600;color:var(--grey)}
.field-val input{
  border:0;background:transparent;outline:0;padding:0;
  font-size:16px;font-weight:600;color:var(--ink);
  width:var(--w,5.6ch);text-align:right;font-variant-numeric:tabular-nums;
}
.field-val input::-webkit-outer-spin-button,
.field-val input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---- Range sliders ---- */
.calc input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:20px;background:transparent;cursor:pointer;display:block;
}
.calc input[type=range]:focus{outline:0}
.calc input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(239,25,99,.2)}
.calc input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(239,25,99,.2)}

.calc input[type=range]::-webkit-slider-runnable-track{
  height:5px;border-radius:100px;
  background:linear-gradient(to right,
    var(--rose) 0 var(--fill,50%),
    rgba(27,28,30,.13) var(--fill,50%) 100%);
}
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;margin-top:-6.5px;border-radius:50%;
  background:#fff;border:2.5px solid var(--rose);
  box-shadow:0 2px 8px rgba(239,25,99,.30);
  transition:transform .15s ease,box-shadow .15s ease;
}
.calc input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}

.calc input[type=range]::-moz-range-track{height:5px;border-radius:100px;background:rgba(27,28,30,.13)}
.calc input[type=range]::-moz-range-progress{height:5px;border-radius:100px;background:var(--rose)}
.calc input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:#fff;border:2.5px solid var(--rose);
  box-shadow:0 2px 8px rgba(239,25,99,.30);
}

.field-scale{
  display:flex;justify-content:space-between;
  margin-top:7px;font-size:11.5px;color:var(--grey-light);
}

/* ---- Read-out ---- */
.calc-out{display:grid;gap:22px}

.calc-hero{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
}
.calc-hero .k{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);width:100%;
}
.calc-hero .v{
  font-family:var(--display);font-size:clamp(34px,4.4vw,46px);line-height:1.05;
  font-weight:500;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.calc-hero .mult{
  font-size:13px;font-weight:600;color:var(--rose-text);
  background:var(--rose-soft);border:1px solid var(--rose-line);
  border-radius:100px;padding:5px 12px;
}

/* Proportion bar: invested vs returns, as one 100% strip */
.calc-split{display:grid;gap:10px}
.calc-split-bar{
  height:10px;border-radius:100px;overflow:hidden;
  background:var(--c-returns);display:flex;
}
.calc-split-fill{
  height:100%;background:var(--c-invested);
  border-right:2px solid rgba(255,255,255,.9);
  transition:width .3s cubic-bezier(.22,.61,.36,1);
}
.calc-split-note{font-size:12.5px;color:var(--grey)}

.calc-legend{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc-legend div{
  background:rgba(255,255,255,.6);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;
}
.calc-legend .k{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);
  margin-bottom:7px;
}
.calc-legend .k i{width:10px;height:10px;border-radius:3px;flex:none}
.calc-legend .v{
  font-size:19px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}

/* display:flex would otherwise beat the [hidden] attribute's UA display:none */
.calc [hidden]{display:none!important}

.calc-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-size:14px;color:var(--grey);
  border-top:1px dashed var(--line-strong);padding-top:14px;
}
.calc-row b{font-size:15.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- Chart ---- */
.calc-chart-wrap{position:relative;margin-top:30px}
.calc-chart{width:100%;cursor:crosshair}
.calc-chart svg{display:block;width:100%;height:auto;overflow:visible}
.calc-cursor{transition:opacity .12s ease;pointer-events:none}

.calc-tip{
  position:absolute;top:0;left:0;z-index:4;pointer-events:none;opacity:0;
  background:var(--ink);color:#fff;border-radius:10px;padding:11px 13px;
  box-shadow:0 12px 30px rgba(27,28,30,.26);
  font-size:12.5px;line-height:1.5;min-width:168px;
  transition:opacity .14s ease;
}
.calc-tip strong{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:7px;font-weight:600}
.calc-tip span{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.75)}
.calc-tip span+span{margin-top:4px}
.calc-tip i{width:8px;height:8px;border-radius:2px;flex:none}
.calc-tip b{margin-left:auto;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}

/* ---- Table view (also the accessible alternative to the chart) ---- */
.calc-table{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.calc-table summary{
  cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--rose-text);
  display:inline-flex;align-items:center;gap:8px;
}
.calc-table summary::-webkit-details-marker{display:none}
.calc-table summary::after{
  content:"";width:7px;height:7px;border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
}
.calc-table[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.calc-table .scroll{max-height:300px;overflow:auto;margin-top:16px;-webkit-overflow-scrolling:touch}
.calc-table table{width:100%;border-collapse:collapse;font-size:13.8px}
.calc-table th,.calc-table td{
  text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;color:var(--ink-soft);
}
.calc-table th:first-child,.calc-table td:first-child{text-align:left}
.calc-table thead th{
  position:sticky;top:0;background:rgba(255,255,255,.95);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  font-weight:600;
}

/* ---- Disclaimer ---- */
.calc-note{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.7;color:var(--grey);
}
.calc-note strong{color:var(--ink-soft);font-weight:600}

.calc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ---- Responsive ---- */
@media (max-width:980px){
  .calc-main{grid-template-columns:1fr;gap:34px}
  .calc{padding:26px 24px 22px}
}
@media (max-width:560px){
  .calc{padding:22px 18px 18px;border-radius:18px}
  .calc-legend{grid-template-columns:1fr}
  .calc-tabs{display:flex;width:100%}
  .calc-tab{flex:1;padding:10px 12px;font-size:13.5px}
  .field-top{flex-wrap:wrap;gap:8px}
  .calc-cta .btn{width:100%}
}