/**
 * Custom CSS for Amira Diamond Jewelry Website
 * Pixel-perfect styling and animations
 */

/* Custom Container with max-width 1252px */
.container-wrapper {
  width: 100%;
  max-width: 1252px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-wrapper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom range slider styling - Dual Range Slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  position: relative;
  z-index: 2;
  height: 16px;
  margin: 0;
  padding: 0;
  outline: none;
}

/* Hide the default track - make it transparent and match our custom track height */
input[type="range"]::-webkit-slider-track {
  background: transparent;
  height: 3px;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  height: 3px;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
}

input[type="range"]::-moz-range-track {
  background: transparent;
  height: 3px;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Custom thumb styling - perfectly centered on 3px track */
/* Track is 3px, thumb is 16px. To center: (16 - 3) / 2 = 6.5px offset */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #000000;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  /* Slightly lower than perfect math center to match visual design */
  margin-top: -4.5px;
  cursor: grab;
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 3;
}

input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
}

input[type="range"]::-moz-range-thumb {
  background: #000000;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: none;
  cursor: grab;
  box-shadow: none;
  position: relative;
  z-index: 3;
  margin: 0;
  /* Slightly lower than perfect math center to match visual design */
  margin-top: -4.5px;
}

input[type="range"]::-moz-range-thumb:active {
  cursor: grabbing;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* Ensure both sliders can be interacted with */
input[type="range"].range-min {
  z-index: 2;
}

input[type="range"].range-max {
  z-index: 1;
}

/* Hover effects for product cards */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Sticky navigation */
nav.sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.95);
}

/* Dropdown menu animations */
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

/* Custom button hover effects */
button:hover,
a[class*="hover:"]:hover {
  transition: all 0.3s ease;
}

/* Image loading placeholder */
img {
  transition: opacity 0.3s ease;
}

img[src=""] {
  opacity: 0;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Responsive text sizing */
@media (max-width: 640px) {
  .text-5xl {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .text-6xl {
    font-size: 3rem;
    line-height: 1.2;
  }
}

/* Focus styles for accessibility */
a:focus,
button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Smooth transitions for all interactive elements */
a,
button {
  transition: all 0.2s ease-in-out;
}

/* Custom gradient backgrounds */
.bg-gradient-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.bg-gradient-blue {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

/* Product card hover shadow */
.group:hover {
  transition: box-shadow 0.3s ease;
}

/* Ensure images maintain aspect ratio */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Custom spacing utilities */
.space-y-section > * + * {
  margin-top: 4rem;
}

@media (min-width: 1024px) {
  .space-y-section > * + * {
    margin-top: 6rem;
  }
}

/* Line clamp utility for product names */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Better image aspect ratios */
.aspect-square {
  aspect-ratio: 1 / 1;
}

/* Smooth hover transitions */
.group:hover img {
  transition: transform 0.3s ease-in-out;
}

/* Consistent section spacing */
section {
  scroll-margin-top: 80px;
}

/* Better button styling */
button,
a[role="button"] {
  cursor: pointer;
}

/* Inter Font Family - Applied to whole project */
* {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Improved text rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Mega Menu Styles */
.mega-menu-fixed {
  min-height: 400px;
  max-height: 600px;
  overflow-y: auto;
  /* Ensure it spans full width */
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
}

.mega-menu {
  width: 100%;
}

.mega-menu::-webkit-scrollbar {
  width: 6px;
}

.mega-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.mega-menu::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.mega-menu::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Bridge element for smooth hover transition */
.mega-menu-bridge {
  z-index: 45;
  pointer-events: auto;
}

/* Active nav item styling */
nav a.bg-gray-100 {
  background-color: #f3f4f6;
}

/* slider css */
.wrapper {
  position: relative;
}
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  outline: none;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  background-color: transparent;
  pointer-events: none;
}
.slider-track {
  width: 100%;
  height: 5px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  border-radius: 5px;
}
input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 5px;
}
input[type="range"]::-moz-range-track {
  -moz-appearance: none;
  height: 5px;
}
input[type="range"]::-ms-track {
  appearance: none;
  height: 5px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  background-color: black;
  cursor: pointer;
  /* Slightly lower than perfect math center to match visual design */
  margin-top: -2.5px;
  pointer-events: auto;
  border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  cursor: pointer;
  border-radius: 50%;
  background-color: black;
  pointer-events: auto;
  border: none;
  /* Slightly lower than perfect math center to match visual design */
  margin-top: -2.5px;
}
input[type="range"]::-ms-thumb {
  appearance: none;
  height: 10px;
  width: 10px;
  cursor: pointer;
  border-radius: 50%;
  background-color: black;
  pointer-events: auto;
  /* Slightly lower than perfect math center to match visual design */
  margin-top: -2.5px;
}
input[type="range"]:active::-webkit-slider-thumb {
  background-color: #ffffff;
  border: 1px solid black;
}