/* =====================================================
   Shuaa v24 launch-final polish
   Purpose: domain-ready consistency layer for bilingual UI,
   campaign pages, donation modals, mobile menu and launch SEO.
===================================================== */
:root{
  --shuaa-green:#064E3B;
  --shuaa-green-2:#204C3C;
  --shuaa-green-3:#204C3C;
  --shuaa-soft:#F5FAF7;
  --shuaa-ink:#064E3B;
  --shuaa-muted:#4b5563;
  --shuaa-border:rgba(6,78,59,.12);
  --shuaa-shadow:0 22px 60px rgba(6,78,59,.10);
}

html{scroll-behavior:smooth;}
html,body{max-width:100%;overflow-x:hidden;}
body{background:#fff;color:var(--shuaa-ink);}

/* Never show Arabic and English at the same time. */
[data-lang]{display:none!important;}
html[lang^="ar"] [data-lang="ar"],
html[dir="rtl"] [data-lang="ar"]{display:inline!important;}
html[lang^="en"] [data-lang="en"],
html[dir="ltr"] [data-lang="en"]{display:inline!important;}
html[lang^="en"] [data-lang="ar"],
html[dir="ltr"] [data-lang="ar"]{display:none!important;}

/* Header professional alignment in both languages */
.site-header{z-index:10020;}
.header-shell{width:min(1180px,calc(100% - 32px));}
html[dir="ltr"] body{direction:ltr;text-align:left;}
html[dir="ltr"] .header-shell{direction:ltr!important;}
html[dir="ltr"] .desktop-nav{direction:ltr!important;}
html[dir="ltr"] .site-header .brand{order:1;}
html[dir="ltr"] .site-header .desktop-nav{order:2;margin-inline-start:auto;margin-inline-end:0;}
html[dir="ltr"] .site-header .donate-top{order:3;}
html[dir="ltr"] .site-header .menu-btn{order:4;}
html[dir="ltr"] .desktop-nav a,
html[dir="ltr"] .mobile-menu-links a{text-align:left;}
html[dir="rtl"] .desktop-nav a,
html[dir="rtl"] .mobile-menu-links a{text-align:right;}

/* Mobile drawer: institutional, clean, no floating controls outside it. */
body > .shuaa-currency-switcher{display:none!important;}
.mobile-side-drawer{
  max-width:min(92vw,410px)!important;
  background:linear-gradient(180deg,#ffffff,#F5FAF7)!important;
  border:1px solid rgba(6,78,59,.10)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.22)!important;
}
html[dir="ltr"] .mobile-side-drawer{left:0!important;right:auto!important;border-radius:0 26px 26px 0!important;direction:ltr!important;}
html[dir="rtl"] .mobile-side-drawer{right:0!important;left:auto!important;border-radius:26px 0 0 26px!important;direction:rtl!important;}
.mobile-menu-links .language-toggle{width:100%;justify-content:center;}
.mobile-menu-currency{display:block!important;width:100%!important;}
.mobile-side-drawer .shuaa-currency-switcher{
  display:flex!important;position:static!important;width:100%!important;min-height:58px!important;
  align-items:center!important;justify-content:space-between!important;gap:12px!important;
  padding:10px 12px!important;border-radius:18px!important;background:#fff!important;
  border:1px solid rgba(6,78,59,.12)!important;box-shadow:0 10px 26px rgba(6,78,59,.06)!important;
}
.mobile-side-drawer .shuaa-currency-switcher label{display:inline-flex!important;margin:0!important;font-weight:950!important;color:#064E3B!important;font-size:15px!important;}
.mobile-side-drawer .shuaa-currency-switcher select{height:42px!important;width:min(60%,220px)!important;border-radius:14px!important;border:1px solid rgba(6,78,59,.12)!important;background:#F5FAF7!important;color:#064E3B!important;font-weight:900!important;}

/* Campaign detail page: premium global nonprofit rhythm. */
.campaign-detail-template{background:#fff!important;}
.campaign-premium-hero{padding-top:110px!important;background:linear-gradient(180deg,#F5FAF7 0%,#fff 76%)!important;}
.campaign-premium-hero__inner{
  width:min(1240px,calc(100% - 32px))!important;
  border-radius:30px!important;
  box-shadow:0 26px 70px rgba(6,78,59,.10)!important;
  border:1px solid rgba(6,78,59,.12)!important;
}
.campaign-premium-hero h1{letter-spacing:-.035em;}
html[dir="ltr"] .campaign-premium-hero h1{letter-spacing:-.045em;}
.campaign-premium-hero__copy p{color:#1F2937!important;}
.campaign-premium-hero__visual img{object-position:center center;}
.campaign-premium-summary .campaign-btn,
.campaign-premium-cta{box-shadow:0 16px 36px rgba(32,76,60,.24)!important;}
.campaign-premium-meta,
.campaign-premium-content{width:min(1160px,calc(100% - 32px))!important;}
.campaign-premium-section{scroll-margin-top:110px;}
.campaign-impact-card,
.campaign-info-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.campaign-impact-card:hover,
.campaign-info-card:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(6,78,59,.10);border-color:rgba(6,78,59,.18);}
.campaign-info-card p,.campaign-impact-card p{color:#4b5563!important;}

html[dir="ltr"] .campaign-premium-hero__copy,
html[dir="ltr"] .campaign-premium-section,
html[dir="ltr"] .campaign-premium-section--details,
html[dir="ltr"] .campaign-content-card,
html[dir="ltr"] .campaign-info-card,
html[dir="ltr"] .campaign-impact-card{text-align:left;}
html[dir="ltr"] .campaign-premium-section__heading{justify-content:flex-start;}
html[dir="ltr"] .campaign-premium-section--intro{margin-left:0;margin-right:auto;}
html[dir="ltr"] .campaign-premium-safe{justify-content:flex-start;}
html[dir="ltr"] .campaign-premium-hero__badges{justify-content:flex-start;}
html[dir="ltr"] .campaign-premium-meta div:first-child{border-inline-start:0;}

html[dir="rtl"] .campaign-premium-hero__copy,
html[dir="rtl"] .campaign-premium-section,
html[dir="rtl"] .campaign-premium-section--details,
html[dir="rtl"] .campaign-content-card,
html[dir="rtl"] .campaign-info-card,
html[dir="rtl"] .campaign-impact-card{text-align:right;}
html[dir="rtl"] .campaign-premium-section__heading{justify-content:flex-start;}
html[dir="rtl"] .campaign-premium-section--intro{margin-right:0;margin-left:auto;}
html[dir="rtl"] .campaign-premium-safe{justify-content:flex-start;}
html[dir="rtl"] .campaign-premium-hero__badges{justify-content:flex-start;}

/* Campaign listing: avoid cramped bilingual/category UI. */
.campaigns-grid{align-items:stretch;}
.campaign-card{height:100%;}
.campaign-body{display:flex;flex-direction:column;}
.campaign-actions{margin-top:auto;}
html[dir="ltr"] .campaigns-listing-hero,
html[dir="ltr"] .campaign-body,
html[dir="ltr"] .campaign-category-tabs{text-align:left;direction:ltr;}
html[dir="rtl"] .campaigns-listing-hero,
html[dir="rtl"] .campaign-body,
html[dir="rtl"] .campaign-category-tabs{text-align:right;direction:rtl;}

/* Donation modals: compact, launch-ready and language-aware. */
.campaign-donation-modal__dialog,
.global-donation-modal__dialog{max-width:min(96vw,760px)!important;border-radius:28px!important;}
.campaign-donation-modal__close,
.global-donation-modal__close{z-index:5!important;}
html[dir="ltr"] .campaign-donation-modal__dialog,
html[dir="ltr"] .global-donation-modal__dialog,
html[dir="ltr"] .campaign-donation-modal__dialog input,
html[dir="ltr"] .campaign-donation-modal__dialog select,
html[dir="ltr"] .campaign-donation-modal__dialog textarea,
html[dir="ltr"] .global-donation-modal input,
html[dir="ltr"] .global-donation-modal select{direction:ltr!important;text-align:left!important;}
html[dir="rtl"] .campaign-donation-modal__dialog,
html[dir="rtl"] .global-donation-modal__dialog,
html[dir="rtl"] .campaign-donation-modal__dialog input,
html[dir="rtl"] .campaign-donation-modal__dialog select,
html[dir="rtl"] .campaign-donation-modal__dialog textarea,
html[dir="rtl"] .global-donation-modal input,
html[dir="rtl"] .global-donation-modal select{direction:rtl!important;text-align:right!important;}

/* Make static/simple pages consistent on launch. */
.simple-page__shell,.page-shell,.content-shell{width:min(1120px,calc(100% - 32px));}
img{max-width:100%;height:auto;}

@media (max-width:1180px){
  .campaign-premium-hero__inner{grid-template-columns:1fr!important;}
  .campaign-premium-hero__copy{order:1!important;align-items:flex-start!important;text-align:start!important;}
  .campaign-premium-hero__visual{order:2!important;}
  .campaign-premium-summary{order:3!important;margin:16px!important;}
}
@media (max-width:860px){
  .header-shell{width:min(100% - 24px,1180px)!important;}
  .campaign-premium-hero{padding:82px 12px 0!important;}
  .campaign-premium-hero__inner{width:100%!important;border-radius:24px!important;}
  .campaign-premium-hero__copy{padding:26px 18px 22px!important;}
  .campaign-premium-hero h1{font-size:clamp(30px,9vw,44px)!important;line-height:1.18!important;}
  .campaign-premium-hero__copy p{font-size:15.5px!important;line-height:1.85!important;}
  .campaign-premium-hero__visual img{aspect-ratio:16/10!important;height:auto!important;min-height:0!important;}
  .campaign-premium-meta{width:calc(100% - 24px)!important;margin-top:14px!important;grid-template-columns:1fr 1fr!important;}
  .campaign-premium-content{width:calc(100% - 24px)!important;padding-top:34px!important;}
  .campaign-impact-grid,.campaign-info-grid{grid-template-columns:1fr 1fr!important;}
  .campaign-impact-card,.campaign-info-card{padding:18px!important;}
}
@media (max-width:540px){
  .campaign-premium-meta{grid-template-columns:1fr!important;}
  .campaign-impact-grid,.campaign-info-grid{grid-template-columns:1fr!important;}
  .campaign-premium-hero__badges{gap:9px!important;}
  .campaign-premium-hero__badges span{width:100%;justify-content:flex-start;}
  .campaign-donation-modal__dialog,
  .global-donation-modal__dialog{width:100%!important;max-height:92vh!important;border-radius:24px 24px 0 0!important;}
}

/* =====================================================
   v26 MOBILE HEADER HOTFIX
   Fixes bilingual mobile header overlap on campaign pages:
   - one clean row only
   - donate button left, logo center, menu right
   - no wrapping or overlap with page title
===================================================== */
@media (max-width: 860px){
  .site-header{
    height:82px!important;
    min-height:82px!important;
    max-height:82px!important;
    overflow:hidden!important;
    background:rgba(255,255,255,.98)!important;
    border-bottom:1px solid rgba(6,78,59,.10)!important;
    box-shadow:0 8px 24px rgba(6,78,59,.10)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }

  .header-shell{
    width:100%!important;
    height:82px!important;
    min-height:82px!important;
    max-height:82px!important;
    padding:0 16px!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:132px minmax(0,1fr) 52px!important;
    align-items:center!important;
    justify-items:center!important;
    gap:10px!important;
    direction:ltr!important;
  }

  .site-header .donate-top{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    position:static!important;
    width:132px!important;
    min-width:132px!important;
    max-width:132px!important;
    height:50px!important;
    min-height:50px!important;
    padding:0 10px!important;
    margin:0!important;
    border-radius:16px!important;
    font-size:15.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    gap:7px!important;
    z-index:2!important;
    transform:none!important;
  }

  .site-header .donate-top svg{
    width:18px!important;
    height:18px!important;
    flex:0 0 18px!important;
  }

  .site-header .brand{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    position:static!important;
    width:138px!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    z-index:1!important;
    transform:none!important;
  }

  .site-header .brand img{
    display:block!important;
    width:100%!important;
    max-width:138px!important;
    max-height:52px!important;
    height:auto!important;
    object-fit:contain!important;
  }

  .site-header .menu-btn{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    display:flex!important;
    position:static!important;
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    min-height:52px!important;
    margin:0!important;
    border-radius:16px!important;
    z-index:2!important;
    transform:none!important;
  }

  .site-header .desktop-nav{display:none!important;}
  .hero{padding-top:82px!important;}
  .campaigns-listing-hero,
  .campaign-detail-hero,
  .donation-result-hero{padding-top:118px!important;}
  .campaign-premium-hero{padding-top:98px!important;}
}

@media (max-width: 380px){
  .header-shell{
    grid-template-columns:118px minmax(0,1fr) 48px!important;
    gap:8px!important;
    padding:0 12px!important;
  }
  .site-header .donate-top{
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
    height:48px!important;
    font-size:13.5px!important;
    padding:0 8px!important;
    gap:6px!important;
  }
  .site-header .donate-top svg{width:16px!important;height:16px!important;flex-basis:16px!important;}
  .site-header .brand{width:124px!important;}
  .site-header .brand img{max-width:124px!important;max-height:48px!important;}
  .site-header .menu-btn{width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;}
}


/* =====================================================
   v27 Final donation UX and campaign meta fixes
   - Header Donate opens a project chooser first
   - Donation modals appear above the header/menu
   - Campaign info cards stay compact and icons match the text
===================================================== */
html.global-donation-open,
html.campaign-modal-open,
html.global-donation-open body,
html.campaign-modal-open body{overflow:hidden!important;}
html.global-donation-open .site-header,
html.campaign-modal-open .site-header,
html.global-donation-open .mobile-nav-panel,
html.campaign-modal-open .mobile-nav-panel,
html.global-donation-open .mobile-menu-overlay,
html.campaign-modal-open .mobile-menu-overlay{visibility:hidden!important;pointer-events:none!important;}
.global-donation-modal,
.campaign-donation-modal{z-index:2147483000!important;}
.global-donation-modal__backdrop,
.campaign-donation-modal__backdrop{z-index:0!important;}
.global-donation-modal__dialog,
.campaign-donation-modal__dialog{z-index:1!important;position:relative!important;}
.global-donation-modal__close,
.campaign-donation-modal__close{z-index:4!important;}


.campaign-premium-meta svg{stroke:#204C3C!important;}
@media (max-width:720px){
  .global-donation-modal,
  .campaign-donation-modal{align-items:flex-end!important;padding:0!important;}
  .global-donation-modal__dialog,
  .campaign-donation-modal__dialog{width:100%!important;max-width:100%!important;max-height:calc(100svh - 10px)!important;border-radius:28px 28px 0 0!important;padding:16px!important;}
  .global-donation-modal__close,
  .campaign-donation-modal__close{position:absolute!important;top:12px!important;inset-inline-start:12px!important;inset-inline-end:auto!important;margin:0!important;width:44px!important;height:44px!important;border-radius:16px!important;background:#fff!important;box-shadow:0 10px 26px rgba(6,78,59,.16)!important;}
  html[dir="rtl"] .campaign-donation-modal__dialog .donation-wizard__header,
  html[dir="rtl"] .global-donation-card__header{padding-left:52px!important;padding-right:0!important;}
  html[dir="ltr"] .campaign-donation-modal__dialog .donation-wizard__header,
  html[dir="ltr"] .global-donation-card__header{padding-right:52px!important;padding-left:0!important;}
  .campaign-premium-meta{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;width:calc(100% - 24px)!important;margin:14px auto 0!important;border-radius:22px!important;overflow:hidden!important;}
  .campaign-premium-meta div{min-height:116px!important;padding:16px 12px!important;border:0!important;border-bottom:1px solid rgba(32,76,60,.11)!important;background:#fff!important;align-items:flex-start!important;text-align:start!important;}
  html[dir="rtl"] .campaign-premium-meta div:nth-child(odd),
  html[dir="ltr"] .campaign-premium-meta div:nth-child(odd){border-inline-end:1px solid rgba(32,76,60,.11)!important;}
  .campaign-premium-meta div:nth-child(n+3){border-bottom:0!important;}
  .campaign-premium-meta span{display:flex!important;align-items:center!important;gap:10px!important;margin:0 0 8px!important;color:#204C3C!important;font-weight:900!important;}
  .campaign-premium-meta span svg{width:22px!important;height:22px!important;flex:0 0 22px!important;}
  .campaign-premium-meta strong{font-size:14px!important;line-height:1.3!important;}
  .campaign-premium-meta em{font-size:13px!important;line-height:1.45!important;color:#56616d!important;}
}
@media (max-width:380px){
  .campaign-premium-meta div{min-height:110px!important;padding:14px 10px!important;}
}

/* =====================================================
   v31 UI polish: payment brand marks + compact campaign info
   - Payment methods now appear as clean brand marks, not boxed chips
   - Campaign information is compact, centered and free of table-like blocks
===================================================== */
.shuaa-payment-badges{
  margin:12px 0 0!important;
  padding:12px 14px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#ffffff,#F5FAF7)!important;
  border:1px solid rgba(32,76,60,.12)!important;
  box-shadow:0 8px 22px rgba(6,78,59,.055)!important;
}
.shuaa-payment-badges--compact{
  margin-top:10px!important;
  padding:10px 12px!important;
}
.shuaa-payment-badges__title{
  margin:0 0 9px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  color:#204C3C!important;
  font-size:12.5px!important;
  font-weight:900!important;
  letter-spacing:0!important;
}
.shuaa-payment-badges__lock{
  font-size:12px!important;
  line-height:1!important;
}
.shuaa-payment-badges__row{
  direction:ltr!important;
  unicode-bidi:isolate!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  padding:2px 0!important;
}
.pay-badge{
  direction:ltr!important;
  unicode-bidi:isolate!important;
  min-height:auto!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#172033!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  line-height:1!important;
  opacity:.92!important;
}
.pay-badge--stripe{color:#635bff!important;font-size:14px!important;font-weight:900!important;letter-spacing:-.02em!important;}
.pay-badge--visa{color:#1a1f71!important;font-family:Arial,Helvetica,sans-serif!important;font-size:16px!important;font-style:italic!important;font-weight:900!important;letter-spacing:-.04em!important;}
.pay-badge--apple{color:#111827!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:14px!important;gap:2px!important;}
.pay-badge--gpay{font-family:Arial,Helvetica,sans-serif!important;font-size:14px!important;gap:1px!important;}
.pay-badge--gpay b{color:#4285f4!important;margin:0!important;font-size:15px!important;}
.pay-badge--mastercard{gap:0!important;padding:0!important;min-width:34px!important;}
.pay-badge--mastercard i{width:18px!important;height:18px!important;border-radius:50%!important;display:inline-block!important;margin-inline:-3px!important;box-shadow:none!important;}
.pay-badge--mastercard i:first-child{background:#eb001b!important;}
.pay-badge--mastercard i:nth-child(2){background:#f79e1b!important;mix-blend-mode:multiply;}
.pay-badge--mastercard b{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;}
.shuaa-payment-badges p{
  margin:8px auto 0!important;
  max-width:420px!important;
  color:#4B5563!important;
  font-size:11.5px!important;
  line-height:1.55!important;
  text-align:center!important;
  font-weight:700!important;
}
@media(max-width:520px){
  .shuaa-payment-badges{padding:10px 10px!important;border-radius:16px!important;}
  .shuaa-payment-badges__row{gap:10px!important;}
  .pay-badge--visa{font-size:15px!important;}
  .pay-badge--mastercard i{width:16px!important;height:16px!important;}
}

.campaign-premium-meta{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(32,76,60,.10)!important;
  box-shadow:0 16px 36px rgba(6,78,59,.07)!important;
  gap:0!important;
}
.campaign-premium-meta div,
.campaign-premium-meta div:first-child,
.campaign-premium-meta div:nth-child(-n+2){
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.campaign-premium-meta span{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  color:#204C3C!important;
}
.campaign-premium-meta span svg{stroke:#204C3C!important;}
@media(max-width:720px){
  .campaign-premium-meta{
    width:calc(100% - 28px)!important;
    margin:14px auto 0!important;
    padding:10px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    border-radius:24px!important;
    overflow:visible!important;
  }
  .campaign-premium-meta div,
  .campaign-premium-meta div:first-child,
  .campaign-premium-meta div:nth-child(-n+2){
    min-height:auto!important;
    padding:13px 8px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    text-align:center!important;
    border:0!important;
    background:linear-gradient(180deg,rgba(245,250,247,.76),rgba(255,255,255,.92))!important;
    border-radius:18px!important;
  }
  html[dir="rtl"] .campaign-premium-meta div:nth-child(odd),
  html[dir="ltr"] .campaign-premium-meta div:nth-child(odd){border-inline-end:0!important;}
  .campaign-premium-meta span{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0 0 3px!important;
  }
  .campaign-premium-meta span svg{width:25px!important;height:25px!important;}
  .campaign-premium-meta strong{
    margin:0!important;
    color:#064E3B!important;
    font-size:13px!important;
    line-height:1.25!important;
    font-weight:900!important;
  }
  .campaign-premium-meta em{
    margin:0!important;
    color:#1F2937!important;
    font-size:12.5px!important;
    line-height:1.35!important;
    font-weight:800!important;
  }
}

/* =====================================================
   v32 English mobile LTR hotfix
   Fixes English paragraphs/titles that inherited RTL on mobile,
   especially the How We Work cards where punctuation appeared at the
   beginning of lines. Also gives the English mobile donate button
   enough room so "Donate Now" does not clip.
===================================================== */
html[dir="ltr"] #how-we-work,
html[dir="ltr"] #how-we-work .process-card,
html[dir="ltr"] #how-we-work .process-list,
html[dir="ltr"] #how-we-work .process-step,
html[dir="ltr"] #how-we-work .step-copy,
html[dir="ltr"] #how-we-work .step-title,
html[dir="ltr"] #how-we-work .step-copy h3,
html[dir="ltr"] #how-we-work .step-copy p{
  direction:ltr !important;
  unicode-bidi:plaintext !important;
}

html[dir="ltr"] #how-we-work .process-head,
html[dir="ltr"] #how-we-work .process-head h2,
html[dir="ltr"] #how-we-work .process-head p{
  direction:ltr !important;
  text-align:center !important;
  unicode-bidi:plaintext !important;
}

html[dir="ltr"] #how-we-work .process-step,
html[dir="ltr"] #how-we-work .step-title,
html[dir="ltr"] #how-we-work .step-copy h3,
html[dir="ltr"] #how-we-work .step-copy p{
  text-align:left !important;
}

html[dir="ltr"] #how-we-work .step-title{
  grid-template-columns:28px minmax(0,1fr) !important;
  justify-content:start !important;
}

html[dir="ltr"] #how-we-work .step-number{
  grid-column:1 !important;
  justify-self:start !important;
}

html[dir="ltr"] #how-we-work .step-copy h3{
  grid-column:2 !important;
}

html[dir="ltr"] #how-we-work .step-copy p{
  grid-column:2 !important;
  max-width:100% !important;
}

@media (max-width:860px){
  html[dir="ltr"] .site-header .header-shell{
    grid-template-columns:138px minmax(0,1fr) 52px !important;
  }
  html[dir="ltr"] .site-header .donate-top{
    width:138px !important;
    min-width:138px !important;
    max-width:138px !important;
    padding:0 9px !important;
    gap:5px !important;
    font-size:14.2px !important;
    letter-spacing:-.03em !important;
    justify-content:center !important;
    overflow:visible !important;
  }
  html[dir="ltr"] .site-header .donate-top svg{
    width:17px !important;
    height:17px !important;
    flex:0 0 17px !important;
  }
  html[dir="ltr"] .site-header .donate-top span{
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }
}

@media (max-width:380px){
  html[dir="ltr"] .site-header .header-shell{
    grid-template-columns:112px minmax(0,1fr) 48px !important;
  }
  html[dir="ltr"] .site-header .donate-top{
    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;
    font-size:13px !important;
    padding:0 7px !important;
  }
  html[dir="ltr"] .site-header .donate-top svg{
    display:none !important;
  }
}

/* Extra LTR safety for English sections that can contain long paragraphs. */
html[dir="ltr"] #giving-in-islam,
html[dir="ltr"] #transparency-impact,
html[dir="ltr"] #about-us,
html[dir="ltr"] #faq,
html[dir="ltr"] #final-donation-cta,
html[dir="ltr"] #giving-in-islam p,
html[dir="ltr"] #transparency-impact p,
html[dir="ltr"] #about-us p,
html[dir="ltr"] #faq p{
  direction:ltr !important;
  unicode-bidi:plaintext !important;
}

/* =====================================================
   v35 English mobile icon-side hotfix
   Keep the icons on the LEFT in English, while keeping
   English text LTR. This does not move icons above text.
===================================================== */
@media (max-width:760px){
  html[dir="ltr"] #how-we-work .step-copy{
    display:grid !important;
    grid-template-columns:50px minmax(0,1fr) !important;
    column-gap:12px !important;
    row-gap:5px !important;
    align-items:center !important;
    direction:ltr !important;
  }

  html[dir="ltr"] #how-we-work .step-icon{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    justify-self:center !important;
    align-self:center !important;
    margin:0 !important;
  }

  html[dir="ltr"] #how-we-work .step-title{
    grid-column:2 !important;
    display:grid !important;
    grid-template-columns:28px minmax(0,1fr) !important;
    gap:9px !important;
    align-items:center !important;
    direction:ltr !important;
    text-align:left !important;
    width:100% !important;
  }

  html[dir="ltr"] #how-we-work .step-number{
    grid-column:1 !important;
    justify-self:start !important;
  }

  html[dir="ltr"] #how-we-work .step-copy h3{
    grid-column:2 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
  }

  html[dir="ltr"] #how-we-work .step-copy p{
    grid-column:2 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    max-width:100% !important;
  }

  html[dir="ltr"] #transparency-impact .ti-point{
    display:grid !important;
    grid-template-columns:76px minmax(0,1fr) !important;
    grid-template-areas:none !important;
    gap:16px !important;
    align-items:center !important;
    direction:ltr !important;
    text-align:left !important;
  }

  html[dir="ltr"] #transparency-impact .ti-point__icon{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:center !important;
    align-self:center !important;
    margin:0 !important;
  }

  html[dir="ltr"] #transparency-impact .ti-point__copy{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    direction:ltr !important;
    text-align:left !important;
  }

  html[dir="ltr"] #transparency-impact .ti-point h3,
  html[dir="ltr"] #transparency-impact .ti-point p{
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
  }
}

@media (max-width:430px){
  html[dir="ltr"] #how-we-work .step-copy{
    grid-template-columns:46px minmax(0,1fr) !important;
    column-gap:10px !important;
  }

  html[dir="ltr"] #how-we-work .step-title{
    grid-template-columns:26px minmax(0,1fr) !important;
    gap:8px !important;
  }

  html[dir="ltr"] #transparency-impact .ti-point{
    grid-template-columns:68px minmax(0,1fr) !important;
    gap:14px !important;
  }
}


/* v36 English/LTR completeness pass */
html[dir="ltr"] body,
html[lang^="en"] body {
  direction: ltr;
  text-align: left;
}
html[lang^="en"] [data-lang="ar"],
html[dir="ltr"] [data-lang="ar"] {
  display: none !important;
}
html[lang^="en"] [data-lang="en"],
html[dir="ltr"] [data-lang="en"] {
  display: inline !important;
}
@media (max-width: 760px) {
  html[dir="ltr"] #how-we-work .process-step,
  html[dir="ltr"] #transparency-impact .ti-point {
    grid-template-columns: auto 1fr;
    text-align: left;
    direction: ltr;
  }
  html[dir="ltr"] #how-we-work .step-icon,
  html[dir="ltr"] #transparency-impact .ti-point__icon {
    order: 0;
    margin-left: 0;
    margin-right: 12px;
  }
  html[dir="ltr"] #how-we-work .step-copy,
  html[dir="ltr"] #transparency-impact .ti-point__copy {
    text-align: left;
    direction: ltr;
  }
}


/* v38: use the payment-gateway green for all visible action buttons */
:root{
  --payment-gateway-green:#204C3C;
  --green:#204C3C;
  --green2:#204C3C;
  --green3:#204C3C;
  --primary:#204C3C;
  --primary-2:#204C3C;
  --shuaa-green:#204C3C;
  --shuaa-green-2:#204C3C;
  --shuaa-green-3:#204C3C;
  --btn-green-1:#204C3C;
  --btn-green-2:#204C3C;
  --btn-green-3:#204C3C;
  --engraved-primary-bg:#204C3C;
  --btn-shadow-green:0 14px 30px rgba(32,76,60,.22), inset 0 1px 0 rgba(255,255,255,.20), inset 0 -2px 0 rgba(0,0,0,.10);
}
.donate-top,
.menu-btn,
.btn,
.btn-primary,
.btn-dark,
.btn-light,
.campaign-btn,
.campaign-btn.primary,
.campaign-btn.secondary,
.campaign-actions .campaign-btn,
.campaign-hero__actions .campaign-btn,
.campaign-final-cta__actions .campaign-btn,
.campaign-premium-summary .campaign-btn,
.campaign-premium-cta,
.final-donation-cta__button,
.global-donation-card__button,
.global-donation-modal button[type="submit"],
.campaign-donation-modal button[type="submit"],
[data-donate-submit],
.donate-btn,
.campaign-donate-btn,
.btn-donate,
.donate-round,
.header-donate,
.quick-amount:hover,
.quick-amount.active,
.amount-btn.active,
.amount-btn:hover,
.amount-chip.is-active,
.amount-chip:hover,
.donation-channels__footer .campaign-btn.secondary.inline,
button.udhiyah-pay-btn,
.udhiyah-pay-btn{
  background:#204C3C !important;
  background-image:none !important;
  border-color:#204C3C !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(32,76,60,.20) !important;
}
.donate-top:hover,
.menu-btn:hover,
.btn:hover,
.btn-primary:hover,
.btn-dark:hover,
.btn-light:hover,
.campaign-btn:hover,
.campaign-btn.primary:hover,
.campaign-btn.secondary:hover,
.campaign-actions .campaign-btn:hover,
.campaign-hero__actions .campaign-btn:hover,
.campaign-final-cta__actions .campaign-btn:hover,
.campaign-premium-summary .campaign-btn:hover,
.campaign-premium-cta:hover,
.final-donation-cta__button:hover,
.global-donation-card__button:hover,
[data-donate-submit]:hover,
.donate-btn:hover,
.campaign-donate-btn:hover,
.btn-donate:hover,
.donate-round:hover,
.header-donate:hover,
button.udhiyah-pay-btn:hover,
.udhiyah-pay-btn:hover{
  background:#204C3C !important;
  background-image:none !important;
  border-color:#204C3C !important;
  color:#fff !important;
  filter:brightness(1.04);
}
.menu-btn span{background:#fff !important;}
.donate-top svg,
.btn svg,
.campaign-btn svg,
.final-donation-cta__button svg{color:#fff !important;fill:currentColor;stroke:currentColor;}



/* v38: restore old footer colour while keeping English/LTR build */
.footer{
  background:#0f1d16 !important;
  color:#d8e8de !important;
}
.footer a{
  color:#d8e8de !important;
}
.footer a:hover{
  color:#fff !important;
}
.shuaa-footer{
  --footer-bg:#03382C !important;
  --footer-bg-2:#064E3B !important;
  --footer-accent:#16A36F !important;
  --footer-accent-soft:rgba(22,163,111,.18) !important;
  --footer-text:#fff !important;
  --footer-muted:rgba(255,255,255,.82) !important;
  --footer-border:rgba(255,255,255,.12) !important;
  --shuaa-dark-top:#03382c !important;
  --shuaa-dark-bottom:#071512 !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(22,163,111,.18) 0%, transparent 32%),
    radial-gradient(circle at 82% 76%, rgba(22,163,111,.14) 0%, transparent 30%),
    linear-gradient(135deg,#03382C 0%,#022e25 52%,#064E3B 100%) !important;
  color:#fff !important;
}
/* v41: keep the current primary colour; apply the old payment-gateway button shape only */
:root{
  --payment-old-button-radius:8px;
  --payment-old-button-height:52px;
  --payment-old-button-padding-x:18px;
  --payment-old-chip-height:44px;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-dark,
.btn-light,
.btn-green,
.btn-gold,
.btn-ghost,
.btn-wide,
.btn-small,
.campaign-btn,
.campaign-btn.primary,
.campaign-btn.secondary,
.campaign-btn.inline,
.campaign-actions .campaign-btn,
.campaign-hero__actions .campaign-btn,
.campaign-final-cta__actions .campaign-btn,
.campaign-premium-summary .campaign-btn,
.campaign-premium-cta,
.final-donation-cta__button,
.global-donation-card__button,
.global-donation-modal button[type="submit"],
.campaign-donation-modal button[type="submit"],
[data-donate-submit],
.donate-btn,
.campaign-donate-btn,
.btn-donate,
.pay-btn,
.udhiyah-btn,
.udhiyah-pay-btn,
button.udhiyah-pay-btn,
.well-pay-btn,
.donate-round,
.header-donate,
.donate-top,
.compact-donate,
.split-donate,
.old-donate,
.ti-cta,
.impact-cta,
.campaigns-more__button,
.details-btn,
.status-btn,
.donation-channels__footer .campaign-btn.secondary.inline,
.donation-wizard__next,
.donation-wizard__back,
.campaign-submit,
.admin-btn,
.admin-button,
a.button,
a[role="button"]{
  min-height:var(--payment-old-button-height) !important;
  height:auto !important;
  padding:0 var(--payment-old-button-padding-x) !important;
  border-radius:var(--payment-old-button-radius) !important;
  border-width:1px !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  font-family:inherit !important;
  font-size:15px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-align:center !important;
  text-decoration:none !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  overflow:hidden !important;
  transition:border-color .18s ease, background .18s ease, color .18s ease, filter .18s ease, transform .18s ease !important;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-dark:hover,
.btn-light:hover,
.btn-green:hover,
.btn-gold:hover,
.btn-ghost:hover,
.btn-wide:hover,
.btn-small:hover,
.campaign-btn:hover,
.campaign-btn.primary:hover,
.campaign-btn.secondary:hover,
.campaign-btn.inline:hover,
.campaign-actions .campaign-btn:hover,
.campaign-hero__actions .campaign-btn:hover,
.campaign-final-cta__actions .campaign-btn:hover,
.campaign-premium-summary .campaign-btn:hover,
.campaign-premium-cta:hover,
.final-donation-cta__button:hover,
.global-donation-card__button:hover,
.global-donation-modal button[type="submit"]:hover,
.campaign-donation-modal button[type="submit"]:hover,
[data-donate-submit]:hover,
.donate-btn:hover,
.campaign-donate-btn:hover,
.btn-donate:hover,
.pay-btn:hover,
.udhiyah-btn:hover,
.udhiyah-pay-btn:hover,
button.udhiyah-pay-btn:hover,
.well-pay-btn:hover,
.donate-round:hover,
.header-donate:hover,
.donate-top:hover,
.compact-donate:hover,
.split-donate:hover,
.old-donate:hover,
.ti-cta:hover,
.impact-cta:hover,
.campaigns-more__button:hover,
.details-btn:hover,
.status-btn:hover,
.donation-channels__footer .campaign-btn.secondary.inline:hover,
.donation-wizard__next:hover,
.donation-wizard__back:hover,
.campaign-submit:hover,
.admin-btn:hover,
.admin-button:hover,
a.button:hover,
a[role="button"]:hover{
  box-shadow:none !important;
  transform:none !important;
  filter:brightness(1.04) !important;
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-dark:active,
.btn-light:active,
.campaign-btn:active,
.final-donation-cta__button:active,
.global-donation-card__button:active,
[data-donate-submit]:active,
.donate-btn:active,
.campaign-donate-btn:active,
.btn-donate:active,
.pay-btn:active,
.udhiyah-pay-btn:active,
.donate-round:active,
.header-donate:active,
.donate-top:active,
a.button:active,
a[role="button"]:active{
  transform:none !important;
  box-shadow:none !important;
}

.btn svg,
.btn-primary svg,
.btn-secondary svg,
.btn-dark svg,
.btn-light svg,
.campaign-btn svg,
.final-donation-cta__button svg,
.global-donation-card__button svg,
[data-donate-submit] svg,
.donate-btn svg,
.campaign-donate-btn svg,
.btn-donate svg,
.pay-btn svg,
.udhiyah-pay-btn svg,
.donate-round svg,
.header-donate svg,
.donate-top svg{
  width:20px !important;
  height:20px !important;
  flex:0 0 auto !important;
}

.btn.full,
.btn-block,
.campaign-btn.full,
.global-donation-modal .campaign-btn.full,
.campaign-donation-modal .campaign-btn.full,
[data-donate-submit].full,
button[data-donate-submit],
.donation-wizard__actions .campaign-submit,
.global-donation-modal button[type="submit"],
.campaign-donation-modal button[type="submit"],
.pay-btn{
  width:100% !important;
}

.amount-btn,
.quick-amount,
.amount-chip,
.campaign-amount,
.campaign-option{
  min-height:var(--payment-old-chip-height) !important;
  border-radius:var(--payment-old-button-radius) !important;
  padding:0 14px !important;
  box-shadow:none !important;
  font-weight:900 !important;
  transition:border-color .18s ease, background .18s ease, color .18s ease, filter .18s ease !important;
}

.amount-btn:hover,
.amount-btn.active,
.quick-amount:hover,
.quick-amount.active,
.amount-chip:hover,
.amount-chip.is-active,
.campaign-amount:hover,
.campaign-amount.is-active,
.campaign-option:hover,
.campaign-option.is-active{
  box-shadow:none !important;
  transform:none !important;
}

@media(max-width:640px){
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-dark,
  .btn-light,
  .campaign-btn,
  .final-donation-cta__button,
  .global-donation-card__button,
  [data-donate-submit],
  .donate-btn,
  .campaign-donate-btn,
  .btn-donate,
  .pay-btn,
  .udhiyah-pay-btn,
  .well-pay-btn,
  .header-donate,
  .donate-top,
  .campaign-submit{
    width:100% !important;
    white-space:normal !important;
  }
}