/**
 * T-16: баннер «баланс пополнен» — показывается при возврате с оплаты Platega (payment_return=1).
 * Логика: auth.js consumePendingPaymentReturn → showPaymentReturnBanner добавляет модификатор
 * --visible; через ~3.5с снимает и прячет. role="status" + aria-live="polite" — доступность.
 * Визуальный язык — тот же liquid-glass, что у остального UI (плавающий pill сверху по центру).
 */

.payment-success-banner {
    position: fixed;
    top: var(--padding-small);
    left: 50%;
    transform: translateX(-50%) translateY(-150%);
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: var(--padding-micro);
    max-width: calc(100vw - var(--padding-middle));
    padding: var(--padding-micro) var(--padding-small);
    border-radius: var(--border-radius-pill);
    color: var(--color-text-light-1);
    background: rgb(255 255 255 / 0.14);
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
    backdrop-filter: blur(14px) saturate(1.35);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.55),
        inset 0 -1px 0 rgb(0 0 0 / 0.12),
        0 4px 18px rgb(0 0 0 / 0.28);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 320ms ease,
        opacity 320ms ease;
}

.payment-success-banner--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.payment-success-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-accent-main);
}

.payment-success-banner-icon svg {
    width: 100%;
    height: 100%;
}

.payment-success-banner-text {
    font-size: 0.95rem;
    line-height: 1.2;
    text-transform: lowercase;
}

@media (max-width: 575.98px) {
    .payment-success-banner {
        top: var(--padding-micro);
        max-width: calc(100vw - var(--padding-small));
    }
}