/* Navbar Component Styles */

/* Basic Navbar Styling */
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-primary);
}

.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 1.7rem;
}

.nav-logo {
  height: 40px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  font-family: var(--font-primary);
}

.nav-links a:hover:not(.active) {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.nav-links a.active:hover {
  color: #d72638 !important;
  background: rgba(215, 38, 56, 0.15) !important;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3b82f6;
  transition: width 0.3s ease-out;
}

.nav-links a:hover:not(.active)::after {
  width: 100%;
}

/* =========================================
   UNIFIED ACTIVE STATE STYLING (SIMPLE)
   ========================================= */

/* Targeted elements: Desktop links, Dropdown buttons, Mobile links, Dropdown items */
.nav-links a.active,
.dropbtn.active,
.mobile-menu-links a.active,
.mobile-dropbtn.active,
.dropdown-content a.active,
.mobile-dropdown-content a.active,
.light-theme .nav-links a.active,
.light-theme .dropbtn.active,
.light-theme .mobile-menu-links a.active,
.light-theme .mobile-dropbtn.active,
.light-theme .dropdown-content a.active,
.light-theme .mobile-dropdown-content a.active {
  /* 1. RESET ALL DECORATIVE BOX STYLES */
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-left: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: inherit !important;
  /* Prevent shifting */

  /* 2. APPLY SIMPLE TEXT HIGHLIGHT ONLY */
  color: #d72638 !important;
  font-weight: 700 !important;
}

/* 3. DISABLE ALL PSEUDO-ELEMENT UNDERLINES/DECORATIONS FOR ACTIVE STATES */
.nav-links a.active::after,
.dropbtn.active::after,
.mobile-dropbtn.active::after,
.light-theme .nav-links a.active::after,
.light-theme .dropbtn.active::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
}

/* 4. PREVENT HOVER BACKGROUNDS ON ALREADY ACTIVE ITEMS */
.nav-links a.active:hover,
.dropbtn.active:hover,
.dropdown-content a.active:hover,
.mobile-menu-links a.active:hover,
.mobile-dropbtn.active:hover,
.mobile-dropdown-content a.active:hover {
  background: transparent !important;
  color: #d72638 !important;
}

/* Dropdown Container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Button */
.dropbtn {
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-primary);
}

.dropbtn:hover:not(.active) {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.dropbtn.active:hover {
  color: #d72638 !important;
  background: transparent !important;
}

.dropbtn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3b82f6;
  transition: width 0.3s ease-out;
}

.dropbtn:hover::after {
  width: 100%;
}

/* Dropdown Icons */
.dropdown-icon {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  transition: transform 0.3s ease;
}

.dropdown.active .dropdown-icon {
  transform: rotate(180deg);
}

/* Mobile Dropdown Icons */
.mobile-dropdown-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.mobile-dropdown.active .mobile-dropdown-icon {
  transform: rotate(180deg);
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(10px);
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  border: none;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  min-width: 200px;
  z-index: 9999999;
  top: 100%;
  left: 0;
  margin-top: 8px;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: all 0.2s ease;
  border-radius: 4px;
  margin: 4px;
  font-family: var(--font-primary);
}

.dropdown-content a:hover:not(.active) {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.dropdown-content a.active:hover {
  background-color: rgba(215, 38, 56, 0.15) !important;
  color: #d72638 !important;
}

/* Show the dropdown menu */
.dropdown-content.show {
  display: block;
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  z-index: 1000000;
  position: relative;
}

.mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-btn:active {
  transform: scale(0.95);
}

.hamburger-icon {
  width: 24px;
  height: 24px;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.mobile-menu-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu-overlay.show {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-content {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(10px);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 999999;
}

.mobile-menu-overlay.show .mobile-menu-content {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  padding: 0.75rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mobile-menu-close svg {
  width: 24px;
  height: 24px;
}

.mobile-menu-links {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-menu-links a {
  color: white;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 1rem;
  border-radius: 12px;
  transition: all 0.2s ease;
  font-family: var(--font-primary);
}

.mobile-menu-links a:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-links a.active:hover {
  background: rgba(215, 38, 56, 0.15) !important;
}

/* Mobile Dropdowns */
.mobile-dropdown {
  width: 100%;
}

.mobile-dropbtn {
  width: 100%;
  text-align: left;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 1rem;
  border-radius: 12px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  font-family: var(--font-primary);
}

.mobile-dropbtn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-dropbtn.active:hover {
  background: rgba(215, 38, 56, 0.15) !important;
}

.mobile-dropdown-content {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  margin-top: 0.5rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.mobile-dropdown.active .mobile-dropdown-content {
  max-height: 300px;
}

.mobile-dropdown-content a {
  display: block;
  padding: 0.75rem 1rem;
  color: white;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 1.4rem;
}

.mobile-dropdown-content a:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-dropdown-content a.active:hover {
  background: rgba(215, 38, 56, 0.15) !important;
}

/* Responsive Design */
@media (max-width: 1023px) {
  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }
}

@media (min-width: 1024px) {
  .mobile-menu-btn {
    display: none;
  }
}

/* Container styles */
@media (min-width: 640px) {
  .main-nav {
    padding: 1rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .main-nav {
    padding: 1rem 2rem;
  }
}

/* Responsive sizing for larger screens */
@media (min-width: 1920px) {
  .nav-logo {
    height: 50px;
    max-width: 150px;
  }

  .nav-links a {
    font-size: 1.35rem;
    padding: 10px 14px;
  }

  .dropbtn {
    font-size: 1.35rem;
    padding: 10px 14px;
  }

  .main-nav {
    padding: 1.25rem 2.5rem;
  }
}

/* Extra large screens (2560px and above) */
@media (min-width: 2560px) {
  .nav-logo {
    height: 60px;
    max-width: 180px;
  }

  .nav-links a {
    font-size: 2.25rem;
    padding: 12px 16px;
  }

  .dropbtn {
    font-size: 2.25rem;
    padding: 12px 16px;
  }

  .dropdown-icon {
    width: 18px;
    height: 18px;
  }

  .main-nav {
    padding: 1.5rem 3rem;
  }

  .nav-links {
    gap: 2rem;
  }
}

/* Prevent horizontal scrolling */
html,
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* Ensure proper spacing for fixed navbar */
body {
  padding-top: 80px;
}

/* Light theme navbar overrides */
.light-theme .main-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(12, 29, 61, 0.1) !important;
}

.light-theme .main-nav a,
.light-theme .main-nav button {
  color: #0c1d3d !important;
}

.light-theme .main-nav a:hover,
.light-theme .main-nav button:hover {
  color: #d72638 !important;
}

/* Light theme dropdown styling */
.light-theme .dropdown-content {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  /* border: 1px solid rgba(12, 29, 61, 0.1) !important; */
  border: none !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

.light-theme .dropdown-content a {
  color: #0c1d3d !important;
}

.light-theme .dropdown-content a:hover {
  background-color: rgba(12, 29, 61, 0.05) !important;
  color: #d72638 !important;
}

/* Light theme mobile menu - Removed duplicates, using comprehensive styles below */

/* Light theme mobile dropdowns - More specific overrides */
.light-theme .mobile-dropbtn {
  color: #0c1d3d !important;
  background: transparent !important;
}

.light-theme .mobile-dropbtn:hover {
  background: rgba(12, 29, 61, 0.05) !important;
  color: #d72638 !important;
}

.light-theme .mobile-dropdown-content {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(12, 29, 61, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.light-theme .mobile-dropdown-content a {
  color: #0c1d3d !important;
  background: transparent !important;
  font-weight: 500 !important;
}

.light-theme .mobile-dropdown-content a:hover {
  background: rgba(12, 29, 61, 0.08) !important;
  color: #d72638 !important;
}

/* Light theme mobile menu links - More specific overrides */
.light-theme .mobile-menu-links a {
  color: #0c1d3d !important;
  background: transparent !important;
}

.light-theme .mobile-menu-links a:hover {
  background: rgba(12, 29, 61, 0.05) !important;
  color: #d72638 !important;
}

/* Light theme mobile menu content background */
.light-theme .mobile-menu-content {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(12, 29, 61, 0.1) !important;
}

/* Light theme mobile menu overlay */
.light-theme .mobile-menu-overlay {
  background: rgba(255, 255, 255, 0.95) !important;
}

/* Additional mobile dropdown fixes for light theme */
.light-theme .mobile-dropdown.active .mobile-dropdown-content {
  max-height: 300px !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.light-theme .mobile-dropdown-content {
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  transition: all 0.3s ease !important;
}

/* Ensure mobile dropdown text is visible */
.light-theme .mobile-dropdown-content a {
  color: #0c1d3d !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

.light-theme .mobile-dropdown-content a:hover {
  color: #d72638 !important;
  background: rgba(12, 29, 61, 0.08) !important;
}

/* Mobile dropdown button text visibility - Override base white color */
.light-theme .mobile-dropbtn {
  color: #0c1d3d !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.light-theme .mobile-dropbtn:hover {
  color: #d72638 !important;
  background: rgba(12, 29, 61, 0.05) !important;
}

/* Prevent white color from being applied in light theme */
.light-theme .mobile-dropbtn,
.light-theme .mobile-dropbtn:focus,
.light-theme .mobile-dropbtn:active,
.light-theme .mobile-dropbtn:visited {
  color: #0c1d3d !important;
}

/* Ultra-specific light theme overrides to beat other CSS files */
body.light-theme .mobile-menu-links a {
  color: #0c1d3d !important;
  background: transparent !important;
}

body.light-theme .mobile-menu-links a:hover {
  color: #d72638 !important;
  background: rgba(12, 29, 61, 0.05) !important;
}

body.light-theme .mobile-dropbtn {
  color: #0c1d3d !important;
  background: transparent !important;
}

body.light-theme .mobile-dropbtn:hover {
  color: #d72638 !important;
  background: rgba(12, 29, 61, 0.05) !important;
}

body.light-theme .mobile-dropdown-content {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(12, 29, 61, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .mobile-dropdown-content a {
  color: #0c1d3d !important;
  background: transparent !important;
  font-weight: 500 !important;
}

body.light-theme .mobile-dropdown-content a:hover {
  color: #d72638 !important;
  background: rgba(12, 29, 61, 0.08) !important;
}

body.light-theme .mobile-dropdown.active .mobile-dropdown-content {
  max-height: 300px !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

body.light-theme .mobile-menu-overlay {
  background: rgba(255, 255, 255, 0.95) !important;
}

body.light-theme .mobile-menu-content {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(12, 29, 61, 0.1) !important;
}

/* Even more specific overrides for products page */
.premium-drones-bg.light-theme .mobile-menu-links a {
  color: #0c1d3d !important;
}

.premium-drones-bg.light-theme .mobile-menu-links a:hover {
  color: #d72638 !important;
}

.premium-drones-bg.light-theme .mobile-dropbtn {
  color: #0c1d3d !important;
}

.premium-drones-bg.light-theme .mobile-dropbtn:hover {
  color: #d72638 !important;
}

/* Nuclear option - Override base mobile-dropbtn color for light theme */
.light-theme .mobile-dropbtn,
.light-theme .mobile-dropbtn *,
.light-theme .mobile-dropbtn::before,
.light-theme .mobile-dropbtn::after {
  color: #0c1d3d !important;
}

/* Ensure no white color inheritance in light theme */
.light-theme .mobile-dropbtn {
  color: #0c1d3d !important;
  background: transparent !important;
  border: none !important;
}

.light-theme .mobile-dropbtn:hover {
  color: #d72638 !important;
  background: rgba(12, 29, 61, 0.05) !important;
}

.light-theme .mobile-dropbtn:focus {
  color: #0c1d3d !important;
  outline: none !important;
}

.light-theme .mobile-dropbtn:active {
  color: #d72638 !important;
}

/* Override any inherited white color from parent elements */
.light-theme .mobile-menu-links .mobile-dropbtn {
  color: #0c1d3d !important;
}

.light-theme .mobile-menu-content .mobile-dropbtn {
  color: #0c1d3d !important;
}

.light-theme .mobile-menu-overlay .mobile-dropbtn {
  color: #0c1d3d !important;
}

/* Force override any inherited styles */
.light-theme .mobile-dropbtn,
.light-theme .mobile-dropbtn span,
.light-theme .mobile-dropbtn div,
.light-theme .mobile-dropbtn svg {
  color: #0c1d3d !important;
}

/* Override any CSS that might be setting white color */
.light-theme .mobile-dropbtn {
  color: #0c1d3d !important;
  background: transparent !important;
  border: none !important;
  font-weight: bold !important;
}

.light-theme .mobile-dropbtn:hover {
  color: #d72638 !important;
  background: rgba(12, 29, 61, 0.05) !important;
}

.light-theme .mobile-dropbtn:focus {
  color: #0c1d3d !important;
  outline: none !important;
}

.light-theme .mobile-dropbtn:active {
  color: #d72638 !important;
}

/* Override any potential inheritance from mobile-menu-links */
.light-theme .mobile-menu-links a,
.light-theme .mobile-menu-links button,
.light-theme .mobile-menu-links .mobile-dropbtn {
  color: #0c1d3d !important;
}

/* Final nuclear option - Override ANY white color in light theme */
.light-theme *[class*="mobile-dropbtn"] {
  color: #0c1d3d !important;
}

.light-theme button[class*="mobile-dropbtn"] {
  color: #0c1d3d !important;
}

/* Override any CSS that sets white color for mobile elements */
.light-theme .mobile-dropbtn,
.light-theme .mobile-dropbtn *,
.light-theme .mobile-dropbtn::before,
.light-theme .mobile-dropbtn::after,
.light-theme .mobile-dropbtn:hover,
.light-theme .mobile-dropbtn:focus,
.light-theme .mobile-dropbtn:active,
.light-theme .mobile-dropbtn:visited {
  color: #0c1d3d !important;
}

/* Force override for any element with mobile-dropbtn in class name */
.light-theme [class*="mobile-dropbtn"] {
  color: #0c1d3d !important;
}

/* Immediate color fix - prevent white flash */
.light-theme .mobile-menu-links a,
.light-theme .mobile-menu-links button,
.light-theme .mobile-menu-links .mobile-dropbtn,
.light-theme .mobile-menu-content a,
.light-theme .mobile-menu-content button,
.light-theme .mobile-menu-content .mobile-dropbtn {
  color: #0c1d3d !important;
  transition: color 0s !important;
}

/* Prevent any white color inheritance immediately */
.light-theme .mobile-dropbtn {
  color: #0c1d3d !important;
  transition: color 0s !important;
}

.light-theme .mobile-dropbtn:hover {
  color: #d72638 !important;
  transition: color 0.2s ease !important;
}

/* Override any potential CSS loading order issues */
.light-theme .mobile-menu-links *,
.light-theme .mobile-menu-content * {
  color: inherit !important;
}

.light-theme .mobile-menu-links a,
.light-theme .mobile-menu-links button,
.light-theme .mobile-menu-links .mobile-dropbtn {
  color: #0c1d3d !important;
}

/* Light theme mobile menu close button */
.light-theme .mobile-menu-close {
  background: rgba(12, 29, 61, 0.1) !important;
  color: #0c1d3d !important;
}

.light-theme .mobile-menu-close:hover {
  background: rgba(12, 29, 61, 0.2) !important;
  color: #d72638 !important;
}

/* Light theme mobile menu header */
.light-theme .mobile-menu-header {
  border-bottom: 1px solid rgba(12, 29, 61, 0.1) !important;
}

/* Light theme mobile dropdown icons */
.light-theme .mobile-dropdown-icon {
  color: #0c1d3d !important;
}

.light-theme .mobile-dropdown.active .mobile-dropdown-icon {
  color: #d72638 !important;
}

/* Ensure mobile dropdowns are visible in light theme */
.light-theme .mobile-dropdown.active .mobile-dropdown-content {
  max-height: 300px !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(12, 29, 61, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Light theme mobile dropdown transitions */
.light-theme .mobile-dropdown-content {
  transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Light theme mobile menu z-index */
.light-theme .mobile-menu-overlay {
  z-index: 999999 !important;
}

.light-theme .mobile-menu-content {
  z-index: 999999 !important;
}

/* Light theme dropdown visibility fixes */
.light-theme .dropdown:hover .dropdown-content {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.light-theme .dropdown-content {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s ease !important;
}

.light-theme .dropdown-content.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Light theme dropdown button styling */
.light-theme .dropbtn {
  color: #0c1d3d !important;
  background: transparent !important;
}

.light-theme .dropbtn:hover {
  color: #d72638 !important;
  background: rgba(12, 29, 61, 0.05) !important;
}

.light-theme .dropdown-icon {
  color: #0c1d3d !important;
}

.light-theme .dropdown:hover .dropdown-icon {
  color: #d72638 !important;
  transform: rotate(180deg) !important;
}

/* Ensure light theme dropdowns are above other content */
.light-theme .dropdown {
  position: relative !important;
  z-index: 1000 !important;
}

.light-theme .dropdown-content {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 200px !important;
  z-index: 1001 !important;
}

/* Light theme dropdown active states */
.light-theme .dropdown.active .dropdown-content {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.light-theme .dropdown.active .dropdown-icon {
  color: #d72638 !important;
  transform: rotate(180deg) !important;
}

/* Light theme dropdown show class (for JavaScript) */
.light-theme .dropdown-content.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Ensure light theme dropdowns work with both hover and click */
.light-theme .dropdown:hover .dropdown-content,
.light-theme .dropdown.active .dropdown-content,
.light-theme .dropdown-content.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Light theme dropdown button active state */
.light-theme .dropdown.active .dropbtn {
  color: #d72638 !important;
  background: rgba(12, 29, 61, 0.05) !important;
}

/* Override base dropdown styles for light theme */
.light-theme .dropdown-content {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(12, 29, 61, 0.1) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
  color: #0c1d3d !important;
}

.light-theme .dropdown-content a {
  color: #0c1d3d !important;
  background: transparent !important;
}

.light-theme .dropdown-content a:hover {
  background-color: rgba(12, 29, 61, 0.05) !important;
  color: #d72638 !important;
}

/* Ensure light theme dropdowns are properly positioned */
.light-theme .dropdown {
  position: relative !important;
}

.light-theme .dropdown-content {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 8px !important;
  z-index: 9999999 !important;
}

/* Light theme dropdown visibility override */
.light-theme .dropdown:hover .dropdown-content,
.light-theme .dropdown.active .dropdown-content,
.light-theme .dropdown-content.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================
   TEMPORARY: Products Coming Soon Mode
   ============================================
   Products navlinks are visible with "Coming Soon" badge.
   Dropdown is disabled. To fully enable products, comment out or remove the rules below.
   ============================================ */

/* Hide products dropdown content (keep button visible) */
.main-nav #products-dropdown,
.main-nav .dropdown #products-dropdown {
  display: none !important;
  pointer-events: none !important;
}

/* Disable Products Dropdown Button - make it look disabled but visible */
.main-nav .dropdown:has(#products-dropdown) .dropbtn {
  cursor: not-allowed !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}

/* Hide mobile dropdown content with product links */
.mobile-menu-links .mobile-dropdown .mobile-dropdown-content a[href*="/pages/products"] {
  display: none !important;
}

/* Disable mobile products dropdown button */
.mobile-menu-links .mobile-dropdown:has(.mobile-dropdown-content a[href*="/pages/products"]) .mobile-dropbtn {
  cursor: not-allowed !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}

/* Style Coming Soon Badge in injected navbar */
.main-nav .products-coming-soon-badge,
.mobile-menu-links .products-coming-soon-badge {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
  color: white !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Default state */