/* Bandaptai additions on top of the Financer template (assets/css/style.css, used as supplied).
   Template palette is kept: green #09a223 / #067219, ink #1e2331, text #7a8595. */

/* ---- Draft banner and placeholders: unverified facts stay visible as placeholders ---- */
.draft-banner { background: #fff4cf; color: #5a4300; text-align: center; font-size: 14px; padding: 8px 15px; border-bottom: 1px solid #f0d58a; }
.ph { background: #fff4cf; color: #5a4300; border: 1px dashed #c9a24b; border-radius: 3px; padding: 0 5px; font-weight: 600; }
.topbar .ph { background: rgba(255, 244, 207, .18); color: #fff4cf; border-color: rgba(255, 255, 255, .55); }

/* ---- Logo sizing: the Bandaptai wordmark is wider than the template's logo ---- */
.site-header .site-logo img { height: 52px; width: auto; max-width: none; }
.site-footer .footer-logo img { height: 56px; width: auto; }
@media (max-width: 767px) { .site-header .site-logo img { height: 44px; } }

/* ---- Callouts, prose, contents list ---- */
.bsa-notice { border: 1px solid #f0d58a; background: #fffaf0; border-radius: 3px; padding: 15px 20px; color: #4a3a0c; margin: 25px 0; }
.bsa-notice strong { color: #2f2406; }
.bsa-prose { max-width: 820px; margin: 0 auto; }
.bsa-prose h3 { margin: 40px 0 12px; }
.bsa-prose h3:first-child { margin-top: 0; }
.bsa-prose li { margin-bottom: 8px; }
.bsa-toc { list-style: none; padding: 0; margin: 0 0 35px; display: flex; flex-wrap: wrap; gap: 8px; }
.bsa-toc a { display: inline-block; border: 1px solid #dde1ea; border-radius: 999px; padding: 5px 16px; font-size: 14px; }
.bsa-toc a:hover { border-color: #09a223; background: #09a223; color: #fff; }

/* ---- Illustration table ---- */
table.bsa-calc { width: 100%; max-width: 560px; border-collapse: collapse; margin: 20px 0 10px; }
table.bsa-calc caption { font-family: "Nunito", sans-serif; font-weight: 700; color: #1e2331; padding-bottom: 8px; text-align: left; }
table.bsa-calc td { padding: 12px 16px; border: 1px solid #e3e7ee; }
table.bsa-calc td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
table.bsa-calc tr:last-child td { background: #09a223; color: #fff; font-weight: 700; border-color: #09a223; }

/* ---- Numbered process cards ---- */
.services-section .services-grid .grid .icon .num { font-family: "Nunito", sans-serif; font-weight: 800; font-size: 28px; line-height: 1; color: #09a223; }

/* ---- Footer QR ---- */
.site-footer .qr-widget img { width: 120px; height: 120px; background: #fff; padding: 5px; border-radius: 3px; }
.site-footer .qr-widget p { margin-top: 10px; font-size: 14px; }
.site-footer .fine { font-size: 13px; opacity: .8; margin-top: 10px; }

/* ---- Safety nets ---- */
.no-js .preloader { display: none; }
.no-js .hero-style-1 .hero-slider .slide-caption > * { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-style-1 .hero-slider .slide-caption > * { opacity: 1 !important; animation: none !important; }
}

/* ---- Picture slots: white until a photo is supplied ----
   The template puts white text on photos. When a slot has no picture the build adds a body class
   (see tools/build_site.py) and these rules switch to dark text on white. Add the picture file
   and rebuild to get the template's original photo look back. */
.no-hero-photo .hero-style-1, .no-hero-photo .hero-style-1 .hero-slider,
.no-hero-photo .hero-style-1 .slick-list, .no-hero-photo .hero-style-1 .slick-track,
.no-hero-photo .hero-style-1 .slide { height: 560px !important; min-height: 0 !important; background-color: #fff; }
.no-hero-photo .hero-style-1 { border-bottom: 1px solid #e6e9f0; }
.no-hero-photo .hero-style-1 .slide-caption > h2 { color: #1e2331; }
.no-hero-photo .hero-style-1 .slide-caption > p { color: #7a8595; }
.no-hero-photo .hero-style-1 .theme-btn-s2 { background: transparent; color: #09a223; border: 2px solid #09a223; padding: 10px 28px; }
.no-hero-photo .hero-style-1 .theme-btn-s2:hover { background: #09a223; color: #fff; }

.no-title-photo .page-title { background: #fff; border-bottom: 1px solid #e6e9f0; }
.no-title-photo .page-title:before { display: none; }
.no-title-photo .page-title h2 { color: #1e2331; }
.no-title-photo .page-title .breadcrumb, .no-title-photo .page-title .breadcrumb li, .no-title-photo .page-title .breadcrumb a { color: #7a8595; }
.no-title-photo .page-title .breadcrumb > li + li:before { color: #7a8595; }
.no-title-photo .page-title .breadcrumb a:hover { color: #09a223; }

.no-cta-photo .cta-section { background: #f3f5fa; }
.no-cta-photo .cta-section:before { display: none; }
.no-cta-photo .cta-section h2 { color: #1e2331; }
.no-cta-photo .cta-section h2 span { color: #09a223; }

/* ---- Style Switcher (the template's gear panel): swatches are drawn in CSS because the template's swatch images were not supplied ---- */
.style-switcher-box .color-chager li { border: 2px solid #fff; box-shadow: 0 0 0 1px #d9d9d9; border-radius: 3px; }
.style-switcher-box .color-chager li.color-default { background: #09a223; }
.style-switcher-box .color-chager li.color-style1 { background: #022d5e; }
.style-switcher-box .color-chager li.color-style2 { background: #c96a00; }
.style-switcher-box .color-chager li.color-style3 { background: #2a7f86; }
.style-switcher-box .color-chager li:hover { box-shadow: 0 0 0 2px #1e2331; }
.box-layout { background-color: #e9edf3; } /* the template's box-layout background picture was not supplied */

/* ======================= Mobile and tablet refinements =======================
   Additions only: the template CSS is untouched. Breakpoints follow Bootstrap 3 (767 / 991). */
@media (max-width: 991px) {
  .no-hero-photo .hero-style-1, .no-hero-photo .hero-style-1 .hero-slider, .no-hero-photo .hero-style-1 .slick-list,
  .no-hero-photo .hero-style-1 .slick-track, .no-hero-photo .hero-style-1 .slide { height: 500px !important; }
}

@media (max-width: 767px) {
  /* Top bar: logo, then the three contact items wrapped neatly instead of one tall column. */
  .header-style-1 .topbar { padding: 18px 0 16px; }
  .header-style-1 .contact-info-wrapper { margin-top: 14px; padding-top: 2px; }
  .header-style-1 .topbar .contact-info { max-width: none; margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; overflow: visible; }
  .header-style-1 .topbar .contact-info > div { float: none; padding-left: 28px; text-align: left; }
  .header-style-1 .topbar .contact-info > div + div { margin: 0; }
  .header-style-1 .topbar .contact-info p { font-size: 14px; margin-bottom: 0; }
  .header-style-1 .topbar .contact-info span { font-size: 12px; }
  .site-header .site-logo { text-align: center; }
  .site-header .site-logo img { height: 40px; }

  /* Menu button: comfortable tap size. */
  .navigation .navbar-header .open-btn { min-width: 44px; min-height: 44px; }

  /* Hero grows with its text instead of clipping it, with tighter type. */
  .no-hero-photo .hero-style-1, .no-hero-photo .hero-style-1 .hero-slider, .no-hero-photo .hero-style-1 .slick-list,
  .no-hero-photo .hero-style-1 .slick-track, .no-hero-photo .hero-style-1 .slide { height: auto !important; min-height: 0 !important; }
  .hero-style-1 .slide { padding: 44px 0 52px; }
  .hero-style-1 .slide .container { height: auto; display: block; }
  .hero-style-1 .slide .row { display: block; }
  .hero-style-1 .slide-caption { display: block; padding: 0 12px; }
  .hero-style-1 .slide-caption > h2 { font-size: 30px; line-height: 1.2; margin-bottom: 14px; }
  .hero-style-1 .slide-caption > p { font-size: 15px; line-height: 1.7; margin-bottom: 22px; }
  .hero-style-1 .slide-caption .btns a { display: block; max-width: 320px; margin: 0 auto 12px; text-align: center; }
  .hero-style-1 .slide-caption .btns a + a { margin-left: auto; }
  .hero .slick-dots { display: none !important; }   /* a single slide needs no dots */

  /* Page title bars and sections */
  .page-title { height: auto; padding: 34px 0 30px; }
  .page-title h2 { font-size: 26px; }
  .bsa-prose h3 { margin-top: 30px; }
  .bsa-toc a { padding: 8px 14px; }
  .bsa-notice { padding: 13px 15px; }

  /* Footer: bigger tap targets, centred QR, no cramped columns. */
  .site-footer .widget ul li a { display: inline-block; padding: 6px 0; }
  .site-footer .widget { margin-bottom: 26px; }
  .site-footer .qr-widget { text-align: left; }
  .copyright-info ul { margin-top: 8px; }

  /* The switcher gear sat over the left edge of the text. Move it low and make it smaller. */
  .style-switcher-box { top: auto; bottom: 84px; }
  .style-switcher-box button { top: auto; bottom: 0; width: 38px; height: 38px; line-height: 34px; font-size: 17px; right: -38px; opacity: .92; }
}

@media (max-width: 380px) {
  .hero-style-1 .slide-caption > h2 { font-size: 27px; }
  .header-style-1 .topbar .contact-info { gap: 10px 16px; }
}

/* Tablet: when cards wrap two to a row, centre an odd last card instead of leaving it alone on the left. */
@media (min-width: 768px) and (max-width: 991px) {
  .services-section .services-grid { display: flex; flex-wrap: wrap; justify-content: center; }
}

/* The switcher gear: tablets get the low-corner placement too (at its default spot it covers headlines). */
@media (max-width: 991px) {
  .style-switcher-box { top: auto; bottom: 84px; }
  .style-switcher-box button { top: auto; bottom: 0; width: 38px; height: 38px; line-height: 34px; font-size: 17px; right: -38px; opacity: .92; }
}

/* ======================= Application form ======================= */
.topbar a { color: #fff; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.bsa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bsa-form label { font-weight: 600; color: #1e2331; margin-bottom: 6px; }
.bsa-form .req { color: #c0392b; }
.bsa-form .form-control { height: 46px; border-radius: 3px; border-color: #d5dae4; box-shadow: none; font-size: 16px; } /* 16px stops iOS zooming in on focus */
.bsa-form textarea.form-control { height: auto; }
.bsa-form .form-control:focus { border-color: #09a223; box-shadow: 0 0 0 3px rgba(9, 162, 35, .15); }
.bsa-form .has-error .form-control { border-color: #c0392b; }
.bsa-form .form-group { margin-bottom: 20px; }
.bsa-err { display: block; color: #c0392b; font-size: 14px; margin-top: 5px; min-height: 0; }
.bsa-hint { color: #7a8595; }
.bsa-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; cursor: pointer; }
.bsa-check input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.bsa-status { margin: 0 0 16px; padding: 0; border-radius: 3px; outline: none; }
.bsa-status-error { padding: 12px 16px; background: #fdecea; border: 1px solid #f5c2bd; color: #7a1f16; }
.bsa-status-ok { padding: 12px 16px; background: #e9f7ec; border: 1px solid #bfe3c6; color: #14532d; }
.bsa-small { font-size: 13px; color: #7a8595; margin-top: 14px; }
.bsa-success { border: 1px solid #bfe3c6; background: #f1faf3; border-radius: 3px; padding: 24px; outline: none; }
.bsa-success[hidden], .bsa-form[hidden] { display: none; }
.bsa-side { background: #f3f5fa; border-radius: 3px; padding: 26px; }
.bsa-side h3 { margin-top: 0; }
.bsa-side h3 + ol, .bsa-side ol { padding-left: 18px; }
.bsa-side li { margin-bottom: 10px; }
.bsa-side h3:not(:first-child) { margin-top: 26px; }
.cta-section a + a { margin-left: 12px; }
@media (max-width: 767px) {
  .bsa-side { margin-top: 30px; }
  .cta-section a + a { margin: 12px 0 0; display: block; max-width: 320px; margin-left: auto; margin-right: auto; }
  .cta-section a.theme-btn-s3 { display: block; max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* Footer credit */
.bsa-powered { margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .35); }
.bsa-powered a { font-weight: 700; text-decoration: underline; color: inherit; }
@media (max-width: 767px) { .bsa-powered { display: block; margin: 6px 0 0; padding: 0; border: 0; } }

/* Cookie notice (added by assets/js/cookie-notice.js) and cookie table */
.bsa-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #1e2331; color: #fff; padding: 14px 20px; display: flex; gap: 16px; align-items: center; justify-content: center; box-shadow: 0 -4px 18px rgba(0, 0, 0, .18); }
.bsa-cookie p { color: #fff; margin: 0; font-size: 14px; line-height: 1.5; max-width: 820px; }
.bsa-cookie a { color: #fff; text-decoration: underline; }
.bsa-cookie .theme-btn { flex: none; padding: 8px 26px; font-size: 15px; }
@media (max-width: 575px) { .bsa-cookie { flex-direction: column; align-items: stretch; text-align: left; gap: 10px; padding: 14px 16px; } .bsa-cookie .theme-btn { width: 100%; } }
.bsa-table th { background: #f3f5fa; font-family: "Nunito", sans-serif; }
.bsa-table td, .bsa-table th { vertical-align: top; font-size: 15px; }
.bsa-table code { color: #1e2331; background: #f3f5fa; }

/* Cookie table: on phones, stack each row into labelled blocks instead of a sideways-scrolling table. */
@media (max-width: 767px) {
  .bsa-table, .bsa-table tbody, .bsa-table tr, .bsa-table td { display: block; width: 100%; }
  .bsa-table thead { display: none; }
  .bsa-table tr { border: 1px solid #dde1ea; border-radius: 3px; margin-bottom: 16px; background: #fff; }
  .bsa-table td { border: 0 !important; border-bottom: 1px solid #eef0f5 !important; padding: 10px 14px; white-space: normal; }
  .bsa-table td:last-child { border-bottom: 0 !important; }
  .bsa-table td::before { content: attr(data-label); display: block; font-family: "Nunito", sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #7a8595; margin-bottom: 3px; }
}

/* Consent: buttons in the banner, and the apply-page permission box */
.bsa-cookie-actions { display: flex; gap: 10px; flex: none; }
.bsa-cookie .bsa-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .6); border-radius: 2px; padding: 8px 22px; font-size: 15px; font-family: "Nunito", sans-serif; font-weight: 600; cursor: pointer; }
.bsa-cookie .bsa-btn-ghost:hover { background: #fff; color: #1e2331; }
#ts-consent[hidden], #ts-widget[hidden] { display: none !important; }
@media (max-width: 575px) { .bsa-cookie-actions { flex-direction: column-reverse; } .bsa-cookie-actions button { width: 100%; } }
