/* ==========================================================
 * AFAFKA VIDEO LIBRARY
 * Clean square blog/video frame
 * ========================================================== */

.afafka-video-embed {

    --av-brown-dark: #452F1B;
    --av-brown: #5A3A23;
    --av-brown-hover: #7A5132;

    --av-text: #5B5048;

    --av-border: #E2D5C8;
    --av-soft: #F2E6DA;
    --av-light: #FEF7EF;


    box-sizing: border-box;

    width: 100%;

    margin: 30px auto;

    padding: 8px;

    border:
        1px solid
        var(--av-border);

    /*
     * Сайт у нас переважно квадратний,
     * тому забираємо великі округлення.
     */

    border-radius: 4px;

    background:
        var(--av-light);

    box-shadow:
        0 8px 24px
        rgba(69, 47, 27, 0.07);
}


.afafka-video-embed,
.afafka-video-embed * {

    box-sizing: border-box;
}


/* ==========================================================
 * OPTIONAL TITLE
 * ========================================================== */

.afafka-video-embed__top {

    display: flex;

    align-items: center;

    min-height: 30px;

    padding:
        0
        4px
        8px;
}


.afafka-video-embed__title {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 13px;

    line-height: 1.35;

    font-weight: 600;

    color:
        var(--av-text);

    text-align: left;
}


/* ==========================================================
 * PLAYER FRAME
 * ========================================================== */

.afafka-video-embed__player {

    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(69, 47, 27, 0.14);

    border-radius: 2px;

    background:
        #000000;

    box-shadow: none;
}


.afafka-video-embed__player .video-js {

    width: 100%;

    border-radius: 1px;
}


.afafka-video-embed__player .video-js .vjs-tech,
.afafka-video-embed__player .video-js .vjs-poster {

    border-radius: 1px;
}


/* ==========================================================
 * MISSING VIDEO
 * ========================================================== */

.afafka-video-missing {

    padding:
        12px
        14px;

    border:
        1px solid
        var(--av-border, #E2D5C8);

    border-radius: 4px;

    background:
        #FEF7EF;

    color:
        #5A3A23;

    font-size:
        14px;
}


/* ==========================================================
 * MOBILE
 * ========================================================== */

@media (max-width: 767px) {

    .afafka-video-embed {

        margin:
            22px auto;

        padding:
            6px;

        border-radius:
            3px;
    }


    .afafka-video-embed__top {

        min-height:
            28px;

        padding:
            0
            3px
            6px;
    }


    .afafka-video-embed__title {

        font-size:
            12px;
    }


    .afafka-video-embed__player,
    .afafka-video-embed__player .video-js,
    .afafka-video-embed__player .video-js .vjs-tech,
    .afafka-video-embed__player .video-js .vjs-poster {

        border-radius:
            1px;
    }
}

/* ===== AFAFKA PREMIUM VIDEO FRAME START ===== */


/* ==========================================================
 * AFAFKA PREMIUM VIDEO FRAME
 *
 * Квадратний, легкий, теплий стиль.
 * Без великих rounded-кутів.
 * ========================================================== */

.afafka-video-embed {

    --af-video-dark: #452F1B;
    --af-video-brown: #5A3A23;
    --af-video-hover: #7A5132;

    --af-video-text: #5B5048;

    --af-video-border: #E2D5C8;
    --af-video-soft: #F2E6DA;
    --af-video-light: #FEF7EF;


    position: relative;

    width: 100%;

    margin:
        32px
        auto;


    /*
     * Трохи більше повітря навколо відео.
     */

    padding:
        9px;


    /*
     * Дуже тонка тепла рамка.
     */

    border:
        1px solid
        rgba(90, 58, 35, 0.14);


    /*
     * Сайт квадратний —
     * залишаємо лише мінімальне пом'якшення.
     */

    border-radius:
        4px;


    /*
     * Напівпрозорий теплий фон.
     */

    background:
        linear-gradient(
            145deg,
            rgba(254, 247, 239, 0.92) 0%,
            rgba(254, 247, 239, 0.78) 45%,
            rgba(242, 230, 218, 0.68) 100%
        );


    /*
     * Легка "глибина":
     *
     * 1 — велика м'яка тінь;
     * 2 — невелика ближня тінь;
     * 3 — внутрішній світлий highlight.
     */

    box-shadow:

        0 18px 48px
        rgba(69, 47, 27, 0.09),

        0 4px 12px
        rgba(69, 47, 27, 0.07),

        inset 0 1px 0
        rgba(255, 255, 255, 0.72);


    /*
     * Дуже легкий glass effect.
     * Якщо браузер не підтримує —
     * просто ігнорується.
     */

    backdrop-filter:
        blur(8px)
        saturate(108%);

    -webkit-backdrop-filter:
        blur(8px)
        saturate(108%);


    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}


/* ==========================================================
 * SUBTLE HOVER
 * ========================================================== */

.afafka-video-embed:hover {

    border-color:
        rgba(90, 58, 35, 0.20);


    box-shadow:

        0 22px 56px
        rgba(69, 47, 27, 0.11),

        0 5px 14px
        rgba(69, 47, 27, 0.08),

        inset 0 1px 0
        rgba(255, 255, 255, 0.80);
}


/* ==========================================================
 * ВЕРХНЯ ЛІНІЯ / TITLE
 * ========================================================== */

.afafka-video-embed__top {

    display: flex;

    align-items: center;

    min-height:
        31px;


    padding:

        1px
        6px
        8px
        6px;


    margin-bottom:
        1px;


    /*
     * Дуже легкий separator.
     */

    border-bottom:
        1px solid
        rgba(90, 58, 35, 0.07);
}


/* ==========================================================
 * TITLE
 * ========================================================== */

.afafka-video-embed__title {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;


    font-size:
        13px;

    line-height:
        1.35;

    font-weight:
        600;

    letter-spacing:
        0.01em;


    color:
        rgba(69, 47, 27, 0.78);
}


/* ==========================================================
 * PLAYER INNER FRAME
 * ========================================================== */

.afafka-video-embed__player {

    position: relative;

    overflow: hidden;


    /*
     * Темна тонка рамка без великих кутів.
     */

    border:
        1px solid
        rgba(69, 47, 27, 0.20);


    border-radius:
        2px;


    background:
        #000000;


    /*
     * Відео трохи "сидить" всередині картки.
     */

    box-shadow:

        0 10px 26px
        rgba(69, 47, 27, 0.13),

        0 2px 5px
        rgba(0, 0, 0, 0.11),

        0 0 0 1px
        rgba(255, 255, 255, 0.025);


    transition:
        box-shadow .22s ease,
        border-color .22s ease;
}


/* ==========================================================
 * PLAYER HOVER
 * ========================================================== */

.afafka-video-embed:hover
.afafka-video-embed__player {

    border-color:
        rgba(69, 47, 27, 0.27);


    box-shadow:

        0 12px 30px
        rgba(69, 47, 27, 0.16),

        0 2px 6px
        rgba(0, 0, 0, 0.12),

        0 0 0 1px
        rgba(255, 255, 255, 0.03);
}


/* ==========================================================
 * VIDEO.JS
 * ========================================================== */

.afafka-video-embed__player .video-js {

    display: block;

    width: 100%;

    max-width: 100%;

    border-radius:
        1px !important;
}


.afafka-video-embed__player
.video-js
.vjs-tech,

.afafka-video-embed__player
.video-js
.vjs-poster {

    border-radius:
        1px !important;
}


/* ==========================================================
 * ЛЕГКИЙ ВНУТРІШНІЙ БЛИК НАД ВІДЕО
 *
 * Не заважає клікам.
 * ========================================================== */

.afafka-video-embed__player::after {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 1px;


    background:
        rgba(255, 255, 255, 0.13);


    pointer-events:
        none;


    z-index:
        20;
}


/* ==========================================================
 * NO TITLE
 *
 * Якщо title вимкнено через shortcode,
 * відео просто красиво стоїть у рамці.
 * ========================================================== */

.afafka-video-embed
> .afafka-video-embed__player:first-child {

    margin-top:
        0;
}


/* ==========================================================
 * MOBILE
 * ========================================================== */

@media (max-width: 767px) {

    .afafka-video-embed {

        margin:
            24px
            auto;


        padding:
            6px;


        border-radius:
            3px;


        box-shadow:

            0 12px 30px
            rgba(69, 47, 27, 0.08),

            0 3px 8px
            rgba(69, 47, 27, 0.06),

            inset 0 1px 0
            rgba(255, 255, 255, 0.68);
    }


    .afafka-video-embed:hover {

        box-shadow:

            0 12px 30px
            rgba(69, 47, 27, 0.08),

            0 3px 8px
            rgba(69, 47, 27, 0.06),

            inset 0 1px 0
            rgba(255, 255, 255, 0.68);
    }


    .afafka-video-embed__top {

        min-height:
            28px;


        padding:
            0
            4px
            6px;
    }


    .afafka-video-embed__title {

        font-size:
            12px;
    }


    .afafka-video-embed__player {

        border-radius:
            1px;


        box-shadow:

            0 7px 18px
            rgba(69, 47, 27, 0.12),

            0 1px 4px
            rgba(0, 0, 0, 0.10);
    }
}


/* ===== AFAFKA PREMIUM VIDEO FRAME END ===== */


/* ===== AFAFKA VIDEO SEAMLESS PLAYER START ===== */

/*
 * Прибираємо внутрішню рамку навколо самого відео.
 * Зовнішня AFAFKA-картка залишається.
 */

.afafka-video-embed__player {
    border: none !important;
    outline: none !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/*
 * Прибираємо також hover-тінь,
 * яку додавали раніше.
 */

.afafka-video-embed:hover
.afafka-video-embed__player {
    border: none !important;

    box-shadow: none !important;
}


/*
 * Сам Video.js теж без рамки.
 */

.afafka-video-embed__player .video-js {
    border: none !important;
    outline: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/*
 * Саме відео та poster.
 */

.afafka-video-embed__player .video-js .vjs-tech,
.afafka-video-embed__player .video-js .vjs-poster {
    border: none !important;
    outline: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/*
 * Раніше ми додавали тонкий внутрішній
 * світлий highlight поверх відео.
 * Він тут теж не потрібний.
 */

.afafka-video-embed__player::after {
    display: none !important;
}


/* ===== AFAFKA VIDEO SEAMLESS PLAYER END ===== */

/* ===== AFAFKA SAFE VIDEO FRAME START ===== */

/* ==========================================================
 * AFAFKA SAFE VIDEO FRAME
 *
 * Мета:
 * - вписати рамку в сайт
 * - дати м'яку тінь від самого відео
 * - не ламати Video.js
 * ========================================================== */


/* ----------------------------------------------------------
 * ЗОВНІШНЯ РАМКА В СТИЛІ САЙТУ
 * ---------------------------------------------------------- */

.afafka-video-embed {
    margin: 30px auto !important;
    padding: 10px !important;

    background: #FEF7EF !important;
    border: 1px solid #E2D5C8 !important;
    border-radius: 6px !important;

    box-shadow:
        0 8px 22px rgba(69, 47, 27, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}


/* Hover самої картки — дуже делікатний */
.afafka-video-embed:hover {
    box-shadow:
        0 10px 28px rgba(69, 47, 27, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}


/* ----------------------------------------------------------
 * TITLE
 * ---------------------------------------------------------- */

.afafka-video-embed__top {
    padding: 2px 4px 10px 4px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.afafka-video-embed__title {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #5B5048 !important;
    margin: 0 !important;
}


/* ----------------------------------------------------------
 * САМИЙ БЛОК ВІДЕО
 *
 * Головна тінь саме тут.
 * ---------------------------------------------------------- */

.afafka-video-embed__player {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 4px !important;
    overflow: hidden !important;

    box-shadow:
        0 16px 36px rgba(69, 47, 27, 0.14),
        0 4px 12px rgba(69, 47, 27, 0.08) !important;

    background: transparent !important;
}


/* Hover — лише трохи підсилюємо глибину */
.afafka-video-embed:hover .afafka-video-embed__player {
    box-shadow:
        0 18px 40px rgba(69, 47, 27, 0.16),
        0 5px 14px rgba(69, 47, 27, 0.09) !important;
}


/* ----------------------------------------------------------
 * ВНУТРІШНІ ЕЛЕМЕНТИ ПЛЕЄРА
 *
 * Не задаємо width/height/display насильно,
 * тільки акуратно підрівнюємо кути і прибираємо
 * зайві рамки/тіні.
 * ---------------------------------------------------------- */

.afafka-video-embed__player .video-js,
.afafka-video-embed__player .vim-css.video-js,
.afafka-video-embed__player .vjs-tech,
.afafka-video-embed__player .vjs-poster,
.afafka-video-embed__player .vjs-poster img,
.afafka-video-embed__player video {
    border-radius: 4px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* На всяк випадок прибираємо декоративні псевдоелементи,
   якщо раніше десь лишилися */
.afafka-video-embed__player::before,
.afafka-video-embed__player::after {
    display: none !important;
    content: none !important;
}


/* ----------------------------------------------------------
 * MOBILE
 * ---------------------------------------------------------- */

@media (max-width: 767px) {
    .afafka-video-embed {
        margin: 22px auto !important;
        padding: 7px !important;
        border-radius: 4px !important;
    }

    .afafka-video-embed__top {
        padding: 1px 2px 8px 2px !important;
    }

    .afafka-video-embed__title {
        font-size: 13px !important;
    }

    .afafka-video-embed__player,
    .afafka-video-embed__player .video-js,
    .afafka-video-embed__player .vim-css.video-js,
    .afafka-video-embed__player .vjs-tech,
    .afafka-video-embed__player .vjs-poster,
    .afafka-video-embed__player .vjs-poster img,
    .afafka-video-embed__player video {
        border-radius: 3px !important;
    }

    .afafka-video-embed__player {
        box-shadow:
            0 12px 28px rgba(69, 47, 27, 0.12),
            0 4px 10px rgba(69, 47, 27, 0.07) !important;
    }

    .afafka-video-embed:hover .afafka-video-embed__player {
        box-shadow:
            0 12px 28px rgba(69, 47, 27, 0.12),
            0 4px 10px rgba(69, 47, 27, 0.07) !important;
    }
}

/* ===== AFAFKA SAFE VIDEO FRAME END ===== */

/* ===== AFAFKA VIDEO SHADOW TUNING START ===== */


/* ==========================================================
 * САМ КОНТЕЙНЕР ВІДЕО
 *
 * Нічого всередині Video.js не змінюємо.
 * ========================================================== */

.afafka-video-embed__player {

    /*
     * Майже квадратний кут.
     * Менше відчуття "білої картки всередині картки".
     */

    border-radius:
        2px !important;


    /*
     * Тінь у два рівні:
     *
     * 1. ближня — дає відчуття глибини прямо біля відео;
     * 2. дальня — дуже м'яко розчиняється в бежевій рамці.
     */

    box-shadow:

        0 3px 8px
        rgba(69, 47, 27, 0.11),

        0 16px 34px
        rgba(69, 47, 27, 0.13) !important;
}


/* ==========================================================
 * HOVER
 *
 * Дуже легке посилення.
 * Відео нікуди не рухається.
 * ========================================================== */

.afafka-video-embed:hover
.afafka-video-embed__player {

    box-shadow:

        0 4px 9px
        rgba(69, 47, 27, 0.12),

        0 18px 38px
        rgba(69, 47, 27, 0.15) !important;
}


/* ==========================================================
 * MOBILE
 * ========================================================== */

@media (max-width: 767px) {

    .afafka-video-embed__player {

        border-radius:
            2px !important;


        box-shadow:

            0 2px 6px
            rgba(69, 47, 27, 0.10),

            0 12px 26px
            rgba(69, 47, 27, 0.11) !important;
    }


    .afafka-video-embed:hover
    .afafka-video-embed__player {

        box-shadow:

            0 2px 6px
            rgba(69, 47, 27, 0.10),

            0 12px 26px
            rgba(69, 47, 27, 0.11) !important;
    }
}


/* ===== AFAFKA VIDEO SHADOW TUNING END ===== */

/* ===== AFAFKA FINAL VIDEO POLISH START ===== */


/* ==========================================================
 * 1. ЗОВНІШНЯ БЕЖЕВА РАМКА
 *
 * Вона залишається,
 * але майже не відкидає власної тіні.
 * ========================================================== */

.afafka-video-embed {

    /*
     * Зберігаємо AFAFKA-картку,
     * але прибираємо ефект "картка в картці".
     */

    box-shadow:

        0 3px 10px
        rgba(69, 47, 27, 0.035),

        inset 0 1px 0
        rgba(255, 255, 255, 0.62) !important;
}


.afafka-video-embed:hover {

    box-shadow:

        0 4px 12px
        rgba(69, 47, 27, 0.045),

        inset 0 1px 0
        rgba(255, 255, 255, 0.68) !important;
}


/* ==========================================================
 * 2. TITLE
 *
 * New collection трохи ближче до самого відео.
 * ========================================================== */

.afafka-video-embed__top {

    padding:

        2px
        4px
        7px
        4px !important;
}


.afafka-video-embed__title {

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
 * 3. ТІНЬ ВІД САМОГО ВІДЕО
 *
 * Основний ефект тепер саме тут.
 * ========================================================== */

.afafka-video-embed__player {

    /*
     * Ближній шар —
     * дуже м'яко відділяє відео від рамки.
     *
     * Дальній шар —
     * дає широкий розсіяний ефект.
     */

    box-shadow:

        0 4px 12px
        rgba(69, 47, 27, 0.10),

        0 18px 44px
        rgba(69, 47, 27, 0.14),

        0 30px 70px
        rgba(69, 47, 27, 0.07) !important;
}


/* ==========================================================
 * HOVER
 *
 * Лише дуже легке посилення.
 * Геометрію відео не змінюємо.
 * ========================================================== */

.afafka-video-embed:hover
.afafka-video-embed__player {

    box-shadow:

        0 5px 14px
        rgba(69, 47, 27, 0.11),

        0 20px 48px
        rgba(69, 47, 27, 0.15),

        0 32px 74px
        rgba(69, 47, 27, 0.08) !important;
}


/* ==========================================================
 * MOBILE
 * ========================================================== */

@media (max-width: 767px) {

    .afafka-video-embed {

        box-shadow:

            0 2px 8px
            rgba(69, 47, 27, 0.03),

            inset 0 1px 0
            rgba(255, 255, 255, 0.58) !important;
    }


    .afafka-video-embed__top {

        padding:

            1px
            3px
            6px
            3px !important;
    }


    .afafka-video-embed__player {

        box-shadow:

            0 3px 9px
            rgba(69, 47, 27, 0.09),

            0 13px 30px
            rgba(69, 47, 27, 0.12),

            0 22px 48px
            rgba(69, 47, 27, 0.055) !important;
    }


    .afafka-video-embed:hover
    .afafka-video-embed__player {

        box-shadow:

            0 3px 9px
            rgba(69, 47, 27, 0.09),

            0 13px 30px
            rgba(69, 47, 27, 0.12),

            0 22px 48px
            rgba(69, 47, 27, 0.055) !important;
    }
}


/* ===== AFAFKA FINAL VIDEO POLISH END ===== */


/* ===== AFAFKA VIDEO STRONGER SHADOW START ===== */

/*
 * Тільки трохи підсилюємо тінь від самого відео.
 * Геометрію, рамку і Video.js не чіпаємо.
 */

.afafka-video-embed__player {
    box-shadow:
        0 5px 14px rgba(69, 47, 27, 0.12),
        0 20px 50px rgba(69, 47, 27, 0.17),
        0 34px 78px rgba(69, 47, 27, 0.085) !important;
}


/* Легкий hover */
.afafka-video-embed:hover .afafka-video-embed__player {
    box-shadow:
        0 6px 16px rgba(69, 47, 27, 0.13),
        0 22px 54px rgba(69, 47, 27, 0.18),
        0 36px 82px rgba(69, 47, 27, 0.095) !important;
}


/* На смартфоні трохи слабше */
@media (max-width: 767px) {

    .afafka-video-embed__player {
        box-shadow:
            0 4px 11px rgba(69, 47, 27, 0.11),
            0 15px 34px rgba(69, 47, 27, 0.14),
            0 25px 54px rgba(69, 47, 27, 0.07) !important;
    }

    .afafka-video-embed:hover .afafka-video-embed__player {
        box-shadow:
            0 4px 11px rgba(69, 47, 27, 0.11),
            0 15px 34px rgba(69, 47, 27, 0.14),
            0 25px 54px rgba(69, 47, 27, 0.07) !important;
    }
}

/* ===== AFAFKA VIDEO STRONGER SHADOW END ===== */



/* ===== AFAFKA VISIBLE SHADOWS START ===== */


/* ==========================================================
 * ЗОВНІШНЯ БЕЖЕВА РАМКА
 *
 * Тінь від рамки на білий сайт.
 * ========================================================== */

.afafka-video-embed {

    /*
     * ВАЖЛИВО:
     * не обрізати тіні внутрішнього відео.
     */

    overflow: visible !important;


    /*
     * Трохи більше простору,
     * щоб тінь від відео було реально видно.
     */

    padding:
        12px !important;


    background:
        #FEF7EF !important;


    border:
        1px solid
        #E2D5C8 !important;


    border-radius:
        6px !important;


    /*
     * ВИДИМА, але м'яка тінь від рамки
     * на білий фон сторінки.
     */

    box-shadow:

        0 18px 45px
        rgba(69, 47, 27, 0.13),

        0 4px 12px
        rgba(69, 47, 27, 0.07),

        inset 0 1px 0
        rgba(255, 255, 255, 0.70) !important;
}


/* ==========================================================
 * TITLE
 * ========================================================== */

.afafka-video-embed__top {

    padding:
        3px
        6px
        10px
        6px !important;
}


/* ==========================================================
 * САМЕ ВІДЕО
 *
 * Тут окрема тінь — вже всередині бежевої рамки.
 * ========================================================== */

.afafka-video-embed__player {

    /*
     * Сам плеєр обрізає тільки своє відео,
     * але його зовнішня тінь виходить назовні.
     */

    overflow:
        hidden !important;


    border:
        0 !important;


    outline:
        0 !important;


    border-radius:
        3px !important;


    /*
     * ВИДИМА ТІНЬ ВІД САМОГО ВІДЕО.
     *
     * Перший шар — прямо біля краю.
     * Другий — м'яка широка тінь.
     */

    box-shadow:

        0 5px 12px
        rgba(69, 47, 27, 0.20),

        0 16px 34px
        rgba(69, 47, 27, 0.19) !important;
}


/* ==========================================================
 * HOVER
 * ========================================================== */

.afafka-video-embed:hover {

    box-shadow:

        0 20px 50px
        rgba(69, 47, 27, 0.14),

        0 5px 14px
        rgba(69, 47, 27, 0.08),

        inset 0 1px 0
        rgba(255, 255, 255, 0.75) !important;
}


.afafka-video-embed:hover
.afafka-video-embed__player {

    box-shadow:

        0 6px 14px
        rgba(69, 47, 27, 0.22),

        0 18px 38px
        rgba(69, 47, 27, 0.21) !important;
}


/* ==========================================================
 * MOBILE
 * ========================================================== */

@media (max-width: 767px) {

    .afafka-video-embed {

        padding:
            9px !important;


        box-shadow:

            0 14px 34px
            rgba(69, 47, 27, 0.12),

            0 3px 9px
            rgba(69, 47, 27, 0.07) !important;
    }


    .afafka-video-embed__player {

        box-shadow:

            0 4px 10px
            rgba(69, 47, 27, 0.18),

            0 12px 26px
            rgba(69, 47, 27, 0.17) !important;
    }


    .afafka-video-embed:hover
    .afafka-video-embed__player {

        box-shadow:

            0 4px 10px
            rgba(69, 47, 27, 0.18),

            0 12px 26px
            rgba(69, 47, 27, 0.17) !important;
    }
}


/* ===== AFAFKA VISIBLE SHADOWS END ===== */

/* ===== AFAFKA EDITORIAL PLAY BUTTON START ===== */


/* ==========================================================
 * EDITORIAL BIG PLAY BUTTON
 *
 * Мета:
 * - менше "технічності"
 * - легка майже прозора заливка
 * - м'який fashion/editorial вигляд
 * ========================================================== */

.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button,
.afafka-video-embed__player .video-js .vjs-big-play-button {

    /*
     * Трохи компактніша і чистіша кнопка.
     */

    width: 64px !important;
    height: 64px !important;
    line-height: 64px !important;

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

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

    /*
     * Майже прозора заливка.
     */

    background: rgba(90, 58, 35, 0.14) !important;
    background-color: rgba(90, 58, 35, 0.14) !important;

    /*
     * Дуже легка світла рамка.
     */

    border: 1px solid rgba(254, 247, 239, 0.78) !important;
    border-radius: 10px !important;

    /*
     * М'яка fashion-тінь.
     */

    box-shadow:
        0 10px 26px rgba(69, 47, 27, 0.16),
        0 2px 8px rgba(69, 47, 27, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;

    backdrop-filter: blur(5px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(110%) !important;

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


/* ----------------------------------------------------------
 * ІКОНКА PLAY
 * ---------------------------------------------------------- */

.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.afafka-video-embed__player .video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button .vjs-svg-icon,
.afafka-video-embed__player .video-js .vjs-big-play-button .vjs-svg-icon {

    color: #FFFFFF !important;
    fill: #FFFFFF !important;

    opacity: 0.96 !important;

    text-shadow: none !important;
    filter: none !important;
}


/* ----------------------------------------------------------
 * HOVER / FOCUS
 * ---------------------------------------------------------- */

.afafka-video-embed__player .vim-css.video-js:hover .vjs-big-play-button,
.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button:hover,
.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button:focus,
.afafka-video-embed__player .video-js:hover .vjs-big-play-button,
.afafka-video-embed__player .video-js .vjs-big-play-button:hover,
.afafka-video-embed__player .video-js .vjs-big-play-button:focus {

    background: rgba(90, 58, 35, 0.20) !important;
    background-color: rgba(90, 58, 35, 0.20) !important;

    border-color: rgba(254, 247, 239, 0.92) !important;

    box-shadow:
        0 12px 30px rgba(69, 47, 27, 0.19),
        0 3px 10px rgba(69, 47, 27, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;

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


/* ----------------------------------------------------------
 * ACTIVE
 * ---------------------------------------------------------- */

.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button:active,
.afafka-video-embed__player .video-js .vjs-big-play-button:active {

    background: rgba(90, 58, 35, 0.24) !important;
    background-color: rgba(90, 58, 35, 0.24) !important;

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


/* ----------------------------------------------------------
 * PAUSED STATE
 * Коли відео поставлене на паузу після старту.
 * ---------------------------------------------------------- */

.afafka-video-embed__player .vim-css.video-js.vjs-has-started.vjs-paused:not(.vjs-seeking):not(.vjs-scrubbing):not(.vjs-error) .vjs-big-play-button,
.afafka-video-embed__player .video-js.vjs-has-started.vjs-paused:not(.vjs-seeking):not(.vjs-scrubbing):not(.vjs-error) .vjs-big-play-button {
    display: block !important;
}


/* ----------------------------------------------------------
 * MOBILE
 * ---------------------------------------------------------- */

@media (max-width: 767px) {

    .afafka-video-embed__player .vim-css.video-js .vjs-big-play-button,
    .afafka-video-embed__player .video-js .vjs-big-play-button {

        width: 56px !important;
        height: 56px !important;
        line-height: 56px !important;

        border-radius: 8px !important;

        background: rgba(90, 58, 35, 0.16) !important;
        background-color: rgba(90, 58, 35, 0.16) !important;

        box-shadow:
            0 8px 20px rgba(69, 47, 27, 0.15),
            0 2px 6px rgba(69, 47, 27, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    }

    .afafka-video-embed__player .vim-css.video-js:hover .vjs-big-play-button,
    .afafka-video-embed__player .vim-css.video-js .vjs-big-play-button:hover,
    .afafka-video-embed__player .vim-css.video-js .vjs-big-play-button:focus,
    .afafka-video-embed__player .video-js:hover .vjs-big-play-button,
    .afafka-video-embed__player .video-js .vjs-big-play-button:hover,
    .afafka-video-embed__player .video-js .vjs-big-play-button:focus {

        background: rgba(90, 58, 35, 0.20) !important;
        background-color: rgba(90, 58, 35, 0.20) !important;

        box-shadow:
            0 9px 22px rgba(69, 47, 27, 0.16),
            0 2px 7px rgba(69, 47, 27, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }
}


/* ===== AFAFKA EDITORIAL PLAY BUTTON END ===== */

/* ===== AFAFKA ROUND CENTER PLAY START ===== */


/* ==========================================================
 * КРУГЛА КНОПКА PLAY
 * І ЖОРСТКЕ ЦЕНТРУВАННЯ
 * ========================================================== */

/*
 * ВАЖЛИВО:
 * Ставимо button точно по центру через left/top + translate,
 * прибираємо будь-які margin offset,
 * right/bottom скидаємо, щоб ніщо не зсувало її вправо.
 */

.afafka-video-embed__player .video-js .vjs-big-play-button,
.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;

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

    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;

    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;

    padding: 0 !important;
    line-height: 64px !important;

    border-radius: 999px !important;

    background: rgba(90, 58, 35, 0.16) !important;
    background-color: rgba(90, 58, 35, 0.16) !important;

    border: 1px solid rgba(254, 247, 239, 0.82) !important;

    box-shadow:
        0 10px 26px rgba(69, 47, 27, 0.16),
        0 2px 8px rgba(69, 47, 27, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;

    backdrop-filter: blur(5px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(110%) !important;

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


/* ----------------------------------------------------------
 * ІКОНКА PLAY
 * ---------------------------------------------------------- */

.afafka-video-embed__player .video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.afafka-video-embed__player .video-js .vjs-big-play-button .vjs-svg-icon,
.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button .vjs-svg-icon {

    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    opacity: 0.98 !important;

    text-shadow: none !important;
    filter: none !important;
}


/* ----------------------------------------------------------
 * HOVER / FOCUS
 * ---------------------------------------------------------- */

.afafka-video-embed__player .video-js:hover .vjs-big-play-button,
.afafka-video-embed__player .video-js .vjs-big-play-button:hover,
.afafka-video-embed__player .video-js .vjs-big-play-button:focus,
.afafka-video-embed__player .vim-css.video-js:hover .vjs-big-play-button,
.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button:hover,
.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button:focus {

    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;

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

    background: rgba(90, 58, 35, 0.22) !important;
    background-color: rgba(90, 58, 35, 0.22) !important;

    border-color: rgba(254, 247, 239, 0.95) !important;

    box-shadow:
        0 12px 30px rgba(69, 47, 27, 0.19),
        0 3px 10px rgba(69, 47, 27, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}


/* ----------------------------------------------------------
 * ACTIVE
 * ---------------------------------------------------------- */

.afafka-video-embed__player .video-js .vjs-big-play-button:active,
.afafka-video-embed__player .vim-css.video-js .vjs-big-play-button:active {

    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;

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

    background: rgba(90, 58, 35, 0.26) !important;
    background-color: rgba(90, 58, 35, 0.26) !important;
}


/* ----------------------------------------------------------
 * КОЛИ ВІДЕО НА ПАУЗІ ПІСЛЯ СТАРТУ
 * ---------------------------------------------------------- */

.afafka-video-embed__player .video-js.vjs-has-started.vjs-paused:not(.vjs-seeking):not(.vjs-scrubbing):not(.vjs-error) .vjs-big-play-button,
.afafka-video-embed__player .vim-css.video-js.vjs-has-started.vjs-paused:not(.vjs-seeking):not(.vjs-scrubbing):not(.vjs-error) .vjs-big-play-button {
    display: block !important;
}


/* ----------------------------------------------------------
 * MOBILE
 *
 * Саме тут фіксимо з'їзд вправо.
 * Ще раз жорстко задаємо центр.
 * ---------------------------------------------------------- */

@media (max-width: 767px) {

    .afafka-video-embed__player .video-js .vjs-big-play-button,
    .afafka-video-embed__player .vim-css.video-js .vjs-big-play-button {

        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;

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

        margin: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;

        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;

        line-height: 56px !important;

        border-radius: 999px !important;

        background: rgba(90, 58, 35, 0.18) !important;
        background-color: rgba(90, 58, 35, 0.18) !important;

        box-shadow:
            0 8px 20px rgba(69, 47, 27, 0.15),
            0 2px 6px rgba(69, 47, 27, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    }


    .afafka-video-embed__player .video-js:hover .vjs-big-play-button,
    .afafka-video-embed__player .video-js .vjs-big-play-button:hover,
    .afafka-video-embed__player .video-js .vjs-big-play-button:focus,
    .afafka-video-embed__player .vim-css.video-js:hover .vjs-big-play-button,
    .afafka-video-embed__player .vim-css.video-js .vjs-big-play-button:hover,
    .afafka-video-embed__player .vim-css.video-js .vjs-big-play-button:focus {

        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;

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


    .afafka-video-embed__player .video-js .vjs-big-play-button:active,
    .afafka-video-embed__player .vim-css.video-js .vjs-big-play-button:active {

        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;

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


/* ===== AFAFKA ROUND CENTER PLAY END ===== */