/* ABN Trust Bank Plc — intentional light/dark theme layer */
:root {
  color-scheme: dark;
  --page-bg: #090b10;
  --surface: #11151d;
  --surface-2: #171c25;
  --surface-3: #1d2430;
  --text: #f5f7fa;
  --text-soft: #c2c9d3;
  --text-muted: #8f98a7;
  --border: #2a3341;
  --accent: #4865ff;
  --accent-strong: #6e84ff;
  --accent-contrast: #ffffff;
  --success: #4ed198;
  --danger: #ff6b78;
  --warning: #f6c85f;
  --input-bg: #0e1219;
  --input-border: #303a49;
  --shadow: 0 14px 40px rgba(0,0,0,.28);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.18);
}

html[data-theme="light"] {
  color-scheme: light;
  --page-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --surface-3: #eef1f6;
  --text: #09101f;
  --text-soft: #48505e;
  --text-muted: #6e727f;
  --border: #e1e5eb;
  --accent: #4865ff;
  --accent-strong: #3551e8;
  --accent-contrast: #ffffff;
  --success: #16885d;
  --danger: #d83b4b;
  --warning: #9b6d00;
  --input-bg: #ffffff;
  --input-border: #d8dde6;
  --shadow: 0 14px 40px rgba(18,27,45,.10);
  --shadow-soft: 0 8px 24px rgba(18,27,45,.08);
}

html { background: var(--page-bg); }
body {
  background: var(--page-bg);
  color: var(--text);
  transition: background-color .22s ease, color .22s ease;
}
body, body * { border-color: var(--border); }
p, li, dd, dt { color: var(--text-soft); }
h1, h2, h3, h4, h5, h6 { color: var(--text); }
a { color: var(--text); }
a:hover, a:focus { color: var(--accent-strong); }

/* Core surfaces */
.bg-ffffff,
.navbar-area,
.navbar-area.is-sticky,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu,
.main-responsive-nav,
.others-option-for-responsive .container .container,
.main-banner-form,
.main-banner-form .nice-select .list,
.fun-facts-inner,
.fun-facts-area.bg-color .single-fun-fact,
.fun-facts-area.bg-ffffff .single-fun-fact,
.single-services-item,
.customer-item,
.team-area.bg-ffffff .single-team-box:hover .team-content,
.single-team-box .team-content,
.services-details-information .services-list,
.services-details-information .download-file,
.services-details-information .services-contact-info,
.sign-in-form,
.register-form,
.register-form form .nice-select .list,
.contact-form,
.contact-info-box,
.single-projects .projects-content,
.pagination-area .page-numbers,
.widget-area .widget_search,
.widget-area .widget_categories,
.widget-area .widget_leve_posts_thumb,
.widget-area .widget_tag_cloud,
.widget-area .widget_newsletter,
.open-account-form,
.open-account-form form .nice-select .list,
.loan-form,
.loan-form form .nice-select .list,
.location-maps-image .location a .location-info,
.footer-area.bg-ffffff,
.copyright-area.bg-ffffff {
  background: var(--surface) !important;
  color: var(--text);
}

.top-header-area,
.footer-area,
.copyright-area,
.section-title,
.about-content,
.protect-content,
.services-area,
.banking-area,
.customer-area,
.app-area,
.blog-area,
.team-area,
.contact-area,
.faq-area,
.grow-area,
.operate-area,
.transactions-area,
.consultants-area,
.pricing-area,
.overview-box-area,
.payment-box-area,
.using-card-area,
.services-details-area,
.security-area,
.advice-area,
.online-area,
.personal-loan-area,
.types-loan-area,
.apply-area,
.location-maps-area,
.table-area,
.open-account-area {
  color: var(--text);
}

.navbar-area { box-shadow: 0 1px 0 var(--border); }
.navbar-area .navbar-brand img,
.main-responsive-nav .logo img { max-height: 44px; width: auto; }
.navbar-light .navbar-nav .nav-link { color: var(--text) !important; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-item.active > .nav-link { color: var(--accent-strong) !important; }
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu { box-shadow: var(--shadow); border: 1px solid var(--border); }
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu .nav-link { color: var(--text) !important; }
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu .nav-link:hover { background: var(--surface-2); color: var(--accent-strong) !important; }

/* Forms and native controls */
input, textarea, select,
.form-control,
.custom-select,
.nice-select,
.nice-select .list {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; opacity: 1; }
.nice-select:after { border-color: var(--text-muted); }
.nice-select .option { color: var(--text) !important; background: var(--surface) !important; }
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background: var(--surface-2) !important; color: var(--accent-strong) !important; }
input:focus, textarea:focus, select:focus, .form-control:focus, .custom-select:focus, .nice-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(72,101,255,.16) !important;
  outline: none;
}

/* Common cards and interactive surfaces */
.single-services-item,
.single-team-box,
.single-pricing-box,
.single-projects,
.single-fun-fact,
.contact-info-box,
.customer-item,
.services-details-information,
.widget-area > div,
.loan-form,
.open-account-form,
.sign-in-form,
.register-form {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.single-services-item:hover,
.single-team-box:hover,
.single-pricing-box:hover,
.single-projects:hover { box-shadow: var(--shadow); }

.default-btn {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 8px 18px rgba(72,101,255,.20);
}
.default-btn:hover, .default-btn:focus { background: var(--accent-strong) !important; color: #fff !important; }

/* Preserve intentionally photographic/colored hero areas while removing template-white sections. */
.main-banner,
.page-banner-area,
.main-slider-area,
.main-banner-item,
.main-slider-item { color: #fff; }

/* Footer / utility areas */
.footer-area p, .footer-area li, .footer-area .footer-contact-info li,
.copyright-area p, .copyright-area a { color: var(--text-muted); }
.footer-area a:hover, .copyright-area a:hover { color: var(--accent-strong); }
.go-top { background: var(--accent) !important; color: #fff !important; }

/* Accessible focus ring */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(72,101,255,.45) !important;
  outline-offset: 2px;
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 8px 0 2px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.theme-toggle:hover { background: var(--surface-3); border-color: var(--accent); color: var(--accent-strong); transform: translateY(-1px); }
.theme-toggle .theme-icon { font-size: 18px; pointer-events: none; }
.theme-toggle .theme-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.others-options .theme-toggle { flex: 0 0 auto; }

/* Mobile menu */
@media (max-width: 991px) {
  .theme-toggle { width: 40px; height: 40px; margin: 0 6px 0 0; }
  .main-responsive-nav { background: var(--surface) !important; }
  .mean-container .mean-nav ul li a { color: var(--text) !important; background: var(--surface) !important; border-top-color: var(--border) !important; }
  .mean-container .mean-nav ul li a:hover { color: var(--accent-strong) !important; background: var(--surface-2) !important; }
  .mean-container .mean-bar, .mean-container .mean-nav { background: var(--surface) !important; }
}

/* Small transition without animating layout-heavy properties. */
body, .navbar-area, .top-header-area, .footer-area, .copyright-area,
.single-services-item, .single-team-box, .single-pricing-box, .single-projects,
.contact-form, .contact-info-box, .sign-in-form, .register-form, .open-account-form,
.loan-form, .widget-area > div, input, textarea, select, .form-control, .nice-select {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

.theme-icon svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle-fallback { position: fixed; top: 18px; right: 18px; z-index: 99999; margin: 0; }
.theme-registration-page { min-height: 100vh; }
.theme-registration-page .navbar,
.theme-registration-page .card,
.theme-registration-page .modal-content,
.theme-registration-page .dropdown-menu,
.theme-registration-page .list-group-item,
.theme-registration-page .table,
.theme-registration-page .bg-white,
.theme-registration-page .bg-light { background-color: var(--surface) !important; color: var(--text); border-color: var(--border) !important; }
.theme-registration-page label,
.theme-registration-page .form-check-label,
.theme-registration-page .text-dark,
.theme-registration-page .card-title,
.theme-registration-page .card-body,
.theme-registration-page h1, .theme-registration-page h2, .theme-registration-page h3,
.theme-registration-page h4, .theme-registration-page h5, .theme-registration-page h6 { color: var(--text) !important; }
.theme-registration-page .text-muted { color: var(--text-muted) !important; }
.theme-registration-page .form-control,
.theme-registration-page .custom-select,
.theme-registration-page select,
.theme-registration-page textarea,
.theme-registration-page input { background-color: var(--input-bg) !important; color: var(--text) !important; border-color: var(--input-border) !important; }
.theme-registration-page .form-control:focus,
.theme-registration-page input:focus,
.theme-registration-page select:focus,
.theme-registration-page textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(72,101,255,.16) !important; }

/* ================================================================
   Visibility corrections — component-level overrides for both themes
   The original template contains many highly-specific color declarations;
   these tokens keep those components readable instead of relying on broad
   body/p rules.
   ================================================================ */

/* Why choose us / statistics */
.fun-facts-area .fun-facts-inner {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.fun-facts-area .single-fun-fact h3,
.fun-facts-area .single-fun-fact h3 .odometer,
.fun-facts-area .single-fun-fact h3 .odometer-digit,
.fun-facts-area .single-fun-fact h3 .odometer-value {
  color: var(--accent-strong) !important;
}
.fun-facts-area .single-fun-fact p {
  color: var(--text) !important;
}
.fun-facts-area .single-fun-fact h3::before {
  background: var(--surface-3) !important;
  border: 1px solid var(--border);
  opacity: .95;
}
html[data-theme="dark"] .fun-facts-area .single-fun-fact h3::before {
  background: #202733 !important;
}
html[data-theme="light"] .fun-facts-area .single-fun-fact h3::before {
  background: #eef1f6 !important;
}

/* General content cards: explicit colors override template-specific dark text. */
.single-services-item h3,
.single-services-item h3 a,
.single-services-item p,
.customer-item p,
.customer-item .customer-info h3,
.customer-item .customer-info span,
.single-team-box .team-content h3,
.single-team-box .team-content h3 a,
.single-team-box .team-content span,
.single-pricing-box .pricing-header h3,
.single-pricing-box .price,
.single-pricing-box .price span,
.single-pricing-box .pricing-features li,
.single-projects .projects-content h3,
.single-projects .projects-content h3 a,
.single-projects .projects-content p,
.contact-info-box h3,
.contact-info-box p,
.contact-info-box a,
.services-details-information .services-list li a,
.services-details-information .download-file h3,
.services-details-information .download-file li a,
.services-details-information .services-contact-info h3,
.services-details-information .services-contact-info li,
.widget-area h3,
.widget-area h4,
.widget-area p,
.widget-area li,
.widget-area a,
.single-blog-item .post-content h3,
.single-blog-item .post-content h3 a,
.single-blog-item .post-content p,
.single-blog-item .post-content .post-meta li,
.faq-accordion .accordion .accordion-title,
.faq-accordion .accordion .accordion-content,
.about-content h3,
.about-content p,
.protect-content h3,
.protect-content p,
.protect-content .protect-inner-content h4,
.protect-content .protect-inner-content p {
  color: var(--text) !important;
}

.single-services-item p,
.customer-item p,
.single-team-box .team-content span,
.single-pricing-box .pricing-features li,
.single-projects .projects-content p,
.contact-info-box p,
.widget-area p,
.single-blog-item .post-content p,
.single-blog-item .post-content .post-meta li,
.protect-content p,
.protect-content .protect-inner-content p {
  color: var(--text-soft) !important;
}

.single-services-item,
.customer-item,
.single-team-box,
.single-pricing-box,
.single-projects .projects-content,
.contact-info-box,
.single-blog-item .post-content,
.faq-accordion .accordion .accordion-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Secondary template surfaces that otherwise retain pale backgrounds. */
html[data-theme="dark"] .app-btn .app-store-btn,
html[data-theme="dark"] .app-btn .play-store-btn,
html[data-theme="dark"] .newsletter-form .input-newsletter,
html[data-theme="dark"] .pagination-area .page-numbers,
html[data-theme="dark"] .location-maps-image .location a .location-info,
html[data-theme="dark"] .location-maps-image .location a .location-info::before {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] .app-btn .app-store-btn,
html[data-theme="light"] .app-btn .play-store-btn,
html[data-theme="light"] .newsletter-form .input-newsletter,
html[data-theme="light"] .pagination-area .page-numbers,
html[data-theme="light"] .location-maps-image .location a .location-info,
html[data-theme="light"] .location-maps-image .location a .location-info::before {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Template inputs with !important background declarations. */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .nice-select,
html[data-theme="dark"] .nice-select .list,
html[data-theme="dark"] .newsletter-form .input-newsletter {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .form-control,
html[data-theme="light"] .nice-select,
html[data-theme="light"] .nice-select .list,
html[data-theme="light"] .newsletter-form .input-newsletter {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}

/* Accordion/divider lines and other pale template borders. */
html[data-theme="dark"] .faq-accordion .accordion .accordion-item,
html[data-theme="dark"] .faq-accordion .accordion .accordion-title,
html[data-theme="dark"] .faq-accordion .accordion .accordion-content,
html[data-theme="dark"] table,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
  border-color: var(--border) !important;
}
html[data-theme="light"] .faq-accordion .accordion .accordion-item,
html[data-theme="light"] .faq-accordion .accordion .accordion-title,
html[data-theme="light"] .faq-accordion .accordion .accordion-content,
html[data-theme="light"] table,
html[data-theme="light"] td,
html[data-theme="light"] th {
  border-color: var(--border) !important;
}

/* Keep the hero/banner's intentionally white text intact. */
.main-banner h1,
.main-banner p,
.main-slider-area h1,
.main-slider-area p,
.page-banner-area h1,
.page-banner-area p { color: #fff !important; }

/* Toggle meaning: in dark mode the sun means "switch to light";
   in light mode the moon means "switch to dark". */
.theme-toggle { flex: 0 0 auto; }
.theme-toggle .theme-icon { display: inline-flex; align-items: center; justify-content: center; }

/* Theme-aware dual logo: dark wordmark for light mode, white wordmark for dark mode. */
.site-logo-light { display: none !important; }
.site-logo-dark { display: inline-block !important; }
html[data-theme="dark"] .site-logo-dark { display: none !important; }
html[data-theme="dark"] .site-logo-light { display: inline-block !important; }
.site-logo { max-width: 100%; height: auto; }
.theme-registration-page .apply-page-logo { max-width: 325px; height: auto; }
@media (max-width: 991px) { .main-responsive-nav .logo img.site-logo { max-height: 42px; width: auto; } }