/*
 * Стили страниц оформления: /payment-subscribe и /payment-vip.
 *
 * В оригинале лежали инлайновым <style> внутри payment-subscribe.php и
 * payment-vip.php, в main.css их нет.
 *
 * Правила .nav-menu{display:none} из оригинала здесь намеренно нет:
 * нижнее меню на этих страницах просто не рендерится. Файл остаётся
 * в документе и после перехода на другой экран, поэтому глобальное
 * правило спрятало бы меню на всём приложении.
 */

.payment-info-box {
    border-radius: 14px;
    padding: 16px;
    margin-top: 22px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    backdrop-filter: blur(5px);
    background: rgba(0, 133, 255, 0.10);
    border: 1px solid rgba(0, 133, 255, 0.25);
}

.payment-info-box.is-warning {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.34);
}

.payment-info-box.is-danger {
    background: rgba(255, 80, 80, 0.10);
    border-color: rgba(255, 80, 80, 0.30);
}

.payment-info-icon {
    font-size: 18px;
    color: #0085FF;
    margin-top: 2px;
    flex-shrink: 0;
}

.payment-info-box.is-warning .payment-info-icon {
    color: #FFC107;
}

.payment-info-box.is-danger .payment-info-icon {
    color: #ff6969;
}

.payment-info-content {
    flex-grow: 1;
}

.payment-info-title {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 5px;
    font-family: Roboto-Medium;
}

.payment-info-text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.val-price-plan {
    color: #0085FF;
}

/*
 * Цена без скидки. Стоит слева от итоговой и намеренно мельче её: строка
 * читается слева направо, и последним в глаза должно попасть то число,
 * которое спишется, а не то, которое человек не платит.
 */
.old-price-plan {
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-size: clamp(15px, 2.2vw, 17px);
    font-family: Roboto-Regular;
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.45);
}

/* Плашка процента зелёная: синий на этой строке уже занят итоговой ценой. */
.sale-tag-plan {
    display: inline-block;
    margin-left: 10px;
    padding: 5px 9px;
    border-radius: 20px;
    background-color: rgba(52, 199, 123, 0.18);
    color: #5fd79c;
    font-size: 13px;
    font-family: Roboto-Medium;
    white-space: nowrap;
}

/*
 * Подсказка VIP со страницы payment-vip.php.
 *
 * Селектор сужен до .cont-info-tarif намеренно: на /tarifs тот же
 * .vip-hint-box описан в tarifs.css с другими отступами, и общее
 * правило перебивало бы его после первого захода на оформление.
 */
.cont-info-tarif .vip-hint-box {
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 14px;
    padding: 16px;
    margin-top: 25px;
    margin-bottom: 24px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    backdrop-filter: blur(5px);
}

.cont-info-tarif .vip-hint-icon {
    font-size: 20px;
    color: #FFD700;
    margin-top: 2px;
    flex-shrink: 0;
}

.cont-info-tarif .vip-hint-content {
    flex-grow: 1;
}

.cont-info-tarif .vip-hint-title {
    display: block;
    font-size: 14px;
    font-family: Roboto-Medium;
    color: #fff;
    margin-bottom: 4px;
}

.cont-info-tarif .vip-hint-text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

/*
 * Контейнер тостов. В оригинале его позиционировал инлайновыми стилями
 * assets/js/main.js при первом вызове notify(). Правила повторены здесь,
 * чтобы страница не зависела от того, подключён ли чужой pay-extra.css.
 */
#notify-stack {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 9999;
}

#notify-stack .notify {
    pointer-events: auto;
}