/*
  Ensany v2 — truly shared styles: the navbar (#v2Nav) and footer, plus a
  few page-agnostic fixes (legacy heading text-transform, SVG icon resets,
  focus ring, branded scrollbar, hiding the legacy #site-header/#back2Top).
  Any v2 page (homepage, campaign page, and future ones) should load this
  file. Page-specific visuals belong in that page's own stylesheet
  (v2-home.css for the homepage, v2-campaign.css for the campaign page),
  not here.
*/

#v2Nav { font-family: 'Inter', sans-serif; }

/* Legacy theme CSS applies text-transform to headings site-wide, which was
   forcing our copy into Title Case / odd casing. Neutralize inside v2. */
#v2Nav h1, #v2Nav h2, #v2Nav h3, #v2Nav h4, #v2Nav h5, #v2Nav h6 {
  text-transform: none !important;
}

/* Legacy theme CSS resets stroke/fill on svg icons inside buttons in a few
   places, making our hand-authored outline icons invisible. Force them back
   on everywhere in v2 (all our icons intentionally use stroke="currentColor"
   / fill="none"). */
#v2Nav svg { stroke: currentColor; }
#v2Nav svg[fill="none"] { fill: none !important; }
#v2Nav button svg, #v2Nav a svg { stroke: currentColor !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; }

/* Legacy theme CSS sets its own width/height/padding on plain <button>/<a>
   elements, which was squashing the round mobile nav icon buttons (search,
   quick-donate, burger) out of shape. Force them to stay perfect circles. */
#v2Nav .flex.lg\:hidden > button,
#v2Nav .flex.lg\:hidden > a.js-open-qd {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* Nav link underline-on-hover */
#v2Nav .nav-link { white-space: nowrap; }
#v2Nav .nav-link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: #7FB239; border-radius: 2px; transform: scaleX(0);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
#v2Nav .nav-link:hover::after { transform: scaleX(1); }

/* Buttons/links show the browser's default blue focus ring on click, which
   clashes with the brand. Remove it on mouse/touch interaction but keep a
   subtle brand-colored ring for keyboard navigation (:focus-visible),
   so accessibility isn't lost — just the ugly default look. */
#v2Nav a, #v2Nav button, #v2Nav input, #v2Nav [tabindex] {
  outline: none;
}
#v2Nav a:focus-visible, #v2Nav button:focus-visible, #v2Nav input:focus-visible, #v2Nav [tabindex]:focus-visible {
  outline: 2px solid rgba(127,178,57,.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Branded scrollbars — applied to the whole page (not just dropdowns), so
   the main browser scrollbar matches the same thin, brand-green look. */
html {
  scrollbar-width: thin;
  scrollbar-color: #7FB239 #F1ECDF;
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: #F1ECDF; }
html::-webkit-scrollbar-thumb { background: #7FB239; border-radius: 9999px; border: 2px solid #F1ECDF; }
html::-webkit-scrollbar-thumb:hover { background: #578021; }

#v2Nav .dd-menu {
  scrollbar-width: thin;
  scrollbar-color: #7FB239 #F1ECDF;
}
#v2Nav .dd-menu::-webkit-scrollbar { width: 6px; }
#v2Nav .dd-menu::-webkit-scrollbar-track { background: #F1ECDF; border-radius: 9999px; }
#v2Nav .dd-menu::-webkit-scrollbar-thumb { background: #7FB239; border-radius: 9999px; }
#v2Nav .dd-menu::-webkit-scrollbar-thumb:hover { background: #578021; }

/* Every v2 page uses this navbar (#v2Nav) instead of the legacy header_rtl
   navbar, so the legacy one is hidden on any page that loads this file. */
#site-header { display: none !important; }

/* Sticky footer, site-wide for any v2 page. website/Layout/main.blade.php's
   <body> stacks a preloader div, #main-wrapper (navbar + page content), then
   <x-footer> as plain document flow — no min-height anywhere. On a short
   page (little content, tall/desktop screen) the footer ends up sitting
   mid-page, and the legacy theme's default white body background fills the
   rest of the viewport below it, reading as a stray white band under the
   footer. Pins the footer to the true bottom of the viewport instead by
   making #main-wrapper's content grow to fill the gap. Selector is scoped
   via :has(#v2Footer) so pages still using the legacy footer are completely
   unaffected — this changes nothing about their layout.
   Also recolors <html> to the footer's own dark green so mobile Safari's
   elastic overscroll bounce (which reveals whatever is behind <body>) shows
   that color instead of white too — the one case pure CSS layout can't
   prevent since it's the browser rendering past the document's own height. */
html:has(#v2Footer) { background: #0e2820; }
body:has(#v2Footer) {
  /* Belt-and-braces: the legacy styles.css sets body { background:#fff }
     explicitly, so even with the flex-grow rules below successfully
     pushing the footer down, body's OWN background (not html's) is what
     was actually showing through in that trailing gap — confirmed by
     inspecting the white strip directly, which resolved to <body>, not a
     sibling element. Recoloring body itself (not just html) closes that
     gap for good regardless of whether the flex-grow chain below fully
     succeeds in every browser/content combination. */
  background: #0e2820 !important;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body:has(#v2Footer) [id^="main-wrapper"] {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
body:has(#v2Footer) [id^="main-wrapper"] > .flex-root {
  flex: 1 0 auto;
}
#v2Footer { flex-shrink: 0; }

/* Scroll-to-top button (legacy #back2Top from website.Layout.main) sat on
   the same corner as the Quick Donate FAB, overlapping it. Fixed layout in
   every language, no RTL flip: back-to-top always bottom-right, Quick
   Donate FAB always bottom-left (set directly on the button that renders
   it, e.g. website/v2/index.blade.php). */
#back2Top {
  left: auto !important;
  right: 26px !important;
  bottom: 26px !important;
  top: auto !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 9999px !important;
  background: #12332A !important;
  color: #fff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(18,51,42,.55);
  border: none !important;
  z-index: 70;
  transition: background-color .2s ease, transform .2s ease;
}
#back2Top:hover { background: #1B4636 !important; transform: translateY(-2px); }
#back2Top i { font-size: 15px; }

/* ------------------------------------------------------------------ */
/* Shared v2 phone-input component (<x-phone-input>, resources/views/
   components/phone-input.blade.php + front/assets/js/v2-phone-input.js).
   Our own replacement for intl-tel-input — flag emoji computed from ISO2,
   bilingual (en/ar) country names, own countries.json, dropdown rendered
   at document.body level so it's never clipped by an ancestor's
   `overflow:hidden` (e.g. #v2Donate .v2d-card). Reused by any v2 page that
   needs a phone field, not just donate.blade.php. */

/* Phone numbers are conventionally always written/read left-to-right
   ("+20 1234567889"), in every language — unlike the rest of this RTL
   Arabic form. Everything in this component is pinned to physical
   left/right (not inset-inline-start/end, which flip with the page's
   `direction` and were putting the flag+code trigger on the right in
   Arabic, and even subtly misaligning it in English depending on this
   element's own inherited direction). `.v2-phone-field` itself is forced
   `direction: ltr`, and every child below uses physical `left`/`right` so
   the trigger is always the leftmost thing and the digits always type
   left-to-right, regardless of site language. */
.v2-phone { position: relative; width: 100%; }

/* Real joined input-group instead of the previous approach (trigger
   absolutely overlaid on top of the tel input's own left padding) — that
   made the number's first digits render partly underneath/behind the
   trigger button rather than cleanly beside it. Now the trigger and the
   input are two flex children sharing ONE outer border + border-radius
   (put on .v2-phone-field itself); each child is borderless internally
   with a single divider line between them, so it reads as one seamless
   pill control: [flag +20 ⌄][ 1234567889 ]. */
.v2-phone-field {
  position: relative;
  display: flex;
  align-items: stretch;
  direction: ltr;
  border: 1px solid #E7E1D0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.v2-phone-field:focus-within {
  border-color: #7FB239;
  box-shadow: 0 0 0 3px rgba(127,178,57,.15);
}

.v2-phone-trigger {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: none;
  border-right: 1px solid #E7E1D0;
  background: #F7F4EC;
  border-radius: 0;
  cursor: pointer;
  color: #12332A;
  transition: background-color .2s ease;
}
.v2-phone-trigger:hover { background: #EFE9D8; }
.v2-phone-trigger:focus-visible {
  outline: 2px solid rgba(127,178,57,.55);
  outline-offset: -2px;
}

.v2-phone-flag { font-size: 16px; line-height: 1; }
.v2-phone-dial { font-size: 12px; font-weight: 700; color: #12332A; direction: ltr; }
.v2-phone-caret { color: #5B6660; flex-shrink: 0; }

/* The visible tel <input> is now a plain borderless flex child of
   .v2-phone-field (the field itself owns the border/radius/focus ring) —
   no more left padding needed to dodge an overlay, no more overlap.
   Still always left-to-right regardless of page direction. */
.v2-phone-input.form-control {
  flex: 1 1 auto;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  direction: ltr !important;
  text-align: left !important;
}
.v2-phone-input.form-control:focus { box-shadow: none !important; }

/* Dropdown panel — positioned with JS (position:fixed, see
   v2-phone-input.js openDropdown()/positionDropdown()) so it escapes any
   ancestor's overflow:hidden. Static styling only lives here. */
.v2-phone-dropdown {
  background: #fff;
  border: 1px solid #E7E1D0;
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(18,51,42,.22);
  overflow: hidden;
  z-index: 1000;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
.v2-phone-dropdown[hidden] { display: none; }

.v2-phone-search-wrap {
  padding: 8px;
  border-bottom: 1px solid #EFE9D8;
  flex-shrink: 0;
}
.v2-phone-search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #E7E1D0;
  border-radius: 8px;
  font-size: 13px;
  color: #12332A;
  background: #F7F4EC;
}
.v2-phone-search:focus {
  outline: none;
  border-color: #7FB239;
  box-shadow: 0 0 0 3px rgba(127,178,57,.15);
}

.v2-phone-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #7FB239 #F1ECDF;
}
.v2-phone-list::-webkit-scrollbar { width: 6px; }
.v2-phone-list::-webkit-scrollbar-thumb { background: #7FB239; border-radius: 9999px; }

.v2-phone-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #12332A;
}
.v2-phone-option:hover { background: #F7F4EC; }
.v2-phone-option.is-selected {
  background: rgba(127,178,57,.12);
  font-weight: 700;
}
.v2-phone-option-flag { font-size: 16px; flex-shrink: 0; }
.v2-phone-option-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-phone-option-dial { flex-shrink: 0; color: #5B6660; font-size: 12px; direction: ltr; }

/* Mobile widths — this form is mobile-first, keep the dropdown usable on
   narrow screens (matches the ~320-360px card gutters typical on phones). */
@media (max-width: 480px) {
  .v2-phone-dropdown { max-height: 280px; }
  .v2-phone-trigger { gap: 4px; padding: 0 6px; }
  .v2-phone-dial { font-size: 11.5px; }
}
