/* azentai carousel - Woodmart-inspired professional styling */
.azentai-carousel { 
  position: relative; 
  width: 100%; 
  box-sizing: border-box; 
  overflow: hidden;
  -webkit-transform: translate3d(0px, 0px, 0px);
  padding: 30px 0;
  --azentai-gap: 24px;
  --azentai-nav-size: 44px;
  --azentai-text-color: #2d2d2d;
  --azentai-price-color: #0d0d0d;
  --azentai-border-color: #e8e8e8;
  --azentai-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --azentai-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Wrapper để contain buttons ngoài carousel */
.azentai-carousel::before,
.azentai-carousel::after {
  content: '';
  display: table;
}

.azentai-carousel::after {
  clear: both;
}

.azentai-swiper-container { 
  width: 100%; 
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
}

.azentai-swiper-container .swiper-wrapper { 
  display: flex; 
  align-items: stretch;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.azentai-swiper-container .swiper-slide {
  box-sizing: border-box;
  padding: 0 calc(var(--azentai-gap) / 2);
  display: flex;
  align-items: stretch;
  height: auto;
  flex-shrink: 0;
}

/* Navigation buttons - Woodmart minimalist style */
.azentai-swiper-button-prev,
.azentai-swiper-button-next {
  position: fixed;
  top: 50%;
  z-index: 40;
  margin-top: calc(var(--azentai-nav-size) / -2);
  cursor: pointer;
  flex-shrink: 0;
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  padding: 0;
  font: inherit;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  color: rgb(34, 34, 34);
  background-color: transparent;
  border: 2px solid rgb(34, 34, 34);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease-in-out;
  pointer-events: auto;
}

.azentai-carousel:hover .azentai-swiper-button-prev,
.azentai-carousel:hover .azentai-swiper-button-next {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.azentai-swiper-button-prev { 
  left: 20px;
}

.azentai-swiper-button-next { 
  right: 20px;
}

.azentai-swiper-button-prev:hover,
.azentai-swiper-button-next:hover {
  color: rgb(255 255 255);
  background-color: rgb(86 207 225);
  border-color: rgb(86 207 225);
}

/* SVG styling inside buttons */
.azentai-swiper-button-prev svg,
.azentai-swiper-button-next svg {
  width: 7px;
  height: 11px;
  display: block;
}

/* Remove pseudo-element content since we use SVG */
.azentai-swiper-button-prev:after,
.azentai-swiper-button-next:after {
  display: none;
}

/* Pagination dots */
.azentai-swiper-pagination { 
  text-align: center; 
  margin-top: 20px; 
  z-index: 20; 
  padding: 0 16px;
}

.azentai-swiper-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: #d0d0d0;
  opacity: 1;
  margin: 0 5px;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

.azentai-swiper-pagination .swiper-pagination-bullet:hover {
  background: #a8a8a8;
  border-color: #999;
}

.azentai-swiper-pagination .swiper-pagination-bullet-active { 
  background: #2d2d2d;
  border-color: #2d2d2d;
  transform: scale(1.15);
}

/* Neutralize theme list spacing */
.azentai-carousel .products { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
}

/* Container with navigation padding - buttons positioned outside */
.azentai-carousel .azentai-swiper-container {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* Responsive: Tablet (1024px and below) */
@media (max-width: 1024px) {
  .azentai-carousel {
    padding: 24px 0;
  }

  .azentai-swiper-button-prev,
  .azentai-swiper-button-next {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 14px;
  }
  
  .azentai-swiper-button-prev { left: 12px; }
  .azentai-swiper-button-next { right: 12px; }

  .azentai-swiper-container .swiper-slide {
    padding: 0 8px;
  }
}

/* Responsive: Mobile (768px and below) */
@media (max-width: 768px) {
  .azentai-carousel {
    padding: 20px 0;
  }

  .azentai-swiper-button-prev, 
  .azentai-swiper-button-next { 
    display: none;
  }
  
  .azentai-swiper-pagination { 
    margin-top: 16px; 
    padding: 0 8px;
  }
  
  .azentai-swiper-container .swiper-slide {
    padding: 0 4px;
  }
  
  .azentai-swiper-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 4px;
  }

  /* Show buttons on touch devices with hover support */
  @media (hover: hover) and (pointer: fine) {
    /* Desktop-like behavior: keep hover-only behavior */
  }
  
  @media (hover: none) and (pointer: coarse) {
    /* Touch devices: don't show navigation buttons, use pagination only */
  }
}

/* Responsive: Small Mobile (480px and below) */
@media (max-width: 480px) {
  .azentai-carousel { 
    padding: 16px 0;
    --azentai-gap: 12px;
  }
  
  .azentai-swiper-container .swiper-slide {
    padding: 0 2px;
  }
  
  .azentai-swiper-pagination .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    margin: 0 3px;
  }
}

/* Fallback for other carousel libraries */
.azentai-carousel .owl-nav, 
.azentai-carousel .slick-arrow, 
.azentai-carousel .bx-controls { 
  z-index: 30; 
}

/* Accessibility focus style */
.azentai-swiper-button-prev:focus, 
.azentai-swiper-button-next:focus { 
  outline: 2px solid #2d2d2d;
  outline-offset: 2px;
}

/* Icon SVG sizing */
.azentai-carousel .swiper-button-next svg, 
.azentai-carousel .swiper-button-prev svg {
  width: 16px;
  height: 16px;
}

/* Disabled state */
.azentai-carousel .swiper-button-next.swiper-button-disabled, 
.azentai-carousel .swiper-button-prev.swiper-button-disabled {
  display: none;
}

/* Loading/skeleton state */
.azentai-carousel.azentai-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Animation for slide fade-in */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.azentai-swiper-container .swiper-slide {
  animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/** Custom Woocommerce styles */
.woocommerce .azentai-carousel ul.products .azentai-swiper-container li.product, .woocommerce-page .azentai-carousel ul.products .azentai-swiper-container li.product {
  width: 100% !important;
}