/* ============================================================
   GEARBOX63 — OCDbanner #92
   CYAN INDUSTRIAL — PREMIUM SAFE V5
   CSS для поля CSS в админке OCDbanner.

   ВАЖНО:
   - НЕ меняет геометрию .splide__track / .splide__list / .splide__slide
   - Большой штатный Play заменён на компактный фирменный Play
   - Фон/URL превью видео не изменяются
   ============================================================ */

/* 1. ОСНОВНОЙ БЛОК */
html body #ocdbanner-92.ocdbanner.ocdbanner-video {
    position: relative !important;
    isolation: isolate !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 16px 0 24px !important;
    padding: 24px 24px 26px !important;

    overflow: hidden !important;

    border: 1px solid rgba(18,191,227,.28) !important;
    border-radius: 20px !important;

    background:
        radial-gradient(circle at 92% 4%, rgba(18,191,227,.15) 0, rgba(18,191,227,.045) 25%, transparent 47%),
        radial-gradient(circle at 4% 105%, rgba(8,174,224,.075) 0, transparent 31%),
        linear-gradient(145deg, #04151b 0%, #061b22 48%, #082832 100%) !important;

    color: #edf8fa !important;

    box-shadow:
        0 20px 46px rgba(2,16,21,.17),
        inset 0 1px 0 rgba(255,255,255,.028) !important;
}

/* 2. QUIET LED-DOT + TECH TEXTURE */
html body #ocdbanner-92.ocdbanner.ocdbanner-video::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    display: block !important;
    pointer-events: none !important;

    opacity: .54 !important;

    background-image:
        radial-gradient(circle, rgba(18,191,227,.24) .95px, transparent 1.4px),
        radial-gradient(circle, rgba(94,218,239,.045) .7px, transparent 1.15px),
        repeating-linear-gradient(135deg, rgba(94,218,239,.020) 0, rgba(94,218,239,.020) 1px, transparent 1px, transparent 24px) !important;

    background-size:
        20px 20px,
        80px 80px,
        auto !important;

    background-position:
        0 0,
        13px 11px,
        0 0 !important;

    -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.70) 45%, #000 100%) !important;
    mask-image: linear-gradient(100deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.70) 45%, #000 100%) !important;
}

html body #ocdbanner-92.ocdbanner.ocdbanner-video::after {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 26px !important;
    right: 26px !important;
    z-index: 3 !important;

    display: block !important;

    height: 1px !important;
    pointer-events: none !important;

    background: linear-gradient(90deg, transparent, rgba(18,191,227,.20), #12bfe3, #5edaef, rgba(18,191,227,.20), transparent) !important;
    box-shadow: 0 0 14px rgba(18,191,227,.30) !important;
}

html body #ocdbanner-92.ocdbanner.ocdbanner-video > * {
    position: relative !important;
    z-index: 2 !important;
}

/* 3. ЗАГОЛОВОК МОДУЛЯ */
html body #ocdbanner-92 .title-module,
html body #ocdbanner-92 .title-module.text-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;

    margin: 0 0 19px !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #5edaef !important;

    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: .115em !important;
    text-transform: uppercase !important;
    text-align: center !important;

    text-shadow: 0 0 12px rgba(18,191,227,.15) !important;
}

html body #ocdbanner-92 .title-module *,
html body #ocdbanner-92 .title-module h1,
html body #ocdbanner-92 .title-module h2,
html body #ocdbanner-92 .title-module h3,
html body #ocdbanner-92 .title-module span {
    margin: 0 !important;
    padding: 0 !important;

    color: #5edaef !important;

    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: uppercase !important;
}

html body #ocdbanner-92 .title-module::before,
html body #ocdbanner-92 .title-module::after {
    content: "" !important;

    display: block !important;

    width: 30px !important;
    height: 1px !important;
    flex: 0 0 30px !important;

    border: 0 !important;
    border-radius: 1px !important;

    background: linear-gradient(90deg, transparent, rgba(94,218,239,.84)) !important;
    box-shadow: 0 0 8px rgba(18,191,227,.14) !important;
}

html body #ocdbanner-92 .title-module::after {
    transform: scaleX(-1) !important;
}

/* 4. НАЗВАНИЯ ВИДЕО — одинаковая визуальная высота на ПК */
html body #ocdbanner-92 .title-banner,
html body #ocdbanner-92 .title-banner.before-title,
html body #ocdbanner-92 .title-banner.text-right,
html body #ocdbanner-92 .title-banner.before-title.text-right {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    min-height: 34px !important;

    margin: 0 0 9px !important;
    padding: 0 7px !important;

    border: 0 !important;
    background: transparent !important;

    color: #edf8fa !important;

    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
    letter-spacing: -.01em !important;
    text-align: center !important;

    text-shadow: 0 2px 8px rgba(0,0,0,.28) !important;
}

/* 5. РАМКА ВИДЕО */
html body #ocdbanner-92 .iframe-video {
    position: relative !important;

    padding: 5px !important;
    overflow: hidden !important;

    border: 1px solid rgba(18,191,227,.39) !important;
    border-radius: 15px !important;

    background: linear-gradient(145deg, rgba(8,43,52,.94), rgba(4,18,24,.99)) !important;

    box-shadow:
        0 12px 27px rgba(0,0,0,.23),
        0 0 0 1px rgba(18,191,227,.025),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    transition: border-color .20s ease, box-shadow .20s ease, transform .20s ease !important;
}

html body #ocdbanner-92 .iframe-video .rutube-host,
html body #ocdbanner-92 .iframe-video .embed-responsive,
html body #ocdbanner-92 .iframe-video .embed-responsive-16by9 {
    overflow: hidden !important;

    border-radius: 10px !important;
    background: #030d11 !important;
}

/* 6. ПРЕВЬЮ */
html body #ocdbanner-92 .video-preview {
    position: relative !important;
    overflow: hidden !important;

    border-radius: 10px !important;

    background-color: #030d11 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    filter: saturate(.96) contrast(1.025) brightness(.95) !important;

    transition: filter .20s ease !important;
}

/*
   Штатный огромный Play заменяем на компактный.
   Сам background-image превью НЕ трогаем.
*/
html body #ocdbanner-92 .video-preview::before {
    content: "" !important;

    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 4 !important;

    display: block !important;

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

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

    transform: translate(-50%, -50%) !important;

    border: 1px solid rgba(94,218,239,.76) !important;
    border-radius: 50% !important;

    background: rgba(3,21,27,.72) !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.28),
        0 0 0 4px rgba(18,191,227,.055),
        0 0 18px rgba(18,191,227,.18),
        inset 0 1px 0 rgba(255,255,255,.08) !important;

    pointer-events: none !important;
}

html body #ocdbanner-92 .video-preview::after {
    content: "" !important;

    position: absolute !important;
    left: calc(50% + 2px) !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 5 !important;

    display: block !important;

    width: 0 !important;
    height: 0 !important;

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

    transform: translate(-50%, -50%) !important;

    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 9px solid #f4fbfc !important;
    border-right: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    filter: drop-shadow(0 0 4px rgba(94,218,239,.30)) !important;

    pointer-events: none !important;
}

/* Если модуль выводит отдельный штатный элемент Play — скрываем только его */
html body #ocdbanner-92 .video-preview__play {
    display: none !important;
}

html body #ocdbanner-92 .iframe-video iframe,
html body #ocdbanner-92 .iframe-video video {
    border: 0 !important;
    border-radius: 10px !important;
    background: #000 !important;
}

/* 7. HOVER */
@media (hover: hover) and (pointer: fine) {
    html body #ocdbanner-92 .item-banner:hover .iframe-video {
        border-color: rgba(94,218,239,.72) !important;

        box-shadow:
            0 15px 32px rgba(0,0,0,.28),
            0 0 0 1px rgba(18,191,227,.035),
            0 0 22px rgba(18,191,227,.105),
            inset 0 1px 0 rgba(255,255,255,.04) !important;
    }

    html body #ocdbanner-92 .item-banner:hover .video-preview {
        filter: saturate(1) contrast(1.02) brightness(.995) !important;
    }

    html body #ocdbanner-92 .item-banner:hover .video-preview::before {
        border-color: rgba(121,221,240,.92) !important;

        background: rgba(4,30,38,.82) !important;

        box-shadow:
            0 8px 22px rgba(0,0,0,.30),
            0 0 0 4px rgba(18,191,227,.07),
            0 0 22px rgba(18,191,227,.25),
            inset 0 1px 0 rgba(255,255,255,.10) !important;
    }
}

/* 8. СТРЕЛКИ — только визуал */
html body #ocdbanner-92 .splide__arrow {
    opacity: 1 !important;

    border: 1px solid rgba(18,191,227,.48) !important;
    border-radius: 11px !important;

    background: linear-gradient(145deg, rgba(5,27,34,.98), rgba(8,49,59,.98)) !important;
    color: #5edaef !important;

    box-shadow:
        0 9px 21px rgba(0,0,0,.27),
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 14px rgba(18,191,227,.07) !important;
}

html body #ocdbanner-92 .splide__arrow svg {
    fill: #5edaef !important;
    color: #5edaef !important;

    filter: drop-shadow(0 0 4px rgba(18,191,227,.30)) !important;
}

@media (hover: hover) and (pointer: fine) {
    html body #ocdbanner-92 .splide__arrow:hover {
        border-color: #12bfe3 !important;

        background: linear-gradient(145deg, #07343f, #09505f) !important;

        box-shadow:
            0 10px 23px rgba(0,0,0,.31),
            0 0 18px rgba(18,191,227,.15) !important;
    }
}

/* 9. PAGINATION */
html body #ocdbanner-92 .splide__pagination__page {
    opacity: .42 !important;

    border: 0 !important;
    background: rgba(94,218,239,.52) !important;
    box-shadow: none !important;
}

html body #ocdbanner-92 .splide__pagination__page.is-active {
    opacity: 1 !important;

    background: #12bfe3 !important;
    box-shadow: 0 0 9px rgba(18,191,227,.36) !important;
}

/* 10. LARGE / TABLET */
@media (max-width: 1199px) {
    html body #ocdbanner-92.ocdbanner.ocdbanner-video {
        padding: 22px 20px 24px !important;
        border-radius: 19px !important;
    }
}

@media (max-width: 991px) {
    html body #ocdbanner-92.ocdbanner.ocdbanner-video {
        margin: 14px 0 22px !important;
        padding: 20px 16px 22px !important;
        border-radius: 18px !important;
    }

    html body #ocdbanner-92 .title-module,
    html body #ocdbanner-92 .title-module.text-center {
        margin-bottom: 17px !important;
        font-size: 13px !important;
    }

    html body #ocdbanner-92 .title-module::before,
    html body #ocdbanner-92 .title-module::after {
        width: 24px !important;
        flex-basis: 24px !important;
    }

    html body #ocdbanner-92 .title-banner,
    html body #ocdbanner-92 .title-banner.before-title,
    html body #ocdbanner-92 .title-banner.text-right,
    html body #ocdbanner-92 .title-banner.before-title.text-right {
        min-height: 32px !important;
        font-size: 11.6px !important;
    }
}

/* 11. MOBILE */
@media (max-width: 767px) {
    html body #ocdbanner-92.ocdbanner.ocdbanner-video {
        margin: 11px 0 18px !important;
        padding: 16px 10px 18px !important;
        border-radius: 15px !important;
    }

    html body #ocdbanner-92.ocdbanner.ocdbanner-video::after {
        left: 12px !important;
        right: 12px !important;
    }

    html body #ocdbanner-92 .title-module,
    html body #ocdbanner-92 .title-module.text-center {
        gap: 8px !important;
        margin-bottom: 14px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        letter-spacing: .08em !important;
    }

    html body #ocdbanner-92 .title-module::before,
    html body #ocdbanner-92 .title-module::after {
        width: 18px !important;
        flex-basis: 18px !important;
    }

    html body #ocdbanner-92 .title-banner,
    html body #ocdbanner-92 .title-banner.before-title,
    html body #ocdbanner-92 .title-banner.text-right,
    html body #ocdbanner-92 .title-banner.before-title.text-right {
        display: block !important;
        min-height: 0 !important;
        margin-bottom: 7px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 11.2px !important;
        line-height: 1.35 !important;
    }

    html body #ocdbanner-92 .iframe-video {
        padding: 4px !important;
        border-radius: 12px !important;
    }

    html body #ocdbanner-92 .iframe-video .rutube-host,
    html body #ocdbanner-92 .iframe-video .embed-responsive,
    html body #ocdbanner-92 .iframe-video .embed-responsive-16by9,
    html body #ocdbanner-92 .video-preview,
    html body #ocdbanner-92 .iframe-video iframe,
    html body #ocdbanner-92 .iframe-video video {
        border-radius: 8px !important;
    }

    html body #ocdbanner-92 .video-preview::before {
        width: 40px !important;
        height: 40px !important;
    }

    html body #ocdbanner-92 .video-preview::after {
        border-top-width: 5px !important;
        border-bottom-width: 5px !important;
        border-left-width: 8px !important;
    }
}

/* 12. COMPACT MOBILE */
@media (max-width: 430px) {
    html body #ocdbanner-92.ocdbanner.ocdbanner-video {
        padding: 15px 8px 17px !important;
        border-radius: 14px !important;
    }

    html body #ocdbanner-92 .title-module,
    html body #ocdbanner-92 .title-module.text-center {
        gap: 7px !important;
        font-size: 11.5px !important;
        letter-spacing: .07em !important;
    }

    html body #ocdbanner-92 .title-module::before,
    html body #ocdbanner-92 .title-module::after {
        width: 14px !important;
        flex-basis: 14px !important;
    }
}

@media (max-width: 390px) {
    html body #ocdbanner-92.ocdbanner.ocdbanner-video {
        padding: 14px 7px 16px !important;
        border-radius: 13px !important;
    }

    html body #ocdbanner-92 .title-module,
    html body #ocdbanner-92 .title-module.text-center {
        margin-bottom: 13px !important;
        font-size: 11.2px !important;
        letter-spacing: .06em !important;
    }

    html body #ocdbanner-92 .title-banner,
    html body #ocdbanner-92 .title-banner.before-title,
    html body #ocdbanner-92 .title-banner.text-right,
    html body #ocdbanner-92 .title-banner.before-title.text-right {
        font-size: 10.8px !important;
    }

    html body #ocdbanner-92 .video-preview::before {
        width: 38px !important;
        height: 38px !important;
    }
}

@media (max-width: 360px) {
    html body #ocdbanner-92.ocdbanner.ocdbanner-video {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    html body #ocdbanner-92 .title-module,
    html body #ocdbanner-92 .title-module.text-center {
        font-size: 10.8px !important;
    }

    html body #ocdbanner-92 .title-banner,
    html body #ocdbanner-92 .title-banner.before-title,
    html body #ocdbanner-92 .title-banner.text-right,
    html body #ocdbanner-92 .title-banner.before-title.text-right {
        font-size: 10.5px !important;
    }
}

@media (max-width: 320px) {
    html body #ocdbanner-92.ocdbanner.ocdbanner-video {
        padding: 13px 5px 15px !important;
        border-radius: 12px !important;
    }

    html body #ocdbanner-92 .title-module,
    html body #ocdbanner-92 .title-module.text-center {
        gap: 5px !important;
        font-size: 10.4px !important;
        letter-spacing: .045em !important;
    }

    html body #ocdbanner-92 .title-module::before,
    html body #ocdbanner-92 .title-module::after {
        width: 10px !important;
        flex-basis: 10px !important;
    }

    html body #ocdbanner-92 .title-banner,
    html body #ocdbanner-92 .title-banner.before-title,
    html body #ocdbanner-92 .title-banner.text-right,
    html body #ocdbanner-92 .title-banner.before-title.text-right {
        padding-left: 2px !important;
        padding-right: 2px !important;
        font-size: 10.2px !important;
    }

    html body #ocdbanner-92 .video-preview::before {
        width: 36px !important;
        height: 36px !important;
    }
}

/* 13. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    html body #ocdbanner-92 .iframe-video,
    html body #ocdbanner-92 .video-preview,
    html body #ocdbanner-92 .splide__arrow {
        transition: none !important;
    }
}