/* Mortgage Qualifiers — recreated from design handoff (Mortgage Qualifiers v2) */

body { margin: 0; background: #F4F7FA; font-family: "Source Sans 3", system-ui, sans-serif; }
a { color: #1B6CB5; text-decoration: none; }
a:hover { color: #0B2A4A; }
input, select { font-family: "Source Sans 3", system-ui, sans-serif; }
input:focus, select:focus { outline: 2px solid #2E9E44; outline-offset: 1px; }

/* ---------- hover helpers (design's style-hover attributes) ---------- */
.hov-ink:hover { color: #0B2A4A !important; }
.hov-tint:hover { background: #E7EEF5; }
.hov-green:hover { background: #257F36 !important; }
.hov-navy:hover { background: #0E3A63; }
.hov-white:hover { color: #fff !important; }
.hov-mint:hover { background: #EFF6EF; }
.hov-chip:hover { border-color: #2E9E44 !important; color: #257F36 !important; }

/* ---------- buttons / inputs ---------- */
.btn-primary {
  background: #2E9E44; color: #fff; font-weight: 700; text-align: center;
  border-radius: 10px; cursor: pointer; user-select: none;
}
.txt {
  border: 2px solid #C9D4DF; border-radius: 14px; padding: 16px 18px;
  font-size: 18px; color: #16283A; background: #fff; width: 100%; box-sizing: border-box;
}
.txt-lg { padding: 18px; font-size: 20px; }
.money { display: flex; border: 2px solid #C9D4DF; border-radius: 14px; overflow: hidden; background: #fff; }
.money-prefix {
  background: #F2F5F8; padding: 18px 20px; font-size: 20px; font-weight: 700;
  color: #52657A; border-right: 1px solid #E3E9F0;
}
.money input { border: none; padding: 18px; font-size: 20px; color: #16283A; flex: 1; min-width: 0; }
.sel-dob {
  border: 2px solid #C9D4DF; border-radius: 12px; padding: 14px;
  font-size: 16px; color: #16283A; background: #fff;
}
.field-label { font-size: 14.5px; font-weight: 600; color: #16283A; }
.field-hint { font-size: 13px; color: #8593A2; }

/* ---------- option cards / pills / checkboxes ---------- */
.opt-card {
  border: 2px solid #E3E9F0; background: #fff; border-radius: 14px; padding: 17px 18px;
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.opt-card.sel { border-color: #2E9E44; background: #F4FAF4; }
.opt-key {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: #F2F5F8; color: #52657A;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.opt-card.sel .opt-key { background: #2E9E44; color: #fff; }
.opt-box {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  border: 2px solid #C9D4DF; background: #fff; color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; box-sizing: border-box;
}
.opt-card.sel .opt-box { border: none; background: #2E9E44; }
.pill {
  flex: 1; text-align: center; padding: 13px 8px; border-radius: 12px;
  border: 2px solid #E3E9F0; background: #fff; color: #16283A;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.pill.sel { border-color: #2E9E44; background: #F4FAF4; color: #257F36; font-weight: 800; }
.pill.taken { background: #F2F5F8; color: #AEBECB; border-color: #E9EEF3; cursor: not-allowed; text-decoration: line-through; }
.consent-row {
  display: flex; gap: 14px; align-items: flex-start; cursor: pointer;
  border: 2px solid #E3E9F0; background: #fff; border-radius: 14px; padding: 16px 18px;
}
.consent-row.sel { border-color: #2E9E44; background: #F4FAF4; }
.consent-box {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid #C9D4DF; background: #fff; color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; box-sizing: border-box;
}
.consent-row.sel .consent-box { border: none; background: #2E9E44; }

/* ---------- booking ---------- */
.day-chip {
  flex: 1; text-align: center; padding: 10px 4px; border-radius: 12px; cursor: pointer;
  border: 2px solid #E3E9F0; background: #fff;
}
.day-chip.sel { border-color: #2E9E44; background: #F4FAF4; }
.day-dow { font-size: 12px; color: #52657A; }
.day-chip.sel .day-dow { color: #257F36; font-weight: 600; }
.day-date { font-size: 17px; font-weight: 700; color: #16283A; }
.day-chip.sel .day-date { color: #257F36; font-weight: 800; }

/* ---------- error ---------- */
.err-box {
  margin-top: 16px; background: #FDF2F2; border: 1px solid #F2C4C4; border-radius: 10px;
  padding: 12px 16px; font-size: 14.5px; color: #B0392E;
  animation: mq-shake 0.3s ease;
}
@keyframes mq-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ---------- Lenny chat ---------- */
.lenny-wrap {
  position: fixed; right: 16px; bottom: 16px; z-index: 100;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
body.page-done .lenny-wrap { display: none; }
.msg-user {
  background: #0B2A4A; color: #fff; border-radius: 14px 14px 4px 14px; padding: 10px 14px;
  font-size: 14px; line-height: 1.5; align-self: flex-end; max-width: 80%;
}
.msg-bot {
  background: #F0F3F6; color: #16283A; border-radius: 14px 14px 14px 4px; padding: 10px 14px;
  font-size: 14px; line-height: 1.5; align-self: flex-start; max-width: 85%;
}
.chat-chip {
  border: 1.5px solid #C9D4DF; border-radius: 999px; padding: 7px 13px;
  font-size: 13px; font-weight: 600; color: #16283A; cursor: pointer;
}

/* ---------- responsive (design breakpoint: 720px) ---------- */
.nav-mobile { display: none; }
.mobile-cta-bar { display: none; }
@media (max-width: 720px) {
  .nav-desktop { display: none !important; }
  .nav-mobile { display: block; }
  body.page-landing .mobile-cta-bar { display: block; }
  body.page-landing .lenny-wrap { bottom: 92px; }
  body.page-landing .lenny-bubble { display: none !important; }

  /* slimmer top bar; fades out once you scroll into the page */
  .site-top { padding: 5px 12px !important; transition: opacity 0.25s ease, transform 0.25s ease; }
  .site-top img { width: 26px !important; }
  .site-top .brand-text { font-size: 15.5px !important; }
  .nav-mobile > div { font-size: 12.5px !important; padding: 7px 11px !important; border-radius: 7px !important; }
  body.page-landing.scrolled .site-top { opacity: 0; transform: translateY(-100%); pointer-events: none; }

  /* slimmer bottom bar; hidden at the top of the page, fades in on scroll */
  .mobile-cta-bar {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
    opacity: 0; transform: translateY(100%); pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  body.page-landing.scrolled .mobile-cta-bar { opacity: 1; transform: none; pointer-events: auto; }
  .mobile-cta-bar .lenny-sq { width: 54px !important; }
  .mobile-cta-bar .cta-main { font-size: 15px !important; }
  .mobile-cta-bar .cta-sub { font-size: 10.5px !important; }

  /* check + booking flow: no floating chat bubble (it covers the OK button),
     and size the pinned button to the real visible viewport (100vh overshoots
     on phones, forcing a needless scroll) */
  body.page-check .lenny-wrap, body.page-booking .lenny-wrap { display: none !important; }
  .check-page { min-height: 100svh !important; }
  .check-col {
    min-height: 100svh !important;
    padding: 0 16px calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .check-head { padding: 10px 0 !important; }
  .check-progress { padding-bottom: 16px !important; }
  .check-foot { padding-top: 16px !important; }

  /* chat becomes a full-screen sheet on phones */
  body.chat-open {
    position: fixed; width: 100%; overflow: hidden; /* lock the page behind the sheet */
  }
  body.chat-open .lenny-wrap {
    inset: 0 !important; z-index: 200; align-items: stretch;
  }
  body.chat-open .lenny-panel {
    width: 100% !important; border-radius: 0 !important; box-shadow: none !important;
    height: 100vh; height: 100dvh;
    height: var(--chat-h, 100dvh); /* tracks the visual viewport, so the keyboard shrinks the sheet */
    flex: none;
  }
  .lenny-panel .lenny-head { padding-top: calc(14px + env(safe-area-inset-top)) !important; }
  .lenny-panel .lenny-head [data-action="close-chat"] { font-size: 24px !important; padding: 6px 14px !important; }
  body.chat-open .lenny-panel #lenny-msgs { height: auto !important; flex: 1 1 auto; }
  .lenny-panel .msg-user, .lenny-panel .msg-bot { font-size: 15px; }
  .lenny-panel .lenny-chips { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lenny-panel .lenny-chips .chat-chip { flex-shrink: 0; white-space: nowrap; padding: 9px 14px; }
  .lenny-panel input { font-size: 16px !important; } /* <16px makes iOS zoom the page on focus */
  .lenny-panel .lenny-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
}