/* Navbar Styles */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #426287;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1.25rem;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  height: 4rem;
}

.navbar .logo img {
  max-height: 48px;
  transition: transform .2s ease;
}

.navbar .logo:hover img {
  transform: scale(1.05);
}

.navlink {
  color: #fff;
  text-decoration: none;
  margin: 0 .75rem;
  font-weight: 600;
  transition: opacity .2s ease;
}

.navlink:hover {
  opacity: .85;
}

.menu-icon {
  background: none;
  border: none;
  cursor: pointer;
  display: none;
}

.desktop-menu {
  display: flex;
  align-items: center;
}

.search-box {
  background: #fff;
  border-radius: 9999px;
  padding: .3rem .6rem;
  display: flex;
  align-items: center;
  margin: 0 .75rem;
}

.search-box input {
  border: none;
  outline: none;
  padding: .2rem .4rem;
  font-size: .9rem;
}

.search-box svg {
  flex-shrink: 0;
}

.cart-icon {
  position: relative;
  margin-right: .75rem;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ff4d4f;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 50%;
  padding: .15rem .4rem;
  border: 2px solid #fff;
}

.btn-primary {
  background: #2d4766;
  color: #fff;
  border: none;
  padding: .4rem .9rem;
  border-radius: 9999px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.btn-primary:hover {
  background: #21354c;
  transform: translateY(-1px);
}

/* Utilities */
.hidden {
  display: none !important;
}

.flex {
  display: flex !important;
}

/* Navbar base (لو عندك غيرها سيبها، دول إضافات آمنة) */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background: #426287;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem;
  z-index: 1000;
}

/* زر الهامبرجر */
.menu-icon {
  background: none;
  border: 0;
  cursor: pointer;
  display: none;
  /* يُظهر على الموبايل فقط بالأسفل */
}

/* قائمة الديسكتوب */
.desktop-menu {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* قائمة الموبايل المنسدلة */
.mobile-menu {
  position: absolute;
  top: 4rem;
  /* تحت النافبار مباشرة */
  right: 0;
  left: 0;
  background: #fff;
  color: #1f2a37;
  padding: .75rem 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  display: none;
  /* تبدأ مخفية */
  flex-direction: column;
  gap: .5rem;
  z-index: 999;
}

.mobile-menu .navlink {
  color: #1f2a37;
  text-decoration: none;
  font-weight: 700;
}

.mobile-menu .btn-primary {
  background: #426287;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: .55rem .9rem;
  font-weight: 800;
  cursor: pointer;
}

/* موبايل: اخفي الديسكتوب، أظهر زر المنيو */
@media (max-width: 768px) {
  .desktop-menu {
    display: none;
  }

  .menu-icon {
    display: inline-flex;
  }
}


@media (max-width: 768px) {
  .desktop-menu {
    display: none;
  }

  .menu-icon {
    display: block;
  }

  .mobile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #426287;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 200px;
    padding: .75rem;
    gap: .5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .mobile-menu.hidden {
    display: none;
  }

  .mobile-menu a,
  .mobile-menu button {
    width: 100%;
    text-align: left;
    color: #fff;
  }
}

/* Animation for navbar logo */
.navbar .logo img {
  max-height: 48px;
  transition: transform .2s ease;
  animation: spinY 5s linear infinite;
  animation-delay: 0s;
}

/* Keyframes for horizontal rotation */
@keyframes spinY {

  0%,
  95% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

@media (max-width: 768px) {
  .desktop-menu {
    display: none;
  }

  .menu-icon {
    display: block;
  }

  .mobile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #426287;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 200px;
    padding: .75rem;
    gap: .5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .mobile-menu.hidden {
    display: none;
  }

  .mobile-menu a,
  .mobile-menu button {
    width: 100%;
    text-align: left;
    color: #fff;
  }
}

/* على الشاشات الأكبر من 768px نخفي قائمة الموبايل نهائي */
@media (min-width: 769px) {
  .mobile-menu {
    display: none !important;
  }
}

.navbar .search-box,
.navbar .cart-icon {
  display: none !important;
}

/* Ghost button (ينفع على الديسكتوب والموبايل) */
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .85);
  padding: .45rem .9rem;
  border-radius: 9999px;
  font-weight: 800;
  cursor: pointer;
}

/* في الديسكتوب: خليها أوضح على خلفية النافبار */
@media (min-width: 769px) {
  .navbar .btn-ghost {
    border-color: rgba(255, 255, 255, .85);
    color: #fff;
  }
}

/* في الموبايل قائمة المنيو أصلاً بتغيّر لون العناصر للأبيض وتملأ العرض */
@media (max-width: 768px) {

  .mobile-menu a.btn-ghost,
  .mobile-menu a.btn-primary {
    width: 100%;
    text-align: right;
  }
}

/* make hamburger lines white on mobile */
.menu-icon svg rect {
  fill: #fff !important;
}

/* ==== Navbar brand alignment ==== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* نفس حواف الهيدر العامة */
  padding: 10px clamp(14px, 3vw, 24px);
}

/* اللوجو: إبقِ التنسيق المرن + ازاحة خفيفة لليسار */
.navbar>.logo {
  display: flex;
  /* هي موجودة inline عندك بس بنكررها احتياطي */
  align-items: center;
  gap: 10px;
  transform: translateX(-8px);
  /* إزاحة بسيطة لليسار على الموبايل */
}

/* على الشاشات الكبيرة نزود الإزاحة شوية */
@media (min-width: 992px) {
  .navbar>.logo {
    transform: translateX(-14px);
  }
}

/* لو حسيت أنها قريبة من الحافة قوي على شاشات صغيرة جدًا قلل الإزاحة */
@media (max-width: 380px) {
  .navbar>.logo {
    transform: translateX(-19px);
  }
}

/* === Navbar auth controls (course-details) === */
.app-navbar .container-fluid { min-height: 56px; }
.app-navbar .nav-right { gap: .5rem; }

/* شكل عام موحّد وصغير */
.app-navbar .btn-auth{
  --h: 34px;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--h); padding:0 .9rem;
  font-size:.9rem; font-weight:800; line-height:1;
  border-radius:9999px; border:1px solid #2d4766;
  background:#fff; color:#2d4766; text-decoration:none;
  cursor:pointer;
}
.app-navbar .btn-auth:hover{ opacity:.95; }

/* إنشاء حساب كـ "ghost" */
.app-navbar .btn-auth.btn-auth--ghost{
  border-color:rgba(45,71,102,.35);
  background:transparent;
}

/* خروج بلون تحذيري هادي */
.app-navbar .btn-auth.btn-auth--danger{
  border-color:#c0392b; color:#c0392b; background:#fff;
}

/* نص الترحيب صغير وما يكسّر السطر */
.app-navbar .welcome{ font-size:.9rem; font-weight:700; color:#2d4766; white-space:nowrap; }

/* موبايل: أصغر شوية ونخفي الترحيب لو المساحة ضيقة */
@media (max-width:576px){
  .app-navbar{ padding-inline:.75rem; }
  .app-navbar .btn-auth{ --h:30px; padding:0 .7rem; font-size:.85rem; }
  .app-navbar .welcome{ display:none; }
}

/* ===== Navbar Ultra-Compact (يحسم المقاس على الموبايل) ===== */

/* ثابت: مايلفّوش ومسموح تمرير أفقي بسيط بدل النزول تحت */
.app-navbar .container-fluid{ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; min-width:0; }
.app-navbar .nav-right{
  margin-inline-start:auto; display:flex; align-items:center;
  flex-wrap:nowrap !important; gap:.3rem;
  min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.app-navbar .nav-right::-webkit-scrollbar{ display:none; }

/* —— تصغير قاسٍ للأزرار داخل الهيدر —— */
.app-navbar .nav-right .btn-auth,
.app-navbar .nav-right .btn,          /* لو فيه btn من Bootstrap */
.app-navbar .nav-right .nav-link{     /* لو متسطبة كـ nav-link */
  height: 24px !important;            /* كان 34–36 */
  line-height:24px !important;
  padding: 0 .40rem !important;       /* كان 0 .9rem */
  font-size: .70rem !important;       /* كان .9rem+ */
  font-weight:600 !important;
  border-radius:9999px !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}

/* ألوان هادئة موحّدة (اختياري لو ألوان Bootstrap مغلّبة) */
.app-navbar .nav-right .btn-auth{ border:1px solid #2d4766; background:#fff; color:#2d4766; }
.app-navbar .nav-right .btn-auth.btn-auth--ghost{ border-color:rgba(45,71,102,.35); background:transparent; }
.app-navbar .nav-right .btn-auth.btn-auth--danger{ border-color:#c0392b; color:#c0392b; background:#fff; }

/* اللوجو أصغر على الموبايل */
@media (max-width:576px){
  .app-navbar .brand img{ height:22px !important; }
  .app-navbar .welcome{ display:none !important; } /* نوفر مساحة */
}

/* ضيّق جدًا (≤360px): مزيد من الضغط */
@media (max-width:360px){
  .app-navbar .nav-right{ gap:.25rem; }
  .app-navbar .nav-right .btn-auth,
  .app-navbar .nav-right .btn,
  .app-navbar .nav-right .nav-link{
    height:22px !important; line-height:22px !important;
    padding:0 .35rem !important; font-size:.66rem !important;
  }
}