/* ============================================================
   BUDGET CALCULATOR — page styles
   Builds on css/style.css design tokens.
   ============================================================ */

.calc-hero{position:relative;background:var(--clr-navy);color:var(--clr-white);overflow:hidden;padding:calc(var(--sp-10) + 60px) 0 var(--sp-9)}
.calc-hero .aurora{opacity:.7}
.calc-hero__inner{position:relative;z-index:1;max-width:760px}
.calc-hero h1{color:var(--clr-white);font-size:var(--fs-h2);margin-bottom:var(--sp-4)}
.calc-hero p{color:rgba(248,250,252,.65);font-size:var(--fs-body);line-height:1.8;max-width:620px}

.calc-section{background:#EEF2F7;padding-block:var(--sp-9) var(--sp-11)}
.calc-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-7);align-items:start}

/* Input card */
.calc-form{background:#fff;border:1px solid rgba(10,26,47,.07);border-radius:var(--radius-xl);padding:var(--sp-7);box-shadow:var(--shadow-card)}
.calc-field{margin-bottom:var(--sp-6)}
.calc-field:last-child{margin-bottom:0}
.calc-field__label{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-family:var(--ff-heading);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--clr-near-black);margin-bottom:var(--sp-3)}
.calc-field__hint{font-family:var(--ff-body);font-size:var(--fs-caption);font-weight:var(--fw-regular);color:var(--clr-grey-dark)}
.calc-field__value{font-family:var(--ff-heading);font-weight:var(--fw-bold);color:var(--clr-gold-dark)}
.calc-select{width:100%;padding:13px 16px;border:1px solid rgba(10,26,47,.14);border-radius:var(--radius-md);background:#fff;color:var(--clr-near-black);font-size:var(--fs-body);font-family:var(--ff-heading);font-weight:var(--fw-medium);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.calc-select:focus{border-color:var(--clr-gold);box-shadow:0 0 0 3px rgba(200,169,106,.15)}

/* Segmented control */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;background:#F1F5F9;border:1px solid rgba(10,26,47,.07);border-radius:var(--radius-md);padding:5px}
.seg__btn{padding:10px 8px;border-radius:9px;font-family:var(--ff-heading);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--clr-grey-darker);cursor:pointer;text-align:center;transition:all var(--dur-fast) var(--ease-out);background:transparent;border:none}
.seg__btn small{display:block;font-size:.68rem;font-weight:var(--fw-regular);color:var(--clr-grey-dark);margin-top:1px}
.seg__btn:hover{color:var(--clr-near-black)}
.seg__btn.active{background:#fff;color:var(--clr-navy);box-shadow:0 2px 8px rgba(10,26,47,.1)}
.seg__btn.active small{color:var(--clr-gold-dark)}

/* Range */
.calc-field input[type=range]{width:100%;accent-color:var(--clr-gold-dark);height:6px;cursor:pointer}

/* Toggle switches */
.calc-toggles{display:flex;flex-direction:column;gap:var(--sp-3)}
.calc-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:12px 16px;background:#F1F5F9;border:1px solid rgba(10,26,47,.06);border-radius:var(--radius-md);cursor:pointer}
.calc-toggle__text{font-family:var(--ff-heading);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--clr-near-black)}
.calc-toggle__text small{display:block;font-family:var(--ff-body);font-weight:var(--fw-regular);font-size:var(--fs-caption);color:var(--clr-grey-dark)}
.switch{position:relative;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch__slider{position:absolute;inset:0;background:#cbd5e1;border-radius:var(--radius-full);transition:background var(--dur-fast)}
.switch__slider::before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform var(--dur-fast) var(--ease-smooth);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .switch__slider{background:var(--clr-gold-dark)}
.switch input:checked + .switch__slider::before{transform:translateX(20px)}

/* Result panel */
.calc-result{position:sticky;top:90px;background:var(--clr-navy);color:var(--clr-white);border-radius:var(--radius-xl);padding:var(--sp-7);overflow:hidden;box-shadow:var(--shadow-xl)}
.calc-result__glow{position:absolute;top:-30%;right:-20%;width:300px;height:300px;background:radial-gradient(circle,rgba(200,169,106,.16),transparent 70%);pointer-events:none}
.calc-result__inner{position:relative;z-index:1}
.calc-result__dest{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-5)}
.calc-result__flag{font-size:1.7rem}
.calc-result__country{font-family:var(--ff-heading);font-weight:var(--fw-semibold);color:#fff}
.calc-result__country small{display:block;font-weight:var(--fw-regular);font-size:var(--fs-caption);color:rgba(248,250,252,.55)}
.calc-total{padding:var(--sp-5) 0;border-block:1px solid rgba(255,255,255,.1);margin-bottom:var(--sp-5)}
.calc-total__label{font-family:var(--ff-heading);font-size:var(--fs-caption);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--clr-gold-light);margin-bottom:var(--sp-2)}
.calc-total__amount{font-family:var(--ff-display);font-weight:600;font-size:clamp(2.2rem,6vw,3.1rem);color:#fff;line-height:1.05;letter-spacing:-.02em}
.calc-total__sub{font-size:var(--fs-body-sm);color:rgba(248,250,252,.6);margin-top:var(--sp-2)}
.calc-total__years{font-size:var(--fs-caption);color:rgba(248,250,252,.45);margin-top:4px}
.calc-approx{margin-top:var(--sp-3);font-size:var(--fs-caption);color:var(--clr-gold-light);background:rgba(200,169,106,.1);border:1px solid rgba(200,169,106,.25);border-radius:var(--radius-md);padding:8px 12px;line-height:1.5}

.calc-break{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--sp-5)}
.calc-break__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.calc-break__row:last-child{border-bottom:none}
.calc-break__name{display:flex;align-items:center;gap:10px;font-size:var(--fs-body-sm);color:rgba(248,250,252,.8)}
.calc-break__name svg{width:17px;height:17px;stroke:var(--clr-gold);flex-shrink:0}
.calc-break__name small{color:rgba(248,250,252,.45);font-size:var(--fs-caption)}
.calc-break__amt{font-family:var(--ff-heading);font-weight:var(--fw-semibold);color:#fff;white-space:nowrap}
.calc-break__row--muted .calc-break__amt{color:rgba(248,250,252,.4);text-decoration:line-through;font-weight:var(--fw-regular)}
.calc-break__row--save .calc-break__amt{color:var(--clr-green)}

.calc-result__cta .btn{width:100%}
.calc-result__note{margin-top:var(--sp-4);font-size:var(--fs-caption);color:rgba(248,250,252,.45);line-height:1.55;display:flex;gap:8px}
.calc-result__note svg{width:15px;height:15px;stroke:var(--clr-gold);flex-shrink:0;margin-top:2px}

.calc-proof{margin-top:var(--sp-5);background:#fff;border:1px solid rgba(10,26,47,.07);border-radius:var(--radius-lg);padding:var(--sp-5)}
.calc-proof h4{font-family:var(--ff-heading);font-size:var(--fs-body-sm);margin-bottom:var(--sp-2);color:var(--clr-near-black)}
.calc-proof p{font-size:var(--fs-body-sm);color:var(--clr-grey-dark);line-height:1.6}

/* Responsive */
@media(max-width:900px){
  .calc-layout{grid-template-columns:1fr}
  .calc-result{position:static}
}
@media(max-width:480px){
  .calc-hero h1{font-size:1.7rem}
  .calc-form{padding:var(--sp-5)}
  .calc-result{padding:var(--sp-5)}
  .seg__btn{font-size:.78rem;padding:9px 4px}
}