/**
 * Стили для баннеров-уведомлений по расписанию
 *
 * Используем BEM-нотацию с префиксом sl_ (нижнее подчёркивание вместо дефиса)
 *
 * Структура блока:
 * .sl_attention - основной контейнер баннера
 * .sl_attention__inner - внутренняя обёртка с контентом
 * .sl_attention__text - текстовое содержимое
 * .sl_attention__close - кнопка закрытия
 */

/* Основной контейнер баннера */
.sl_attention {
    /* Иконка предупреждения в формате SVG base64 */
    --sl-attention-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzEiIHZpZXdCb3g9IjAgMCAzMSAzMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF84Mzg4XzQ3MzgpIj4NCjxwYXRoIGQ9Ik0zMSAwSDBWMzFIMzFWMFoiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuMDEiLz4NCjxwYXRoIGQ9Ik0xNS41MDI2IDI4LjQxNTRDMTkuMDY5NCAyOC40MTU0IDIyLjI5ODYgMjYuOTY5NiAyNC42MzYgMjQuNjMyMUMyNi45NzM1IDIyLjI5NDcgMjguNDE5MyAxOS4wNjU1IDI4LjQxOTMgMTUuNDk4N0MyOC40MTkzIDExLjkzMTkgMjYuOTczNSA4LjcwMjcyIDI0LjYzNiA2LjM2NTIzQzIyLjI5ODYgNC4wMjc3OCAxOS4wNjk0IDIuNTgyMDMgMTUuNTAyNiAyLjU4MjAzQzExLjkzNTggMi41ODIwMyA4LjcwNjYzIDQuMDI3NzggNi4zNjkxNCA2LjM2NTIzQzQuMDMxNjkgOC43MDI3MiAyLjU4NTk0IDExLjkzMTkgMi41ODU5NCAxNS40OTg3QzIuNTg1OTQgMTkuMDY1NSA0LjAzMTY5IDIyLjI5NDcgNi4zNjkxNCAyNC42MzIxQzguNzA2NjMgMjYuOTY5NiAxMS45MzU4IDI4LjQxNTQgMTUuNTAyNiAyOC40MTU0WiIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjIuNTgzMzMiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuNDk3NCAyMy44OTcxQzE2LjM4OTEgMjMuODk3MSAxNy4xMTIgMjMuMTc0MyAxNy4xMTIgMjIuMjgyNkMxNy4xMTIgMjEuMzkwOSAxNi4zODkxIDIwLjY2OCAxNS40OTc0IDIwLjY2OEMxNC42MDU3IDIwLjY2OCAxMy44ODI4IDIxLjM5MDkgMTMuODgyOCAyMi4yODI2QzEzLjg4MjggMjMuMTc0MyAxNC42MDU3IDIzLjg5NzEgMTUuNDk3NCAyMy44OTcxWiIgZmlsbD0iIzMzMzMzMyIvPg0KPHBhdGggZD0iTTE1LjUgNy43NVYxOC4wODMzIiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMi41ODMzMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L2c+DQo8ZGVmcz4NCjxjbGlwUGF0aCBpZD0iY2xpcDBfODM4OF80NzM4Ij4NCjxyZWN0IHdpZHRoPSIzMSIgaGVpZ2h0PSIzMSIgZmlsbD0id2hpdGUiLz4NCjwvY2xpcFBhdGg+DQo8L2RlZnM+DQo8L3N2Zz4=");

    position: relative;
    z-index: 1000; /* Поверх остального контента */
    box-sizing: border-box;
    width: 100%;
    min-height: 39px;
    padding: 8px 48px; /* Отступы, справа больше для кнопки закрытия */
    background: #ffe9e9; /* Светло-красный фон */
    color: #333;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.25;
}

/* Все элементы внутри баннера используют border-box */
.sl_attention * {
    box-sizing: border-box;
}

/* Внутренняя обёртка с контентом */
.sl_attention__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Расстояние между иконкой и текстом */
    width: min(1000px, 100%); /* Максимальная ширина 1000px */
    margin: 0 auto; /* Центрирование */
    padding: 0 34px;
    text-align: left;
}

/* Иконка предупреждения (псевдоэлемент) */
.sl_attention__inner::before {
    content: "";
    flex: 0 0 22px; /* Фиксированная ширина */
    width: 22px;
    height: 22px;
    background: var(--sl-attention-icon) center / contain no-repeat;
}

/* Текстовое содержимое */
.sl_attention__text {
    max-width: 900px; /* Ограничение ширины текста */
}

/* Параграфы внутри текста */
.sl_attention__text p {
    margin: 5px 0;
}

/* Кнопка закрытия */
.sl_attention__close {
    position: absolute;
    top: 50%;
    right: max(16px, calc((100% - 1100px) / 2)); /* Адаптивное позиционирование */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #777;
    cursor: pointer;
    transform: translateY(-50%); /* Центрирование по вертикали */
}

/* Крестик на кнопке закрытия (два псевдоэлемента) */
.sl_attention__close::before,
.sl_attention__close::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
}

.sl_attention__close::before {
    transform: rotate(45deg); /* Первая линия крестика */
}

.sl_attention__close::after {
    transform: rotate(-45deg); /* Вторая линия крестика */
}

/* Эффект при наведении на кнопку закрытия */
.sl_attention__close:hover,
.sl_attention__close:focus-visible {
    color: #333; /* Темнее при наведении */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 767px) {
    .sl_attention {
        padding: 9px 44px 9px 12px; /* Меньше отступы */
        font-size: 11px; /* Меньше шрифт */
    }

    .sl_attention__inner {
        justify-content: flex-start; /* Выравнивание по левому краю */
        gap: 8px; /* Меньше расстояние */
        padding: 0;
    }

    .sl_attention__inner::before {
        flex-basis: 20px; /* Меньше иконка */
        width: 20px;
        height: 20px;
    }

    .sl_attention__close {
        right: 10px; /* Ближе к краю */
    }
}