/* Product image hover effects */
.product-image {
  transition: transform 0.3s ease;
}

.product-image:hover {
  transform: scale(1.05);
}

/* Slideshow Styles */
.slide {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide.active {
  display: block;
  opacity: 1;
}

.slide-indicator.active {
  opacity: 1 !important;
}

.navigation-arrow {
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.navigation-arrow:hover {
  opacity: 0.7;
}

/* Hero section layout */
#hero-section {
  min-height: 100vh;
  overflow: hidden;
}

/* Dynamic arrow colors based on background */
#hero-section[data-bg="white"] .navigation-arrow {
  color: #000000;
}

#hero-section[data-bg="black"] .navigation-arrow {
  color: #ffffff;
}

/* Cookie Banner Styles */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  color: white;
  padding: 20px;
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.cookie-banner.show {
  transform: translateY(0);
}

.cookie-banner button {
  background: white;
  color: black;
  border: none;
  padding: 10px 20px;
  margin-left: 15px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.cookie-banner button:hover {
  background: #f0f0f0;
}

.cookie-banner .decline-btn {
  background: transparent;
  color: white;
  border: 1px solid white;
}

.cookie-banner .decline-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile Menu Animations and Styles */
#mobile-menu {
  transition: all 0.3s ease-in-out;
  transform: translateY(-10px);
  opacity: 0;
}

#mobile-menu:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
}

#mobile-menu.hidden {
  transform: translateY(-10px);
  opacity: 0;
}

/* Mobile menu toggle button animation */
#mobile-menu-toggle {
  transition: transform 0.2s ease;
}

#mobile-menu-toggle:active {
  transform: scale(0.95);
}

/* Smooth icon transitions */
#menu-icon,
#close-icon {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Mobile responsive improvements */
@media (max-width: 1024px) {

  /* Ensure mobile menu is properly positioned */
  #mobile-menu {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  /* Improve touch targets for mobile */
  #mobile-menu a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Better spacing on very small screens */
  @media (max-width: 480px) {
    header .container {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    /* Make mobile menu toggle more prominent on small screens */
    #mobile-menu-toggle {
      padding: 0.75rem;
      background-color: rgba(0, 0, 0, 0.05);
      border-radius: 0.5rem;
    }
  }
}

/* Cart button hover effect */
#cart-open {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

#cart-open:hover {
  transform: scale(1.05);
  background-color: rgba(0, 0, 0, 0.05);
}

#cart-open:active {
  transform: scale(0.98);
}

/* Mobile Hero Section Improvements */
@media (max-width: 1024px) {

  /* Make header overlay on top of hero section */
  #header-placeholder {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
  }
}

/* Product Overview Carousel Improvements */
.main-carousel-prev,
.main-carousel-next {
  transition: all 0.2s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.main-carousel-prev:hover,
.main-carousel-next:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  transform: translateY(-50%) scale(1.1);
}

.main-carousel-prev:active,
.main-carousel-next:active {
  transform: translateY(-50%) scale(0.95);
}

/* Reddit-style carousel navigation buttons - only click feedback */
.main-carousel-prev,
.main-carousel-next {
  transition: none !important;
  transform: translateY(-50%) !important;
  animation: none !important;
}

.main-carousel-prev:hover,
.main-carousel-next:hover,
.main-carousel-prev:focus,
.main-carousel-next:focus {
  transition: none !important;
  transform: translateY(-50%) !important;
  animation: none !important;
  scale: 1 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  /* Same as default */
  opacity: 1 !important;
}

/* Only change background on active/click - Reddit style */
.main-carousel-prev:active,
.main-carousel-next:active {
  transition: none !important;
  transform: translateY(-50%) !important;
  animation: none !important;
  scale: 1 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  /* Slightly darker when clicked */
  opacity: 1 !important;
}

.carousel-thumb {
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* Override ALL Tailwind hover/active effects */
.hover\:scale-110:hover,
.active\:scale-95:active,
.hover\:bg-opacity-90:hover,
.hover\:bg-opacity-80:hover {
  transition: none !important;
  transform: translateY(-50%) !important;
  animation: none !important;
  scale: 1 !important;
}

/* Prevent double-tap zoom on mobile */
#image-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-x pan-y;
}

#main-product-image {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-x pan-y;
  pointer-events: none;
}

/* Mobile responsiveness for product overview */
@media (max-width: 768px) {

  .main-carousel-prev,
  .main-carousel-next {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    /* Enable touch on mobile */
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .main-carousel-prev {
    left: 8px;
  }

  .main-carousel-next {
    right: 8px;
  }
}

/* Product Overview Page Widescreen Constraints */
.product-overview-container {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

/* Only apply max-width constraints on desktop/larger screens */
@media (min-width: 768px) {
  .product-overview-container {
    padding: 0 1rem;
  }
}

@media (min-width: 1024px) {
  .product-overview-container {
    max-width: 1800px;
    /* Ökad från 1600px */
    padding: 0 2rem;
  }
}

@media (min-width: 1920px) {
  .product-overview-container {
    max-width: 1900px;
    /* Ökad från 1700px */
  }
}

/* Checkout Page Widescreen Constraints */
.checkout-container {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

@media (min-width: 1920px) {
  .checkout-container {
    max-width: 1900px;
  }
}

/* Mobile thumbnail carousel improvements */
.scrollbar-hide {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

/* Prevent body horizontal scroll on mobile */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .carousel-thumb {
    min-width: 96px;
    /* Ensure consistent thumbnail size */
    height: 96px;
  }

  /* Fix main product image on mobile */
  #main-product-image {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    max-height: 70vh !important;
  }

  /* Ensure image container doesn't crop */
  #image-container {
    min-height: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Mobile Header Fix for Non-Hero Pages */
@media (max-width: 1024px) {

  /* Product detail pages need padding-top when header is fixed */
  #product-overview.product-overview-container {
    padding-top: 80px;
  }

  /* General fix for other main content areas that aren't hero sections */
  body:has(#product-overview) main,
  body[data-page="product"] main,
  body[data-page="productDetail"] main {
    padding-top: 80px;
  }
}

/* Mobile responsiveness for hero section */
@media (max-width: 768px) {
  #hero-section .flex.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  #hero-section .flex.justify-between .flex.items-center {
    align-self: flex-end;
  }
}

/* Ensure hero section buttons are clickable */
#hero-section .navigation-arrow,
#hero-section .slide-indicator,
#hero-section a {
  pointer-events: auto;
  position: relative;
  z-index: 30;
}

#hero-section .navigation-arrow:hover,
#hero-section .slide-indicator:hover {
  opacity: 0.7;
}

/* Make sure images don't interfere with button clicks */
#hero-section img {
  pointer-events: none;
  z-index: 1;
}

/* Address validation styles */
.border-red-500 {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 !important;
}

.border-red-500:focus {
  outline: none !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* Animation for validation messages */
.validation-message {
  transition: all 0.3s ease-in-out;
}

/* Success checkmark styling */
.text-green-600 {
  color: #059669;
}