/* ==========================================================================
   AL MOSTAQBAL FOODS — Carousel component
   Native horizontal scroll + snap, driven by carousel.js for autoplay,
   arrows and dots. Direction-agnostic: relies on DOM order + CSS logical
   layout, so it mirrors correctly under dir="rtl" with no JS branching.
   ========================================================================== */

.carousel { position: relative; }

.carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(var(--cell-pad-sm) * -1);
  padding-inline: var(--cell-pad-sm);
}

.carousel__viewport::-webkit-scrollbar { display: none; }

.carousel__track {
  display: flex;
  gap: var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 26px 2px 52px;
}

.carousel__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.carousel__slide .cell { height: 100%; }

.carousel .cell.is-interactive:hover,
.carousel a.cell:hover { transform: translateY(-3px); }

/* size variants: small (values / why-us / steps) vs large (products).
   On phones every carousel shows exactly one full-width slide at a time
   (no partial peek) so autoplay always lands on a clean, complete card. */
.carousel--sm .carousel__slide,
.carousel--lg .carousel__slide { width: 100%; }

@media (min-width: 600px) {
  .carousel--sm .carousel__slide { width: calc((100% - 2 * var(--grid-gap)) / 2.3); }
  .carousel--lg .carousel__slide { width: calc((100% - 1 * var(--grid-gap)) / 1.6); }
}

@media (min-width: 960px) {
  .carousel--sm .carousel__slide { width: calc((100% - 3 * var(--grid-gap)) / 3.35); }
  .carousel--lg .carousel__slide { width: calc((100% - 2 * var(--grid-gap)) / 2.4); }
}

/* ---- Controls: arrows + dots ---- */
.carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-block-start: calc(var(--space-5) * -1 + var(--space-2));
}

.carousel__arrow {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.carousel__arrow:hover { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.carousel__arrow svg { width: 19px; height: 19px; }

/* Both prev/next glyphs are authored pointing their literal LTR direction;
   flipping both under RTL swaps them to the correct visual meaning. */
html[dir="rtl"] .carousel__arrow svg { transform: scaleX(-1); }

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--color-border-strong);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), width var(--duration-fast) var(--ease-standard);
}

.carousel__dot[aria-current="true"] {
  background: var(--color-secondary-dark);
  width: 22px;
  border-radius: 5px;
}

/* ---- Product carousel slide layout ---- */
.product-slide-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-cell-sm);
  overflow: hidden;
  background: var(--color-surface-alt);
  margin-block-end: var(--space-2);
}

.product-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__viewport { scroll-behavior: auto; }
}