/* ======================================================
   Sarekam CSS — slider.css
   Extracted from index.html | Phase 1 Refactor
   DO NOT add styles from other sections to this file.
   ====================================================== */

        .slider-wrapper {
            background: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
        }

        .slider-yellow-box {
            background: #f5f5f5;
            border-radius: 12px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;}

        .slider-track-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 16px;
            position: relative;
            touch-action: pan-y;
        }

        .slider-track {
            display: flex;
            transition: transform 0.3s ease-out;
            width: 100%;
        }

        .slide-item {
            min-width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .slide-item video,
        .slide-item img {
            width: 100%;
            aspect-ratio: 16/10;
            object-fit: cover;
            border-radius: 12px;
        }

        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.8);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            z-index: 10;
            color: var(--text-dark);
            transition: background 0.2s;
        }

        .slider-arrow:hover {
            background: #fff;
        }

        .slider-arrow.prev {
            left: 10px;
        }

        .slider-arrow.next {
            right: 10px;
        }

        .slider-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }

        .slider-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid var(--text-dark);
            background: transparent;
            cursor: pointer;
            transition: background 0.2s;
        }

        .slider-dot.active {
            background: var(--text-dark);
        }

        @media (max-width: 800px) {
            .slider-arrow {
                display: none;
            }

            .slider-yellow-box {
            background: #f5f5f5;
            border-radius: 12px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;}
        }