/* ═══ HHMoney: currency select + mortgage estimate. Brand kit, light only. ═══ */

/* ── Currency pill (matches .lang in the top bar) ───────────────────────── */
.hh-currency{
  appearance:none; -webkit-appearance:none;
  height:32px; padding:0 26px 0 10px; margin:0 4px;
  border:1px solid rgba(58,86,130,.14); border-radius:10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a4f0e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center,
    rgba(255,255,255,.6);
  font:600 12px/1 Inter, system-ui, sans-serif; color:#0b1026; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(58,86,130,.08), 0 3px 8px -4px rgba(58,86,130,.18);
  transition:box-shadow .18s, background-color .18s;
}
.hh-currency:hover{box-shadow:inset 0 1px 0 #fff, 0 2px 4px rgba(58,86,130,.10), 0 8px 18px -8px rgba(58,86,130,.32)}
.hh-currency:focus-visible{outline:2px solid #b8852e;outline-offset:2px}

/* ── Widget card ───────────────────────────────────────────────────────── */
.hh-mortgage{
  --ink:#0b1026; --muted:#56627e; --gt:#7a4f0e;
  position:relative; display:block;
  padding:18px 20px 16px; border-radius:18px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 40%),
    rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(58,86,130,.08),
    0 1px 2px rgba(58,86,130,.10),
    0 10px 26px -12px rgba(58,86,130,.30),
    0 30px 60px -36px rgba(58,86,130,.28);
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:var(--muted); font-size:12.5px; line-height:1.4;
}

.hhm-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hhm-title{
  font:600 10.5px/1.2 Inter, system-ui, sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gt); margin:0;
}
.hhm-price{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Big figure */
.hhm-figure{display:flex;align-items:baseline;gap:8px;margin:8px 0 2px;flex-wrap:wrap}
.hhm-monthly{
  font-family:'Cormorant Garamond', Georgia, serif; font-weight:700;
  font-size:44px; line-height:1; letter-spacing:-.01em; color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.hhm-per{font-size:12px;color:var(--muted)}

.hhm-sub{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:12px 0 14px; padding:10px 12px; border-radius:12px;
  background:linear-gradient(180deg, rgba(232,240,250,.7), rgba(250,242,222,.45));
  box-shadow:inset 0 1px 2px rgba(58,86,130,.10), inset 0 -1px 0 #fff;
}
.hhm-sub > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.hhm-k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gt)}
.hhm-sub output{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Fields */
.hhm-field{margin-top:12px}
.hhm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;min-height:22px}
.hhm-row label{font-size:12px;font-weight:600;color:var(--gt)}
.hhm-val{font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

.hhm-num{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--ink)}
.hhm-num input{
  width:52px; height:24px; padding:0 6px; text-align:right;
  border:1px solid rgba(58,86,130,.14); border-radius:8px; background:rgba(255,255,255,.75);
  font:600 12px Inter, system-ui, sans-serif; color:var(--ink); font-variant-numeric:tabular-nums;
  box-shadow:inset 0 1px 2px rgba(58,86,130,.10);
  -moz-appearance:textfield; appearance:textfield;
}
.hhm-num input::-webkit-outer-spin-button,.hhm-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hhm-num input:focus-visible{outline:2px solid #b8852e;outline-offset:1px}

/* Range: gold fill up to the value (--fill set by JS) */
.hh-mortgage input[type=range]{
  --fill:50%;
  -webkit-appearance:none; appearance:none; display:block;
  width:100%; height:22px; margin:0; background:transparent; cursor:pointer;
}
.hh-mortgage input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:999px;
  background:
    linear-gradient(90deg, #f6d573, #d9ae43) 0 0 / var(--fill) 100% no-repeat,
    rgba(58,86,130,.12);
  box-shadow:inset 0 1px 2px rgba(58,86,130,.18), 0 1px 0 #fff;
}
.hh-mortgage input[type=range]::-moz-range-track{
  height:6px; border-radius:999px; background:rgba(58,86,130,.12);
  box-shadow:inset 0 1px 2px rgba(58,86,130,.18), 0 1px 0 #fff;
}
.hh-mortgage input[type=range]::-moz-range-progress{
  height:6px; border-radius:999px; background:linear-gradient(90deg, #f6d573, #d9ae43);
}
.hh-mortgage input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-7px; border-radius:50%;
  border:2px solid #fff;
  background:radial-gradient(circle at 35% 30%, #fffdf4 0%, #f6d573 35%, #d9ae43 100%);
  box-shadow:0 1px 2px rgba(58,86,130,.25), 0 4px 10px -2px rgba(58,86,130,.40), inset 0 -1px 2px rgba(122,79,14,.25);
  transition:transform .15s cubic-bezier(.16,1,.3,1), box-shadow .15s;
}
.hh-mortgage input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; border:2px solid #fff;
  background:radial-gradient(circle at 35% 30%, #fffdf4 0%, #f6d573 35%, #d9ae43 100%);
  box-shadow:0 1px 2px rgba(58,86,130,.25), 0 4px 10px -2px rgba(58,86,130,.40);
}
.hh-mortgage input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08)}
.hh-mortgage input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 6px rgba(246,213,115,.28), 0 4px 12px -2px rgba(58,86,130,.45)}
.hh-mortgage input[type=range]:focus{outline:none}
.hh-mortgage input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff, 0 0 0 5px #b8852e, 0 4px 10px -2px rgba(58,86,130,.40)}
.hh-mortgage input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #fff, 0 0 0 5px #b8852e}

/* TOM button (gold; .btn-gold from depth.css supplies the bevel + glint) */
.hhm-tom{
  display:block; width:100%; margin-top:16px; height:40px; border-radius:12px;
  font:600 13px Inter, system-ui, sans-serif; color:#3F2E08; letter-spacing:.01em;
  background:linear-gradient(180deg,#fbe39a 0%, #f6d573 30%, #d9ae43 100%);
}
.hhm-note{margin:9px 0 0;font-size:11px;color:var(--muted);text-align:center}

@media (prefers-reduced-motion: reduce){
  .hh-mortgage input[type=range]::-webkit-slider-thumb{transition:none}
}
.hhm-approx{font-size:.55em;font-weight:600;color:#b8852e;vertical-align:.18em}