/* ============================================================
   MOTORX — Navbar Styles
   css/navbar.css
   ============================================================ */

/* ─── NAVBAR BASE ────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-navbar);
  height: var(--navbar-height);
  background: var(--navbar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--navbar-border);
  transition: background var(--transition-slow),
              border-color var(--transition-slow);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-4);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ─── LOGO ───────────────────────────────────────────────────── */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  letter-spacing: -0.04em;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
  direction: ltr
}

.navbar-logo:hover { opacity: 0.85; }

.navbar-logo .logo-motor {
  color: var(--logo-text-color);
  transition: color var(--transition-slow);
}

.navbar-logo .logo-x {
  color: var(--logo-x-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-slow),
              text-shadow var(--transition-slow);
}

[data-theme="dark"] .navbar-logo .logo-x {
  text-shadow: 0 0 20px rgba(33,150,243,0.6);
}

/* ─── NAV LINKS ──────────────────────────────────────────────── */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  justify-content: center;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--clr-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast),
              background var(--transition-fast);
  position: relative;
}

.nav-link:hover {
  color: var(--clr-text-primary);
  background: var(--clr-border-subtle);
}

.nav-link.active {
  color: var(--clr-brand);
  background: transparent;
  border-bottom: 2px solid var(--clr-brand);
  border-radius: 0;
}

.nav-link.active::after { display: none; }

/* Emergency nav link */
.nav-link.nav-emergency {
  color: var(--clr-danger);
}
.nav-link.nav-emergency:hover {
  background: var(--clr-danger-bg);
  color: var(--clr-danger);
}

/* ─── AI BUTTON ──────────────────────────────────────────────── */
.nav-ai-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  background: linear-gradient(135deg, rgba(33,150,243,0.15), rgba(33,150,243,0.05));
  border: 1.5px solid var(--clr-brand);
  color: var(--clr-brand);
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.nav-ai-btn:hover {
  background: var(--clr-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}

[data-theme="light"] .nav-ai-btn {
  border-color: #1D4ED8;
  color: #1D4ED8;
}

.nav-ai-btn svg {
  width: 14px;
  height: 14px;
}

/* ─── NAVBAR ACTIONS (right side) ────────────────────────────── */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Theme toggle button */
.btn-theme-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-bg-card);
  color: var(--clr-text-secondary);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn-theme-toggle:hover {
  border-color: var(--clr-brand);
  color: var(--clr-brand);
  background: var(--clr-brand-glow);
}

/* Lang toggle button */
.btn-lang-toggle {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-bg-card);
  color: var(--clr-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  font-family: inherit;
}

.btn-lang-toggle:hover {
  border-color: var(--clr-brand);
  color: var(--clr-brand);
  background: var(--clr-brand-glow);
}

/* ─── USER DROPDOWN ──────────────────────────────────────────── */
.user-menu {
  position: relative;
}

.user-avatar-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-bg-card);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.user-avatar-btn:hover {
  border-color: var(--clr-brand);
  background: var(--clr-brand-glow);
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--clr-brand);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.user-name-nav {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--clr-text-primary);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chevron {
  color: var(--clr-text-muted);
  transition: transform var(--transition-fast);
  font-size: 10px;
}
.user-menu.open .user-chevron { transform: rotate(180deg); }

/* Dropdown */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 200px;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--transition-base),
              transform var(--transition-spring);
  z-index: var(--z-dropdown);
}

.user-menu.open .user-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--clr-text-secondary);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
}

.dropdown-item:hover {
  background: var(--clr-bg-card-hover);
  color: var(--clr-text-primary);
}

.dropdown-item.danger { color: var(--clr-danger); }
.dropdown-item.danger:hover { background: var(--clr-danger-bg); }

.dropdown-divider {
  height: 1px;
  background: var(--clr-border);
  margin: var(--space-1) 0;
}

/* ─── GUEST BUTTONS ──────────────────────────────────────────── */
.nav-auth-btns {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ─── MOBILE HAMBURGER ───────────────────────────────────────── */
.navbar-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-bg-card);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.navbar-hamburger:hover {
  border-color: var(--clr-brand);
  background: var(--clr-brand-glow);
}

.hamburger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--clr-text-secondary);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  transform-origin: center;
}

.navbar-hamburger.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar-hamburger.open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar-hamburger.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── MOBILE MENU ────────────────────────────────────────────── */
.navbar-mobile-menu {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--clr-bg-surface);
  z-index: calc(var(--z-navbar) - 1);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--container-pad);
  gap: var(--space-2);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
  transition: opacity var(--transition-base),
              transform var(--transition-base);
}

.navbar-mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

[dir="rtl"] .navbar-mobile-menu {
  transform: translateX(100%);
}
[dir="rtl"] .navbar-mobile-menu.open {
  transform: translateX(0);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--clr-text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  background: var(--clr-brand-glow);
  color: var(--clr-brand);
  border-color: var(--clr-border-strong);
}

.mobile-nav-divider {
  height: 1px;
  background: var(--clr-border);
  margin: var(--space-2) 0;
}

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .navbar-nav { display: none; }
  .navbar-hamburger { display: flex; }

  /* Keep actions visible but compact */
  .nav-auth-btns .btn { display: none; }
}

@media (max-width: 640px) {
  .user-name-nav { display: none; }
  .btn-lang-toggle { font-size: 10px; padding: 2px var(--space-2); }
}