/**
 * ============================================
 * BLUE THEME - Blue User Theme
 * ============================================
 * Tema biru untuk tampilan user
 * Victory88 Style - Professional Dark Blue
 */

:root {
    /* ==========================================
       BACKGROUND COLORS
       ========================================== */
    --bg-dark: #0d0d0d;
    --bg-darker: #080808;
    --bg-card: #161616;
    --bg-card-hover: #1a1a1a;
    --bg-input: #1f1f1f;
    --bg-hover: #252525;
    --bg-overlay: rgba(0, 0, 0, 0.85);
    --border-color: #2a2a2a;
    --border-light: #333333;

    /* ==========================================
       PRIMARY COLORS - BLUE
       ========================================== */
    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #60a5fa;
    --color-primary-soft: rgba(59, 130, 246, 0.15);
    --color-primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --color-primary-shadow: rgba(59, 130, 246, 0.3);
    --color-gradient-primary: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    --color-primary-200: #3b82f6;
    --color-primary-300: #2563eb;

    /* ==========================================
       ACCENT COLORS
       ========================================== */
    --color-gold: #fbbf24;
    --color-gold-hover: #f59e0b;
    --color-gold-dark: #d97706;
    --color-gold-soft: rgba(251, 191, 36, 0.15);
    --color-gold-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

    --color-green: #22c55e;
    --color-green-hover: #16a34a;
    --color-green-soft: rgba(34, 197, 94, 0.15);

    --color-orange: #f97316;
    --color-orange-hover: #ea580c;
    --color-orange-soft: rgba(249, 115, 22, 0.15);

    --color-blue: #3b82f6;
    --color-blue-hover: #2563eb;
    --color-blue-soft: rgba(59, 130, 246, 0.15);

    --color-purple: #a855f7;
    --color-purple-hover: #9333ea;
    --color-purple-soft: rgba(168, 85, 247, 0.15);

    --color-cyan: #06b6d4;
    --color-cyan-hover: #0891b2;
    --color-cyan-soft: rgba(6, 182, 212, 0.15);

    /* ==========================================
       TEXT COLORS
       ========================================== */
    --text-primary: #ffffff;
    --text-secondary: #e5e5e5;
    --text-muted: #a3a3a3;
    --text-dark: #737373;
    --text-inverse: #0d0d0d;

    /* ==========================================
       STATUS COLORS
       ========================================== */
    --color-success: #22c55e;
    --color-success-soft: rgba(34, 197, 94, 0.15);
    --color-warning: #f59e0b;
    --color-warning-soft: rgba(245, 158, 11, 0.15);
    --color-danger: #ef4444;
    --color-danger-soft: rgba(239, 68, 68, 0.15);
    --color-info: #3b82f6;
    --color-info-soft: rgba(59, 130, 246, 0.15);

    /* ==========================================
       SHADOWS
       ========================================== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 4px 14px 0 rgba(59, 130, 246, 0.3);
    --shadow-gold: 0 4px 14px 0 rgba(251, 191, 36, 0.3);

    /* ==========================================
       BUTTON COLORS
       ========================================== */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-hover: var(--color-primary-hover);
    --btn-secondary-bg: #374151;
    --btn-secondary-hover: #4b5563;
    --btn-success-bg: var(--color-green);
    --btn-success-hover: var(--color-green-hover);
    --btn-danger-bg: var(--color-danger);
    --btn-danger-hover: #dc2626;

    /* ==========================================
       SCROLLBAR
       ========================================== */
    --scrollbar-track: var(--bg-dark);
    --scrollbar-thumb: var(--color-primary);
    --scrollbar-thumb-hover: var(--color-primary-hover);

    /* ==========================================
       COMPONENT SPECIFIC
       ========================================== */
    --header-bg: rgba(13, 13, 13, 0.98);
    --header-border: rgba(255, 255, 255, 0.06);
    --nav-active: var(--color-primary);
    --input-border: var(--border-color);
    --input-focus-border: var(--color-primary);
    --card-border-radius: 12px;
    --btn-border-radius: 8px;
}

/* ==========================================
   GLOBAL STYLES
   ========================================== */
body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
}

/* Selection */
::selection {
    background: var(--color-primary-soft);
    color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ==========================================
   HEADER
   ========================================== */
.main-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
}

.logo-text {
    color: var(--color-primary);
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn-primary,
.btn-daftar,
.btn-login-desktop,
.btn-register-desktop {
    background: var(--color-primary-gradient);
    color: var(--text-primary);
    border: none;
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover,
.btn-daftar:hover,
.btn-login-desktop:hover,
.btn-register-desktop:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--color-primary-gradient);
    color: var(--text-primary);
    border: none;
    box-shadow: var(--shadow-primary);
}

.btn-danger:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

.btn-secondary,
.btn-masuk {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.btn-secondary:hover,
.btn-masuk:hover {
    background: var(--bg-hover);
    border-color: var(--color-primary);
}

/* Fast Deposit / Promo Button (header mobile before login) */
.fast-deposit-btn {
    background: var(--color-primary-gradient);
    color: var(--text-primary);
}

/* Bottom Nav Buttons - Override for footer */
.bottom-nav-buttons .btn-danger {
    background: var(--color-primary-gradient) !important;
    color: white !important;
    flex: 1 !important;
    box-shadow: none !important;
}

.bottom-nav-buttons .btn-primary {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    flex: 1 !important;
    box-shadow: none !important;
}

.bottom-nav-buttons .btn-primary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.btn-deposit {
    background: var(--color-green);
    color: var(--text-primary);
}

.btn-deposit:hover {
    background: var(--color-green-hover);
}

.btn-withdraw {
    background: var(--color-orange);
    color: var(--text-primary);
}

.btn-withdraw:hover {
    background: var(--color-orange-hover);
}

/* Fast Deposit Button */
.fast-deposit-btn {
    background: var(--color-primary-gradient);
    color: var(--text-inverse);
}

.fast-deposit-btn:hover {
    background: var(--color-primary-hover);
}

/* ==========================================
   NAVIGATION
   ========================================== */
.bottom-nav {
    background: var(--header-bg);
    border-top: 1px solid var(--header-border);
}

.nav-item {
    color: var(--text-muted);
}

.nav-item.active,
.nav-item:hover {
    color: var(--color-primary);
}

.nav-item.deposit-center {
    background: var(--color-gold-gradient);
    color: var(--text-inverse);
    box-shadow: var(--shadow-gold);
}

/* Side Menu */
.side-menu {
    background: var(--bg-card);
}

.menu-item {
    color: var(--text-secondary);
}

.menu-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.menu-item.active {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

/* Desktop Nav */
.desktop-nav-link {
    color: var(--text-secondary);
}

.desktop-nav-link:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.desktop-nav-link.active {
    color: var(--color-primary);
}

/* ==========================================
   CARDS & CONTAINERS
   ========================================== */
.card,
.game-card,
.provider-card,
.category-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--card-border-radius);
}

.card:hover,
.game-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

/* ==========================================
   FORMS
   ========================================== */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background: var(--bg-input);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    border-radius: var(--btn-border-radius);
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
    outline: none;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-dark);
}

.form-label {
    color: var(--text-secondary);
}

/* ==========================================
   USER BALANCE
   ========================================== */
.user-balance-header {
    background: var(--color-primary-soft);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.user-balance-header .amount {
    color: var(--color-primary-light);
}

.user-balance-header .balance-icon {
    color: var(--color-primary);
}

/* ==========================================
   USER DROPDOWN
   ========================================== */
.user-avatar {
    background: var(--color-primary-gradient);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.user-dropdown-btn:hover .user-avatar {
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.user-dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.dropdown-header {
    background: var(--color-primary-soft);
}

.dropdown-avatar {
    background: var(--color-primary-gradient);
}

.dropdown-item {
    color: var(--text-secondary);
}

.dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dropdown-logout {
    color: var(--color-danger);
}

.dropdown-logout:hover {
    background: var(--color-danger-soft);
}

/* ==========================================
   ALERTS
   ========================================== */
.alert-error,
.alert-danger {
    background: var(--color-danger-soft);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-success {
    background: var(--color-success-soft);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.alert-warning {
    background: var(--color-warning-soft);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.alert-info {
    background: var(--color-info-soft);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

/* ==========================================
   BADGES
   ========================================== */
.badge-primary {
    background: var(--color-primary);
    color: var(--text-primary);
}

.badge-success {
    background: var(--color-success);
    color: var(--text-primary);
}

.badge-warning {
    background: var(--color-warning);
    color: var(--text-inverse);
}

.badge-danger {
    background: var(--color-danger);
    color: var(--text-primary);
}

.badge-gold {
    background: var(--color-gold);
    color: var(--text-inverse);
}

/* ==========================================
   CATEGORY ICONS
   ========================================== */
.category-icon {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.category-icon:hover,
.category-icon.active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: var(--shadow-primary);
}

.category-icon.active .category-name {
    color: var(--color-primary);
}

/* ==========================================
   GAME CARDS
   ========================================== */
.game-card {
    background: var(--bg-card);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    transition: all 0.3s ease;
}

.game-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.game-card .play-btn {
    background: var(--color-primary-gradient);
    color: var(--text-primary);
}

.game-card .rtp-badge {
    background: var(--color-success);
    color: var(--text-primary);
}

/* ==========================================
   PROVIDER CARDS
   ========================================== */
.provider-item,
.provider-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.provider-item:hover,
.provider-card:hover,
.provider-item.active,
.provider-card.active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

/* ==========================================
   FOOTER
   ========================================== */
.footer,
.site-footer {
    background: var(--bg-darker);
    border-top: 1px solid var(--border-color);
}

.footer-seo h2 {
    color: var(--color-gold);
}

.footer-bar a {
    color: var(--color-primary);
}

/* ==========================================
   DEPOSIT/WITHDRAW PAGE
   ========================================== */
.payment-method-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.payment-method-card:hover,
.payment-method-card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.bank-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.bank-card.active {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

/* Amount buttons */
.amount-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.amount-btn:hover,
.amount-btn.active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ==========================================
   HISTORY PAGE
   ========================================== */
.history-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.history-item .status-success {
    color: var(--color-success);
}

.history-item .status-pending {
    color: var(--color-warning);
}

.history-item .status-failed {
    color: var(--color-danger);
}

/* ==========================================
   PROFILE PAGE
   ========================================== */
.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.profile-avatar {
    background: var(--color-primary-gradient);
}

.profile-stat {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
}

/* ==========================================
   PROMO PAGE
   ========================================== */
.promo-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.promo-card:hover {
    border-color: var(--color-primary);
}

.promo-badge {
    background: var(--color-primary);
}

/* ==========================================
   MODAL
   ========================================== */
.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
}

/* ==========================================
   LOADING & ANIMATIONS
   ========================================== */
.loading {
    border-color: var(--color-primary-soft);
    border-top-color: var(--color-primary);
}

.skeleton {
    background: linear-gradient(90deg,
        var(--bg-input) 25%,
        var(--bg-hover) 50%,
        var(--bg-input) 75%
    );
}

/* Glow effects */
.glow {
    box-shadow: 0 0 20px var(--color-primary-shadow);
}

.glow-gold {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */
.toast-success {
    background: rgba(34, 197, 94, 0.95);
}

.toast-error {
    background: rgba(239, 68, 68, 0.95);
}

.toast-warning {
    background: rgba(245, 158, 11, 0.95);
}

.toast-info {
    background: rgba(59, 130, 246, 0.95);
}

/* ==========================================
   SPECIAL COMPONENTS
   ========================================== */

/* Daily Bonus */
.daily-bonus-card {
    background: var(--color-primary-gradient);
}

/* Lucky Wheel */
.wheel-container {
    border: 4px solid var(--color-gold);
    box-shadow: var(--shadow-gold);
}

/* RTP Display */
.rtp-high {
    color: var(--color-success);
}

.rtp-medium {
    color: var(--color-warning);
}

.rtp-low {
    color: var(--color-danger);
}

/* ==========================================
   INNER PAGE HEADER - Running Text
   ========================================== */
.inner-page-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.inner-page-header .running-text-container {
    background: transparent;
}

.inner-page-header .running-text .icon {
    color: var(--color-primary);
}

.inner-page-header .running-text .text {
    color: var(--text-muted);
}

/* Homepage Running Text */
.vip-bar .running-text-container {
    background: transparent;
}

.vip-bar .running-text .icon {
    color: var(--color-primary);
}

.vip-bar .running-text .text {
    color: #ECF0FF;
}

/* VIP Bar Blue Theme */
.vip-bar {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 50%, #3b82f6 100%);
}

/* Jackpot Winners (Homepage) */
.jackpot-section {
    background: var(--bg-card);
}

.jackpot-title {
    color: var(--color-primary);
}

.jackpot-avatar {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.jackpot-name {
    color: var(--text-secondary);
}

.jackpot-amount {
    color: var(--color-primary);
}

/* Big Wins (Homepage) */
.bigwin-user {
    color: var(--text-muted);
}

.bigwin-amount {
    color: var(--color-primary);
}

.bigwin-game {
    color: var(--text-secondary);
}

/* ==========================================
   BOTTOM NAV (Homepage)
   ========================================== */
.bottom-nav {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

.bottom-nav-logged .nav-item {
    color: var(--text-muted);
}

.bottom-nav-logged .nav-item.active,
.bottom-nav-logged .nav-item:hover {
    color: var(--color-primary);
}

.bottom-nav-logged .nav-item.deposit-center {
    background: var(--color-primary-gradient);
    box-shadow: var(--shadow-primary);
}

/* ==========================================
   SECTION TITLES (Homepage)
   ========================================== */
.section-title {
    color: var(--color-primary);
}

.see-all {
    color: var(--color-primary);
}

/* Widget hover */
.widget-item:hover,
.widget-item.active {
    border-color: var(--color-primary);
}

/* Game card badges */
.game-card .badge.hot {
    background: var(--color-primary);
}

/* Games tabs */
.games-tab.active {
    background: var(--color-primary-gradient);
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 768px) {
    .user-balance-header {
        padding: 6px 10px;
        font-size: 12px;
    }
}

@media (min-width: 1024px) {
    .card:hover {
        transform: translateY(-2px);
    }
}