/* ============================================================
   Valley Order — Brand Stylesheet
   Primary Green:  #AABE60
   White:          #FFFFFF
   Dark Navy:      #101A24
   ============================================================ */

/* ── @font-face: Cairo (Arabic) ── */
@font-face { font-family: 'Cairo'; font-weight: 300; font-display: swap; src: url('../cairo-2-new/Cairo-Light.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-weight: 400; font-display: swap; src: url('../cairo-2-new/Cairo-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-weight: 600; font-display: swap; src: url('../cairo-2-new/Cairo-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-weight: 700; font-display: swap; src: url('../cairo-2-new/Cairo-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-weight: 900; font-display: swap; src: url('../cairo-2-new/Cairo-Black.ttf') format('truetype'); }

/* ── @font-face: Poppins (English) ── */
@font-face { font-family: 'Poppins'; font-weight: 300; font-display: swap; src: url('../poppins_new/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('../poppins_new/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('../poppins_new/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('../poppins_new/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('../poppins_new/Poppins-Bold.ttf') format('truetype'); }

/* ── Brand tokens ── */
:root {
  --vo-green:        #AABE60;
  --vo-green-hover:  #BBCD6E;
  --vo-green-light:  #D4E599;
  --vo-navy:         #101A24;
  --vo-white:        #FFFFFF;
  --vo-muted:        #556070;
  --vo-border:       rgba(16, 26, 36, 0.09);
  --vo-border-focus: rgba(170, 190, 96, 0.55);
}

/* ── Font switching by language ── */
html[lang="ar"] *:not(.material-symbols-outlined),
html[dir="rtl"] *:not(.material-symbols-outlined) {
  font-family: 'Cairo', sans-serif !important;
}
html[lang="en"] *:not(.material-symbols-outlined),
html[dir="ltr"] *:not(.material-symbols-outlined) {
  font-family: 'Poppins', sans-serif !important;
}

/* ── Logo utilities ── */
.vo-logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}
.vo-wordmark {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.vo-wordmark-nav  { color: var(--vo-navy)  !important; }
.vo-wordmark-foot { color: var(--vo-white) !important; }

/* ── Navigation ── */
nav {
  background: rgba(255, 255, 255, 0.90) !important;
  border-bottom: 1px solid var(--vo-border) !important;
  box-shadow: 0 1px 20px rgba(16, 26, 36, 0.06) !important;
}

/* Language / back buttons in nav — fix invisible white border */
nav button, nav a {
  border-color: var(--vo-border) !important;
}
nav button:hover, nav a:hover {
  border-color: rgba(170, 190, 96, 0.45) !important;
}

/* ── Dark-theme "white" store buttons → brand green ── */
button.bg-white,
a.bg-white {
  background-color: var(--vo-green) !important;
  color: var(--vo-navy) !important;
}
button.bg-white:hover,
a.bg-white:hover {
  background-color: var(--vo-green-hover) !important;
}

/* ── Footer ── */
footer {
  border-top: none !important;
}
/* Muted text inside footer should be light enough to read on navy */
footer .text-on-surface-variant,
footer [class*="text-on-surface-variant"] {
  color: rgba(255, 255, 255, 0.55) !important;
}
footer span.text-white\/20 {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* ── Lang-tabs (terms / privacy) ── */
.lang-tabs {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--vo-border) !important;
}

/* ── Sticky tab focus-ring ── */
.lang-tabs button:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--vo-green);
  outline-offset: 2px;
}