/* ================== Base / Desktop ================== */
:root{
  --nav-h: 64px;
  --z-nav: 1000;   /* النافبار نفسه */
  --z-panel: 1001; /* لوحة الموبايل */
  --z-backdrop: 900; /* الخلفية (لو بتستخدمها) */
}

/* Navbar */
.navbar {
  background: #fff;
  border-bottom: 1px solid #F3F4F6;
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo img { height: 70px; }

/* Desktop nav links */
.nav-links {
  display: flex;
  list-style: none;
  gap: 26px;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-gray);
  font-size: 15px;
  position: relative;
  transition: color .3s, transform .3s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width .3s;
}
.nav-links a:hover { color: var(--primary-color); transform: translateY(-2px); }
.nav-links a:hover::after { width: 100%; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: .3s;
}
.lang-switcher:hover {
  background: var(--secondary-color);
  color: #fff;
  transform: scale(1.05);
}

.sign-up-btn {
  background: #1E40AF;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 400;
  position: relative;
  overflow: hidden;
  transition: .3s;
  font-size: 15px;
}
.sign-up-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -100%;
  background: rgba(255, 255, 255, .2);
  transition: left .3s;
}
.sign-up-btn:hover::before { left: 100%; }
.sign-up-btn:hover {
  background: var(--dark-purple);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(139, 92, 246, .3);
}

/* Toggle (hidden on desktop) */
.menu-toggle {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

/* Active link in navbar */
.nav-links a{
  position: relative;
  color: #475569;
  text-decoration: none;
  transition: color .2s ease;
}
.nav-links a.is-active{ color: #6c4df6; }
.nav-links a.is-active::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 3px;
  background: linear-gradient(90deg,#6c4df6,#9b8cff);
  border-radius: 999px;
}

/* ================== Mobile (≤ 768px) ================== */
@media (max-width: 768px) {
  .menu-toggle{
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 0; background: transparent;
    font-size: 24px; cursor: pointer; border-radius: 8px;
  }
  .menu-toggle:focus-visible{
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }

  /* ✅ تعديلات الموبايل فقط */
  .logo img{
    height: 40px;   /* صغّر اللوجو على الموبايل */
    width: auto;    /* يحافظ على النسبة */
  }
  nav{ padding: 8px 0; } /* يقلل ارتفاع النافبار شوي */
  .logo{ gap: 8px; }     /* يخفف المسافة جنب اللوجو */

  /* نخفي روابط الديسكتوب افتراضياً على الموبايل */
  .nav-links{ display: none; }

  /* تظهر عند الفتح */
  .navbar.is-open .nav-links{ display: flex; }

  /* لوحة الموبايل: ثابتة وما بتنزل مع الصفحة */
  .navbar .nav-links{
    position: fixed;
    left: 0; right: 0;
    top: var(--nav-h);
    flex-direction: column;
    gap: 12px;
    background: #fff;
    padding: 16px;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    z-index: var(--z-panel);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .navbar.is-open .nav-links{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* لمس أسهل */
  .nav-links a{
    padding: 10px 6px;
    border-radius: 10px;
  }
  .nav-links a:active{ background: #F5F3FF; }
}

/* ================== Backdrop (اختياري) ==================
   إذا بدك تعتمد سكربت بدون Backdrop احذف هالقسم.
*/
.backdrop{
  position: fixed; inset: 0;
  background: transparent; /* لا ضباب ولا تعتيم */
  pointer-events: none;
  z-index: var(--z-backdrop);
}
.navbar.is-open + .backdrop{ pointer-events: auto; }
.backdrop[hidden]{ display: none !important; }

/* لا لفة من فوق، لفة من تحت فقط */
.navbar{
  top: 0;                 /* يبدأ من أعلى الصفحة */
  padding-inline: 16px;   /* الفراغ الجانبي للكارد */
  background: transparent;
  border: 0;
  box-shadow: none;
}

.navbar > .container{
  max-width: 1200px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid #EEF2F7;
  /* 👇 صفرنا الحواف العلوية */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* نخلي الحواف من تحت بس */
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  box-shadow: 0 10px 30px rgba(17,24,39,.06);
  padding-block: 10px;
  padding-inline: 20px;
  transition: border-radius .2s ease;
}

/* موبايل يبقى فل وِدث */
@media (max-width: 768px){
  .navbar{ padding-inline: 0; }
  .navbar > .container{
    max-width: none;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    border-bottom: 1px solid #F3F4F6;
    padding-inline: 16px;
  }
}
/* ======= Compact phones (<= 360px) ======= */
@media (max-width: 360px) {
  nav{ padding: 6px 0; }                /* يقلّل ارتفاع الشريط */
  .logo img{ height: 34px; }            /* كان 40px */
  .logo{ gap: 6px; }

  .nav-actions{ gap: 8px; }             /* كان 16px */

  /* زر اللغة: أيقونة + كلمة */
  .lang-switcher{
    gap: 6px;
    padding: 4px 8px;
    border-radius: 14px;
    font-size: 12px;                    /* يصغّر النص */
    line-height: 1;
    white-space: nowrap;                /* يمنع اللف */
  }
  .lang-switcher i{
    font-size: 14px;                    /* يصغّر الأيقونة */
    line-height: 1;
  }
  .lang-switcher:hover{ transform: none; } /* بدون تكبير على الموبايل */

  /* زر Sign up */
  .sign-up-btn{
    padding: 6px 10px;                  /* يقلّل الارتفاع */
    font-size: 13px;
    border-radius: 8px;
    white-space: nowrap;                /* ما يلف على سطرين */
  }

  /* أيقونة القائمة */
  .menu-toggle{ width: 36px; height: 36px; font-size: 22px; }
}

/* ======= Very small (<= 330px) لضبط 320px ======= */
@media (max-width: 330px) {
  .logo img{ height: 30px; }            /* تصغير إضافي للّوجو */
  .nav-actions{ gap: 6px; }

  .lang-switcher{
    padding: 3px 7px;
    font-size: 11.5px;
    gap: 5px;
  }
  .lang-switcher i{ font-size: 13px; }

  .sign-up-btn{
    padding: 5px 9px;
    font-size: 12.5px;
  }

  /* لو حسّيت الشريط لسه عالي شَعرة */
  nav{ padding: 5px 0; }
}


/* === Force 15px for desktop nav links (LTR + RTL) === */
@media (min-width: 992px) {
  .nav-links a {
    font-size: 17px !important;
    line-height: 1.6;         /* مريحة للقراءة */
    font-weight: 400;         /* بين العادي والبولد (اختياري) */
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
  }
  html[dir="rtl"] .nav-links a {
    font-family: 'Tajawal', 'Noto Sans Arabic', system-ui, sans-serif; /* لو بدك توحّد مظهر العربي */
  }
}