/* Universal Navigation Fix for CityZeen Store */
/* This file fixes header navigation layout issues across all pages */

/* Header container fix */
header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem 0 !important;
  border-bottom: 1px solid #eaeaea !important;
  position: relative !important;
  z-index: 100 !important;
}

/* Navigation container fix */
.nav {
  display: flex !important;
  align-items: center !important;
  gap: 2rem !important;
  position: relative !important;
}

/* Navigation item styling */
.nav-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  padding: 0.5rem 0 !important;
}

.nav-item a {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: inherit !important;
  gap: 0.5rem !important;
}

.nav-item svg {
  width: 1rem !important;
  height: 1rem !important;
}

.nav-item .dropdown {
  width: 0.75rem !important;
  height: 0.75rem !important;
  margin-left: 0.25rem !important;
}

/* Dropdown menu positioning and styling */
.dropdown-menu {
  position: absolute !important;
  top: calc(100% + 0.5rem) !important;
  left: 0 !important;
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  min-width: 250px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s ease !important;
  z-index: 2000 !important;
  padding: 1rem 0 !important;
  white-space: nowrap !important;
}

.nav-item:hover .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.dropdown-item {
  display: block !important;
  padding: 0.75rem 1.5rem !important;
  color: #64748b !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all 0.2s ease !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.dropdown-item:last-child {
  border-bottom: none !important;
}

.dropdown-item:hover {
  background: #f8fafc !important;
  color: #14b8a6 !important;
  padding-left: 2rem !important;
}

.dropdown-section {
  padding: 0.5rem 1.5rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 0.5rem !important;
}

/* Header right section */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* Language selector fix */
.language-selector {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  font-size: 0.75rem !important;
  color: #666 !important;
  position: relative !important;
  cursor: pointer !important;
}

.language-selector svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
}

.language-dropdown {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  min-width: 150px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s ease !important;
  z-index: 2000 !important;
  padding: 0.5rem 0 !important;
}

.language-selector:hover .language-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Icon buttons */
.icon-button {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: inherit !important;
}

.icon-button svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: #333 !important;
}

/* Brand styling */
.brand {
  display: flex !important;
  align-items: center !important;
}

.brand-text {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
}

.brand-text span {
  color: #14b8a6 !important;
}

/* Responsive fixes */
@media (max-width: 992px) {
  .nav {
    display: none !important;
  }
  
  .header-right {
    gap: 0.5rem !important;
  }
}

/* Override any conflicting styles */
.nav-item * {
  box-sizing: border-box !important;
}

.dropdown-menu * {
  box-sizing: border-box !important;
}