.svr-slider {
    width: 100%;
    --svr-pink: #e65198;
    --svr-pink-dark: #8b1451;
    --svr-pink-light: #f5c7df;
    --svr-surface: #fff7fb;
    --svr-play: #f2a8c9;
}

.svr-slider *,
.svr-slider *::before,
.svr-slider *::after {
    box-sizing: border-box;
}

.svr-frame {
    background: var(--svr-pink-light);
    border: 1px solid var(--svr-pink);
    border-radius: 44px;
    padding: 12px;
}

.svr-layout {
    display: block;
}

.svr-main {
    display: none;
    width: 100%;
}

.svr-heading {
    display: none;
    direction: rtl;
    text-align: right;
    width: 100%;
    color: #222;
}

.svr-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.svr-subtitle {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
}

.svr-main-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 36px;
    overflow: hidden;
    position: relative;
    background: var(--svr-surface);
    border: 2px solid var(--svr-pink);
    padding: 0;
    cursor: pointer;
    display: block;
}

.svr-main-media:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.svr-main-poster {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.svr-main-play {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 0;
    background: transparent;
    background-image: url("../images/main-play-circle.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: none;
}

.svr-main-play:before {
    content: none;
}

.svr-main-play--card {
    width: 54px;
    height: 54px;
}

.svr-rail {
    background: var(--svr-pink);
    border: 0;
    border-radius: 24px;
    padding: 12px;
}

.svr-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    cursor: grab;
}

.svr-track.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.svr-track::-webkit-scrollbar {
    height: 6px;
}

.svr-track::-webkit-scrollbar-thumb {
    background: rgba(226, 98, 155, 0.6);
    border-radius: 999px;
}

.svr-card {
    flex: 0 0 min(341px, 90vw);
    width: min(341px, 90vw);
    aspect-ratio: 341 / 210;
    height: auto;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: var(--svr-surface);
    border: 2px solid var(--svr-pink);
    padding: 0;
    cursor: pointer;
    scroll-snap-align: start;
}

.svr-card:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.svr-card.is-active {
    outline: 3px solid rgba(226, 98, 155, 0.75);
    outline-offset: 2px;
}

.svr-poster,
.svr-video,
.svr-fallback {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.svr-play {
    position: absolute;
    width: 54px;
    height: 54px;
    border-radius: 0;
    background: transparent;
    background-image: url("../images/play.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: none;
}

.svr-play:before {
    content: none;
}

.svr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.svr-video {
    background: #000;
}

.svr-fallback {
    background: linear-gradient(135deg, #fff4fa, #f6c4d9);
}

@media (max-width: 899px) {
    .svr-frame {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    .svr-rail {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    .svr-track {
        padding: 0;
    }

    .svr-card {
        border: 0;
    }

    .svr-card[data-loaded="1"] .svr-main-play--card {
        display: none !important;
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    .svr-track {
        gap: 16px;
    }

    .svr-card {
        flex: 0 0 min(360px, 76vw);
        width: min(360px, 76vw);
    }
}

@media (min-width: 900px) {
    .svr-frame {
        padding: 24px;
        width: 100%;
        max-width: 1216px;
        margin: 0 auto;
    }

    .svr-layout {
        display: flex;
        gap: 24px;
        align-items: flex-start;
        direction: ltr;
    }

    .svr-main {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        max-width: 860px;
    }

    .svr-rail {
        flex: 0 0 min(284px, 32%);
        width: min(284px, 32%);
        min-width: 0;
        display: flex;
        height: clamp(360px, 42vw, 570px);
    }

    .svr-track {
        width: 100%;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        padding: 0;
        height: 100%;
    }

    .svr-track::-webkit-scrollbar {
        width: 6px;
        height: auto;
    }

    .svr-card {
        flex: 0 0 auto;
        width: 100%;
        max-width: 260px;
        height: auto;
        aspect-ratio: 13 / 8;
    }

    .svr-main-media {
        width: 100%;
        max-width: 860px;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .svr-heading {
        display: block;
        width: 100%;
        max-width: 860px;
    }
}