/**
 * Odin AI Gateway — Frontend Styles
 * Premium Dark Glassmorphism Theme
 *
 * A stunning, immersive dark UI with deep frosted-glass panels,
 * layered translucency, soft neon glow accents, noise texture,
 * and smooth micro-interactions throughout.
 *
 * @package Odin\AiGateway
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* ---- Background layers ---- */
    --odin-bg-body: #06080f;
    --odin-bg-surface: rgba(12, 15, 28, 0.72);
    --odin-bg-glass: rgba(255, 255, 255, 0.03);
    --odin-bg-glass-strong: rgba(255, 255, 255, 0.06);
    --odin-bg-glass-hover: rgba(255, 255, 255, 0.08);
    --odin-bg-glass-active: rgba(124, 92, 252, 0.18);
    --odin-bg-glass-inset: rgba(0, 0, 0, 0.25);

    /* ---- Border ---- */
    --odin-border-glass: rgba(255, 255, 255, 0.06);
    --odin-border-glass-hover: rgba(255, 255, 255, 0.14);
    --odin-border-glass-active: rgba(124, 92, 252, 0.4);

    /* ---- Blur ---- */
    --odin-blur: 24px;
    --odin-blur-strong: 40px;

    /* ---- Text ---- */
    --odin-text-primary: rgba(255, 255, 255, 0.94);
    --odin-text-secondary: rgba(255, 255, 255, 0.52);
    --odin-text-muted: rgba(255, 255, 255, 0.28);

    /* ---- Accent palette ---- */
    --odin-accent: #7c5cfc;
    --odin-accent-rgb: 124, 92, 252;
    --odin-accent-glow: rgba(124, 92, 252, 0.3);
    --odin-accent-hover: #9b82fc;
    --odin-cyan: #00d4ff;
    --odin-cyan-bg: #0e191b;
    --odin-cyan-rgb: 0, 212, 255;
    --odin-cyan-glow: rgba(0, 212, 255, 0.22);
    --odin-green: #34d399;
    --odin-green-rgb: 52, 211, 153;
    --odin-green-bg: rgba(52, 211, 153, 0.1);
    --odin-red: #f87171;
    --odin-red-rgb: 248, 113, 113;
    --odin-red-bg: rgba(248, 113, 113, 0.1);
    --odin-amber: #fbbf24;
    --odin-amber-rgb: 251, 191, 36;
    --odin-amber-bg: rgba(251, 191, 36, 0.1);

    /* ---- Radius ---- */
    --odin-radius-sm: 10px;
    --odin-radius-md: 16px;
    --odin-radius-lg: 22px;
    --odin-radius-xl: 28px;

    /* ---- Shadows ---- */
    --odin-shadow-glow: 0 0 40px rgba(var(--odin-accent-rgb), 0.06);
    --odin-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --odin-shadow-elevated: 0 16px 64px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --odin-shadow-inner: inset 0 2px 8px rgba(0, 0, 0, 0.3);

    /* ---- Transitions ---- */
    --odin-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --odin-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Noise texture (SVG data URI) ---- */
    --odin-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}


/* ==========================================================================
   Glass Panel Foundation
   ========================================================================== */

.odin-wallet-balance,
.odin-wallet-topup,
.odin-wallet-transactions,
.odin-wallet-dashboard__balance-card,
.odin-wallet-dashboard__quick-topup,
.odin-wallet-dashboard__recent-transactions,
.odin-wallet-dashboard__stat-card,
.odin-wallet-login-prompt {
    backdrop-filter: blur(var(--odin-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--odin-blur)) saturate(1.4);
}


/* ==========================================================================
   Wallet Balance
   ========================================================================== */

.odin-wallet-balance {
    background:
        linear-gradient(135deg, rgba(var(--odin-accent-rgb), 0.2) 0%, rgba(var(--odin-cyan-rgb), 0.1) 100%),
        var(--odin-bg-glass-strong);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-lg);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 28px;
    box-shadow: var(--odin-shadow-glow), var(--odin-shadow-card);
    color: var(--odin-text-primary);
    position: relative;
    overflow: hidden;
    animation: odin-fade-in 0.5s ease-out both;
}

/* Ambient glow orb */
.odin-wallet-balance::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 160%;
    height: 160%;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(var(--odin-accent-rgb), 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(var(--odin-cyan-rgb), 0.06) 0%, transparent 50%);
    pointer-events: none;
}

/* Noise overlay for texture */
.odin-wallet-balance::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--odin-noise);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.5;
}

.odin-wallet-balance .odin-balance-label,
.odin-wallet-balance__label {
    position: relative;
    z-index: 1;
    font-size: 12px;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-weight: 600;
}

.odin-wallet-balance .odin-balance-amount,
.odin-wallet-balance__amount {
    position: relative;
    z-index: 1;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 20%, var(--odin-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(var(--odin-cyan-rgb), 0.2));
}

.odin-wallet-balance .odin-balance-currency,
.odin-wallet-balance__currency {
    position: relative;
    z-index: 1;
    font-size: 14px;
    opacity: 0.4;
    margin-top: 8px;
    font-weight: 400;
    letter-spacing: 1px;
}

.odin-wallet-balance .odin-wallet-status {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    font-size: 11px;
    opacity: 0.6;
}

.odin-wallet-balance .odin-wallet-status.frozen {
    color: var(--odin-amber);
}


/* ==========================================================================
   Wallet Top-Up
   ========================================================================== */

.odin-wallet-topup {
    background:
        linear-gradient(180deg, rgba(var(--odin-accent-rgb), 0.04) 0%, transparent 100%),
        var(--odin-bg-glass-strong);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-lg);
    padding: 32px;
    margin-bottom: 28px;
    box-shadow: var(--odin-shadow-card);
    color: var(--odin-text-primary);
    position: relative;
    overflow: hidden;
    animation: odin-fade-in 0.5s ease-out 0.05s both;
}

.odin-wallet-topup::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--odin-noise);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.4;
}

.odin-wallet-topup h3,
.odin-wallet-topup__title {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--odin-text-primary);
    letter-spacing: 0.3px;
}

/* Preset Buttons */

.odin-wallet-topup__presets {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
}

.odin-wallet-topup__presets-label,
.odin-wallet-topup__custom-label {
    margin: 0 0 14px;
    font-size: 11px;
    color: var(--odin-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}

.odin-wallet-topup__preset-buttons,
.odin-topup-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.odin-wallet-topup__preset-btn,
.odin-topup-preset-btn {
    background: var(--odin-bg-glass);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-sm);
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: all var(--odin-transition);
    font-size: 14px;
    font-weight: 600;
    color: var(--odin-text-primary);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Glow border on hover */
.odin-wallet-topup__preset-btn::before,
.odin-topup-preset-btn::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(var(--odin-accent-rgb), 0.4), rgba(var(--odin-cyan-rgb), 0.2));
    opacity: 0;
    transition: opacity var(--odin-transition);
    z-index: -1;
}

.odin-wallet-topup__preset-btn:hover,
.odin-topup-preset-btn:hover {
    border-color: var(--odin-border-glass-hover);
    background: var(--odin-bg-glass-hover);
    box-shadow: 0 4px 24px var(--odin-accent-glow), 0 0 0 1px rgba(var(--odin-accent-rgb), 0.1);
    transform: translateY(-2px);
}

.odin-wallet-topup__preset-btn:hover::before,
.odin-topup-preset-btn:hover::before {
    opacity: 1;
}

.odin-wallet-topup__preset-btn.odin-wallet-topup__preset-btn--active,
.odin-topup-preset-btn.selected {
    border-color: var(--odin-border-glass-active);
    background: var(--odin-bg-glass-active);
    box-shadow: 0 0 32px var(--odin-accent-glow), inset 0 0 24px rgba(var(--odin-accent-rgb), 0.06);
    color: #fff;
}

/* Custom Amount */

.odin-wallet-topup__custom {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.odin-wallet-topup__custom-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--odin-bg-glass-inset);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-sm);
    padding: 6px 6px 6px 18px;
    transition: border-color var(--odin-transition), box-shadow var(--odin-transition);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.odin-wallet-topup__custom-input-wrap:focus-within {
    border-color: var(--odin-border-glass-active);
    box-shadow: 0 0 24px var(--odin-accent-glow), 0 0 0 3px rgba(var(--odin-accent-rgb), 0.08);
}

.odin-wallet-topup__custom-currency {
    font-size: 16px;
    font-weight: 700;
    color: var(--odin-text-secondary);
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.odin-wallet-topup__custom-input {
    flex: 1;
    padding: 14px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--odin-text-primary);
    outline: none;
    min-width: 0;
}

.odin-wallet-topup__custom-input::placeholder {
    color: var(--odin-text-muted);
}

.odin-wallet-topup__custom-input::-webkit-inner-spin-button,
.odin-wallet-topup__custom-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.odin-wallet-topup__custom-input[type=number] {
    -moz-appearance: textfield;
}

/* Topup Messages */

.odin-wallet-topup__message {
    position: relative;
    z-index: 1;
    padding: 16px 20px;
    border-radius: var(--odin-radius-sm);
    margin-top: 20px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.odin-wallet-topup__message--error {
    background: var(--odin-red-bg);
    color: var(--odin-red);
    border: 1px solid rgba(var(--odin-red-rgb), 0.2);
    box-shadow: 0 4px 16px rgba(var(--odin-red-rgb), 0.08);
}

.odin-wallet-topup__message--success {
    background: var(--odin-green-bg);
    color: var(--odin-green);
    border: 1px solid rgba(var(--odin-green-rgb), 0.2);
    box-shadow: 0 4px 16px rgba(var(--odin-green-rgb), 0.08);
}


/* ==========================================================================
   Transactions Table
   ========================================================================== */

.odin-wallet-transactions {
    background:
        linear-gradient(180deg, rgba(var(--odin-accent-rgb), 0.03) 0%, transparent 100%),
        var(--odin-bg-glass-strong);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-lg);
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: var(--odin-shadow-card);
    color: var(--odin-text-primary);
    position: relative;
    animation: odin-fade-in 0.5s ease-out 0.1s both;
}

.odin-wallet-transactions::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--odin-noise);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.35;
}

.odin-wallet-transactions h3,
.odin-wallet-transactions__title {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    padding: 24px 28px;
    border-bottom: 1px solid var(--odin-border-glass);
    color: var(--odin-text-primary);
    letter-spacing: 0.3px;
}

/* Table — BEM classes */

.odin-wallet-transactions__table-wrap {
    position: relative;
    z-index: 1;
    overflow-x: auto;
}

.odin-wallet-transactions__table {
    width: 100%;
    border-collapse: collapse;
}

.odin-wallet-transactions__th {
    background: rgba(255, 255, 255, 0.015);
    font-weight: 700;
    text-align: left;
    padding: 16px 24px;
    font-size: 10px;
    color: var(--odin-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-bottom: 1px solid var(--odin-border-glass);
}

.odin-wallet-transactions__td {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.025);
    font-size: 14px;
    color: var(--odin-text-primary);
    transition: background var(--odin-transition-fast);
}

.odin-wallet-transactions__row:hover .odin-wallet-transactions__td {
    background: rgba(255, 255, 255, 0.02);
}

.odin-wallet-transactions__row:last-child .odin-wallet-transactions__td {
    border-bottom: none;
}

/* Table — Legacy classes */

.odin-transactions-table {
    width: 100%;
    border-collapse: collapse;
}

.odin-transactions-table th {
    background: rgba(255, 255, 255, 0.015);
    font-weight: 700;
    text-align: left;
    padding: 16px 24px;
    font-size: 10px;
    color: var(--odin-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-bottom: 1px solid var(--odin-border-glass);
}

.odin-transactions-table td {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.025);
    font-size: 14px;
    color: var(--odin-text-primary);
    transition: background var(--odin-transition-fast);
}

.odin-transactions-table tr:last-child td {
    border-bottom: none;
}

.odin-transactions-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Type Badges */

.odin-wallet-transactions__type-badge,
.odin-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.odin-wallet-transactions__type-badge--deposit,
.odin-wallet-transactions__type-badge--refund,
.odin-wallet-transactions__type-badge--topup,
.odin-type-deposit,
.odin-type-admin_add,
.odin-type-bonus,
.odin-type-cashback,
.odin-type-refund {
    background: var(--odin-green-bg);
    color: var(--odin-green);
    border: 1px solid rgba(var(--odin-green-rgb), 0.15);
}

.odin-wallet-transactions__type-badge--generation,
.odin-wallet-transactions__type-badge--withdraw,
.odin-type-withdraw,
.odin-type-generation,
.odin-type-admin_remove {
    background: var(--odin-red-bg);
    color: var(--odin-red);
    border: 1px solid rgba(var(--odin-red-rgb), 0.15);
}

/* Amount Colors */

.odin-wallet-transactions__amount--deposit,
.odin-amount-positive {
    color: var(--odin-green);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(var(--odin-green-rgb), 0.15);
}

.odin-wallet-transactions__amount--charge,
.odin-amount-negative {
    color: var(--odin-red);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(var(--odin-red-rgb), 0.15);
}

/* Empty State */

.odin-wallet-transactions__empty {
    text-align: center;
    color: var(--odin-text-muted);
    padding: 48px 24px;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

/* Pagination (Transactions) */

.odin-wallet-transactions__pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 24px 28px;
    position: relative;
    z-index: 1;
}

.odin-wallet-transactions__page-btn {
    padding: 10px 16px;
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--odin-text-secondary);
    background: var(--odin-bg-glass);
    transition: all var(--odin-transition);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.odin-wallet-transactions__page-btn:hover {
    background: var(--odin-bg-glass-hover);
    color: var(--odin-text-primary);
    border-color: var(--odin-border-glass-hover);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.odin-wallet-transactions__page-btn--active {
    background: linear-gradient(135deg, var(--odin-accent), var(--odin-cyan));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 20px var(--odin-accent-glow);
    font-weight: 700;
}


/* ==========================================================================
   Dashboard
   ========================================================================== */

.odin-wallet-dashboard {
    max-width: 960px;
    margin: 0 auto;
}

/* Balance Card */

.odin-wallet-dashboard__balance-card {
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-xl);
    padding: 48px 36px;
    text-align: center;
    margin-bottom: 32px;
    box-shadow: var(--odin-shadow-glow), var(--odin-shadow-card);
    color: var(--odin-text-primary);
    position: relative;
    overflow: hidden;
    animation: odin-fade-in 0.5s ease-out both;
}

.odin-wallet-dashboard__balance-card::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 160%;
    height: 160%;
    background:
        radial-gradient(ellipse at 25% 15%, rgba(var(--odin-accent-rgb), 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 85%, rgba(var(--odin-cyan-rgb), 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.odin-wallet-dashboard__balance-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--odin-noise);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.45;
}

.odin-wallet-dashboard__balance-label {
    position: relative;
    z-index: 1;
    font-size: 11px;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-weight: 600;
}

.odin-wallet-dashboard__balance-amount {
    position: relative;
    z-index: 1;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 20%, var(--odin-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 28px rgba(var(--odin-cyan-rgb), 0.2));
}

.odin-wallet-dashboard__balance-currency {
    position: relative;
    z-index: 1;
    font-size: 15px;
    opacity: 0.4;
    margin-top: 10px;
    letter-spacing: 1px;
}

/* Stats Cards Grid */
.odin-wallet-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 32px;
}

/* ==========================================================================
   ۱. استایل پایه کارت‌ها (کاملاً هماهنگ با کدهای ارسالی شما)
   ========================================================================== */
   .odin-wallet-dashboard__stat-card {
    background: var(--odin-bg-surface) !important;
    border: 1px solid var(--odin-border-glass) !important;
    border-radius: var(--odin-radius-lg) !important;
    padding: 28px 24px;
    text-align: center;
    box-shadow: var(--odin-shadow-card);
    transition: 
        border-color var(--odin-transition),
        transform var(--odin-transition),
        box-shadow var(--odin-transition);
    position: relative;
    overflow: hidden; /* حیاتی برای اینکه لیزر بیرون کارت دیده نشود */
    z-index: 1;
}

/* لایه نویز (بدون تغییر ماند) */
.odin-wallet-dashboard__stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--odin-noise);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.15;
    z-index: 2; /* روی همه قرار می‌گیرد تا نویز یکدست باشد */
}

/* هاور کلی کارت‌ها */
.odin-wallet-dashboard__stat-card:hover {
    border-color: var(--odin-border-glass-hover) !important;
    transform: translateY(-4px);
    box-shadow: var(--odin-shadow-elevated);
}

/* ==========================================================================
   ۲. تعریف لایه لِیزر داینامیک در کف کارت (استفاده از ::before)
   ========================================================================== */
.odin-wallet-dashboard__stat-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* ضخامت خط لیزری */
    z-index: 3; /* بالاتر از نویز تا کاملاً بدرخشد */
    
    /* انتقال کامل به سمت چپ بیرون از کارت در حالت عادی */
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* حرکت لیزر به سمت راست هنگام هاور و عقبگرد در زمان unhover */
.odin-wallet-dashboard__stat-card:hover::before {
    transform: translateX(100%);
}

/* ==========================================================================
   ۳. تزریق رنگ‌های اختصاصی لیزر و درخشش (Glow) متون
   ========================================================================== */

/* ۱. کارت واریزی‌ها (Deposits) - لیزر سبز */
.odin-wallet-dashboard__stat-card--deposits::before {
    background: linear-gradient(90deg, transparent, var(--odin-accent), var(--odin-green), transparent);
}
.odin-wallet-dashboard__stat-card--deposits:hover {
    border-color: rgba(var(--odin-green-rgb), 0.25) !important;
    box-shadow: var(--odin-shadow-elevated), 0 8px 24px rgba(var(--odin-green-rgb), 0.08);
}
.odin-wallet-dashboard__stat-card--deposits .odin-wallet-dashboard__stat-value {
    color: #fff;
    text-shadow: 0 0 12px rgba(var(--odin-green-rgb), 0.35);
}

/* ۲. کارت مصرفی (Usage) - لیزر قرمز */
.odin-wallet-dashboard__stat-card--usage::before {
    background: linear-gradient(90deg, transparent, var(--odin-accent), var(--odin-red), transparent);
}
.odin-wallet-dashboard__stat-card--usage:hover {
    border-color: rgba(var(--odin-red-rgb), 0.25) !important;
    box-shadow: var(--odin-shadow-elevated), 0 8px 24px rgba(var(--odin-red-rgb), 0.08);
}
.odin-wallet-dashboard__stat-card--usage .odin-wallet-dashboard__stat-value {
    color: #fff;
    text-shadow: 0 0 12px rgba(var(--odin-red-rgb), 0.35);
}

/* ۳. کارت درخواست‌ها (Requests) - لیزر سایان */
.odin-wallet-dashboard__stat-card--requests::before {
    background: linear-gradient(90deg, transparent, var(--odin-accent), var(--odin-cyan), transparent);
}
.odin-wallet-dashboard__stat-card--requests:hover {
    border-color: rgba(var(--odin-cyan-rgb), 0.25) !important;
    box-shadow: var(--odin-shadow-elevated), 0 8px 24px rgba(var(--odin-cyan-rgb), 0.08);
}
.odin-wallet-dashboard__stat-card--requests .odin-wallet-dashboard__stat-value {
    color: #fff;
    text-shadow: 0 0 12px rgba(var(--odin-cyan-rgb), 0.35);
}

/* ==========================================================================
   ۴. تایپوگرافی داخل کارت‌ها (جهت اطمینان از زوم و خوانایی)
   ========================================================================== */
.odin-wallet-dashboard__stat-label {
    position: relative;
    z-index: 4;
    font-size: 11px;
    color: var(--odin-text-secondary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.odin-wallet-dashboard__stat-value {
    position: relative;
    z-index: 4;
    font-size: 24px;
    font-weight: 800;
    color: var(--odin-text-primary);
    transition: text-shadow var(--odin-transition);
}

/* Stagger animation for stat cards */
.odin-wallet-dashboard__stat-card:nth-child(1) { animation-delay: 0.08s; }
.odin-wallet-dashboard__stat-card:nth-child(2) { animation-delay: 0.16s; }
.odin-wallet-dashboard__stat-card:nth-child(3) { animation-delay: 0.24s; }

/* Quick Top-Up Section */

.odin-wallet-dashboard__quick-topup {
    background: var(--odin-bg-glass-strong);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-lg);
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: var(--odin-shadow-card);
    position: relative;
    overflow: hidden;
    animation: odin-fade-in 0.5s ease-out 0.3s both;
}

.odin-wallet-dashboard__quick-topup::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--odin-noise);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.3;
}

.odin-wallet-dashboard__section-title {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--odin-text-primary);
    letter-spacing: 0.3px;
}

.odin-wallet-dashboard__topup-buttons,
.odin-quick-topup {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

/* استایل پایه دکمه‌ها (بهینه‌سازی شده) */
.odin-wallet-dashboard__topup-btn,
.odin-quick-topup-btn,
.odin-wallet-dashboard__custom-submit-btn,
.odin-wallet-dashboard__asset-download {
    position: relative;
    overflow: hidden;
    background: var(--odin-bg-surface) !important; /* استفاده از یک سطح تاریک‌تر برای کنتراست بیشتر */
    border: 1px solid var(--odin-border-glass) !important;
    border-radius: var(--odin-radius-sm) !important; /* یکم گردتر برای ظاهر مدرن‌تر */
    padding: 14px 12px !important;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--odin-text-primary) !important;
    transition: 
        background var(--odin-transition),
        border-color var(--odin-transition),
        box-shadow var(--odin-transition),
        transform var(--odin-transition);
    position: relative;
    overflow: hidden; /* برای کنترل لایه‌های نوری داخلی */
    z-index: 1;
    backdrop-filter: blur(var(--odin-blur));
    -webkit-backdrop-filter: blur(var(--odin-blur));
}

.odin-wallet-dashboard__topup-btn::after,
.odin-quick-topup-btn::after,
.odin-wallet-dashboard__custom-submit-btn::after,
.odin-wallet-dashboard__asset-download::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    /* هماهنگ شده با متغیرهای Odin شما */
    background: linear-gradient(
        90deg, 
        transparent, 
        var(--odin-green) 30%, 
        var(--odin-cyan) 70%, 
        transparent
    );
    /* انتقال کامل به سمت چپ بیرون از دکمه */
    transform: translateX(-100%);
    /* استفاده از cubic-bezier برای حرکت شتاب‌دار و جذاب‌تر از ease معمولی */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.odin-wallet-dashboard__custom-submit-btn{
    width: 100%;
}
/* ۳. انیمیشن حرکت لیزر در حالت Hover */
.odin-wallet-dashboard__topup-btn:hover::after,
.odin-quick-topup-btn:hover::after,
.odin-wallet-dashboard__custom-submit-btn:hover::after,
.odin-wallet-dashboard__asset-download:hover::after {
    transform: translateX(100%); /* لیزر از چپ وارد شده و از راست خارج می‌شود */
}

/* ۴. اضافه کردن سایان نرم و درخشش دکمه در حالت Hover */
.odin-wallet-dashboard__topup-btn:hover,
.odin-quick-topup-btn:hover,
.odin-wallet-dashboard__custom-submit-btn:hover,
.odin-wallet-dashboard__asset-download:hover {
    border-color: rgba(var(--odin-cyan-rgb), 0.3) !important; /* متمایل کردن مرز دکمه به سایان */
    color: var(--odin-cyan) !important;
    /* یک درخشش ملایم سایان در پایین دکمه ایجاد میکنیم تا اثر لیزر ماندگار شود */
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.4),
        0 4px 20px rgba(var(--odin-cyan-rgb), 0.15), /* هاله سایان */
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
        
    transform: translateY(-2px);
}

/* افکت کلیک (Active) */
.odin-wallet-dashboard__topup-btn:active,
.odin-quick-topup-btn:active,
.odin-wallet-dashboard__custom-submit-btn:active,
.odin-wallet-dashboard__asset-download:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}   

.odin-wallet-dashboard__topup-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.odin-wallet-dashboard__asset-download {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px !important;
    font-size: 11px !important;
    line-height: 1;
    white-space: nowrap;
}

.odin-wallet-dashboard__asset-download-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* Dashboard Custom Top-Up */

.odin-wallet-dashboard__custom {
    position: relative;
    z-index: 1;
    margin-top: 24px;
}

.odin-wallet-dashboard__custom-label {
    font-size: 13px;
    color: var(--odin-text-secondary);
    margin: 0 0 12px;
}

.odin-wallet-dashboard__custom-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--odin-bg-glass-inset);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-sm);
    padding: 6px 6px 6px 18px;
    transition: border-color var(--odin-transition), box-shadow var(--odin-transition);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.odin-wallet-dashboard__custom-input-wrap:focus-within {
    border-color: var(--odin-cyan);
}

.odin-wallet-dashboard__custom-currency {
    font-size: 16px;
    font-weight: 700;
    color: var(--odin-text-secondary);
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.odin-wallet-dashboard__custom-input {
    flex: 1;
    padding: 14px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--odin-text-primary);
    outline: none;
    min-width: 0;
}

.odin-wallet-dashboard__custom-input::placeholder {
    color: var(--odin-text-muted);
}

.odin-wallet-dashboard__custom-input::-webkit-inner-spin-button,
.odin-wallet-dashboard__custom-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.odin-wallet-dashboard__custom-input[type=number] {
    -moz-appearance: textfield;
}

.odin-wallet-dashboard__custom-submit {
    margin-top: 16px;
}

.odin-wallet-dashboard__gift-balance {
    position: relative;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    margin-top: 14px;
    padding: 10px 16px;
    border-radius: var(--odin-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--odin-cyan);
    background-color: #00000030;
}

.odin-wallet-dashboard__gift-expiry {
    display: block;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.75;
    margin-top: 4px;
}

/* Recent Transactions Section */

.odin-wallet-dashboard__recent-transactions {
    background: var(--odin-bg-glass-strong);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-lg);
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: var(--odin-shadow-card);
    position: relative;
    overflow: hidden;
    animation: odin-fade-in 0.5s ease-out 0.35s both;
}

.odin-wallet-dashboard__recent-transactions::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--odin-noise);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.3;
}

.odin-wallet-dashboard__no-transactions {
    text-align: center;
    color: var(--odin-text-muted);
    padding: 36px 24px;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.odin-wallet-dashboard__tx-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 1;
}

.odin-wallet-dashboard__tx-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all var(--odin-transition-fast);
}

.odin-wallet-dashboard__tx-item:hover {
    background: rgba(255, 255, 255, 0.015);
    border-radius: var(--odin-radius-sm);
    padding-left: 14px;
    padding-right: 14px;
    margin-left: -14px;
    margin-right: -14px;
}

.odin-wallet-dashboard__tx-item:last-child {
    border-bottom: none;
}

.odin-wallet-dashboard__tx-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.odin-wallet-dashboard__tx-type {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex-shrink: 0;
}

.odin-wallet-dashboard__tx-type--deposit,
.odin-wallet-dashboard__tx-type--refund,
.odin-wallet-dashboard__tx-type--topup,
.odin-wallet-dashboard__tx-type--admin_add {
    background: var(--odin-green-bg);
    color: var(--odin-green);
    border: 1px solid rgba(var(--odin-green-rgb), 0.15);
}
input#odin-dashboard-custom-amount {
    border: none;
}
.odin-wallet-dashboard__tx-type--generation,
.odin-wallet-dashboard__tx-type--withdraw,
.odin-wallet-dashboard__tx-type--admin_remove {
    background: var(--odin-red-bg);
    color: var(--odin-red);
    border: 1px solid rgba(var(--odin-red-rgb), 0.15);
}
.odin-wallet-dashboard__tx-type.odin-wallet-dashboard__tx-type--cashback {
    background: var(--odin-cyan-bg);
    color: var(--odin-cyan);
    border: 1px solid rgba(var(--odin-cyan-rgb), 0.15);
}
.odin-wallet-dashboard__tx-desc {
    font-size: 14px;
    color: var(--odin-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.odin-wallet-dashboard__tx-right {
    text-align: right;
    flex-shrink: 0;
    margin-left: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.odin-wallet-dashboard__tx-amount {
    font-weight: 700;
    font-size: 14px;
}

.odin-wallet-dashboard__tx-amount--deposit {
    color: var(--odin-green);
    text-shadow: 0 0 10px rgba(var(--odin-green-rgb), 0.15);
}

.odin-wallet-dashboard__tx-amount--charge {
    color: var(--odin-red);
    text-shadow: 0 0 10px rgba(var(--odin-red-rgb), 0.15);
}

.odin-wallet-dashboard__tx-date {
    display: block;
    font-size: 11px;
    color: var(--odin-text-muted);
    margin-top: 4px;
}

/* Legacy Dashboard classes */

.odin-dashboard-balance {
    background:
        linear-gradient(135deg, rgba(var(--odin-accent-rgb), 0.22) 0%, rgba(var(--odin-cyan-rgb), 0.12) 100%),
        var(--odin-bg-glass-strong);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-xl);
    padding: 48px 36px;
    text-align: center;
    margin-bottom: 32px;
    box-shadow: var(--odin-shadow-glow), var(--odin-shadow-card);
    color: var(--odin-text-primary);
    position: relative;
    overflow: hidden;
}

.odin-dashboard-balance::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--odin-noise);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.45;
}

.odin-dashboard-balance .odin-balance-label {
    position: relative;
    z-index: 1;
    font-size: 11px;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.odin-dashboard-balance .odin-balance-amount {
    position: relative;
    z-index: 1;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, #fff 20%, var(--odin-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(var(--odin-cyan-rgb), 0.2));
}

.odin-dashboard-balance .odin-balance-currency {
    position: relative;
    z-index: 1;
    font-size: 18px;
    opacity: 0.4;
    margin-top: 10px;
}

.odin-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 32px;
}

.odin-stat-card {
    background: var(--odin-bg-glass-strong);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-md);
    padding: 28px 24px;
    text-align: center;
    box-shadow: var(--odin-shadow-card);
    transition: all var(--odin-transition);
}

.odin-stat-card:hover {
    border-color: var(--odin-border-glass-hover);
    transform: translateY(-3px);
}

.odin-stat-card .odin-stat-icon {
    font-size: 24px;
    color: var(--odin-accent);
    margin-bottom: 10px;
}

.odin-stat-card .odin-stat-number {
    font-size: 24px;
    font-weight: 800;
    color: var(--odin-text-primary);
    margin-bottom: 6px;
}

.odin-stat-card .odin-stat-text {
    font-size: 12px;
    color: var(--odin-text-secondary);
}

.odin-dashboard-section {
    background: var(--odin-bg-glass-strong);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-lg);
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: var(--odin-shadow-card);
    position: relative;
    overflow: hidden;
}

.odin-dashboard-section h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--odin-text-primary);
}


/* ==========================================================================
   Login Prompt
   ========================================================================== */

.odin-wallet-login-prompt,
.odin-login-prompt {
    background: var(--odin-bg-glass-strong);
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-lg);
    padding: 48px 36px;
    text-align: center;
    color: var(--odin-text-secondary);
    box-shadow: var(--odin-shadow-card);
    position: relative;
    overflow: hidden;
    animation: odin-fade-in 0.5s ease-out both;
}

.odin-wallet-login-prompt::after,
.odin-login-prompt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--odin-noise);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.4;
}

.odin-wallet-login-prompt a,
.odin-login-prompt a {
    color: var(--odin-cyan);
    font-weight: 700;
    text-decoration: none;
    transition: all var(--odin-transition);
    position: relative;
    z-index: 1;
}

.odin-wallet-login-prompt a:hover,
.odin-login-prompt a:hover {
    color: var(--odin-accent-hover);
    text-shadow: 0 0 16px var(--odin-cyan-glow);
}


/* ==========================================================================
   Pagination (Legacy)
   ========================================================================== */

.odin-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
    padding: 12px 0;
}

.odin-pagination a,
.odin-pagination span {
    padding: 10px 16px;
    border: 1px solid var(--odin-border-glass);
    border-radius: var(--odin-radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--odin-text-secondary);
    background: var(--odin-bg-glass);
    transition: all var(--odin-transition);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.odin-pagination span.current {
    background: linear-gradient(135deg, var(--odin-accent), var(--odin-cyan));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 20px var(--odin-accent-glow);
    font-weight: 700;
}

.odin-pagination a:hover {
    background: var(--odin-bg-glass-hover);
    color: var(--odin-text-primary);
    border-color: var(--odin-border-glass-hover);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}


/* ==========================================================================
   Loading / Notices
   ========================================================================== */

.odin-loading {
    text-align: center;
    padding: 36px;
    color: var(--odin-text-muted);
}

.odin-notice {
    padding: 16px 20px;
    border-radius: var(--odin-radius-sm);
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.odin-notice-success {
    background: var(--odin-green-bg);
    color: var(--odin-green);
    border: 1px solid rgba(var(--odin-green-rgb), 0.15);
    box-shadow: 0 4px 16px rgba(var(--odin-green-rgb), 0.06);
}

.odin-notice-error {
    background: var(--odin-red-bg);
    color: var(--odin-red);
    border: 1px solid rgba(var(--odin-red-rgb), 0.15);
    box-shadow: 0 4px 16px rgba(var(--odin-red-rgb), 0.06);
}

.odin-notice-warning {
    background: var(--odin-amber-bg);
    color: var(--odin-amber);
    border: 1px solid rgba(var(--odin-amber-rgb), 0.15);
    box-shadow: 0 4px 16px rgba(var(--odin-amber-rgb), 0.06);
}


/* ==========================================================================
   Scrollbar Styling (WebKit)
   ========================================================================== */

.odin-wallet-transactions__table-wrap::-webkit-scrollbar {
    height: 5px;
}

.odin-wallet-transactions__table-wrap::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.odin-wallet-transactions__table-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

.odin-wallet-transactions__table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.16);
}


/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes odin-pulse-glow {
    0%, 100% { box-shadow: 0 0 24px var(--odin-accent-glow); }
    50%      { box-shadow: 0 0 48px var(--odin-accent-glow), 0 0 80px rgba(var(--odin-cyan-rgb), 0.08); }
}

@keyframes odin-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes odin-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 768px) {
    .odin-wallet-dashboard__stats,
    .odin-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .odin-wallet-topup__preset-buttons,
    .odin-topup-presets {
        grid-template-columns: repeat(2, 1fr);
    }

    .odin-wallet-dashboard__topup-buttons,
    .odin-quick-topup {
        grid-template-columns: repeat(2, 1fr);
    }

    .odin-wallet-dashboard__balance-amount,
    .odin-dashboard-balance .odin-balance-amount {
        font-size: 40px;
    }

    .odin-wallet-balance .odin-balance-amount {
        font-size: 36px;
    }

    .odin-wallet-transactions__table,
    .odin-transactions-table {
        font-size: 13px;
    }

    .odin-wallet-transactions__th,
    .odin-wallet-transactions__td,
    .odin-transactions-table th,
    .odin-transactions-table td {
        padding: 12px 16px;
    }

    .odin-wallet-dashboard__balance-card {
        padding: 32px 24px;
    }
}

@media screen and (max-width: 480px) {
    .odin-wallet-topup__preset-buttons,
    .odin-topup-presets {
        grid-template-columns: 1fr;
    }

    .odin-wallet-topup__custom-input-wrap,
    .odin-topup-custom,
    .odin-wallet-dashboard__custom-input-wrap {
        flex-direction: column;
    }

    .odin-wallet-topup__custom-input-wrap,
    .odin-wallet-dashboard__custom-input-wrap {
        padding: 14px;
        gap: 10px;
    }

    .odin-wallet-dashboard__balance-amount {
        font-size: 34px;
    }

    .odin-wallet-dashboard__topup-buttons,
    .odin-quick-topup {
        grid-template-columns: 1fr 1fr;
    }

    .odin-wallet-dashboard__tx-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .odin-wallet-dashboard__tx-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .odin-wallet-dashboard__tx-right {
        text-align: left;
        margin-left: 0;
    }
}