/* Промо-полоса над контентом. Пропорции сняты с crazypub.gg (2026-08-23):
   flex, gap 16, padding 14/38/14/16, радиус 14, отступ снизу 20, иконка 42x42
   в плашке с радиусом 12, заголовок 14/800, подпись 12.5, кнопка 13/800.
   Цвета — свои: тема (--card/--text-*) плюс акцент из promo.json.

   Блок рендерится через interface_always, то есть попадает первым элементом
   в .container-fluid — ровно над контентом страницы, как на crazypub. */
.promo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 20px;
    padding: 14px 44px 14px 16px;          /* справа место под крестик */
    border: 1px solid rgba(var(--promo-rgb), .34);
    border-radius: 14px;
    background:
        radial-gradient(120% 140% at 0% 50%, rgba(var(--promo-rgb), .14) 0%, rgba(0, 0, 0, 0) 60%),
        var(--card, #1f1f28);
    color: var(--text-default, #fff);
    animation: promoIn .22s ease;
}

/* [hidden] обязан побеждать display:flex: правило браузера — UA-стиль, любой
   авторский display его перекрывает, и баннер переставал прятаться. */
.promo[hidden] { display: none; }

@keyframes promoIn { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

.promo__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-12, 12px);
    background: rgba(var(--promo-rgb), .16);
}
/* <use> в flex схлопывается без явного размера — задаём и flex-basis */
.promo__icon svg { width: 22px; height: 22px; flex: 0 0 22px; fill: var(--promo-a, #2AABEE); }

.promo__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.promo__title {
    font-size: var(--font-size-m, 14px);
    font-weight: var(--font-weight-8, 800);
    line-height: 1.5;
    color: var(--text-default, #fff);
    overflow-wrap: anywhere;
}

.promo__sub {
    font-size: var(--font-size-s, 12.5px);
    line-height: 1.45;
    color: var(--text-secondary, #9fa2b9);
    overflow-wrap: anywhere;
}
.promo__sub b, .promo__sub strong { color: var(--text-default, #fff); font-weight: var(--font-weight-7, 700); }

.promo__cta {
    flex: 0 0 auto;
    margin-left: auto;                      /* прижимаем к правому краю */
    padding: 10px 18px;
    border-radius: var(--br-10, 10px);
    background: var(--promo-a, #2AABEE);
    color: #0b1116;
    font-size: 13px;
    font-weight: var(--font-weight-8, 800);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--transition-ease-2, all .2s ease);
}
.promo__cta:hover { filter: brightness(1.1); color: #0b1116; text-decoration: none; }

.promo__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary, #9fa2b9);
    cursor: pointer;
    transition: var(--transition-ease-2, all .2s ease);
}
.promo__close svg { width: 13px; height: 13px; flex: 0 0 13px; }
.promo__close:hover { background: var(--transparent-10-w, rgba(255, 255, 255, .1)); color: var(--text-default, #fff); }

/* Без кнопки текст не должен упираться в крестик */
.promo__text:last-of-type { margin-right: 0; }

@media (max-width: 700px) {
    .promo {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 40px 12px 12px;
    }
    .promo__icon { flex: 0 0 34px; width: 34px; height: 34px; }
    .promo__icon svg { width: 18px; height: 18px; flex: 0 0 18px; }
    .promo__text { flex: 1 1 160px; }
    .promo__cta { margin-left: 0; flex: 1 1 100%; text-align: center; padding: 11px 14px; }
}