/* === Mementos Carousel === */
#mementosCarousel.card.border-primary-custom {
  border-radius: 12px;
  background: #fff;
  padding: 1.5rem 0;
  position: relative;
  overflow: hidden;
}

/* Inner scrolling track */
#mementosCarousel .carousel-inner .d-flex {
  gap: 0.75rem;
  padding: 0 2.5rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#mementosCarousel .carousel-inner .d-flex::-webkit-scrollbar {
  display: none;
}

/* Memento cards - Remove conflicting styles and use your existing card styles */
#mementosCarousel .memento-card {
  flex: 0 0 28%;
  min-width: 280px;
  scroll-snap-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#mementosCarousel .memento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* === Carousel Controls (Prev / Next) === */
/* Override only the specific positioning for mements carousel */
#mementosCarousel .carousel-control-prev,
#mementosCarousel .carousel-control-next {
  width: 45px;
  height: 45px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--primary-orange); /* Use your orange variable */
  border-radius: 20%;
  opacity: 0.9;
  transition: all 0.3s ease; /* Match your existing transition */
  z-index: 10;
}

#mementosCarousel .carousel-control-prev:hover,
#mementosCarousel .carousel-control-next:hover {
  background-color: var(--dark-orange); /* Use your dark orange variable */
  opacity: 1;
  transform: translateY(-50%) scale(1.05); /* Match your existing hover effect */
}

#mementosCarousel .carousel-control-prev-icon,
#mementosCarousel .carousel-control-next-icon {
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
}

/* Specific positioning for mementos carousel */
#mementosCarousel .carousel-control-prev {
  left: -10px;
}

#mementosCarousel .carousel-control-next {
  right: -10px;
}

/* Fade when at scroll limits */
#mementosCarousel.at-start .carousel-control-prev,
#mementosCarousel.at-end .carousel-control-next {
  opacity: 0.4;
  pointer-events: none;
}

/* === Responsive Adjustments === */
@media (max-width: 1200px) {
  #mementosCarousel .memento-card {
    flex: 0 0 33%;
  }
}

@media (max-width: 992px) {
  #mementosCarousel .memento-card {
    flex: 0 0 45%;
  }
}

@media (max-width: 768px) {
  #mementosCarousel .memento-card {
    flex: 0 0 80%;
  }

  /* Maintain navigation buttons but smaller */
  #mementosCarousel .carousel-control-prev,
  #mementosCarousel .carousel-control-next {
    width: 36px;
    height: 36px;
    opacity: 0.9;
    display: flex !important; /* Ensure they're always visible */
  }

  #mementosCarousel .carousel-control-prev-icon,
  #mementosCarousel .carousel-control-next-icon {
    width: 16px;
    height: 16px;
  }

  #mementosCarousel .carousel-inner .d-flex {
    padding: 0 2rem;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
  }

  /* Mobile scrollbar visible for swipe hint */
  #mementosCarousel .carousel-inner .d-flex::-webkit-scrollbar {
    height: 6px;
    display: block; /* Override only for mobile */
  }

  #mementosCarousel .carousel-inner .d-flex::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
  }
}

@media (max-width: 576px) {
  #mementosCarousel .memento-card {
    flex: 0 0 90%;
  }

  /* Even smaller but still visible buttons for mobile */
  #mementosCarousel .carousel-control-prev,
  #mementosCarousel .carousel-control-next {
    width: 32px;
    height: 32px;
    opacity: 0.9;
    display: flex !important; /* Force visibility */
  }

  #mementosCarousel .carousel-control-prev-icon,
  #mementosCarousel .carousel-control-next-icon {
    width: 14px;
    height: 14px;
  }
}

/* Extra small devices - keep buttons visible but compact */
@media (max-width: 400px) {
  #mementosCarousel .carousel-control-prev,
  #mementosCarousel .carousel-control-next {
    width: 30px;
    height: 30px;
  }

  #mementosCarousel .carousel-control-prev-icon,
  #mementosCarousel .carousel-control-next-icon {
    width: 12px;
    height: 12px;
  }
}

/* === Packages Carousel === */
#packagesCarousel.card.border-primary-custom {
  border-radius: 12px;
  background: #fff;
  padding: 1.5rem 0;
  position: relative;
  overflow: hidden;
}

/* Inner scrolling track for packages */
#packagesCarousel .carousel-inner .d-flex {
  gap: 0.75rem;
  padding: 0 2.5rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#packagesCarousel .carousel-inner .d-flex::-webkit-scrollbar {
  display: none;
}

/* Package cards */
#packagesCarousel .package-card {
  flex: 0 0 28%;
  min-width: 320px; /* Slightly wider for package content */
  scroll-snap-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#packagesCarousel .package-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* === Packages Carousel Controls === */
#packagesCarousel .carousel-control-prev,
#packagesCarousel .carousel-control-next {
  width: 45px;
  height: 45px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--primary-orange);
  border-radius: 20%;
  opacity: 0.9;
  transition: all 0.3s ease;
  z-index: 10;
}

#packagesCarousel .carousel-control-prev:hover,
#packagesCarousel .carousel-control-next:hover {
  background-color: var(--dark-orange);
  opacity: 1;
  transform: translateY(-50%) scale(1.05);
}

#packagesCarousel .carousel-control-prev-icon,
#packagesCarousel .carousel-control-next-icon {
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
}

/* Specific positioning for packages carousel */
#packagesCarousel .carousel-control-prev {
  left: -10px;
}

#packagesCarousel .carousel-control-next {
  right: -10px;
}

/* Fade when at scroll limits */
#packagesCarousel.at-start .carousel-control-prev,
#packagesCarousel.at-end .carousel-control-next {
  opacity: 0.4;
  pointer-events: none;
}

/* === Packages Responsive Adjustments === */
@media (max-width: 1200px) {
  #packagesCarousel .package-card {
    flex: 0 0 33%;
  }
}

@media (max-width: 992px) {
  #packagesCarousel .package-card {
    flex: 0 0 45%;
    min-width: 340px; /* Wider on tablet */
  }
}

@media (max-width: 768px) {
  #packagesCarousel .package-card {
    flex: 0 0 85%; /* Increased from 80% to 85% */
    min-width: 320px; /* Increased from 280px to 320px */
  }

  /* Maintain navigation buttons but smaller */
  #packagesCarousel .carousel-control-prev,
  #packagesCarousel .carousel-control-next {
    width: 36px;
    height: 36px;
    opacity: 0.9;
    display: flex !important;
  }

  #packagesCarousel .carousel-control-prev-icon,
  #packagesCarousel .carousel-control-next-icon {
    width: 16px;
    height: 16px;
  }

  #packagesCarousel .carousel-inner .d-flex {
    padding: 0 2rem;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
  }

  /* Mobile scrollbar visible for swipe hint */
  #packagesCarousel .carousel-inner .d-flex::-webkit-scrollbar {
    height: 6px;
    display: block;
  }

  #packagesCarousel .carousel-inner .d-flex::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
  }
}

@media (max-width: 576px) {
  #packagesCarousel .package-card {
    flex: 0 0 92%; /* Increased from 90% to 92% */
    min-width: 300px; /* Increased from 260px to 300px */
  }

  #packagesCarousel .carousel-control-prev,
  #packagesCarousel .carousel-control-next {
    width: 32px;
    height: 32px;
    opacity: 0.9;
    display: flex !important;
  }

  #packagesCarousel .carousel-control-prev-icon,
  #packagesCarousel .carousel-control-next-icon {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 400px) {
  #packagesCarousel .package-card {
    flex: 0 0 94%; /* Even wider on very small screens */
    min-width: 280px; /* Increased from 240px to 280px */
  }

  #packagesCarousel .carousel-control-prev,
  #packagesCarousel .carousel-control-next {
    width: 30px;
    height: 30px;
  }

  #packagesCarousel .carousel-control-prev-icon,
  #packagesCarousel .carousel-control-next-icon {
    width: 12px;
    height: 12px;
  }
}