/* ==========================================================
   dimosTV Design System
   DS4.2 — Premium Carousel System
========================================================== */

.dtv-carousel-shell {
    position: relative;

    overflow: visible;

    isolation: isolate;
}

/* Edge fades */
.dtv-carousel-shell::before,
.dtv-carousel-shell::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 12;

    width: 72px;

    pointer-events: none;

    opacity: 0;

    transition: opacity var(--dtv-motion-normal, .22s ease);
}

.dtv-carousel-shell::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--dtv-color-page, #F4F7FB) 0%,
            rgba(244,247,251,.86) 35%,
            rgba(244,247,251,0) 100%
        );
}

.dtv-carousel-shell::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            var(--dtv-color-page, #F4F7FB) 0%,
            rgba(244,247,251,.86) 35%,
            rgba(244,247,251,0) 100%
        );
}

.dtv-carousel-shell.can-scroll-left::before {
    opacity: 1;
}

.dtv-carousel-shell.can-scroll-right::after {
    opacity: 1;
}

/* Row */
.dtv-carousel-row {
    position: relative;
    z-index: 1;

    display: flex;
    gap: clamp(18px, 2vw, 28px);

    overflow-x: auto;
    overflow-y: visible;

    padding: 10px 8px 28px;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 8px;

    scrollbar-width: none;
    -ms-overflow-style: none;

    cursor: grab;
    user-select: none;
    touch-action: pan-x pan-y;

    -webkit-overflow-scrolling: touch;
}

.dtv-carousel-row::-webkit-scrollbar {
    display: none;
}

.dtv-carousel-row > * {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.dtv-carousel-row.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.dtv-carousel-row.is-dragging > * {
    pointer-events: none;
}

/* Controls */
.dtv-carousel-arrow,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 30 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: var(--dtv-radius-pill, 999px) !important;

    background: rgba(15,23,42,.62) !important;
    background-image: none !important;
    color: var(--dtv-color-text-inverse, #ffffff) !important;

    font-size: 0 !important;
    line-height: 1 !important;

    box-shadow:
        0 18px 44px rgba(15,23,42,.24),
        inset 0 0 0 1px rgba(255,255,255,.08) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    cursor: pointer !important;
    pointer-events: auto !important;

    transform: translateY(-50%) scale(1) !important;

    transition:
        background var(--dtv-motion-normal, .22s ease),
        transform var(--dtv-motion-normal, .22s ease),
        opacity var(--dtv-motion-normal, .22s ease),
        box-shadow var(--dtv-motion-normal, .22s ease);
}

.dtv-carousel-arrow::before,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow::before {
    content: "";

    width: 12px;
    height: 12px;

    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
}

.dtv-carousel-arrow--prev::before,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--prev::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.dtv-carousel-arrow--next::before,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--next::before {
    transform: rotate(45deg);
    margin-right: 4px;
}

.dtv-carousel-arrow:hover,
.dtv-carousel-arrow:focus-visible,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow:hover,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow:focus-visible {
    background: var(--dtv-color-primary, #CC0000) !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow:
        0 18px 52px rgba(204,0,0,.28),
        0 18px 52px rgba(15,23,42,.22) !important;
}

.dtv-carousel-arrow:focus-visible,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow:focus-visible {
    outline: 3px solid var(--dtv-color-secondary, #0066CC) !important;
    outline-offset: 4px !important;
}

.dtv-carousel-arrow:disabled,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow:disabled {
    opacity: 0 !important;
    pointer-events: none !important;
    cursor: default !important;
}

.dtv-carousel-arrow--prev,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--prev {
    left: -22px !important;
}

.dtv-carousel-arrow--next,
.dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--next {
    right: -22px !important;
}

/* Progress */
.dtv-carousel-progress {
    position: relative;

    height: 3px;

    margin: 2px 8px 0;

    border-radius: var(--dtv-radius-pill, 999px);

    overflow: hidden;

    background: rgba(26,46,74,.10);
}

.dtv-carousel-progress__bar {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--dtv-color-primary, #CC0000),
            var(--dtv-color-primary-hover, #E00000)
        );

    box-shadow: 0 0 18px rgba(204,0,0,.35);

    transition: width var(--dtv-motion-normal, .22s ease);
}

/* Mobile */
@media (max-width: 768px) {
    .dtv-carousel-shell {
        padding-inline: 0 !important;
        padding-bottom: 58px !important;
    }

    .dtv-carousel-shell::before,
    .dtv-carousel-shell::after {
        width: 42px;
    }

    .dtv-carousel-row {
        gap: 18px !important;
        padding: 8px 18px 20px !important;
        scroll-padding-inline: 18px;
    }

    .dtv-carousel-arrow,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow {
        top: auto !important;
        bottom: 6px !important;

        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;

        transform: none !important;

        background: rgba(15,23,42,.82) !important;
    }

    .dtv-carousel-arrow:hover,
    .dtv-carousel-arrow:focus-visible,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow:hover,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow:focus-visible {
        transform: none !important;
    }

    .dtv-carousel-arrow--prev,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--prev {
        left: calc(50% - 56px) !important;
        right: auto !important;
    }

    .dtv-carousel-arrow--next,
    .dtv-carousel-section .dtv-carousel-shell > button.dtv-carousel-arrow--next {
        right: calc(50% - 56px) !important;
        left: auto !important;
    }

    .dtv-carousel-progress {
        margin-inline: 18px;
    }
}

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

    .dtv-carousel-arrow,
    .dtv-carousel-progress__bar {
        transition: none !important;
    }
}