/* ===========================================
   EMBLA CAROUSEL - PRODUCTION
   Optimized for package cards carousel
   Physics-based smooth drag
   =========================================== */

/* Container wrapper */
.package-slider-wrapper {
  position: relative;
}

/* Override parent container padding when using Embla */
.package-slider-wrapper .package-cards {
  padding: 24px !important;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Embla viewport */
.embla-package {
  overflow: hidden !important;
  /* Allow shadow to show without being cut */
  padding: 8px 0 12px 0;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
  cursor: grab;
}

.embla-package.is-dragging {
  cursor: grabbing;
}

.embla-package:active {
  cursor: grabbing;
}

/* Embla container - Base styles */
.embla-package__container {
  display: flex;
  touch-action: pan-x pan-y pinch-zoom; /* Allow horizontal drag */
  backface-visibility: hidden;
  padding: 0;
  user-select: none; /* Prevent text selection during drag */
  -webkit-user-drag: none;
  cursor: grab;
}

/* Package card container */
.embla-package__container--package {
  gap: 20px;
}

/* Product showcase card container */
.embla-package__container--product {
  gap: 0px;
}

/* News card container */
.embla-package__container--news {
  gap: 18px;
}

/* Embla slides */
.embla-package__slide {
  flex: 0 0 auto;
  min-width: 0;

  /* GPU acceleration */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Tablet Small: 2.5 cards for better spacing (768-900px includes 820px) */
@media (min-width: 768px) and (max-width: 900px) {
  .embla-package {
    max-width: 100%;
    position: relative;
    overflow: hidden !important;
  }

  .embla-package__container {
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Package card: 16px gap */
  .embla-package__container--package {
    gap: 16px;
  }

  /* Product showcase card: 0px gap */
  .embla-package__container--product {
    gap: 0px;
  }

  /* News card: 16px gap */
  .embla-package__container--news {
    gap: 16px;
  }

  /* Default slides for package and news cards (with gap) - 2.5 cards */
  .embla-package__container--package .embla-package__slide,
  .embla-package__container--news .embla-package__slide {
    flex: 0 0 calc((100% - 24px) / 2.5);
    width: calc((100% - 24px) / 2.5);
    min-width: calc((100% - 24px) / 2.5);
    max-width: calc((100% - 24px) / 2.5);
    box-sizing: border-box;
  }

  /* Product showcase card slides (no gap) - 2.5 cards */
  .embla-package__container--product .embla-package__slide {
    flex: 0 0 calc(100% / 2.5);
    width: calc(100% / 2.5);
    min-width: calc(100% / 2.5);
    max-width: calc(100% / 2.5);
    box-sizing: border-box;
  }
}

/* Tablet & iPad Pro: 3 cards (901-1279px) */
@media (min-width: 901px) and (max-width: 1279px) {
  .embla-package {
    max-width: 100%;
    position: relative;
    overflow: hidden !important;
  }

  .embla-package__container {
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Package card: 16px gap */
  .embla-package__container--package {
    gap: 16px;
  }

  /* Product showcase card: 0px gap */
  .embla-package__container--product {
    gap: 0px;
  }

  /* News card: 16px gap */
  .embla-package__container--news {
    gap: 16px;
  }

  /* Default slides for package and news cards (with gap) */
  .embla-package__container--package .embla-package__slide,
  .embla-package__container--news .embla-package__slide {
    flex: 0 0 calc((100% - 32px) / 3);
    width: calc((100% - 32px) / 3);
    min-width: calc((100% - 32px) / 3);
    max-width: calc((100% - 32px) / 3);
    box-sizing: border-box;
  }

  /* Product showcase card slides (no gap) */
  .embla-package__container--product .embla-package__slide {
    flex: 0 0 calc(100% / 3);
    width: calc(100% / 3);
    min-width: calc(100% / 3);
    max-width: calc(100% / 3);
    box-sizing: border-box;
  }
}

/* Medium Desktop: 3 cards (1280-1399px) */
@media (min-width: 1280px) and (max-width: 1399px) {
  .embla-package {
    max-width: 100%;
    position: relative;
    overflow: hidden !important;
  }

  .embla-package__container {
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Package card: 16px gap */
  .embla-package__container--package {
    gap: 16px;
  }

  /* Product showcase card: 0px gap */
  .embla-package__container--product {
    gap: 0px;
  }

  /* News card: 18px gap */
  .embla-package__container--news {
    gap: 18px;
  }

  /* Default slides for package and news cards (with gap) - 3 cards */
  .embla-package__container--package .embla-package__slide,
  .embla-package__container--news .embla-package__slide {
    flex: 0 0 calc((100% - 32px) / 3);
    width: calc((100% - 32px) / 3);
    min-width: calc((100% - 32px) / 3);
    max-width: calc((100% - 32px) / 3);
    box-sizing: border-box;
  }

  /* Product showcase card slides (no gap) - 3 cards */
  .embla-package__container--product .embla-package__slide {
    flex: 0 0 calc(100% / 3);
    width: calc(100% / 3);
    min-width: calc(100% / 3);
    max-width: calc(100% / 3);
    box-sizing: border-box;
  }
}

/* Large Desktop: 4 cards only (1400px+) */
@media (min-width: 1400px) {
  .embla-package {
    max-width: 100%;
    position: relative;
    overflow: hidden !important;
  }

  .embla-package__container {
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Package card: 16px gap */
  .embla-package__container--package {
    gap: 16px;
  }

  /* Product showcase card: 0px gap */
  .embla-package__container--product {
    gap: 0px;
  }

  /* News card: 18px gap */
  .embla-package__container--news {
    gap: 18px;
  }

  /* Default slides for package and news cards (with gap) */
  .embla-package__container--package .embla-package__slide {
    flex: 0 0 calc((100% - 48px) / 4);
    width: calc((100% - 48px) / 4);
    min-width: calc((100% - 48px) / 4);
    max-width: calc((100% - 48px) / 4);
    box-sizing: border-box;
  }

  .embla-package__container--news .embla-package__slide {
    flex: 0 0 calc((100% - 54px) / 4);
    width: calc((100% - 54px) / 4);
    min-width: calc((100% - 54px) / 4);
    max-width: calc((100% - 54px) / 4);
    box-sizing: border-box;
  }

  /* Product showcase card slides (no gap) */
  .embla-package__container--product .embla-package__slide {
    flex: 0 0 calc(100% / 4);
    width: calc(100% / 4);
    min-width: calc(100% / 4);
    max-width: calc(100% / 4);
    box-sizing: border-box;
  }

  /* Allow scrolling through all items (removed hide rule) */
  /* User has 6-7 items and wants to scroll through them all */
}

/* Mobile: 1.5 cards để khuyến khích scroll */
@media (max-width: 767px) {
  .package-slider-wrapper .package-cards {
    padding: 16px !important;
  }

  .embla-package__container {
    padding: 0;
  }

  /* Package card: 16px gap */
  .embla-package__container--package {
    gap: 16px;
  }

  /* Product showcase card: 0px gap */
  .embla-package__container--product {
    gap: 0px;
  }

  /* News card: 0px gap */
  .embla-package__container--news {
    gap: 0px;
  }

  .embla-package__slide {
    /* Hiển thị 1 card đầy đủ + 1/2 card tiếp theo */
    width: calc(100% - 60px); /* Để lộ ra ~40-50% card kế */
    max-width: 320px;
    min-width: 260px;
  }
}

/* Small Mobile: 1.3 cards */
@media (max-width: 480px) {
  .embla-package__slide {
    width: calc(100% - 80px); /* Để lộ ra nhiều hơn card kế */
    min-width: 240px;
  }
}

/* Navigation arrows - giữ nguyên style hiện có */
.package-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  box-shadow: 0px 4px 4px -8px rgba(0, 0, 0, 0.08),
              0px 4px 16px 10px rgba(16, 24, 40, 0.02),
              0px 2px 32px -4px rgba(16, 24, 40, 0.03);

  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.package-arrow:hover {
  background: #FFFFFF;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}

.package-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.package-arrow-prev {
  left: -24px;
}

.package-arrow-next {
  right: -24px;
}

@media (max-width: 1024px) {
  .package-arrow-prev {
    left: -16px;
  }
  .package-arrow-next {
    right: -16px;
  }
}

@media (max-width: 768px) {
  .package-arrow {
    width: 40px;
    height: 40px;
  }
  .package-arrow-prev {
    left: -8px;
  }
  .package-arrow-next {
    right: -8px;
  }
}