/**
 * Steam Wallet Pro - Styles
 */

/* Dashboard Widget */
.wallet-dashboard-widget {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.wallet-dashboard-widget h3 { margin: 0 0 15px; font-size: 16px; opacity: 0.9; }
.wallet-balance-display { margin-bottom: 20px; }
.wallet-balance-display .balance-amount { font-size: 32px; font-weight: 700; }
.wallet-balance-display .balance-pending { display: block; font-size: 13px; opacity: 0.8; margin-top: 5px; }
.wallet-actions { display: flex; gap: 10px; }
.wallet-actions .button { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: #fff; }
.wallet-actions .button:hover { background: rgba(255,255,255,0.3); color: #fff; }

/* Wallet Page */
.wallet-page { max-width: 900px; }
.wallet-header { margin-bottom: 30px; }
.wallet-balance-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 30px; border-radius: 12px; text-align: center; }
.wallet-balance-card h2 { margin: 0 0 10px; font-size: 16px; opacity: 0.9; }
.wallet-balance-card .balance-main { font-size: 48px; font-weight: 700; margin-bottom: 10px; }
.wallet-balance-card .balance-details { font-size: 14px; opacity: 0.8; margin-bottom: 20px; }
.wallet-balance-card .balance-details span { margin: 0 10px; }
.wallet-quick-actions { display: flex; justify-content: center; gap: 15px; }
.wallet-quick-actions .button { padding: 12px 25px; background: rgba(255,255,255,0.2); border: none; color: #fff; border-radius: 6px; }
.wallet-quick-actions .button-primary { background: #fff; color: #667eea; }

/* Stats */
.wallet-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 30px; }
.stat-card { background: #fff; border: 1px solid #e1e1e1; border-radius: 8px; padding: 20px; text-align: center; }
.stat-card .stat-label { display: block; font-size: 13px; color: #666; margin-bottom: 5px; }
.stat-card .stat-value { font-size: 24px; font-weight: 600; color: #333; }

/* Recent Transactions */
.wallet-recent { background: #fff; border: 1px solid #e1e1e1; border-radius: 8px; padding: 20px; }
.wallet-recent h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 15px; }
.wallet-recent .view-all { font-size: 14px; font-weight: normal; }

/* Transactions Table */
.wallet-transactions-table { width: 100%; border-collapse: collapse; }
.wallet-transactions-table th, .wallet-transactions-table td { padding: 12px; text-align: left; border-bottom: 1px solid #f0f0f0; }
.wallet-transactions-table th { font-weight: 600; color: #666; font-size: 12px; text-transform: uppercase; }
.wallet-transactions-table .amount-positive { color: #28a745; font-weight: 600; }
.wallet-transactions-table .amount-negative { color: #dc3545; font-weight: 600; }

/* Deposit Page */
.wallet-deposit-page { max-width: 600px; }
.deposit-info { color: #666; margin-bottom: 20px; }
.deposit-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.preset-btn { padding: 15px 25px; background: #f8f9fa; border: 2px solid #e1e1e1; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.preset-btn:hover, .preset-btn.active { background: #667eea; border-color: #667eea; color: #fff; }
.deposit-custom { margin-bottom: 20px; }
.deposit-custom label { display: block; margin-bottom: 8px; font-weight: 600; }
.input-group { display: flex; align-items: center; }
.input-group .input-prefix { background: #f0f0f0; padding: 10px 15px; border: 1px solid #ddd; border-right: none; border-radius: 4px 0 0 4px; }
.input-group .input-text { border-radius: 0 4px 4px 0; }
.deposit-btn { padding: 15px 30px; font-size: 16px; }

/* Withdraw Page */
.wallet-withdraw-page { max-width: 600px; }
.withdraw-balance { background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.withdraw-balance .amount { font-size: 24px; font-weight: 700; color: #333; }
.withdraw-form .form-row { margin-bottom: 20px; }
.withdraw-form label { display: block; margin-bottom: 8px; font-weight: 600; }
.withdraw-form .description { display: block; margin-top: 5px; font-size: 13px; color: #666; }
.fee-info { background: #fff3cd; padding: 10px 15px; border-radius: 4px; color: #856404; margin-bottom: 20px; }
.pending-withdrawals { margin-top: 40px; }
.pending-withdrawals h3 { margin-bottom: 15px; }

/* History Page */
.wallet-history-page { max-width: 1000px; }
.wallet-transactions-table.full th:first-child, .wallet-transactions-table.full td:first-child { width: 150px; }
.wallet-pagination { margin-top: 20px; text-align: center; }

/* Status Badges */
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.status-completed { background: #d4edda; color: #155724; }
.status-pending { background: #fff3cd; color: #856404; }
.status-failed { background: #f8d7da; color: #721c24; }

/* Checkout */
.wallet-checkout-balance { background: #f0f9ff; border: 1px solid #b3e0ff; padding: 15px; border-radius: 4px; margin-bottom: 20px; }

/* Responsive */
@media (max-width: 600px) {
    .wallet-balance-card .balance-main { font-size: 36px; }
    .wallet-quick-actions { flex-direction: column; }
    .wallet-stats { grid-template-columns: repeat(2, 1fr); }
    .deposit-presets { justify-content: center; }
}