/* ========================================================
   SKAINET 2026 — ULTRA-PREMIUM TECHNICAL MINIMALISM NAVIGATION
   Inspired by Linear, Stripe, Raycast & Supabase
   Brand Colors: Primary Blue (#146ef5, #0b57d0), Deep Ink (#0b1220)
   ======================================================== */

/* 1. Reset & Neutralize WooCommerce Stale Styles */
#top button,
#top button:hover,
#top button:focus,
#top button:active,
#cmd-palette button,
#cmd-palette button:hover,
#cmd-palette button:focus,
#cmd-palette button:active,
#elena-mega-menu-item button,
#elena-mega-menu-item button:hover,
#elena-mega-menu-item button:focus {
  background-color: transparent;
  color: inherit;
  border: none;
  outline: none !important;
  box-shadow: none !important;
}

/* 2. Desktop Navigation Visibility */
@media (min-width: 1024px) {
  nav.border-t.border-slate-100.bg-white,
  nav.border-t.border-slate-100.bg-white.hidden,
  #top nav,
  .skainet-nav-desktop {
    display: flex !important;
  }
}
nav.border-t.border-slate-100.bg-white.hidden {
  display: none;
}
@media (min-width: 1024px) {
  nav.border-t.border-slate-100.bg-white.hidden {
    display: flex !important;
  }
}

/* 3. Glassmorphism & Depth (Linear / Stripe Standard) */
.glass-nav,
.glass-card-nav {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 20px 45px -15px rgba(11, 18, 32, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}

/* 4. Mega-Dropdown Animation */
.mega-dropdown {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(6px) !important;
  pointer-events: none !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s !important;
}
.has-dropdown:hover .mega-dropdown,
.has-dropdown:focus-within .mega-dropdown,
.has-dropdown.is-open .mega-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* 5. Command Palette Modal — PURE BULLETPROOF CONTRACT */
#cmd-palette.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

#cmd-palette:not(.hidden) {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999999 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  background-color: rgba(11, 18, 32, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* 6. Command Palette Card Box (Raycast Style) */
#cmd-palette .cmd-card-box,
#cmd-palette > div {
  background: #ffffff !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 25px 60px -15px rgba(11, 18, 32, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
  width: 100% !important;
  max-width: 38rem !important;
  overflow: hidden !important;
}

.cmd-item {
  border-radius: 0.625rem !important;
  transition: all 0.15s ease !important;
}
.cmd-item:hover {
  background-color: #f8fafc !important;
  transform: translateX(3px) !important;
}

/* 7. Sound Wave Animation */
.wave-bar {
  animation: sound-wave 1.2s ease-in-out infinite alternate;
}
.wave-bar:nth-child(2) { animation-delay: 0.2s; }
.wave-bar:nth-child(3) { animation-delay: 0.4s; }
.wave-bar:nth-child(4) { animation-delay: 0.1s; }
.wave-bar:nth-child(5) { animation-delay: 0.3s; }
@keyframes sound-wave {
  0% { height: 4px; }
  100% { height: 16px; }
}

/* 8. Mobile Drawer Slide-in */
#mobile-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999998 !important;
  background-color: rgba(11, 18, 32, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  transition: opacity 0.25s ease !important;
}
#mobile-drawer.drawer-closed,
#mobile-drawer.opacity-0,
#mobile-drawer.pointer-events-none {
  opacity: 0 !important;
  pointer-events: none !important;
}
#mobile-drawer.drawer-open,
#mobile-drawer.opacity-100 {
  opacity: 1 !important;
  pointer-events: auto !important;
}
#drawer-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 23rem !important;
  background: #ffffff !important;
  box-shadow: -12px 0 40px rgba(11, 18, 32, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(100%) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: auto !important;
}
#mobile-drawer.drawer-open #drawer-panel,
#drawer-panel.translate-x-0 {
  transform: translateX(0) !important;
}

body.drawer-active {
  overflow: hidden !important;
}

/* 9. Premium Highlights & VIP Pill */
.vip-pill-btn {
  background: linear-gradient(135deg, #146ef5 0%, #0b57d0 100%) !important;
  box-shadow: 0 4px 14px rgba(20, 110, 245, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.vip-pill-btn:hover {
  box-shadow: 0 6px 20px rgba(20, 110, 245, 0.5) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* 10. Refined Close Controls */
.cmd-close-x {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  color: #64748b !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.cmd-close-x:hover {
  color: #0b1220 !important;
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

.cmd-btn-cancel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.cmd-btn-cancel:hover {
  color: #0b1220 !important;
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}