/**
 * ADRIAGEL® ULTRA Premium Offcanvas - OVERRIDE Version
 * Überschreibt ThemeWare & Shopware Styles
 * Priority: Maximum | Specificity: Ultra High
 * Shopware 6.4+ Plugin Version
 */

/* ============================================
   SCHRITT 1: ThemeWare Offcanvas NEUTRALISIEREN
   ============================================ */
   
/* Deaktiviere ThemeWare Offcanvas Styles */
body .offcanvas,
body .offcanvas.is-open,
body .navigation-offcanvas,
body .js-offcanvas,
body .offcanvas--navigation,
body .offcanvas-menu {
  /* Reset ThemeWare Backgrounds */
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Entferne ThemeWare Ripple & Glow */
body .tw-tap-ripple {
  display: none !important;
}

body .offcanvas a::before,
body .navigation-offcanvas a::before {
  display: none !important;
}

/* ============================================
   SCHRITT 2: ADRIAGEL STYLES MIT MAXIMUM PRIORITY
   ============================================ */

/* ADRIAGEL Namespace für Isolation */
body.adriagel-offcanvas-active {
  /* Marker-Klasse wird per JS gesetzt */
}

/* ADRIAGEL Premium Glaseffekt - OVERRIDE */
body .offcanvas-menu,
body .navigation-offcanvas,
body .offcanvas.is-open,
body.adriagel-offcanvas-active .offcanvas,
body.adriagel-offcanvas-active .navigation-offcanvas-menu {
  /* ADRIAGEL Mehrschichtiger Glaseffekt */
  background:
    radial-gradient(ellipse at top left, 
      rgba(0, 180, 216, 0.06) 0%, 
      transparent 35%),
    radial-gradient(ellipse at bottom right, 
      rgba(255, 107, 53, 0.04) 0%, 
      transparent 45%),
    linear-gradient(135deg, 
      rgba(248, 250, 252, 0.92),
      rgba(241, 245, 249, 0.92)) !important;
  
  /* ADRIAGEL Blur */
  backdrop-filter: blur(20px) saturate(1.15) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.15) brightness(1.02) !important;
  
  /* ADRIAGEL Schatten */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 30px rgba(0, 119, 182, 0.06),
    0 15px 40px rgba(0, 0, 0, 0.08) !important;
    
  /* Animation */
  animation: adriagelSlideIn 380ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  z-index: 10000 !important; /* Über allem */
}

@keyframes adriagelSlideIn {
  from {
    transform: translateX(-100%) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* ============================================
   NAVIGATION LINKS - ADRIAGEL STYLE OVERRIDE
   ============================================ */
body .offcanvas-menu .navigation-flyout-link,
body .offcanvas-menu .nav-link,
body .navigation-offcanvas .navigation-flyout-link,
body .navigation-offcanvas .nav-link,
body .offcanvas a.nav-link {
  /* Reset ThemeWare */
  all: unset !important;
  
  /* ADRIAGEL Styles */
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;
  padding: 16px 24px !important;
  margin: 4px 12px !important;
  
  font-family: var(--font-primary) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  color: #374151 !important;
  text-decoration: none !important;
  
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.06), 
    rgba(255, 255, 255, 0.01)) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px !important;
  
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  
  /* Entferne ThemeWare Pseudo-Elemente */
  &::before,
  &::after {
    display: none !important;
  }
}

/* Hover State - ADRIAGEL */
body .offcanvas-menu .navigation-flyout-link:hover,
body .offcanvas-menu .nav-link:hover,
body .navigation-offcanvas .navigation-flyout-link:hover,
body .navigation-offcanvas .nav-link:hover {
  transform: translateX(4px) !important;
  background: linear-gradient(135deg, 
    rgba(0, 180, 216, 0.1), 
    rgba(255, 255, 255, 0.06)) !important;
  border-color: rgba(0, 180, 216, 0.25) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 12px rgba(0, 180, 216, 0.1) !important;
  color: #0077B6 !important;
}

/* Active State - ADRIAGEL */
body .offcanvas-menu .navigation-flyout-link.active,
body .offcanvas-menu .navigation-flyout-link[aria-current="page"],
body .navigation-offcanvas .is-active > .nav-link,
body .navigation-offcanvas .active > .nav-link {
  background: linear-gradient(135deg, 
    rgba(0, 180, 216, 0.15), 
    rgba(0, 119, 182, 0.06)) !important;
  border: 1px solid rgba(0, 180, 216, 0.3) !important;
  color: #0077B6 !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 180, 216, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 2px rgba(0, 180, 216, 0.06) !important;
}

/* ============================================
   FARBWELTEN - ADRIAGEL KOLLEKTIONEN
   ============================================ */
   
/* Türkis Kollektion */
body .nav-link[href*="turkis"],
body .nav-link[href*="türkis"],
body .navigation-flyout-link[href*="turkis"],
body .navigation-flyout-link[href*="türkis"] {
  background: linear-gradient(135deg, 
    rgba(0, 180, 216, 0.12), 
    rgba(79, 195, 224, 0.06)) !important;
  border-color: rgba(0, 180, 216, 0.25) !important;
}

/* Kobalt Kollektion */
body .nav-link[href*="kobalt"],
body .navigation-flyout-link[href*="kobalt"] {
  background: linear-gradient(135deg, 
    rgba(0, 119, 182, 0.12), 
    rgba(46, 139, 192, 0.06)) !important;
  border-color: rgba(0, 119, 182, 0.25) !important;
}

/* Sunset Red */
body .nav-link[href*="sunset"],
body .navigation-flyout-link[href*="sunset"] {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.12), 
    rgba(255, 133, 85, 0.06)) !important;
  border-color: rgba(255, 107, 53, 0.25) !important;
}

/* Kristallklar */
body .nav-link[href*="kristall"],
body .navigation-flyout-link[href*="kristall"] {
  background: linear-gradient(135deg, 
    rgba(229, 231, 235, 0.15), 
    rgba(243, 244, 246, 0.08)) !important;
  border-color: rgba(229, 231, 235, 0.3) !important;
}

/* Premium Kollektion */
body .nav-link[href*="premium"],
body .navigation-flyout-link[href*="premium"] {
  background: linear-gradient(135deg, 
    rgba(212, 175, 55, 0.08), 
    rgba(228, 200, 90, 0.04)) !important;
  border-color: rgba(212, 175, 55, 0.2) !important;
  position: relative !important;
}

/* Premium Sparkle */
body .nav-link[href*="premium"]::after,
body .navigation-flyout-link[href*="premium"]::after {
  content: '✦' !important;
  position: absolute !important;
  right: 20px !important;
  color: #D4AF37 !important;
  font-size: 12px !important;
  animation: adriagelSparkle 2s ease-in-out infinite !important;
  display: block !important;
}

@keyframes adriagelSparkle {
  0%, 100% { 
    opacity: 0.5; 
    transform: scale(1) rotate(0deg);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2) rotate(180deg);
  }
}

/* ============================================
   SOCIAL MEDIA LINKS
   ============================================ */
   
/* WhatsApp */
body .nav-link[href*="whatsapp"],
body .navigation-flyout-link[href*="whatsapp"] {
  background: linear-gradient(135deg, 
    rgba(37, 211, 102, 0.1), 
    rgba(37, 211, 102, 0.04)) !important;
  border-color: rgba(37, 211, 102, 0.2) !important;
}

/* Instagram */
body .nav-link[href*="instagram"],
body .navigation-flyout-link[href*="instagram"] {
  background: linear-gradient(135deg, 
    rgba(225, 48, 108, 0.1), 
    rgba(193, 53, 132, 0.04)) !important;
  border-color: rgba(225, 48, 108, 0.2) !important;
}

/* TikTok */
body .nav-link[href*="tiktok"],
body .navigation-flyout-link[href*="tiktok"] {
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.08), 
    rgba(255, 0, 80, 0.04)) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   HAMBURGER BUTTON OVERRIDE
   ============================================ */
body .header-actions-btn.js-offcanvas-menu-open,
body .adriagel-menu-trigger,
body button[aria-label*="menu" i],
body button[aria-label*="navigation" i] {
  background: linear-gradient(135deg, #00B4D8, #0077B6) !important;
  border: none !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

body .header-actions-btn.js-offcanvas-menu-open:hover,
body .adriagel-menu-trigger:hover {
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 0 8px 20px rgba(0, 180, 216, 0.3) !important;
}

/* Icon im Button */
body .header-actions-btn.js-offcanvas-menu-open .icon,
body .adriagel-menu-trigger .icon {
  color: white !important;
}

/* ============================================
   OFFCANVAS HEADER OVERRIDE
   ============================================ */
body .offcanvas-menu-headline,
body .offcanvas-header {
  padding: 24px !important;
  background: linear-gradient(135deg, 
    rgba(0, 180, 216, 0.04), 
    transparent) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Close Button */
body .offcanvas-menu-close,
body .offcanvas-close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

body .offcanvas-menu-close:hover,
body .offcanvas-close:hover {
  transform: rotate(90deg) scale(1.1) !important;
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.15), 
    rgba(255, 255, 255, 0.08)) !important;
  border-color: #FF6B35 !important;
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.25) !important;
}

/* ============================================
   ICONS STYLING
   ============================================ */
body .navigation-flyout-link i,
body .nav-link i {
  margin-right: 12px !important;
  font-size: 17px !important;
  background: linear-gradient(135deg, #00B4D8, #0077B6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block !important;
}

/* ============================================
   ADRIAGEL RIPPLE EFFECT (Ersetzt ThemeWare)
   ============================================ */
.adriagel-ripple {
  position: absolute !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, 
    rgba(0, 180, 216, 0.3) 0%, 
    transparent 70%) !important;
  transform: scale(0) !important;
  animation: adriagelRippleAnimation 600ms ease-out !important;
  pointer-events: none !important;
}

@keyframes adriagelRippleAnimation {
  to {
    transform: scale(4) !important;
    opacity: 0 !important;
  }
}

/* ============================================
   DEVICE-SPEZIFISCHE OVERRIDES
   ============================================ */
   
/* iOS Optimierungen */
html.is-ios body .offcanvas-menu,
html.is-ios body .navigation-offcanvas {
  backdrop-filter: blur(24px) saturate(1.15) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.15) brightness(1.02) !important;
}

/* Android Optimierungen */
html.is-android body .offcanvas-menu,
html.is-android body .navigation-offcanvas {
  backdrop-filter: blur(18px) saturate(1.15) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) brightness(1.02) !important;
}

/* Samsung Optimierungen */
html.is-samsung body .offcanvas-menu,
html.is-samsung body .navigation-offcanvas {
  backdrop-filter: blur(16px) saturate(1.15) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) brightness(1.02) !important;
}

/* ============================================
   Z-INDEX MANAGEMENT (Über allem!)
   ============================================ */
body .offcanvas-menu {
  z-index: 100000 !important;
}

body .offcanvas-backdrop {
  z-index: 99999 !important;
}

/* ============================================
   WICHTIG: ThemeWare Styles komplett deaktivieren
   ============================================ */
   
/* Entferne alle ThemeWare Off-Canvas Styles */
.offcanvas * {
  /* Reset animations from ThemeWare */
  animation: none !important;
}

/* Entferne ThemeWare's nav-accent */
.navigation-offcanvas .nav-link::before {
  display: none !important;
}

/* Override ThemeWare grid */
.navigation-offcanvas .nav-link {
  display: flex !important;
  grid-template-columns: none !important;
}

/* ============================================
   FORCE ADRIAGEL STYLES (Nuclear Option)
   ============================================ */
body#adriagel-enhanced .offcanvas-menu *,
body#adriagel-enhanced .navigation-offcanvas * {
  /* Wenn nötig, können wir alle Styles forcieren */
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
body .offcanvas::-webkit-scrollbar,
body .offcanvas-menu::-webkit-scrollbar {
  width: 6px !important;
}

body .offcanvas::-webkit-scrollbar-track,
body .offcanvas-menu::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03) !important;
  border-radius: 3px !important;
}

body .offcanvas::-webkit-scrollbar-thumb,
body .offcanvas-menu::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00B4D8, #0077B6) !important;
  border-radius: 3px !important;
}

/* ============================================
   RESPONSIVE & PERFORMANCE
   ============================================ */
@media (hover: hover) {
  body .navigation-flyout-link {
    will-change: transform, box-shadow;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  body .navigation-flyout-link {
    min-height: 52px !important;
    padding: 18px 24px !important;
  }
  
  body .navigation-flyout-link:active {
    transform: scale(0.98) !important;
    transition-duration: 100ms !important;
  }
}

/* GPU Rendering */
body .offcanvas,
body .offcanvas-menu,
body .navigation-flyout-link {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Focus States */
body .navigation-flyout-link:focus-visible {
  outline: 3px solid #00B4D8 !important;
  outline-offset: 2px !important;
}