/* 
  Modern Stylesheet optimized for Tailwind CSS integration.
  Specific component logic and animations are kept here.
*/

html,
body {
  overflow-x: hidden;
}

/* Custom Transitions for Modals (Controlled by JS via data-active) */
[id$="-overlay"], 
#cart-overlay, 
#search-overlay, 
#mobile-menu-overlay {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-menu-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000001 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom Scrollbar for Dropdowns and Lists */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(158, 37, 255, 0.8) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(48, 72, 255, 0.08));
  border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(158, 37, 255, 0.82) 52%, rgba(48, 72, 255, 0.9) 100%);
  border-radius: 999px;
  border: 1px solid rgba(12, 13, 18, 0.65);
  box-shadow: 0 6px 16px rgba(48, 72, 255, 0.28);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ff4f70 38%, #3048ff 100%);
}

/* Specialized Animations */
@keyframes border-flow {
  0% { background-position: 100% 0; }
  100% { background-position: -200% 0; }
}

.animate-border-flow {
  background-size: 300% 100%;
  animation: border-flow 6s linear infinite;
}

/* Glassmorphism Utilities */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-panel:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}