/*
 * topup.css — модаль buy-credits: выбор суммы, оплата, success/error (Flow 6, 6a, 6b).
 */

.topup-modal-content {
    width: 100%;
    padding-bottom: var(--padding-large);
    display: flex;
    flex-direction: column;
    gap: var(--padding-middle);
}

[data-topup-form] {
    display: flex;
    flex-direction: column;
    gap: var(--padding-middle);
}

.topup-amount-selector-coin-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    pointer-events: none;
}

.topup-amount-selector-coins {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-text-light-1);
    line-height: 1;
    white-space: nowrap;
}

.topup-amount-selector-separator {
    font-size: 1.4rem;
    color: var(--color-text-dark-2);
    line-height: 1;
}

.topup-amount-selector-price {
    font-size: 1.4rem;
    color: var(--color-text-dark-2);
    line-height: 1;
    white-space: nowrap;
}

.topup-error-actions[hidden] {
    display: none;
}

.topup-payment-button {
    transition: opacity 0.22s ease;
}

.topup-payment-icon {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

/* Flow 6a: слой успешного пополнения поверх modal-panel */

.topup-success-layer {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 1);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--padding-middle);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--modal-backdrop-transition);
}

.topup-success-layer--visible {
    display: flex;
    pointer-events: auto;
}

.topup-success-layer--open {
    opacity: 1;
}

.topup-success-layer-backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-overlay-bg);
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
    backdrop-filter: blur(var(--modal-backdrop-blur));
}

.topup-success-confetti-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.topup-success-coin {
    width: 9.6rem;
    height: 9.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transform: scale(8);
    opacity: 0;
}

.topup-success-coin img {
    width: 100%;
    height: 100%;
    display: block;
}

.topup-success-coin--drop {
    animation: topup-coin-drop 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.topup-success-label {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.4s ease 0.75s, transform 0.4s ease 0.75s;
}

.topup-success-layer--open .topup-success-label {
    opacity: 1;
    transform: translateY(0);
}

@keyframes topup-coin-drop {
    0% {
        transform: scale(8);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    52% {
        transform: scale(0.86);
    }
    67% {
        transform: scale(1.09);
    }
    78% {
        transform: scale(0.96);
    }
    88% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Consent-items заблокированы во время ожидания оплаты (Flow 6: setWaitingControls) */
.app-screen--buy-credits .consent-item[aria-disabled="true"] {
    pointer-events: none;
}