/* ============================================================
   Loans San Angelo — brand & site-specific overrides
   Layered on top of the Banca template's default.css / style.css
   ============================================================ */

/* --- Logo: icon (img/logo/loans-san-angelo-icon.png) + Poppins wordmark --- */
.brand__mark-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand__mark {
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.header-menu .brand__mark {
  height: 46px;
}
.brand__wordmark {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.1;
  color: var(--theme-title-color);
  white-space: nowrap;
}

/* Footer: icon sits on a white rounded tile so it stays visible against the
   footer's near-black background (--bank-footer-area is #101010); the
   wordmark sits beside the tile, directly on the dark background. */
.brand__footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand__mark-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 11px;
  padding: 6px;
}
.brand__mark-tile .brand__mark--footer {
  height: 50px;
  width: auto;
  object-fit: contain;
  display: block;
}
.brand__wordmark--footer {
  color: #fff;
  font-size: 20px;
}

/* --- Top info bar phone / email links --- */
.header-info-right a,
.header-info-left .site-note {
  color: inherit;
}

/* --- Sticky Apply CTA in nav --- */
.nav-apply-btn {
  white-space: nowrap;
}

/* --- Area-served pill list --- */
.area-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.area-pill-list span {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 30px;
  background: var(--black_25);
  border: 1px solid var(--border_on_white);
  font-size: 14px;
  font-weight: 500;
  color: var(--theme-title-color);
}

/* --- Calculator / estimate disclaimer --- */
.calc-disclaimer,
.form-disclaimer {
  font-size: 13px;
  color: var(--theme-text-color);
  margin-top: 14px;
}

/* --- Honeypot field (hidden from real users, visible to bots) --- */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* --- NAP footer line --- */
.nap-line {
  font-size: 14px;
  color: var(--theme-text-color);
  margin-top: 14px;
}

/* --- Simple reason / loan-type icon cards (no stock icon imagery) --- */
.reason-card {
  background: #fff;
  border: 1px solid var(--border_on_white);
  border-radius: 14px;
  padding: 32px 26px;
  height: 100%;
  transition: box-shadow .25s ease, transform .25s ease;
}
.reason-card:hover {
  box-shadow: var(--theme-dropshadow);
  transform: translateY(-4px);
}
.reason-card .reason-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--brand_color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}

/* --- Loan type tab panels (repurposed card tabs) --- */
.loan-type-tab-pane h4 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}
.loan-type-tab-pane .theme-btn {
  margin-top: 10px;
}

/* ============================================================
   Sticky conversion CTAs — always-visible Call / Apply Now
   Mobile: full-width two-button bar fixed to the bottom
   Desktop: floating rounded "Apply Now" button, bottom-right
   ============================================================ */

/* Reserve room so the fixed mobile bar never covers page content */
@media (max-width: 991px) {
  body {
    padding-bottom: 62px;
  }
}

.sticky-cta-mobile {
  display: none;
}

@media (max-width: 991px) {
  .sticky-cta-mobile {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15);
  }
  .sticky-cta-mobile a {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 10px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    line-height: 1;
  }
  .sticky-cta-mobile .sticky-cta-call {
    background: var(--theme-title-color);
    color: #fff;
  }
  .sticky-cta-mobile .sticky-cta-apply {
    background: var(--brand_color);
    color: #fff;
  }
}

.sticky-cta-desktop {
  display: none;
}

@media (min-width: 992px) {
  .sticky-cta-desktop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1030;
    background: var(--brand_color);
    color: #fff;
    padding: 17px 28px;
    border-radius: 50px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .sticky-cta-desktop:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
  }
}

/* ============================================================
   Two-step contact form
   Same fields, same contact.php handler — staged over two screens
   so first-time visitors see 2 fields, then 3 required + 2 optional,
   instead of all 7 fields at once.
   ============================================================ */
.form-step-progress {
  height: 5px;
  width: 100%;
  background: var(--black_25);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.form-step-progress-bar {
  height: 100%;
  width: 50%;
  background: var(--brand_color);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.form-step-label {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-text-color);
  margin-bottom: 24px;
}
.field-error {
  display: none;
  color: #d9364a;
  font-size: 13px;
  margin-top: 6px;
}
.field-error.show {
  display: block;
}
.form-control.is-invalid {
  border-color: #d9364a !important;
}

/* Keep the template's "back to top" button from overlapping the new sticky CTAs */
@media (max-width: 991px) {
  #back-to-top {
    bottom: 78px;
    right: 14px;
  }
}
@media (min-width: 992px) {
  #back-to-top {
    bottom: 102px;
  }
}