/* =========================================================
   БАННЕР GETCOURSE — КОРАЛЛОВЫЕ ПИОНЫ
   ========================================================= */

.common-banner-wrapper.hide_banners {
    display: none !important;
}


/* =========================================================
   ОБЁРТКА
   ========================================================= */

.info-wrapper .common-banner-wrapper,
.common-banner-wrapper {
    position: fixed !important;
    left: 22px !important;
    bottom: 18px !important;
    z-index: 999999 !important;

    display: block !important;

    width: 700px !important;
    max-width: calc(100vw - 44px) !important;

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

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


/* =========================================================
   БАННЕР
   ========================================================= */

.common-banner-wrapper .common-banner {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    height: 120px !important;

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

    overflow: hidden !important;

    background: linear-gradient(
        135deg,
        #F8FCFF 0%,
        #EDF8FF 55%,
        #E1F3FF 100%
    ) !important;

    border: 1px solid #C8E5F7 !important;
    border-radius: 20px !important;

    box-shadow:
        0 15px 35px rgba(54, 96, 125, .16),
        0 3px 10px rgba(54, 96, 125, .07) !important;

    box-sizing: border-box !important;
}


/* голубая полоска слева */

.common-banner-wrapper .common-banner::before {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    width: 5px !important;

    background: #ff0000 !important;

    z-index: 10 !important;
}


/* =========================================================
   КАРТИНКА
   ========================================================= */

.common-banner-wrapper .banner-logo.desc {
    display: block !important;

    width: 120px !important;
    height: 120px !important;

    min-width: 120px !important;
    max-width: 120px !important;

    min-height: 120px !important;
    max-height: 120px !important;

    flex: 0 0 120px !important;

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

    object-fit: cover !important;
    object-position: center !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* вторую картинку скрываем */

.common-banner-wrapper .banner-logo.mob {
    display: none !important;
}


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

.common-banner-wrapper .banner-wrapper-content {
    position: relative !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;
    height: 100% !important;

    gap: 18px !important;

    margin: 0 !important;

    padding:
        14px
        25px
        14px
        24px !important;

    background: transparent !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ССЫЛКА С ТЕКСТОМ
   ========================================================= */

.common-banner-wrapper .banner-wrapper-content > a:first-child {
    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

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

    background: none !important;
    border: none !important;

    box-shadow: none !important;

    color: inherit !important;

    text-decoration: none !important;
}


/* =========================================================
   ТЕКСТ
   ========================================================= */

.common-banner-wrapper .banner-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    gap: 8px !important;

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

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

    background: transparent !important;
}


/* =========================================================
   ДАТА
   ========================================================= */

.common-banner-wrapper .banner-label {
    position: static !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    padding: 5px 10px !important;

    background: #D7EFFF !important;

    border: 1px solid #BFE1F7 !important;
    border-radius: 50px !important;

    box-shadow: none !important;

    color: #237CB6 !important;

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

    font-size: 9px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: .07em !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;
}


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

.common-banner-wrapper h3.banner-title,
.common-banner-wrapper .banner-title {
    display: block !important;

    position: static !important;

    width: 100% !important;

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

    background: none !important;
    border: none !important;

    color: #294E68 !important;

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

    font-size: 15px !important;
    font-weight: 700 !important;

    line-height: 1.25 !important;

    letter-spacing: 0 !important;

    text-align: left !important;
    text-transform: uppercase !important;

    box-shadow: none !important;
}


/* =========================================================
   ПРАВАЯ ЧАСТЬ
   ========================================================= */

.common-banner-wrapper .banner-content-right {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 150px !important;

    width: 150px !important;

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

    background: transparent !important;
}


/* =========================================================
   КНОПКА
   ВАЖНО: перебиваем стили GetCourse
   ========================================================= */

html body .common-banner-wrapper .common-banner a.banner-link,
html body .common-banner-wrapper .banner-content-right a.banner-link,
html body .common-banner-wrapper a.banner-link {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;

    height: 48px !important;
    min-height: 48px !important;

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

    /* СИНИЙ ФОН КНОПКИ */

    background-color: #ff0000 !important;

    background-image: linear-gradient(
        135deg,
        #ff0000 0%,
        #ff0000 55%,
        #ff0000 100%
    ) !important;

    border: 1px solid #ff0000 !important;

    border-radius: 14px !important;

    box-shadow:
        0 8px 18px rgba(28, 121, 188, .30),
        inset 0 1px 0 rgba(255,255,255,.30) !important;

    color: #FFFFFF !important;

    opacity: 1 !important;
    visibility: visible !important;

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

    font-size: 11px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: .04em !important;

    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;

    cursor: pointer !important;

    overflow: hidden !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}


/* КНОПКА ПРИ НАВЕДЕНИИ */

html body .common-banner-wrapper a.banner-link:hover {
    background-color: #176EB5 !important;

    background-image: linear-gradient(
        135deg,
        #51BDF0 0%,
        #237FC9 55%,
        #125F9F 100%
    ) !important;

    border-color: #176EB5 !important;

    color: #FFFFFF !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 11px 22px rgba(28, 121, 188, .36) !important;
}


/* =========================================================
   БЛИК НА КНОПКЕ
   ========================================================= */

html body .common-banner-wrapper a.banner-link::after {
    content: "" !important;

    position: absolute !important;

    top: -100% !important;
    left: -45% !important;

    width: 25% !important;
    height: 300% !important;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    ) !important;

    transform: rotate(20deg) !important;

    animation: blueBannerShine 4s ease-in-out infinite !important;

    pointer-events: none !important;
}


@keyframes blueBannerShine {

    0% {
        left: -45%;
    }

    25% {
        left: 130%;
    }

    100% {
        left: 130%;
    }

}


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

html body .common-banner-wrapper a.banner-close {
    position: absolute !important;

    top: 6px !important;
    right: 7px !important;

    z-index: 100 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 21px !important;
    height: 21px !important;

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

    background: rgba(38, 139, 210, .09) !important;

    border: none !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    color: #68869B !important;

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

    font-size: 15px !important;
    font-weight: 400 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    cursor: pointer !important;
}


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

@media screen and (max-width: 768px) {

    .info-wrapper .common-banner-wrapper,
    .common-banner-wrapper {
        left: 10px !important;
        right: 10px !important;
        bottom: 60px !important;

        width: auto !important;
        max-width: none !important;
    }


    .common-banner-wrapper .common-banner {
        height: 96px !important;

        border-radius: 16px !important;
    }


    .common-banner-wrapper .banner-logo.desc {
        width: 96px !important;
        height: 96px !important;

        min-width: 96px !important;
        max-width: 96px !important;

        min-height: 96px !important;
        max-height: 96px !important;

        flex: 0 0 96px !important;
    }


    .common-banner-wrapper .banner-wrapper-content {
        height: 96px !important;

        gap: 10px !important;

        padding:
            9px
            12px
            9px
            14px !important;
    }


    .common-banner-wrapper .banner-content {
        gap: 5px !important;
        max-width: none !important;
    }


    .common-banner-wrapper .banner-label {
        padding: 4px 8px !important;

        font-size: 7px !important;
    }


    .common-banner-wrapper h3.banner-title,
    .common-banner-wrapper .banner-title {
        font-size: 11px !important;
        line-height: 1.18 !important;
    }


    .common-banner-wrapper .banner-content-right {
        flex: 0 0 105px !important;
        width: 105px !important;
    }


    html body .common-banner-wrapper a.banner-link {
        width: 105px !important;
        min-width: 105px !important;
        max-width: 105px !important;

        height: 39px !important;
        min-height: 39px !important;

        padding: 0 8px !important;

        border-radius: 11px !important;

        font-size: 8px !important;
    }

}


/* =========================================================
   МОБИЛЬНЫЙ
   ========================================================= */

@media screen and (max-width: 560px) {

    .info-wrapper .common-banner-wrapper,
    .common-banner-wrapper {
        left: 6px !important;
        right: 6px !important;
        bottom: 58px !important;

        width: auto !important;
        max-width: none !important;
    }


    .common-banner-wrapper .common-banner {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;

        width: 100% !important;
        height: 82px !important;

        border-radius: 14px !important;
    }


    /* Картинка */

    .common-banner-wrapper .banner-logo.desc {
        display: block !important;

        width: 82px !important;
        height: 82px !important;

        min-width: 82px !important;
        max-width: 82px !important;

        min-height: 82px !important;
        max-height: 82px !important;

        flex: 0 0 82px !important;

        object-fit: cover !important;
    }


    .common-banner-wrapper .banner-logo.mob {
        display: none !important;
    }


    /* Контент */

    .common-banner-wrapper .banner-wrapper-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;

        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        height: 82px !important;

        gap: 6px !important;

        padding:
            7px
            8px
            7px
            10px !important;
    }


    .common-banner-wrapper
    .banner-wrapper-content > a:first-child {
        flex: 1 1 auto !important;

        min-width: 0 !important;
        width: auto !important;
    }


    .common-banner-wrapper .banner-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;

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

        gap: 4px !important;
    }


    /* Дата */

    .common-banner-wrapper .banner-label {
        display: inline-flex !important;

        width: auto !important;

        padding: 3px 6px !important;

        font-size: 6px !important;

        line-height: 1 !important;

        letter-spacing: .03em !important;
    }


    /* Заголовок — ВАЖНО:
       принудительно маленький */

    .common-banner-wrapper h3.banner-title,
    .common-banner-wrapper .banner-title {
        width: 100% !important;

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

        font-size: 8px !important;
        font-weight: 700 !important;

        line-height: 1.15 !important;

        letter-spacing: 0 !important;

        text-align: left !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* Правая часть */

    .common-banner-wrapper .banner-content-right {
        display: flex !important;

        flex: 0 0 72px !important;

        width: 72px !important;

        align-items: center !important;
        justify-content: center !important;
    }


    /* Кнопка */

    html body .common-banner-wrapper .common-banner a.banner-link,
    html body .common-banner-wrapper a.banner-link {
        display: flex !important;

        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;

        height: 32px !important;
        min-height: 32px !important;

        padding: 0 4px !important;

        background-color: #268BD2 !important;

        background-image: linear-gradient(
            135deg,
            #46B2E9,
            #268BD2
        ) !important;

        border: 1px solid #1E7FC2 !important;

        border-radius: 9px !important;

        color: #FFFFFF !important;

        font-size: 6.5px !important;
        font-weight: 700 !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        box-shadow:
            0 5px 12px rgba(28, 121, 188, .25) !important;
    }


    /* Крестик */

    html body .common-banner-wrapper a.banner-close {
        top: 3px !important;
        right: 3px !important;

        width: 16px !important;
        height: 16px !important;

        font-size: 11px !important;
    }

}


/* =========================================================
   ОЧЕНЬ УЗКИЙ ТЕЛЕФОН
   ========================================================= */

@media screen and (max-width: 380px) {

    .common-banner-wrapper .common-banner {
        height: 76px !important;
    }


    .common-banner-wrapper .banner-logo.desc {
        width: 76px !important;
        height: 76px !important;

        min-width: 76px !important;
        max-width: 76px !important;

        min-height: 76px !important;
        max-height: 76px !important;

        flex-basis: 76px !important;
    }


    .common-banner-wrapper .banner-wrapper-content {
        height: 76px !important;

        padding:
            6px
            6px
            6px
            8px !important;

        gap: 5px !important;
    }


    /* Здесь дата уже реально мешает */

    .common-banner-wrapper .banner-label {
        display: none !important;
    }


    .common-banner-wrapper h3.banner-title,
    .common-banner-wrapper .banner-title {
        font-size: 7.5px !important;

        line-height: 1.15 !important;
    }


    .common-banner-wrapper .banner-content-right {
        flex-basis: 64px !important;
        width: 64px !important;
    }


    html body .common-banner-wrapper .common-banner a.banner-link,
    html body .common-banner-wrapper a.banner-link {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        height: 29px !important;
        min-height: 29px !important;

        padding: 0 3px !important;

        font-size: 6px !important;

        border-radius: 8px !important;
    }

}