/**
 * Уведомление о повышении стоимости генерации с 10 октября.
 *
 * Стили вынесены из общего public-white.css в отдельный файл намеренно.
 * Общий файл весит больше ста килобайт и подключается не везде: страницы входа
 * и регистрации строятся мимо макетов и тянут другой набор стилей. Уведомление
 * должно быть на всех страницах, а значит его стиль тоже нужен везде — и
 * тянуть ради него общий файл на страницу формы незачем.
 *
 * Плюс к этому стили уведомления теперь правятся в одном маленьком файле, а не
 * в общем на четыре тысячи строк.
 */
.price-notice {
    margin: 0 0 24px;
    border-radius: 18px;
    background: linear-gradient(100deg, #ff8a3d 0%, #f4571f 48%, #e11d48 100%);
    box-shadow: 0 14px 34px rgba(225, 29, 72, 0.28), 0 0 0 3px rgba(255, 138, 61, 0.22);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Косая бликовая полоса — чтобы блок читался как плашка, а не как строка
   таблицы. Декоративная, поэтому прячется от скринридера и на печати. */
.price-notice::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.14) 0 18px,
        transparent 18px 40px
    );
    pointer-events: none;
}

.price-notice__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
}

.price-notice__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #2a0d05;
    color: #ffd9a8;
    font: 700 26px/1 "Roboto Condensed", Roboto, sans-serif;
}

.price-notice__body {
    flex: 1 1 auto;
    min-width: 0;
    color: #ffffff;
}

.price-notice__title {
    margin: 0 0 4px;
    font: 700 19px/1.25 "Roboto Condensed", Roboto, sans-serif;
    color: #ffffff;
}

.price-notice__text {
    margin: 0;
    font: 500 15px/1.45 Roboto, sans-serif;
    color: #ffffff;
}

.price-notice__date {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    background: #2a0d05;
    color: #fff;
    font: 700 15px/1 "Roboto Condensed", Roboto, sans-serif;
    white-space: nowrap;
}

/* --- маленький закреплённый блок ---------------------------------------- */

.price-notice-badge {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 900;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 320px;
    padding: 14px 16px 14px 18px;
    border-radius: 16px;
    background: linear-gradient(120deg, #ff9a4d 0%, #f4571f 55%, #e11d48 100%);
    box-shadow: 0 16px 38px rgba(225, 29, 72, 0.4), 0 0 0 3px rgba(255, 154, 77, 0.28);
    color: #ffffff;
}

.price-notice-badge[hidden] {
    display: none;
}

.price-notice-badge__text {
    margin: 0;
    font: 700 14px/1.35 "Roboto Condensed", Roboto, sans-serif;
    color: #ffffff;
}

.price-notice-badge__close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: -3px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(42, 13, 5, 0.28);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.price-notice-badge__close:hover {
    background: rgba(42, 13, 5, 0.3);
    transform: rotate(90deg);
}

.price-notice-badge__close:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* --- узкие экраны --------------------------------------------------------- */

@media (max-width: 760px) {
    .price-notice__inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
    }

    .price-notice__title {
        font-size: 17px;
    }

    .price-notice__text {
        font-size: 14px;
    }

    .price-notice__date {
        padding: 6px 12px;
        font-size: 14px;
    }

    /* На телефоне закреплённый блок перекрывал бы нижние кнопки, поэтому
       он становится компактнее и уходит выше от края. */
    .price-notice-badge {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}

/* Блок — объявление, а не содержимое страницы: на печати он не нужен. */
@media print {
    .price-notice-badge {
        display: none !important;
    }
}