/* ==========================================================================
   public_nav.css — الشريط العلوي الموحّد لكل صفحات غراس العامة
   --------------------------------------------------------------------------
   • مصدر الحقيقة الوحيد لتصميم partials/public_nav.html.
   • مُستخرج بالكامل من الصفحة الرئيسية (code.html) — القيم هنا كانونية.
   • لا تُكرّر أو تُعدّل قواعد .ghiras-navbar / .navbar-nav / .header-btn في أي
     ملف CSS آخر أو داخل <style> أي قالب — أضِف فقط رابط هذا الملف.
   • كل القواعد محصّنة (selectors عالية التحديد + !important) لتبقى صحيحة
     بصرف النظر عن نسخة Bootstrap المحمَّلة (rtl أو غير rtl) أو ترتيب التحميل،
     لأن class utilities مثل ms-auto تُترجم فيزيائيًا بشكل مختلف بين النسختين
     وهذا هو السبب الجذري لتشوّه المحاذاة في الصفحات الفرعية.
   ========================================================================== */

.ghiras-navbar{
  direction: rtl !important;
  background-color: rgb(10, 19, 16) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(31, 210, 122, 0.15) !important;
  padding: 8px 0 !important;
  position: relative;
  z-index: 1030;
}

.ghiras-navbar .container{
  direction: rtl !important;
  max-width: 1200px !important;
  width: min(1200px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-inline: 12px !important;
}

/* الشعار: ثابت في أقصى اليمين (بداية الصف في RTL) */
.ghiras-navbar .navbar-brand{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  order: 1;
  margin-inline-end: 0 !important;
  color: var(--text-main, #eafff3);
  font-family: "alsamt-diwani", "Almarai-Regular", sans-serif;
}

/* زر الهامبرغر (يظهر فقط أسفل lg) */
.ghiras-navbar .navbar-toggler{
  order: 2;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 6px 10px !important;
  border-radius: 8px;
}
.ghiras-navbar .navbar-toggler:focus{
  box-shadow: 0 0 0 0.2rem rgba(31, 210, 122, 0.25) !important;
  outline: none;
}
.ghiras-navbar .navbar-toggler-icon{
  filter: invert(1);
}

/* روابط القائمة — بين الشعار وأزرار الحساب دائمًا (ترتيب صريح مستقل عن ms-auto) */
#mainNav.navbar-collapse{
  order: 3;
  flex-grow: 0 !important;
}
#mainNav .navbar-nav{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 28px !important;
}

.ghiras-navbar .nav-link{
  font-size: 15px;
  font-weight: 500;
  color: var(--text-main, #eafff3);
  position: relative;
  padding: 0 !important;
  white-space: nowrap;
  transition: 0.3s;
}

.ghiras-navbar .nav-link:hover,
.ghiras-navbar .nav-link.active{
  color: var(--green-main, #1fd27a) !important;
}

/* خط أخضر نيون تحت الرابط — يمين لليسار لأن الاتجاه RTL */
.ghiras-navbar .nav-link::after{
  content: "";
  position: absolute;
  bottom: -4px;
  right: 0;
  left: auto;
  height: 2px;
  width: 0;
  background: var(--green-soft, #0fa35b);
  transition: 0.3s;
}
.ghiras-navbar .nav-link:hover::after,
.ghiras-navbar .nav-link.active::after{
  width: 100%;
}

/* أزرار الحساب: ثابتة في أقصى اليسار (نهاية الصف في RTL) */
.ghiras-navbar .nav-account-actions{
  order: 4;
  flex: 0 0 auto !important;
  margin-inline-start: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ghiras-navbar .header-btn{
  background: linear-gradient(90deg, var(--green-soft, #0fa35b), var(--green-main, #1fd27a));
  box-shadow: 0 0 8px rgba(15, 163, 91, .35);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  white-space: nowrap;
}
.ghiras-navbar .header-btn.outline{
  background: transparent;
  border: 1px solid var(--green-soft, #0fa35b);
  box-shadow: none;
}
.ghiras-navbar .header-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(31, 210, 122, 0.45);
}
.ghiras-navbar .header-btn::after{
  content: "⚽";
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  animation: ghirasNavKickBall 4s infinite ease-in-out;
}

@keyframes ghirasNavKickBall{
  0%   { opacity: 0; transform: translateY(-50%) translateX(0) scale(0.9); }
  10%  { opacity: 1; }
  40%  { transform: translateY(-50%) translateX(45px) rotate(90deg); }
  43%  { transform: translateY(-50%) translateX(55px) rotate(140deg); }
  45%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ================= الجوال واللوحي (أقل من lg = 992px) =================
   الصف الأول: الشعار (يمين) + زر الهامبرغر (يسار).
   الصف الثاني: قائمة الروابط (تظهر/تختفي عبر Bootstrap collapse).
   الصف الثالث: أزرار الحساب، بعرض كامل ومتمركزة، بلا تكدّس أو تجاوز أفقي. */
@media (max-width: 991.98px){
  .ghiras-navbar .container{
    flex-wrap: wrap !important;
  }
  #mainNav.navbar-collapse{
    flex-basis: 100% !important;
    width: 100% !important;
    order: 3;
  }
  #mainNav .navbar-nav{
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 2px !important;
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .ghiras-navbar .nav-link{
    display: block;
    width: 100%;
    padding: 10px 4px !important;
  }
  .ghiras-navbar .nav-link::after{ display: none; }

  .ghiras-navbar .nav-account-actions{
    order: 4;
    flex-basis: 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .ghiras-navbar .header-btn{ padding: 8px 14px; font-size: 13px; flex: 1 1 auto; text-align: center; justify-content: center; }
}

@media (min-width: 992px){
  .ghiras-navbar .navbar-toggler{ display: none !important; }
  #mainNav.navbar-collapse{
    display: flex !important;
    flex-basis: auto !important;
  }
}

@media (max-width: 420px){
  .ghiras-navbar .nav-account-actions{ gap: 8px !important; }
  .ghiras-navbar .header-btn{ padding: 7px 10px; font-size: 12.5px; }
  .ghiras-navbar .navbar-brand{ font-size: 15px; }
  .ghiras-navbar .navbar-brand img{ width: 52px !important; }
}