.svs-social-wrapper {
    width: 100%;
    max-width: 950px;
    margin: 40px auto;
    position: relative;
    /* FIX 1: Overflow hidden om hard af te snijden */
    overflow: hidden; 
    /* FIX 2: Zijkant padding naar 0. Alleen boven/onder padding houden. */
    padding: 30px 0; 
}

.svs-swiper {
    /* FIX 3: De padding verplaatsen we naar HIER. 
       20px aan zijkanten zorgt dat de schaduw van slide 1 en 3 zichtbaar blijft,
       maar de 4e slide wordt nu buiten de wrapper geduwd (+ de ruimte van de gap).
    */
    padding: 10px 20px 60px 20px !important; 
    overflow: visible !important; 
}

/* --- DE KAART --- */
.svs-video-card {
    position: relative;
    width: 100%;
    padding-top: 177.77%; /* 9:16 aspect ratio */
    background: #000;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateZ(0);
}

.svs-video-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.20);
}

/* --- ELEMENTEN --- */
.svs-video-poster {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-size: cover;
    background-position: center;
    z-index: 5;
    transition: opacity 0.3s ease;
}

.svs-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);
    z-index: 6;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.svs-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70px; height: 70px;
    background: #ea5a10;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    z-index: 10;
    box-shadow: 0 0 0 5px rgba(234, 90, 16, 0.3);
    transition: all 0.3s ease;
    pointer-events: none;
}

/* --- VIDEO ELEMENT --- */
.svs-video-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    background: #000;
}

.svs-html5-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Cast button verbergen */
.svs-html5-video::-internal-media-controls-overlay-cast-button { display: none; }
.svs-html5-video::-webkit-media-controls-enclosure { overflow: hidden; }
.svs-html5-video::-webkit-media-controls-panel { width: calc(100% + 30px); }

/* --- NAVIGATIE PIJLEN --- */
.swiper-button-next, .swiper-button-prev {
    width: 50px !important;
    height: 50px !important;
    background-color: #ffffff !important;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    color: #333333 !important;
    transition: all 0.3s ease;
    opacity: 1 !important;
    z-index: 20; 
    /* Pijltjes positionering iets aanpassen omdat ze nu in de padding vallen */
    margin: 0; 
}

/* Positie finetunen: Pijltjes moeten net op de rand */
.swiper-button-prev { left: 5px !important; }
.swiper-button-next { right: 5px !important; }

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 20px !important;
    font-weight: bold;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: #ea5a10 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(234, 90, 16, 0.4);
}

/* --- PAGINATIE BOLLETJES --- */
.swiper-pagination-bullet {
    background: #ccc !important;
    opacity: 1 !important;
    width: 10px; height: 10px;
}

.swiper-pagination-bullet-active {
    background: #ea5a10 !important;
    width: 24px;
    border-radius: 5px;
}