.component-carousel {
    --db-color-bg-page: #f4f5f8;
    --db-color-navy: #1A2340;
    --db-color-navy-dark: #12182d;
    --db-color-card-bg: #FFF8F2;
    --db-color-card-border: #E2D9CF;
    --db-color-purple: #7C69AC;
    --db-color-purple-hover: #685499;
    --color-purple-glass: rgba(124, 105, 172, 0.85);
    --db-color-text-main: #2C3545;
    --db-color-text-muted: #667085;
    --db-color-amber-accent: #E5A84B;
    --color-arrow-bg: #EAE1D7;

    /* Shadows */
    --db-shadow-sm: 0 2px 8px rgba(26, 35, 64, 0.04);
    --shadow-md: 0 4px 16px rgba(26, 35, 64, 0.06);
    --shadow-lg: 0 10px 16px rgba(26, 35, 64, 0.1);

    /* Layout */
    --container-max-width: 1140px;
    --db-transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);


    --carousel-navigation-display: flex;

    --carousel-container-overflow-x: auto;

    --carousel-container-scroll-snap-type: x mandatory;
    --carousel-container-justify-content: normal;
    --carousel-container-gap: 32px;

    --video-card-flex: 0 1 auto;
    --video-card-width: auto;
    --video-card-max-width: none;

    --dots-indicator-bar-display: flex;

    &[data-carousel-disabled="true"] {
        --carousel-navigation-display: none;

        --carousel-container-justify-content: center;
        --carousel-container-overflow-x: visible;
        --carousel-container-scroll-snap-type: none;

        --video-card-flex: 1 1 0;
        --video-card-width: auto;
        /*--video-card-max-width: 360px;*/
    }

    &[data-carousel-show-dots="false"] {
        --dots-indicator-bar-display: none;
    }

    /* Responsive Width & Snap Alignment Logic */
    /* Desktop (>1024px): 1 main card visible (~65% width) with generous side peeks */
    @media (width > 1024px) {
        --video-card-width: 65%;
    }

    /* Tablet (640px to 1024px): 1 main card visible (~72% width) with side peeks */
    @media (width > 640px) and (width <= 1024px) {
        --video-card-width: 72%;
    }

    /* Mobile (<640px): 1 main card visible (~80% width) with side peeks */
    @media (width <= 640px) {
        --video-card-width: 80%;
    }

    .carousel-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
    }

    .carousel-navigation {
        display: var(--carousel-navigation-display);
        align-items: center;
        gap: 8px;

        button {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            margin: 0;
            padding: 0;
            border: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--db-shadow-sm);
            transition: var(--db-transition-base);
            background-color: var(--db-color-card-border);

            &:hover:not(:disabled) {
                background-color: var(--db-color-navy);
                color: #ffffff;
                border-color: var(--db-color-navy);
            }

            &:disabled {
                opacity: 0.35;
                cursor: not-allowed;
            }

            svg {
                width: 18px;
                height: 18px;
                stroke: currentColor;
                stroke-width: 2.5;
                fill: none;
            }
        }
    }

    .carousel-container {
        display: flex;
        flex-direction: row;
        justify-content: var(--carousel-container-justify-content);
        gap: var(--carousel-container-gap);
        overflow-x: var(--carousel-container-overflow-x);
        scroll-behavior: smooth;
        scrollbar-width: none;
        /*scroll-padding: 0 24px;*/
        scroll-snap-type: var(--carousel-container-scroll-snap-type);
        padding: 0;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none;
        }

        .carousel-item-card {
            position: relative;
            display: flex;
            flex: var(--video-card-flex);
            flex-shrink: 0;
            flex-direction: column;
            overflow: hidden;
            scroll-snap-align: center;
            width: var(--video-card-width);
            /*max-width: var(--video-card-max-width);*/
            transition: var(--db-transition-base);

            &:first-child {
                scroll-snap-align: start;
            }

            &:last-child {
                scroll-snap-align: end;
            }
        }
    }

    .dots-indicator-bar {
        display: var(--dots-indicator-bar-display);
        align-items: center;
        justify-content: center;
        gap: 8px;

        button {
            width: 10px;
            height: 10px;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 50%;
            transition: var(--db-transition-base);
            background-color: #C0B4A8;

            &.active {
                width: 24px;
                border-radius: 12px;
                background-color: var(--db-color-purple);
            }
        }
    }
}