/* Custom styles to complement Tailwind */
body {
  font-family: "Inter", sans-serif;
  background-color: #0a0a0a;
  /* A very dark grey, almost black */
  color: #ffffff;
  /* A light grey for text */
}

.font-serif {
  font-family: "Playfair Display", serif;
}

html {
  scroll-behavior: smooth;
}

/*                    <--- HOME PAGE --->                    */

.hero-gradient {
  background: linear-gradient(to top, #0a0a0a 0%, rgba(10, 10, 10, 0) 100%);
}

.btn-primary {
  @apply bg-amber-500 text-black font-bold py-3 px-8 rounded-full transition-transform duration-300 ease-in-out hover:bg-amber-400 hover:scale-105;
}

.card-bg {
  background-color: #1a1a1a;
}

.card-bg-2 {
  background-color: #0c0c0c;
}

/* Hide scrollbar for Webkit browsers */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for Firefox */
.scrollbar-hide {
  scrollbar-width: none;
}

/* Smooth transitions for background and text */
#latest-combo {
  transition: background-color 0.5s ease;
}

.combo-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navigation buttons */
#prev-btn,
#next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  /* icons always white */
  font-size: 1.5rem;
  border-radius: 50%;
  /* circular */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#prev-btn:hover,
#next-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Place outside the image */
#prev-btn {
  left: -3rem;
  /* moves outside left */
}

#next-btn {
  right: -3rem;
  /* moves outside right */
}

/* Fixed image size */
#combo-image {
  width: 720px;
  height: 480px;
  object-fit: cover;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  transition: transform 0.5s ease;
}

/* ✅ Responsive adjustments */
@media (max-width: 768px) {
  #prev-btn {
    left: 0.5rem;
    /* bring inside */
  }

  #next-btn {
    right: 0.5rem;
    /* bring inside */
  }

  #combo-image {
    width: 100%;
    /* shrink nicely */
    height: auto;
    /* keep aspect ratio */
  }
}

#combo-title,
#combo-text,
#combo-link {
  transition: color 0.5s ease;
}

#combo-link {
  position: relative;
  color: inherit;
  /* keep same as text */
  text-decoration: none;
}

/* Create a pseudo-element for the underline */
#combo-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  /* space under text */
  width: 0%;
  height: 2px;
  /* thickness of underline */
  background-color: currentColor;
  /* matches text color */
  transition: width 0.1s ease;
}

/* Animate underline on hover */
#combo-link:hover::after {
  width: 100%;
}

/* Container to stack images */
.slideshow-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 0.75rem;
  /* same rounded as your original */
}

/* All slideshow images */
.slideshow-container img {
  width: 720px;
  height: 405px;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  /* fade effect */
}

/* The first one shows initially */
.slideshow-container img.active {
  opacity: 1;
  position: relative;
  /* keeps height of container */
}

.icon-sm {
  width: 20px;
  /* default is 24px */
  height: 20px;
  stroke-width: 2;
  /* keep sharpness */
}

/*                    <--- SHOP PAGE --->                    */

/* ========== THALJ AZURE PAGE ========== */

/* Combo GIFT PAGE */

.combo-card {
  background-color: #1a1a1a;
}

.combo-card-2 {
  background-color: #0a0a0a;
}

/* Landing Page Modal */

@keyframes ring {
  0% {
    transform: rotate(0);
  }

  10% {
    transform: rotate(15deg);
  }

  20% {
    transform: rotate(-15deg);
  }

  30% {
    transform: rotate(10deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(5deg);
  }

  60% {
    transform: rotate(-5deg);
  }

  70%,
  100% {
    transform: rotate(0);
  }
}

.ring-hover:hover {
  animation: ring 0.8s ease-in-out;
  transform-origin: center;
  filter: drop-shadow(0 0 3px #25d366);
}

.ring-hover-2 {
  animation: ring 0.8s ease-in-out;
  transform-origin: center;
  filter: drop-shadow(0 0 5px #25d366);
}

/* Shadow/glow on hover over main Image */
#product-image-wrapper.hover-shadow {
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
  /* amber-500 glow */
}

/* Landin Page Thumbnail Scrollbar */

@media (max-width: 640px) {
  .custom-scrollbar {
    overflow-x: auto; /* enable horizontal scroll */
    max-width: 100vw; /* prevent overflow outside viewport */
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    scrollbar-width: thin;
    scrollbar-color: #f59e0b #1a1a1a; /* amber thumb on gray track */
  }

  /* Webkit browsers (Chrome, Safari) */

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #f59e0b; /* amber-500 thumb */
    border-radius: 9999px; /* pill shape */
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #d97706; /* amber-600 hover */
  }
}

#product-old-price-shop::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px; /* thickness of the line */
  background-color: #d1d5db; /* gray-300 */
  transform: rotate(-12deg); /* controls diagonal angle */
  transform-origin: center;
}