/* ==========================================================================
   NGO / Microfinance Theme - custom.css
   Mobile-first, RTL-aware, uses CSS custom properties.
   ========================================================================== */

:root {
  --primary: #0b7a5c;
  --primary-dark: #095f48;
  --primary-light: #e7f6f0;
  --accent: #f5a623;
  --accent-dark: #dd9110;
  --ink: #22312e;
  --muted: #5a6b67;
  --line: #e3ebe8;
  --surface: #ffffff;
  --surface-soft: #f6faf8;
  --shadow-sm: 0 1px 3px rgba(14, 42, 38, .08);
  --shadow-md: 0 6px 20px rgba(14, 42, 38, .10);
  --shadow-lg: 0 14px 40px rgba(14, 42, 38, .14);
  --radius: 14px;
  --radius-sm: 8px;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", "Noto Naskh Arabic", serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[dir="rtl"] body { font-family: var(--font-urdu); line-height: 2; }
[dir="rtl"] .latin-font { font-family: var(--font-body); }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--primary); color: #fff; padding: .6rem 1rem; border-radius: 0 0 .5rem 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ------------------------------- Buttons ------------------------------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; transition: all .2s ease; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #22312e; }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-outline-primary { border-color: var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color: #fff; }
.btn-outline-light { border-color: #fff; color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--primary); }
.btn-lg { padding: .75rem 1.4rem; }
.btn-donate { background: var(--accent); border: none; color: #22312e; font-weight: 700; }
.btn-donate:hover { background: #fff; color: var(--primary-dark); transform: translateY(-1px); }

/* ------------------------------- Header -------------------------------- */
.top-bar { background: var(--primary-dark); color: #d7eee6; font-size: .82rem; }
.top-bar a { color: #d7eee6; }
.lang-switch { display: inline-flex; gap: .35rem; align-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 20px; padding: .1rem .55rem; font-size: .8rem; }
.lang-switch a { font-weight: 600; }
.lang-switch .active { color: var(--accent); text-decoration: underline; }

.site-header { background: #fff; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 1030; }
.site-header .navbar { padding-top: .5rem; padding-bottom: .5rem; }
.navbar-brand { display: flex; align-items: center; gap: .6rem; }
.brand-logo { width: 44px; height: 44px; object-fit: contain; }
.brand-logo-img { height: 46px; width: auto; max-width: 100%; object-fit: contain; display: inline-block; }
[dir="rtl"] .brand-logo-img { max-width: 260px; }
@media (max-width: 575.98px) { .brand-logo-img { height: 40px; } }
.brand-name { font-weight: 800; color: var(--primary-dark); line-height: 1.15; font-size: 1.05rem; }
.brand-tagline { font-size: .72rem; color: var(--muted); }
.navbar-nav .nav-link { color: var(--ink); font-weight: 600; padding: .5rem .75rem; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--primary); }
.navbar-toggler { border: none; color: var(--primary-dark); font-size: 1.5rem; }
[dir="rtl"] .navbar-nav { }

/* Mobile sticky bottom CTA */
.mobile-bottom-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
  display: none; background: #fff; border-top: 1px solid var(--line);
  padding: .5rem .75rem; gap: .5rem;
}
.mobile-bottom-cta .btn { flex: 1; }
@media (max-width: 767.98px) {
  .mobile-bottom-cta { display: flex; }
  body { padding-bottom: 62px; }
}

/* -------------------------------- Hero --------------------------------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  padding: clamp(4rem, 9vw, 8rem) 0;
  background:
    linear-gradient(115deg, rgba(6, 47, 40, .92) 0%, rgba(11, 122, 92, .82) 55%, rgba(20, 140, 126, .55) 100%);
}
.hero-bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; z-index: -1; }
.hero .badge-lite { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); color: #fff; padding: .4rem .85rem; border-radius: 40px; backdrop-filter: blur(2px); }
.hero h1 { font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 3.1rem); line-height: 1.25; }
.hero p.lead { font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 640px; opacity: .95; }
.hero .btn { border-radius: 40px; }
[dir="rtl"] .hero { background: linear-gradient(-115deg, rgba(6,47,40,.92) 0%, rgba(11,122,92,.82) 55%, rgba(20,140,126,.55) 100%); }

/* ------------------------------ Sections ------------------------------- */
.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-title { font-weight: 800; color: var(--ink); position: relative; }
.section-sub { color: var(--muted); max-width: 720px; }
.section-eyebrow { color: var(--primary); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
[dir="rtl"] .section-eyebrow { letter-spacing: 0; }

/* Stats band */
.stats-band { background: var(--primary); color: #fff; }
.stats-band .stat-value { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.stats-band .stat-label { opacity: .92; }
.stat-icon { font-size: 1.5rem; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); border-radius: 50%; }

/* Cards */
.card-hover { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; height: 100%; }
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card-img-top { object-fit: cover; height: 220px; width: 100%; }
.program-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }

/* Story quote */
.story-card { position: relative; }
.story-card .card-body { display: flex; flex-direction: column; }
.story-quote-mark { font-size: 3rem; line-height: 1; color: var(--accent); }

/* ------------------------------- Footer -------------------------------- */
.site-footer { background: #0e2a26; color: #cfe0db; }
.site-footer h6 { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.site-footer a { color: #cfe0db; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); font-size: .86rem; color: #9bb6af; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; margin-inline-end: .4rem; }
.footer-donate-btn { background: var(--accent); color: #22312e; font-weight: 700; border-radius: 40px; padding: .55rem 1.2rem; display: inline-block; }
.footer-donate-btn:hover { background: #fff; color: var(--primary-dark); }

/* ---------------------------- WhatsApp float --------------------------- */
.wa-float {
  position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 1040;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.08); color: #fff; } 
.wa-float.wa-left { inset-inline-start: 20px; inset-inline-end: auto; }
@media (max-width: 767.98px) { .wa-float { bottom: 76px; } }

/* ------------------------------- Forms --------------------------------- */
.form-control, .form-select { border-radius: var(--radius-sm); padding: .62rem .85rem; border-color: #cfdbd7; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(11,122,92,.15); }
.form-label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.required::after { content: " *"; color: #d64545; }

/* ------------------------------ Misc ----------------------------------- */
.badge-soft { background: var(--primary-light); color: var(--primary-dark); padding: .35rem .7rem; border-radius: 40px; font-weight: 600; }
.breadcrumb { background: var(--surface-soft); border-radius: var(--radius-sm); padding: .6rem 1rem; }
.hero-mini {
  background: linear-gradient(120deg, var(--primary-dark), var(--primary));
  color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.hero-mini h1 { font-weight: 800; }
.hero-mini .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.6); background: transparent; margin: 0; padding: 0; }
.hero-mini .breadcrumb a { color: #fff; }
.hero-mini .breadcrumb-item.active { color: rgba(255,255,255,.8); }

.page-content h1, .page-content h2, .page-content h3 { color: var(--ink); font-weight: 700; }
.page-content img { border-radius: var(--radius); }

.shadow-card { box-shadow: var(--shadow-md); border: 0; border-radius: var(--radius); }
.list-check li { list-style: none; position: relative; padding-inline-start: 1.6rem; margin-bottom: .45rem; }
[dir="ltr"] .list-check li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; color: var(--primary); }
[dir="rtl"] .list-check li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; right: 0; color: var(--primary); }

.testimonial-footer { font-weight: 700; color: var(--primary-dark); }

.two-lang { display: block; }
.fw-800 { font-weight: 800; }

/* FAQ accordion */
.accordion-button:not(.collapsed) { background: var(--primary-light); color: var(--primary-dark); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(11,122,92,.15); }

/* Cookie bar */
.cookie-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1060; background: #12312b; color: #dbe7e3;
  padding: .9rem 1.1rem; font-size: .9rem;
}
.cookie-bar a { color: var(--accent); }

/* RTL tweaks */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; padding-left: var(--bs-breadcrumb-item-padding-x); padding-right: 0; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }

.card-title { font-weight: 700; }
.text-muted-2 { color: var(--muted); }

/* Accessibility focus */
a:focus-visible, button:focus-visible, .form-control:focus, .form-select:focus { outline: 3px solid rgba(245,166,35,.55); outline-offset: 2px; }

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