/* ============================================================
   Dunya Travel — Unified Destination Carousel
   ------------------------------------------------------------
   A stable, professional, infinite, auto-playing carousel that
   reuses each page's EXISTING destination cards (no redesign of
   the card itself). Centered layout with a single emphasised
   centre card. Built so cards are real, CSS-sized flex items —
   present and visible from the first frame, and the track is
   packed edge-to-edge with cards + clones so no scroll position
   can ever reveal an empty area.

   Card widths are driven by CSS here (not JS measurement), which
   is what makes "cards never disappear" structurally guaranteed.
   ============================================================ */

.dt-slider.cs-ready {
    /* Neutralise only the grid's internal layout — keep the
       element's own max-width / margin / background so the
       section composition stays where it was. */
    display: block !important;
    position: relative;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
}

/* Clips the off-screen cards. Vertical padding gives the raised /
   scaled centre card and its shadow room; an equal negative margin
   keeps the section height effectively unchanged. */
.dt-slider .cs-viewport {
    overflow: hidden;
    padding: 30px 0;
    margin: -30px 0;
}

.dt-slider .cs-track {
    display: flex;
    align-items: center;
    gap: var(--cs-gap, 22px);
    will-change: transform;
    touch-action: pan-y;
}
.dt-slider.cs-animate  .cs-track { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.dt-slider.cs-dragging .cs-track { transition: none; cursor: grabbing; }

/* Each slide is a transparent wrapper with a CSS width, so the
   cards are laid out and visible regardless of any JS timing.
   ~3 cards + peeks on desktop. */
.dt-slider .cs-slide {
    flex: 0 0 clamp(260px, 30%, 360px);
    box-sizing: border-box;
    transform: translateY(0) scale(1);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dt-slider .cs-slide > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: auto;
    scroll-snap-align: none !important;
}

/* ---- Equal weight: every destination card shares the same size,
   position, and shadow. No card is scaled, raised, or emphasised. */
.dt-slider .cs-slide.is-center {
    transform: none;
    z-index: 1;
}

/* ---- Arrows ---- */
.dt-slider .cs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--hv-line, #ECE9E1);
    background: rgba(255, 255, 255, 0.95);
    color: var(--hv-green, #0E3B2C);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(14, 59, 44, 0.16);
    transition: background 0.2s ease, color 0.2s ease;
}
.dt-slider .cs-arrow:hover { background: var(--hv-green, #0E3B2C); color: #fff; }
.dt-slider .cs-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dt-slider .cs-prev { left: 4px; }
.dt-slider .cs-next { right: 4px; }
@media (min-width: 1025px) {
    .dt-slider .cs-prev { left: -8px; }
    .dt-slider .cs-next { right: -8px; }
}

/* ---- Dots ---- */
.dt-slider .cs-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; }
.dt-slider .cs-dot {
    width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px;
    background: rgba(14, 59, 44, 0.22); cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}
.dt-slider .cs-dot.is-active { width: 24px; background: var(--hv-gold, #C2913B); }

/* ---- Tablet ---- */
@media (max-width: 1024px) {
    .dt-slider .cs-slide { flex-basis: clamp(240px, 46%, 360px); }
}

/* ---- Mobile: one centred card + a peek of each neighbour ---- */
@media (max-width: 600px) {
    .dt-slider .cs-slide { flex-basis: 78%; }
    .dt-slider .cs-slide.is-center { transform: none; }
    .dt-slider .cs-arrow { width: 40px; height: 40px; }
    .dt-slider .cs-prev { left: 2px; }
    .dt-slider .cs-next { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .dt-slider.cs-animate .cs-track { transition: none; }
    .dt-slider .cs-slide { transition: none; }
}
body[dir="rtl"] .dt-slider .cs-dots { direction: ltr; }

/* ---- RTL ----------------------------------------------------------------
   The JS centres the active card with a single transform that treats the
   track as an LTR coordinate line (slide i sits at i*step from the LEFT).
   Under body[dir="rtl"] the flex track lays its slides out right-to-left,
   so that transform pushes the active card thousands of px off-screen and
   the overflow:hidden viewport clips every card — the slider looks empty.
   Pin the track (the layout coordinate system) to LTR so the geometry
   matches the math, and restore RTL on the slides so card text/content
   still reads correctly. LTR pages never match this selector, so they are
   completely unaffected. */
body[dir="rtl"] .dt-slider .cs-track { direction: ltr; }
body[dir="rtl"] .dt-slider .cs-slide { direction: rtl; }