/*
 * ═══════════════════════════════════════════════════════════════
 *  ZovoPay — Navigation Override 2026
 *  يُحمَّل أخيرًا على كل الصفحات — أعلى أولويّة override للشريط
 *  الباليتة: كحليّ #061228→#3b6fd4 + لؤلؤيّ + فضّيّ (zp-landing-2026.css)
 *  RTL-first: خصائص منطقيّة فقط (inset-inline / margin-inline / padding-inline)
 *  صفر مساس بالـ markup / منطق Blade
 * ═══════════════════════════════════════════════════════════════
 */

/* ── متغيّرات محصورة تحت .header-section لتجنّب التصادم ── */
.header-section {
  --zn-deep:    #061228;
  --zn-dark:    #0d1b3e;
  --zn-navy:    #1b2e5f;
  --zn-accent:  #3b6fd4;
  --zn-s1:      #C9D1DA;
  --zn-s2:      #AEB8C4;
  --zn-white75: rgba(255,255,255,.75);
  --zn-white55: rgba(255,255,255,.55);
  --zn-white08: rgba(255,255,255,.08);
  --zn-white12: rgba(255,255,255,.12);
  --zn-white20: rgba(255,255,255,.20);
  --zn-white30: rgba(255,255,255,.30);
  --zn-tr:      color .18s ease, background .18s ease, border-color .18s ease;
}

/* ════════════════════════════════════════════════════════
   1. شريط — خلفيّة كحليّة زجاجيّة
════════════════════════════════════════════════════════ */
.header-section,
.header-section.position-sticky,
.header-section.header-fixed,
header.header-section {
  background: rgba(6,18,40,.82) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  border-bottom: 1px solid var(--zn-white08) !important;
  box-shadow: 0 2px 24px rgba(6,18,40,.45) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1001 !important;
}

.header-bottom-area,
.header-section .header-bottom-area,
.header-section .header,
.header-section.header-fixed .header-bottom-area {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
}

/* ── ارتفاع الشريط ── */
.header-section .navbar,
.header-section .navbar-expand-xl,
.header-section nav.navbar {
  min-height: 72px !important;
  padding-block: 0 !important;
}

.header-section .header-menu-content {
  padding: 0 !important;
}

/* ════════════════════════════════════════════════════════
   2. اللوغو — أبيض
════════════════════════════════════════════════════════ */
.header-section .site-logo img,
.header-section .navbar-brand img,
.header-section a.site-logo img {
  filter: brightness(0) invert(1) drop-shadow(0 0 7px rgba(148,180,255,.35)) !important;
  height: 38px !important;
  width: auto !important;
}

/* ════════════════════════════════════════════════════════
   3. روابط القائمة الرئيسيّة
════════════════════════════════════════════════════════ */
.header-section .main-menu > li > a,
.header-section .main-menu li a.has-sub,
.header-section .navbar-nav .nav-item > a,
.header-section ul.navbar-nav li a {
  color: var(--zn-white75) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding-block: 24px !important;
  padding-inline: 14px !important;
  transition: var(--zn-tr) !important;
  text-decoration: none !important;
}

.header-section .main-menu > li > a:hover,
.header-section .main-menu li a.has-sub:hover,
.header-section .navbar-nav .nav-item > a:hover {
  color: #fff !important;
  background: transparent !important;
}

/* رابط الصفحة النشطة */
.header-section .main-menu li a.has-sub.active,
.header-section .main-menu li a.active,
.header-section .navbar-nav .nav-item > a.active {
  color: var(--zn-s1) !important;
}

/* ════════════════════════════════════════════════════════
   4. القوائم المنسدلة (sub-menu / mega)
════════════════════════════════════════════════════════ */

/*
 * نحافظ على `.row`/`.col-*` BootStrap سليمة لأنّنا نستهدف
 * الحاوية الخارجيّة فقط؛ الشبكة الداخليّة غير مُتأثَّرة.
 */
.header-section .sub-menu {
  background: rgba(6,18,40,.96) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(201,209,218,.14) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(6,18,40,.55) !important;
}

/* عنوان القسم */
.header-section .sub-menu-title h3,
.header-section .sub-menu-title a h3,
.header-section .sub-menu-title .title {
  color: #fff !important;
  font-weight: 700 !important;
}

/* حاوية العنصر الواحد */
.header-section .sub-menu-item {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  transition: background .18s ease, border-color .18s ease !important;
}

.header-section .sub-menu-item:hover {
  background: rgba(59,111,212,.10) !important;
  border-color: rgba(59,111,212,.25) !important;
}

/* أيقونات بلون accent كحليّ-فضّيّ */
.header-section .sub-menu-item .icon i {
  color: var(--zn-accent) !important;
}

/* عناوين العناصر */
.header-section .sub-menu-item .menu-item-name h4,
.header-section .sub-menu-item .menu-item-name .title,
.header-section .sub-menu-item h4 {
  color: #fff !important;
  font-weight: 600 !important;
}

/* وصف العناصر */
.header-section .sub-menu-item .menu-item-name p,
.header-section .sub-menu-item p {
  color: rgba(174,184,196,.75) !important;
}

/* ════════════════════════════════════════════════════════
   5. زرّ «Log In» — ثانويّ شفّاف بحدّ فاتح
════════════════════════════════════════════════════════ */
.header-section .header-action a.btn,
.header-section .header-action a.btn--base.btn {
  background: transparent !important;
  border: 1.5px solid var(--zn-white30) !important;
  color: rgba(255,255,255,.88) !important;
  padding-block: 9px !important;
  padding-inline: 20px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  transition: var(--zn-tr) !important;
  text-decoration: none !important;
}

.header-section .header-action a.btn:hover,
.header-section .header-action a.btn--base.btn:hover {
  background: var(--zn-white08) !important;
  border-color: rgba(201,209,218,.55) !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════
   6. زرّ «Sign Up» / «Dashboard» — أبيض فاخر (مثل .zl-btn-w)
   مع sheen خفيف اختياريّ
════════════════════════════════════════════════════════ */
.header-section .header-action a.btn-auth,
.header-section .header-action a.btn--base.btn-auth {
  position: relative !important;
  overflow: hidden !important;
  background: #fff !important;
  border: none !important;
  color: var(--zn-navy) !important;
  padding-block: 9px !important;
  padding-inline: 22px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 20px rgba(59,111,212,.22) !important;
  transition: box-shadow .22s ease, transform .18s ease !important;
  text-decoration: none !important;
}

/* sheen — وميض خفيف مرّة واحدة كل 5 ث */
.header-section .header-action a.btn-auth::after,
.header-section .header-action a.btn--base.btn-auth::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: zn-shn 5s ease-in-out infinite;
  pointer-events: none;
}

.header-section .header-action a.btn-auth:hover,
.header-section .header-action a.btn--base.btn-auth:hover {
  box-shadow: 0 10px 28px rgba(59,111,212,.32) !important;
  transform: translateY(-2px) !important;
}

/* ════════════════════════════════════════════════════════
   7. زرّ «Help» — رابط أنيق
════════════════════════════════════════════════════════ */
.header-section .help-btn {
  color: var(--zn-white75) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding-block: 7px !important;
  padding-inline: 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: var(--zn-tr) !important;
  text-decoration: none !important;
}

.header-section .help-btn:hover {
  color: #fff !important;
  border-color: var(--zn-white20) !important;
  background: var(--zn-white08) !important;
}

/* ════════════════════════════════════════════════════════
   8. اختيار اللغة (select.langSel) — كحليّ زجاجيّ
════════════════════════════════════════════════════════ */

/*
 * zp-patch-v6 يُخفي select.langSel بـ display:none لاستبداله بـ JS picker؛
 * نحترم ذلك هنا — القاعدة التالية تُطبَّق فقط حين يكون مرئيًّا
 * (صفحات لا يعمل عليها JS picker).
 */
.header-section .lang-select select.langSel {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: rgba(6,18,40,.7) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(201,209,218,0.7)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  border: 1px solid rgba(201,209,218,.18) !important;
  border-radius: 8px !important;
  color: rgba(201,209,218,.88) !important;
  font-size: 13px !important;
  padding-block: 7px !important;
  padding-inline: 12px 30px !important;
  height: 36px !important;
  min-width: 90px !important;
  outline: none !important;
  cursor: pointer !important;
}

/* خيارات القائمة المنسدلة للـ select */
.header-section .lang-select select.langSel option {
  background: var(--zn-dark) !important;
  color: #e0eaff !important;
}

/* ════════════════════════════════════════════════════════
   9. الشريط الجانبيّ (navbar-right + header-action)
════════════════════════════════════════════════════════ */
.header-section .navbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.header-section .header-action {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ════════════════════════════════════════════════════════
   10. موبايل — زرّ الانهيار (navbar-toggler)
════════════════════════════════════════════════════════ */
.header-section .navbar-toggler {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--zn-white20) !important;
  border-radius: 8px !important;
  padding-block: 8px !important;
  padding-inline: 12px !important;
  color: #fff !important;
  transition: background .18s ease, border-color .18s ease !important;
  margin-inline-start: auto !important;
}

.header-section .navbar-toggler:hover,
.header-section .navbar-toggler:focus {
  background: rgba(59,111,212,.14) !important;
  border-color: rgba(59,111,212,.36) !important;
  outline: none !important;
}

.header-section .navbar-toggler .fas {
  color: rgba(201,209,218,.9) !important;
  font-size: 18px !important;
}

/* ════════════════════════════════════════════════════════
   11. موبايل — القائمة المنهارة (Bootstrap collapse)
════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .header-section .navbar-collapse {
    background: rgba(6,18,40,.97) !important;
    border: 1px solid rgba(201,209,218,.10) !important;
    border-radius: 14px !important;
    margin-top: 8px !important;
    padding: 14px !important;
    box-shadow: 0 20px 50px rgba(6,18,40,.6) !important;
  }

  .header-section .main-menu > li > a,
  .header-section .main-menu li a.has-sub {
    padding-block: 11px !important;
    padding-inline: 14px !important;
    border-radius: 8px !important;
  }

  .header-section .main-menu > li > a:hover,
  .header-section .main-menu li a.has-sub:hover {
    background: rgba(59,111,212,.09) !important;
  }

  .header-section .navbar-right {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding-block-start: 12px !important;
    padding-block-end: 6px !important;
    gap: 8px !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    margin-block-start: 8px !important;
  }
}

/* ════════════════════════════════════════════════════════
   12. prefers-reduced-motion — إلغاء الحركة
════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .header-section .header-action a.btn-auth::after,
  .header-section .header-action a.btn--base.btn-auth::after {
    animation: none !important;
  }
  .header-section *,
  .header-section *::before,
  .header-section *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ════════════════════════════════════════════════════════
   13. @keyframes — sheen للزرّ الأبيض
   (مُسمَّى بـ zn- لتجنّب التصادم مع zl-shn من الهبوط)
════════════════════════════════════════════════════════ */
@keyframes zn-shn {
  0%          { transform: translateX(-160%); }
  55%, 100%   { transform: translateX(300%); }
}