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

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Javascript Toggled States */
body.noscroll {
  overflow: hidden;
}

#main-nav.sticky {
  @apply fixed top-0 left-0 w-full z-40 animate-navSticky;
}

@media (max-width: 1280px) {
  .premierappliances__nav--content.active {
    display: flex !important;
    /* Force flex on mobile */
    height: calc(100vh - 5rem);
    /* Full height minus header */
  }
}

.premierappliances__contactpopup.active {
  @apply grid animate-contactPopup;
  display: grid !important;
  /* Force override of utility 'hidden' */
}

/* Swiper Customizations (Cannot be easily Tailwind-ed due to library injection) */
.swiper-pagination-bullet-active {
  background: #cda656 !important;
}

.swiper-button-prev,
.swiper-button-next {
  color: #ffffff !important;
  background: #cda656 !important;
  border-radius: 50%;
  height: 50px !important;
  width: 50px !important;
  transition: all 0.25s ease-in-out;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 25px !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  transform: translateY(-1px);
}

.swiper-button-prev:active,
.swiper-button-next:active {
  transform: translateY(1px);
}

.swiper-slide {
  user-select: none;
  cursor: grab;
}

.swiper-slide:active {
  cursor: grabbing;
}

.vendors-swiper {
  width: 100%;
  height: 150px;
  /* Adjust height based on your logos */
  padding: 20px 0;
}

/* Slide sizing 
  We set a fixed width here so 'slidesPerView: auto' works correctly.
*/
.vendors-swiper .swiper-slide {
  width: 200px;
  /* Adjust width to fit your logo aspect ratio */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  /* Optional: Makes non-active slides slightly faded */
  transition: opacity 0.3s ease;
}

/* The Active Slide (Centered) */
.vendors-swiper .swiper-slide-active {
  opacity: 1;
  /* Active slide is fully visible */
}

/* Image styling */
.vendors-swiper .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* ENSURING NO HOVER EFFECTS */
  filter: none !important;
  pointer-events: none;
  /* Optional: prevents dragging the image itself, drag the slide instead */
}

/* Explicitly override any existing global hover styles */
.vendors-swiper .swiper-slide:hover,
.vendors-swiper .swiper-slide:hover img {
  background: transparent;
  filter: none;
  opacity: 1;
  /* Keeps opacity consistent on hover */
}