/* ============================================================
   GameTopUp - Custom Styles
   Tailwind is loaded via CDN; this file adds custom polish.
   ============================================================ */

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0e1a; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* --- Smooth scroll --- */
html { scroll-behavior: smooth; }

/* --- Selection --- */
::selection { background: rgba(124, 58, 237, 0.4); color: #fff; }

/* --- Glow utilities --- */
.glow-brand { box-shadow: 0 0 30px rgba(124, 58, 237, 0.4); }
.glow-cyan  { box-shadow: 0 0 30px rgba(6, 182, 212, 0.4); }
.glow-green { box-shadow: 0 0 30px rgba(16, 185, 129, 0.4); }

/* --- Hero background --- */
.hero-bg {
    background:
        radial-gradient(ellipse 70% 50% at top, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at bottom right, rgba(6, 182, 212, 0.12) 0%, transparent 55%);
}

/* --- Grid pattern overlay --- */
.grid-pattern {
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

/* --- Gradient text --- */
.text-gradient {
    background: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Game card hover --- */
.game-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.5);
}

/* --- Spinner --- */
.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Form input glow --- */
.input-glow {
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.input-glow:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

/* --- Button press --- */
.btn-press:active { transform: scale(0.97); }

/* --- Hide scrollbar (for horizontal navs) --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Fade-in helper (fallback if Tailwind config not applied) --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.4s ease-out; }

/* --- Order status badges --- */
.badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1; }
.badge-pending    { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-processing { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-completed  { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-failed     { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.badge-refunded   { background: rgba(156, 163, 175, 0.15); color: #d1d5db; border: 1px solid rgba(156, 163, 175, 0.3); }

/* --- Table row hover --- */
.data-table tbody tr { transition: background-color 0.15s ease; }
.data-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.03); }

/* --- Loader overlay --- */
.loader-overlay {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(4px);
}

/* --- Stepper (checkout / install) --- */
.stepper-line { background: linear-gradient(90deg, #7c3aed 0%, #06b6d4 100%); }

/* --- Shake animation for form errors --- */
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-4px); }
    40%     { transform: translateX(4px); }
    60%     { transform: translateX(-3px); }
    80%     { transform: translateX(3px); }
}
.shake { animation: shake 0.3s ease; }