/* ==========================================================================
   Модуль: Пополнение счёта
   Переиспользует: .btn-primary, .input-field, .info-box, .data-table (из global/components.css)
   ========================================================================== */

/* --- Баланс в шапке --- */
.header-balance {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: var(--spacing-sm) var(--spacing-md);
}

.header-balance__icon {
    width: 18px;
    height: 18px;
    color: var(--color-gold);
}

.header-balance__amount {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-gold);
}

.header-balance__btn {
    background: transparent;
    border: none;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-gold);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.header-balance__btn:hover {
    color: var(--color-gold-light);
}

/* --- Страница пополнения --- */
.topup-page {
    max-width: 600px;
    margin: var(--spacing-4xl) auto;
    padding: 0 var(--spacing-xl);
}

.topup-page__title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-2xl);
    text-align: center;
}

/* --- Блок баланса --- */
.topup-balance-block {
    background: linear-gradient(135deg, var(--color-dark-bg) 0%, var(--color-dark-bg-deep) 100%);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.topup-balance-block__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.topup-balance-block__amount {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-gold);
    text-shadow: var(--shadow-gold);
}

/* --- Preset-кнопки --- */
.topup-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.preset-btn {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.preset-btn:hover {
    background: var(--color-gold-soft);
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.preset-btn.active {
    background: var(--color-gold-active);
    border: 2px solid var(--color-gold);
    color: var(--color-gold);
    box-shadow: var(--shadow-gold);
}

/* --- Произвольная сумма --- */
.topup-custom {
    margin-bottom: var(--spacing-xl);
}

/* --- Информационный блок --- 
   ВНИМАНИЕ: Классы .topup-info, .topup-info__title, .topup-info__list УДАЛЕНЫ.
   Они полностью дублируют .info-box из global/components.css.
   В PHP-файле (Popolnenie_scheta.php) замени class="topup-info" на class="info-box", 
   а class="topup-info__title" на class="info-box__title".
*/

/* --- История операций --- */
.balance-history {
    margin-top: var(--spacing-3xl);
}

.balance-history__title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-gold);
    margin-bottom: var(--spacing-xl);
}

/* --- Адаптивность --- */
@media (max-width: 768px) {
    .topup-page {
        padding: 0 var(--spacing-xl);
        margin: var(--spacing-3xl) auto;
    }

    .topup-presets {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .topup-balance-block__amount {
        font-size: 2rem;
    }
}