/* =========================
   NAVBAR GLOBALE
   ========================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Couleur de fond */
  background: #76CDCD;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Conteneur principal de la barre */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  flex-wrap: nowrap;
  /* pas de retour à la ligne global */
}

/* Bloc marque (logo + texte) */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

/* Boîte autour du logo (optionnelle) */
.logo {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* Image du logo */
.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================
   Liens au centre
   ========================= */

.links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  /* évite que le dernier lien descende */
}

.links a {
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.links a.active,
.links a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
}

/* =========================
   Zone actions à gauche
   (تواصل الآن / login / badge user)
   ========================= */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Quand l’utilisateur n’est pas connecté, auth.js met le bouton login ici */
#userMenu {
  display: flex;
  align-items: center;
}

/* =========================
   DROPDOWN VERSION 1 : .nav-dropdown
   ========================= */

.nav-dropdown {
  position: relative;
}

/* Bouton déclencheur */
.nav-dropdown__toggle {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.nav-dropdown__chevron {
  font-size: 0.75rem;
  transform: translateY(1px);
}

/* Effet visuel quand on clique / focus */
.nav-dropdown__toggle:hover,
.nav-dropdown:focus-within .nav-dropdown__toggle {
  color: var(--text);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
}

/* Conteneur du menu */
.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  /* RTL-friendly */
  margin-top: 8px;
  min-width: 190px;
  padding: 8px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  display: none;
  z-index: 30;
}

/* Liens du menu : visibles immédiatement */
.nav-dropdown__menu a,
.nav-dropdown__menu a:link,
.nav-dropdown__menu a:visited {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.9rem;
  color: #0f172a !important;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

/* Survol d’un élément du menu */
.nav-dropdown__menu a:hover {
  background: #eff6ff;
  color: #1d4ed8 !important;
}

/* Ouverture du menu dès le focus/clic */
.nav-dropdown:focus-within .nav-dropdown__menu {
  display: block;
}

/* =========================
   DROPDOWN VERSION 2 :
   .links-group / .link-drop / .link-drop-menu
   ========================= */

.links-group {
  position: relative;
}

/* Bouton "الخدمات العقارية ▾" */
.link-drop {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.link-drop:hover,
.link-drop:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.link-drop-caret {
  font-size: 11px;
}

/* Menu blanc caché par défaut */
.link-drop-menu {
  position: absolute;
  top: 110%;
  inset-inline-end: 0;
  /* RTL */
  min-width: 190px;
  padding: 6px 0;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  display: none;
  z-index: 40;
}

/* Ouverture via JS (.is-open) */
.link-drop-menu.is-open {
  display: block;
}

/* Accessibilité clavier (focus-within) */
.links-group:focus-within .link-drop-menu {
  display: block;
}

/* Liens internes : texte foncé lisible immédiatement */
.link-drop-menu a,
.link-drop-menu a:link,
.link-drop-menu a:visited {
  display: block;
  padding: 8px 10px;
  margin: 2px 6px;
  border-radius: 10px;
  font-size: 0.9rem;
  color: #0f172a;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

/* Survol / lien actif dans le menu */
.link-drop-menu a:hover,
.link-drop-menu a.active-sub {
  background: #eff6ff;
  color: #1d4ed8;
}

/* =========================
   User menu (badge connecté) dans la navbar
   ========================= */

.topbar #userMenu {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* On annule tout positionnement "flottant" du composant */
.topbar #userMenu .user-menu,
.topbar #userMenu .user-menu__trigger {
  position: static !important;
  margin: 0 !important;
  transform: none !important;
}

/* Bouton du badge sur la même ligne que تواصل الآن */
.topbar #userMenu .user-menu__trigger {
  display: inline-flex;
  align-items: center;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 820px) {
  .links {
    display: none;
  }
}