/*
 * blog-banners.css — CSS врезок-баннеров из статей (1:1 с прода reboot_child).
 * На проде приезжает отдельным <link>, которого в нашем лейауте не было —
 * поэтому .banner-promotion "ехал". Классы свои (.banner-promotion*), конфликтов
 * с mgd/WP нет. Источник: продовый инлайн-CSS баннера.
 */

.banner-promotion {
    background-color: #F2F6FC;
    border-radius: 20px;
    font-family: Manrope, sans-serif;
    font-style: normal;
    margin: 30px 0;
    max-width: 730px;
    padding: 25px 20px;
    position: relative;
    width: 100%;
}

.banner-promotion__title {
    color: #282E3D;
    font-size: 25px;
    font-weight: 700;
    line-height: 33px;
}

.banner-promotion__title span {
    color: #933FA1;
}

.banner-promotion__subtitle {
    color: #282E3D;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    margin: 16px 0 10px;
}

.banner-promotion__list {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 385px;
    margin: 0;
    padding: 0;
}

.banner-promotion__list li {
    align-items: center;
    display: flex;
    color: #282E3D;
    font-size: 14px;
    line-height: 140%;
    list-style: none;
    margin-bottom: 6px;
}

.banner-promotion__list li img {
    margin-right: 10px;
}

.banner-promotion__form {
    max-width: 310px;
    margin-top: 20px;
}

.banner-promotion__form label {
    color: #282E3D;
    font-size: 12px;
    font-weight: 400;
}

.banner-promotion__form input[type="email"] {
    border: 1px solid #BFBFBF;
    background: #FFFFFF;
    height: 45px;
    border-radius: 8px;
    font-size: 16px;
    margin: 6px 0 11px;
    padding: 12px 20px;
    width: 100%;
}

.banner-promotion__form button {
    align-items: center;
    background: linear-gradient(0deg, #933FA1 0%, #933FA1 100%), linear-gradient(180deg, #933FA1 0%, #7F2A8D 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    height: 60px;
    justify-content: space-between;
    padding: 12px 18px 12px 29px;
    width: 100%;
}

.banner-promotion__form button span:first-child {
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
}

.banner-promotion__form button span:last-child {
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
}

.banner-promotion .custom-control {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 4px;
}

.banner-promotion .custom-control__input {
    display: unset;
    float: unset;
    height: 10px;
    margin-right: 6px;
    position: relative;
    width: 10px;
}

.banner-promotion .custom-control__input:not(:checked):before {
    background: #F2F6FC;
    border: 1px solid #8E8E8E;
    border-radius: 3px;
    box-sizing: border-box;
    content: '';
    cursor: pointer;
    height: 12px;
    left: 0;
    margin: -1px 0 0 -1px;
    position: absolute;
    top: 0;
    width: 12px;
    z-index: 10;
}

.banner-promotion .custom-control__input:checked:before {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABjSURBVHgBfY6LCYAwDETb0gUcwQ0cwU10A4UOYBdosoKbOUkSUzBQihoI+T0u59xPlFLWWsMXgIiH9UGHqQcAYGNmn1I6TWlW2b0BFhEZFMi288/vHGO8iMgpMLZAbzLXfLvdnVYlupPWmtkAAAAASUVORK5CYII=') no-repeat right center #F2F6FC;
    border: 1px solid #8E8E8E;
    border-radius: 3px;
    content: '';
    cursor: pointer;
    height: 12px;
    left: 0;
    margin: -1px 0 0 -1px;
    position: absolute;
    top: 0;
    width: 12px;
    z-index: 10;
}

.banner-promotion__form button:disabled {
    background: #66134F;
    cursor: not-allowed;
}

.banner-promotion__form .custom-control__name {
    cursor: pointer;
    margin-top: unset !important;
}

.banner-promotion .custom-control__name a {
    font-size: inherit;
}

.banner-promotion__animation {
    border-radius: 10px;
    height: 207px;
    bottom: 60px;
    position: absolute;
    right: 24px;
    width: 348px;
    z-index: 1;
}

@media (max-width: 768px) {
    .banner-promotion {
        height: 700px;
        max-width: 375px;
        width: 100%;
    }

    .banner-promotion__title {
        font-size: 19px;
        line-height: 26px;
    }

    .banner-promotion__subtitle {
        font-size: 13px;
    }

    .banner-promotion__list li {
        font-size: 13px;
    }

    .banner-promotion__list li img {
        margin-right: 6px;
        width: 15px;
    }

    .banner-promotion .banner-promotion__form {
        max-width: 100%;
        width: 100%;
    }

    .banner-promotion .custom-control__name a {
        font-size: 10px;
    }

    .banner-promotion__animation {
        bottom: 24px;
        height: 169px;
        left: 0;
        margin: 0 auto;
        right: 0;
        width: 284px;
    }
}

@media (max-width: 375px) {
    .banner-promotion__title {
        font-size: 18px;
        line-height: 26px;
    }
}

@media (max-width: 320px) {
    .banner-promotion {
        height: 565px;
    }

    .banner-promotion__title {
        font-size: 14px;
        line-height: 18px;
    }

    .banner-promotion__subtitle {
        font-size: 10px;
    }

    .banner-promotion__list li {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .banner-promotion__form label {
        font-size: 9px;
    }

    .banner-promotion__form input[type="email"] {
        margin: 6px 0 0;
    }

    .banner-promotion__form button {
        height: unset;
        padding: 10px 18px 10px 29px;
    }

    .banner-promotion__form button span:first-child {
        font-size: 12px;
        line-height: 15px;
    }

    .banner-promotion__form button span:last-child {
        font-size: 12px;
    }

    .banner-promotion .custom-control__name a,
    .banner-promotion .custom-control__name {
        font-size: 8px;
    }

    .banner-promotion__animation {
        bottom: 24px;
        height: auto;
        left: 0;
        margin: 0 auto;
        right: 0;
        width: 226px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   ЕДИНЫЙ ЧЕКБОКС ВСЕХ ФОРМ БЛОГА (.custom-control = label > input + span).

   Механика dark-theme.css: реальный <input> прячется, видимый бокс рисуется
   псевдо-элементом label.custom-control::before, галочка — ::after через
   :has(input:checked). В dark-theme ДВЕ конкурирующие «финальные» версии:
     A (v6.6, стейт-авэр, #100C1E → #C05DD0 при отметке) — правильная;
     B (позже в файле, ТОЛЬКО .banner-promotion.v2) — ::before ВСЕГДА #C05DD0
       и ::after ВСЕГДА видна, без :checked → «вечный фиолетовый квадрат».
   Так как B идёт позже, для promotion.v2 побеждала B. Здесь пере-объявляем
   версию A последним по загрузке файлом (blog-banners.css) — при равной
   специфичности выигрывает наш источник, а B по base-состоянию гасим явно.
   НИЧЕГО не «раскрываем» (input оставляем спрятанным) — иначе двойной бокс.
   ───────────────────────────────────────────────────────────────────────── */

/* Контейнер — grid: [бокс 18px] [текст] */
html body .site label.custom-control,
html body .site .entry-content .banner-sales label.custom-control,
html body .site .entry-content .banner-promotion label.custom-control,
html body .site .entry-content .banner-promotion.v2 label.custom-control {
    display: grid !important;
    grid-template-columns: 18px 1fr !important;
    column-gap: 8px !important;
    align-items: start !important;
    position: relative !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Реальный input — спрятан, но кликабелен через label */
html body .site label.custom-control > input.custom-control__input,
html body .site label.custom-control > input[type="checkbox"],
html body .site .entry-content .banner-sales label.custom-control > input[type="checkbox"],
html body .site .entry-content .banner-promotion label.custom-control > input[type="checkbox"],
html body .site .entry-content .banner-promotion.v2 label.custom-control > input[type="checkbox"] {
    position: absolute !important;
    left: 0 !important; top: 0 !important;
    width: 18px !important; height: 18px !important;
    margin: 0 !important; padding: 0 !important;
    opacity: 0 !important;
    -webkit-appearance: none !important; appearance: none !important;
    box-shadow: none !important; border: none !important; background: transparent !important;
}

/* Бокс (::before) — тёмный квадрат в невыбранном состоянии */
html body .site label.custom-control::before,
html body .site .entry-content .banner-sales label.custom-control::before,
html body .site .entry-content .banner-promotion label.custom-control::before,
html body .site .entry-content .banner-promotion.v2 label.custom-control::before {
    content: "" !important;
    grid-column: 1 !important; grid-row: 1 !important;
    display: block !important;
    width: 18px !important; height: 18px !important;
    margin-top: 1px !important;
    background: #100C1E !important;
    border: 1.5px solid rgba(255,255,255,.46) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    transition: background-color .15s, border-color .15s !important;
}

/* Гасим галочку в невыбранном состоянии (в т.ч. «всегда-видимую» из версии B) */
html body .site label.custom-control::after,
html body .site .entry-content .banner-sales label.custom-control::after,
html body .site .entry-content .banner-promotion label.custom-control::after,
html body .site .entry-content .banner-promotion.v2 label.custom-control::after {
    content: none !important;
    display: none !important;
}

/* Отмечено: бокс → фиолетовый */
html body .site label.custom-control:has(> input:checked)::before,
html body .site .entry-content .banner-sales label.custom-control:has(input[type="checkbox"]:checked)::before,
html body .site .entry-content .banner-promotion label.custom-control:has(input[type="checkbox"]:checked)::before,
html body .site .entry-content .banner-promotion.v2 label.custom-control:has(input[type="checkbox"]:checked)::before {
    background: #C05DD0 !important;
    border-color: #C05DD0 !important;
}

/* Отмечено: белая галочка (::after) */
html body .site label.custom-control:has(> input:checked)::after,
html body .site .entry-content .banner-sales label.custom-control:has(input[type="checkbox"]:checked)::after,
html body .site .entry-content .banner-promotion label.custom-control:has(input[type="checkbox"]:checked)::after,
html body .site .entry-content .banner-promotion.v2 label.custom-control:has(input[type="checkbox"]:checked)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 6px !important; top: 3px !important;
    width: 5px !important; height: 9px !important;
    border: solid #FFFFFF !important;
    border-width: 0 2px 2px 0 !important;
    border-radius: 0 !important;
    transform: rotate(45deg) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Текст согласия — колонка 2, читаемый */
html body .site label.custom-control > .custom-control__name,
html body .site .entry-content .banner-sales label.custom-control > .custom-control__name,
html body .site .entry-content .banner-promotion label.custom-control > .custom-control__name,
html body .site .entry-content .banner-promotion.v2 label.custom-control > .custom-control__name {
    grid-column: 2 !important; grid-row: 1 !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   banner-sales v2 на мобилке: инлайн-стиль статьи форсит фикс. высоту
   (height:585px ≤768px / 526px ≤374px) под портретный фон 375×634 — из-за
   короткого контента снизу пустое место («слишком высокий»), а шрифт занижен
   (title 15/13px). Перебиваем инлайн (грузимся последними, специфичность выше):
   высота по контенту, фон object-fit:cover, читаемые размеры текста.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    body .site .entry-content .banner-sales,
    body .site .entry-content .banner-sales.v2 {
        height: auto !important;
        min-height: 0 !important;
        padding: 28px 20px !important;
    }
    body .site .entry-content .banner-sales .image_bg,
    body .site .entry-content .banner-sales .image_bg.mob {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }
    body .site .entry-content .banner-sales .banner-sales__title {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }
    body .site .entry-content .banner-sales .banner-sales__subtitle {
        font-size: 14px !important;
        margin: 12px 0 10px !important;
    }
    body .site .entry-content .banner-sales .banner-sales__list div {
        font-size: 13px !important;
    }
}
@media (max-width: 374px) {
    body .site .entry-content .banner-sales,
    body .site .entry-content .banner-sales.v2 {
        height: auto !important;
        min-height: 0 !important;
        padding: 22px 16px !important;
    }
    body .site .entry-content .banner-sales .banner-sales__title {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }
    body .site .entry-content .banner-sales .banner-sales__subtitle {
        font-size: 13px !important;
    }
    body .site .entry-content .banner-sales .banner-sales__list div {
        font-size: 12px !important;
    }
}