@tailwind base;
@tailwind components;
@tailwind utilities;

/* Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}

/* Safe area utilities for mobile devices */
.safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.pb-safe {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Line clamp utilities */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Custom scrollbar for cart dropdown */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
}

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

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
  transition: background 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Prevent horizontal overflow */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
  position: relative;
}

* {
  box-sizing: border-box;
}

/* Ensure all containers respect viewport width */
.container, .mx-auto, [role="dialog"] {
  max-width: 100vw;
}

/* Specific fix for cart dropdown and other absolute positioned elements */
[role="dialog"] {
  max-width: calc(100vw - 1rem) !important;
}

/* Ensure text doesn't cause overflow */
.line-clamp-1, .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ensure header stays fixed and visible */
header[class*="fixed"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transform: translateZ(0) !important; /* Force hardware acceleration */
  will-change: transform !important; /* Optimize for fixed positioning */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prevent any element from covering the header */
* {
  z-index: auto;
}

header[class*="fixed"] * {
  z-index: inherit;
}

/* Additional rules to ensure header visibility */
body header {
  position: fixed !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* Prevent any CSS from hiding the header */
header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Ensure proper stacking context for the entire app */
#__next, [data-reactroot] {
  position: relative;
  z-index: 0;
}

/* Fix for deprecated API warning about h1 font-size in semantic elements */
section h1, article h1, nav h1, aside h1 {
  font-size: inherit;
}

/* Ensure text-* Tailwind classes work properly within semantic elements */
section h1.text-3xl, article h1.text-3xl, nav h1.text-3xl, aside h1.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

section h1.text-4xl, article h1.text-4xl, nav h1.text-4xl, aside h1.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

section h1.text-5xl, article h1.text-5xl, nav h1.text-5xl, aside h1.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

section h1.text-6xl, article h1.text-6xl, nav h1.text-6xl, aside h1.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

section h1.text-7xl, article h1.text-7xl, nav h1.text-7xl, aside h1.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

/* HeroSection Animations and Styles */
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
@keyframes floatX {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(15px); }
}
.animate-float-custom {
  animation: floatY 8s ease-in-out infinite, floatX 12s ease-in-out infinite;
}
.hero-title {
  font-size: 3rem;
  line-height: 1.1;
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
  }
}

/* Hide scrollbars utility for horizontal scroll areas */
.hide-scrollbar {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE 10+ */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari/Webkit */
}