/* ==========================================================
   UFA BUM TORG
   COOKIE BANNER
   ========================================================== */


/* ==========================================================
   ОСНОВНОЙ КОНТЕЙНЕР
   ========================================================== */

.ubt-cookie {
    --cookie-accent: #3159e8;
    --cookie-accent-hover: #274fd5;

    --cookie-text: #333333;
    --cookie-title: #353535;

    --cookie-border: #eeeeee;
    --cookie-background: #ffffff;


    position: fixed;

    z-index: 99999;


    /*
     * На компьютере оставляем пространство
     * между карточкой и краями экрана.
     */
    left: 30px;
    right: 30px;
    bottom: 20px;


    width: auto;
    max-width: none;


    box-sizing: border-box;


    /*
     * Достаточно воздуха, но баннер
     * не становится слишком высоким.
     */
    padding: 25px 30px 27px;


    background: var(--cookie-background);


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

    border-radius: 5px;


    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.09),
        0 2px 7px rgba(0, 0, 0, 0.035);


    color: var(--cookie-text);


    opacity: 1;

    visibility: visible;

    transform: translateY(0);


    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}


/* ==========================================================
   СКРЫТИЕ
   ========================================================== */

.ubt-cookie--hidden {
    opacity: 0;

    visibility: hidden;

    transform: translateY(18px);

    pointer-events: none;
}


/* ==========================================================
   ВНУТРЕННЯЯ СЕТКА
   ========================================================== */

.ubt-cookie__body {
    display: flex;

    align-items: center;


    width: 100%;


    /*
     * Небольшое расстояние между длинным текстом
     * и колонкой кнопок.
     */
    gap: 35px;
}


/* ==========================================================
   ТЕКСТОВАЯ ОБЛАСТЬ
   ========================================================== */

.ubt-cookie__content {
    flex: 1 1 auto;

    min-width: 0;
}


/* ==========================================================
   ЗАГОЛОВОК
   ========================================================== */

.ubt-cookie__title {
    margin: 0 0 14px;

    padding: 0;


    font-family:
        "Montserrat",
        Arial,
        sans-serif !important;


    font-size: 20px;

    line-height: 1.25;


    font-weight: 600 !important;


    letter-spacing: 0;


    color: var(--cookie-title);


    text-shadow: none !important;
}


/* ==========================================================
   ОСНОВНОЙ ТЕКСТ
   ========================================================== */

.ubt-cookie__description {
    display: block;


    width: 100%;

    max-width: none;


    margin: 0;

    padding: 0;


    /*
     * Намеренно не используем Montserrat.
     *
     * Системный шрифт выглядит легче
     * и ближе к референсу OfficeClass.
     */
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;


    font-size: 16px !important;

    line-height: 1.62 !important;


    font-weight: 400 !important;

    font-style: normal !important;


    /*
     * На случай variable-шрифтов.
     */
    font-variation-settings:
        "wght" 400 !important;


    /*
     * Не позволяем браузеру искусственно
     * создавать жирное начертание.
     */
    font-synthesis: none !important;


    letter-spacing: 0 !important;


    color: #303030;


    text-shadow: none !important;


    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================
   ПЕРЕБИВАЕМ ГЛОБАЛЬНЫЕ СТИЛИ ШАБЛОНА
   ========================================================== */

.ubt-cookie__description *,
.ubt-cookie__description p,
.ubt-cookie__description span,
.ubt-cookie__description div,
.ubt-cookie__description b,
.ubt-cookie__description strong,
.ubt-cookie__description em {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;


    font-size: inherit !important;

    line-height: inherit !important;


    font-weight: 400 !important;

    font-style: normal !important;


    font-variation-settings:
        "wght" 400 !important;


    font-synthesis: none !important;


    letter-spacing: 0 !important;


    text-shadow: none !important;
}


/* ==========================================================
   ССЫЛКА
   ========================================================== */

.ubt-cookie__description a {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;


    font-size: inherit !important;

    line-height: inherit !important;


    font-weight: 400 !important;

    font-style: normal !important;


    font-variation-settings:
        "wght" 400 !important;


    color: var(--cookie-accent);


    text-decoration: none;


    transition:
        color .2s ease,
        opacity .2s ease;
}


.ubt-cookie__description a:hover {
    text-decoration: underline;

    text-underline-offset: 3px;
}


/* ==========================================================
   КОЛОНКА КНОПОК
   ========================================================== */

.ubt-cookie__actions {
    /*
     * Кнопки намеренно компактные,
     * как на референсе.
     */
    flex: 0 0 155px;


    width: 155px;


    display: flex;

    flex-direction: column;


    gap: 10px;


    margin: 0;

    padding: 0;
}


/* ==========================================================
   ОБЩИЙ СТИЛЬ КНОПОК
   ========================================================== */

.ubt-cookie__button {
    flex: none;


    display: flex;

    align-items: center;

    justify-content: center;


    width: 155px;


    /*
     * Важно:
     * не делаем огромные 50+ px кнопки.
     */
    height: 44px;

    min-height: 44px;


    box-sizing: border-box;


    margin: 0;

    padding: 0 12px;


    font-family:
        "Montserrat",
        Arial,
        sans-serif !important;


    font-size: 11px !important;

    line-height: 1 !important;


    font-weight: 400 !important;


    letter-spacing: .055em;


    text-transform: uppercase;


    border-radius: 3px;


    outline: none;


    cursor: pointer;


    appearance: none;

    -webkit-appearance: none;


    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        opacity .2s ease,
        transform .15s ease;
}


/* Нажатие */

.ubt-cookie__button:active:not(:disabled) {
    transform: translateY(1px);
}


/* Отключённая кнопка */

.ubt-cookie__button:disabled {
    opacity: .55;

    cursor: default;

    transform: none;
}


/* ==========================================================
   ПРИНИМАЮ
   ========================================================== */

.ubt-cookie__button--accept {
    color: #ffffff;


    background: var(--cookie-accent);


    border:
        1px solid
        var(--cookie-accent);
}


.ubt-cookie__button--accept:hover:not(:disabled) {
    color: #ffffff;


    background: var(--cookie-accent-hover);


    border-color:
        var(--cookie-accent-hover);
}


/* ==========================================================
   НЕ ПРИНИМАЮ
   ========================================================== */

.ubt-cookie__button--reject {
    color: var(--cookie-accent);


    background: #ffffff;


    border:
        1px solid
        var(--cookie-accent);
}


.ubt-cookie__button--reject:hover:not(:disabled) {
    color: #ffffff;


    background:
        var(--cookie-accent);


    border-color:
        var(--cookie-accent);
}


/* ==========================================================
   КРЕСТИК
   ========================================================== */

.ubt-cookie__close {
    position: absolute;


    top: 8px;

    right: 8px;


    z-index: 2;


    display: flex;

    align-items: center;

    justify-content: center;


    width: 30px;

    height: 30px;


    margin: 0;

    padding: 0;


    color: #aaaaaa;


    background: transparent;


    border: 0;

    border-radius: 50%;


    outline: none;


    cursor: pointer;


    appearance: none;

    -webkit-appearance: none;


    transition:
        color .2s ease,
        background-color .2s ease;
}


.ubt-cookie__close:hover {
    color: #555555;

    background: #f4f4f4;
}


.ubt-cookie__close svg {
    display: block;


    width: 18px;

    height: 18px;


    pointer-events: none;
}


/* ==========================================================
   НОУТБУК / НЕБОЛЬШОЙ ДЕСКТОП
   ========================================================== */

@media (max-width: 1200px) {

    .ubt-cookie {
        left: 20px;

        right: 20px;

        bottom: 18px;


        padding:
            24px
            26px
            25px;
    }


    .ubt-cookie__body {
        gap: 30px;
    }


    .ubt-cookie__description {
        font-size: 15px !important;

        line-height: 1.6 !important;
    }


    .ubt-cookie__actions {
        flex-basis: 150px;

        width: 150px;
    }


    .ubt-cookie__button {
        width: 150px;

        height: 43px;

        min-height: 43px;


        font-size: 11px !important;
    }
}


/* ==========================================================
   ПЛАНШЕТ
   ========================================================== */

@media (max-width: 900px) {

    .ubt-cookie {
        left: 15px;

        right: 15px;

        bottom: 15px;


        padding:
            23px
            22px
            24px;
    }


    .ubt-cookie__body {
        gap: 25px;
    }


    .ubt-cookie__title {
        margin-bottom: 10px;


        font-size: 18px;
    }


    .ubt-cookie__description {
        font-size: 14px !important;

        line-height: 1.55 !important;
    }


    .ubt-cookie__actions {
        flex-basis: 145px;

        width: 145px;
    }


    .ubt-cookie__button {
        width: 145px;


        height: 42px;

        min-height: 42px;


        font-size: 10px !important;
    }
}


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

@media (max-width: 700px) {

    /*
     * На телефоне баннер становится
     * полноценной нижней панелью
     * от края до края.
     */

    .ubt-cookie {
        left: 0;

        right: 0;

        bottom: 0;


        width: 100%;

        max-width: none;


        margin: 0;


        padding:
            21px
            18px
            calc(
                18px
                + env(safe-area-inset-bottom)
            );


        border-left: 0;

        border-right: 0;

        border-bottom: 0;


        border-radius:
            9px
            9px
            0
            0;


        box-shadow:
            0 -7px 25px rgba(0, 0, 0, .10);
    }


    /* --------------------------------
       Общая сетка
       -------------------------------- */

    .ubt-cookie__body {
        display: block;


        width: 100%;


        margin: 0;

        padding: 0;
    }


    /* --------------------------------
       Контент
       -------------------------------- */

    .ubt-cookie__content {
        display: block;


        width: 100%;
    }


    /* --------------------------------
       Заголовок
       -------------------------------- */

    .ubt-cookie__title {
        margin:
            0
            0
            9px;


        padding-right: 35px;


        font-size: 18px;

        line-height: 1.3;


        font-weight: 600 !important;
    }


    /* --------------------------------
       Описание
       -------------------------------- */

    .ubt-cookie__description {
        width: 100%;


        font-size: 14px !important;

        line-height: 1.55 !important;


        font-weight: 400 !important;


        color: #333333;
    }


    /*
     * Повторяем для мобильных,
     * чтобы стили шаблона точно
     * не вернули жирность.
     */

    .ubt-cookie__description *,
    .ubt-cookie__description p,
    .ubt-cookie__description span,
    .ubt-cookie__description div,
    .ubt-cookie__description b,
    .ubt-cookie__description strong,
    .ubt-cookie__description em {
        font-weight: 400 !important;


        font-variation-settings:
            "wght" 400 !important;


        font-synthesis: none !important;
    }


    /* --------------------------------
       Кнопки
       -------------------------------- */

    .ubt-cookie__actions {
        display: flex;


        flex-direction: column;


        width: 100%;


        gap: 8px;


        margin:
            16px
            0
            0;


        padding: 0;
    }


    /*
     * На телефоне кнопки растягиваем,
     * но по высоте они остаются
     * компактными.
     */

    .ubt-cookie__button {
        flex: none;


        width: 100%;


        height: 40px;

        min-height: 40px;


        padding:
            0
            14px;


        font-size: 11px !important;

        line-height: 1 !important;


        font-weight: 400 !important;


        letter-spacing: .045em;


        border-radius: 3px;
    }


    /* --------------------------------
       Крестик
       -------------------------------- */

    .ubt-cookie__close {
        top: 10px;

        right: 10px;


        width: 30px;

        height: 30px;
    }
}


/* ==========================================================
   МАЛЕНЬКИЙ ТЕЛЕФОН
   ========================================================== */

@media (max-width: 420px) {

    .ubt-cookie {
        padding:
            19px
            15px
            calc(
                15px
                + env(safe-area-inset-bottom)
            );
    }


    .ubt-cookie__title {
        margin-bottom: 8px;


        font-size: 17px;
    }


    .ubt-cookie__description {
        font-size: 13px !important;

        line-height: 1.5 !important;
    }


    .ubt-cookie__actions {
        margin-top: 14px;


        gap: 7px;
    }


    .ubt-cookie__button {
        height: 39px;

        min-height: 39px;


        font-size: 10px !important;
    }
}