/* =====================================================================
   Loan calculator (2026-09). Builds on the .rs- layout in
   web.refersalesform.css: inputs on the left, navy result panel on the right.
   ===================================================================== */
.cl-card { grid-template-columns: 7fr 5fr; }

/* ---- Inputs ---- */
.cl-peso .form-control { font-weight: 700; font-size: 17px; color: var(--rs-navy-deep); }
.cl-peso-sign {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--rs-navy); font-weight: 700; font-size: 16px; pointer-events: none;
}
.cl-range { width: 100%; margin-top: 14px; accent-color: var(--rs-navy); cursor: pointer; }
.cl-range-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--rs-muted); margin-top: 2px; }

.cl-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.cl-rate[hidden] { display: none; }
.cl-rate-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(253, 227, 98, .45); color: var(--rs-navy-deep);
  border-radius: 999px; padding: 5px 12px; font-size: 13.5px;
}
.cl-rate-pill strong { font-size: 15px; }
.cl-rate-note { font-size: 12.5px; color: var(--rs-muted); font-style: italic; }
.cl-rate-note[hidden] { display: none; }
.cl-rate-link { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--rs-navy); text-decoration: none; }
.cl-rate-link:hover { text-decoration: underline; }
.cl-error[hidden] { display: none; }

/* ---- Result panel ---- */
.cl-result { display: flex; flex-direction: column; justify-content: center; }
.cl-empty { text-align: center; position: relative; z-index: 1; }
.cl-empty-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  background: rgba(253, 227, 98, .16); color: var(--rs-yellow);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.cl-empty h2 { text-align: center; }
.cl-empty p { color: rgba(255,255,255,.78); font-size: 15px; margin: 0; }
.cl-empty[hidden], .cl-out[hidden] { display: none; }

.cl-out { position: relative; z-index: 1; }
.cl-out-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.cl-out-big { font-size: clamp(30px, 4vw, 40px); font-weight: 800; color: var(--rs-yellow); line-height: 1.15; margin: 4px 0 4px; word-break: break-word; }
.cl-out-sub { color: rgba(255,255,255,.8); font-size: 14px; margin-bottom: 18px; }

.cl-rows { margin: 0 0 18px; }
.cl-rows > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 14.5px;
}
.cl-rows dt { font-weight: 400; color: rgba(255,255,255,.75); }
.cl-rows dd { margin: 0; font-weight: 700; color: #fff; text-align: right; }
.cl-rows .cl-rows-total dt, .cl-rows .cl-rows-total dd { color: var(--rs-yellow); }

.cl-disclaimer {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,.08); border: 1px solid rgba(253,227,98,.45);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 18px;
}
.cl-disclaimer i { color: var(--rs-yellow); font-size: 16px; margin-top: 2px; }
.cl-disclaimer p { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.85); }
.cl-disclaimer strong { color: #fff; }

.cl-apply {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 13px 20px; border-radius: 10px; text-decoration: none;
  background: var(--rs-yellow); color: var(--rs-navy-deep); font-weight: 800; font-size: 16px;
  box-shadow: 0 6px 16px rgba(253, 227, 98, .35); transition: transform .15s, box-shadow .15s, background .15s;
}
.cl-apply:hover, .cl-apply:focus-visible {
  color: var(--rs-navy-deep); background: #fff0a0; transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(253, 227, 98, .5);
}

@media (max-width: 991px) {
  .cl-card { grid-template-columns: 1fr; }
  .cl-rate-link { margin-left: 0; }
}