/* Mortgage calculator card on the property page. */
.loan { margin-top:20px; --tile:#fff; container-type:inline-size; }
.loan-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.loan-head h2 { font-size:1.2rem; margin:0 0 2px; }
.loan-bank { display:flex; align-items:center; gap:16px; min-width:0; }
.loan-bank-info { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.loan-bank-info strong { font-size:1rem; transition:opacity .25s; }
.loan-logo { display:block; width:96px; height:68px; padding:8px; border-radius:12px; background:var(--tile); border:1px solid var(--border); overflow:hidden; }
.loan-logo img { display:block; width:100%; height:100%; object-fit:contain; animation:logo-in .45s cubic-bezier(.2,1.4,.3,1); }
@keyframes logo-in { from { opacity:0; transform:scale(.6) rotate(-8deg); } }

/* bank slider: swipe/scroll, arrows, and a highlight that glides to the selected bank */
.bank-slider { position:relative; display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.bs-track { position:relative; flex:1; min-width:0; display:flex; gap:12px; padding:8px 4px 12px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth; scrollbar-width:none; outline:0;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%); }
.bs-track::-webkit-scrollbar { display:none; }
.bs-thumb { position:absolute; top:8px; left:0; height:calc(100% - 18px); width:132px; border-radius:16px; background:var(--primary-soft); border:1.5px solid var(--primary); box-shadow:0 8px 20px rgba(37,99,235,.2);
  transform:translateX(var(--tx,4px)); transition:transform .45s cubic-bezier(.3,1.15,.4,1), width .3s; pointer-events:none; }
.bank-chip { position:relative; z-index:1; flex:none; width:132px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px 8px; border-radius:16px; border:1.5px solid transparent; background:transparent; color:var(--fg); font:inherit; cursor:pointer; scroll-snap-align:center;
  transition:transform .3s cubic-bezier(.2,1.5,.3,1), opacity .25s; opacity:.92; }
.bank-chip:hover { transform:translateY(-3px); opacity:1; }
.bank-chip.on { opacity:1; }
.bank-chip:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.bc-logo { display:block; width:100%; height:52px; padding:4px 8px; border-radius:10px; background:var(--tile); border:1px solid var(--border); overflow:hidden; }
.bc-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.bc-name { font-size:.84rem; font-weight:600; line-height:1.25; text-align:center; }
.bc-rate { font-size:.74rem; color:var(--muted); }
.bank-chip.on .bc-rate { color:var(--primary); font-weight:600; }
.bs-arrow { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--fg); cursor:pointer; padding:0; transition:transform .2s cubic-bezier(.2,1.5,.3,1), border-color .2s, opacity .2s; }
.bs-arrow:hover { transform:scale(1.12); border-color:var(--primary); color:var(--primary); }
.bs-arrow:active { transform:scale(.92); }
.bs-arrow:disabled { opacity:.35; cursor:default; transform:none; }

.loan-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:20px; align-items:stretch; }
.loan-grid > * { min-width:0; }
.loan-form label { display:block; margin-bottom:12px; font-weight:600; font-size:.9rem; }
.loan-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.loan-row > label, .loan-form > label { min-width:0; }
.lfield { display:flex; align-items:center; gap:8px; margin-top:8px; padding:0 16px; height:46px; border:1.5px solid var(--border); border-radius:12px; background:var(--card); transition:border-color .2s, box-shadow .2s; }
.lfield:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.lfield input, .lfield select { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-weight:600; color:var(--fg); }
.lfield select { cursor:pointer; }
.lfield em { flex:none; font-style:normal; color:var(--muted); font-weight:500; }
.loan-actions { margin-top:8px; }
.loan-actions .link { display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-size:.9rem; }
.loan-actions .link:hover { color:var(--primary-dark); }

.loan-result { border:1px solid var(--border); border-radius:16px; padding:20px 20px; background:var(--bg); }
.lr-title { font-weight:600; margin-bottom:12px; }
.lr-row { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 12px; padding:8px 0; }
.lr-row span { color:var(--fg); }
.lr-row strong { font-variant-numeric:tabular-nums; }
.lr-row strong b { font-size:clamp(1.25rem,4.2cqw,1.7rem); font-weight:700; }
.lr-row strong small { margin-left:8px; font-size:.8rem; font-weight:400; color:var(--muted); }
.lr-row.big strong b { font-size:clamp(1.6rem,5.4cqw,2.1rem); }
.lr-row .pay b { color:#16A34A; }
.loan-result hr { border:0; border-top:1px solid var(--border); margin:8px 0; }
.lr-extra { margin-top:8px; padding-top:12px; border-top:1px dashed var(--border); display:grid; gap:8px; font-size:.86rem; color:var(--muted); }
.lr-extra b { color:var(--fg); font-variant-numeric:tabular-nums; }
.lr-extra span { margin-right:8px; }
.loan-note { margin:16px 0 0; line-height:1.6; }
.loan-note a { text-decoration:underline; }
.num-tick { animation:num-tick .35s ease; }
@keyframes num-tick { 40% { transform:translateY(-3px); opacity:.6; } }
@container (max-width:900px) { .loan-grid { grid-template-columns:1fr; } }
@container (max-width:520px) { .loan-bank { width:100%; } .loan-logo { width:80px; height:58px; } .bank-chip, .bs-thumb { } .loan-row { grid-template-columns:1fr; } .loan.card { padding:16px; } }
@media (prefers-reduced-motion: reduce) { .bank-chip, .bs-thumb, .bs-track, .loan-logo img, .num-tick { animation:none !important; transition:none !important; scroll-behavior:auto; } }