/* app-style.css - Premier Games Beautiful Styles */



:root {

    --primary-blue: #3B82F6;

    --primary-purple: #8B5CF6;

    --primary-green: #10B981;

    --primary-orange: #F59E0B;

    --gradient-start: #3B82F6;

    --gradient-end: #8B5CF6;

}



/* Animations */

@keyframes float {

    0%, 100% { transform: translateY(0px); }

    50% { transform: translateY(-20px); }

}



@keyframes pulse-glow {

    0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }

    50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.8); }

}



@keyframes slide-up {

    from { transform: translateY(20px); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }

}



/* Base Styles */

body {

    font-family: 'Inter', sans-serif;

    background-color: #f9fafb;

}



/* Gradient Backgrounds */

.gradient-bg {

    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));

}



.hero-gradient {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    position: relative;

    overflow: hidden;

}



.hero-gradient::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);

    animation: float 6s ease-in-out infinite;

}



/* Navigation */

.nav-sticky {

    position: sticky;

    top: 0;

    z-index: 40;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}



/* Buttons */

.btn-primary {

    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));

    color: white;

    padding: 0.75rem 1.5rem;

    border-radius: 0.5rem;

    font-weight: 600;

    transition: all 0.3s ease;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);

}



.btn-secondary {

    background: white;

    color: #374151;

    padding: 0.75rem 1.5rem;

    border-radius: 0.5rem;

    font-weight: 600;

    border: 2px solid #e5e7eb;

    transition: all 0.3s ease;

}



.btn-secondary:hover {

    border-color: var(--primary-blue);

    color: var(--primary-blue);

}



/* Cards */

.card-hover {

    transition: all 0.3s ease;

    background: white;

    border-radius: 1rem;

    overflow: hidden;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.card-hover:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);

}



/* Competition Cards */

.competition-card {

    background: white;

    border-radius: 1rem;

    overflow: hidden;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

}



.competition-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);

}



.competition-card-image {

    height: 200px;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.competition-card:hover .competition-card-image {

    transform: scale(1.05);

}



.ticket-badge {

    position: absolute;

    top: 1rem;

    right: 1rem;

    background: #10B981;

    color: white;

    padding: 0.5rem 1rem;

    border-radius: 9999px;

    font-size: 0.875rem;

    font-weight: 700;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



/* Progress Bar */

.progress-bar {

    width: 100%;

    background: #e5e7eb;

    border-radius: 9999px;

    height: 0.75rem;

    overflow: hidden;

}



.progress-fill {

    background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple));

    height: 100%;

    border-radius: 9999px;

    transition: width 0.5s ease;

}



/* Text Effects */

.gradient-text {

    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-weight: 700;

}



.text-shadow {

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);

}



/* Animations */

.float-animation {

    animation: float 3s ease-in-out infinite;

}



.hover-scale {

    transition: transform 0.3s ease;

}



.hover-scale:hover {

    transform: scale(1.05);

}



/* Glass Effect */

.glass-effect {

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



/* Loader */

.loader {

    border: 4px solid #f3f4f6;

    border-top: 4px solid var(--primary-blue);

    border-radius: 50%;

    width: 3rem;

    height: 3rem;

    animation: spin 1s linear infinite;

}



.loader-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 4rem;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



/* Stats Cards */

.stats-card {

    background: white;

    padding: 1.5rem;

    border-radius: 1rem;

    text-align: center;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    transition: all 0.3s ease;

}



.stats-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

}



.stats-number {

    font-size: 2rem;

    font-weight: 800;

    margin-bottom: 0.5rem;

}



.stats-label {

    color: #6b7280;

    font-size: 0.875rem;

}



/* Sections */

.section {

    display: none;

    animation: slide-up 0.5s ease;

}



.section.active {

    display: block;

}



/* Modal Overlay */

.modal-overlay {

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

}



/* Form Inputs */

input[type="text"],

input[type="email"],

input[type="password"],

input[type="number"],

input[type="date"],

input[type="tel"],

select,

textarea {

    transition: all 0.3s ease;

}



input:focus,

select:focus,

textarea:focus {

    outline: none;

    ring: 2px;

    ring-color: var(--primary-blue);

    border-color: var(--primary-blue);

}



/* Toast Notifications */

.toast {

    animation: slide-in 0.3s ease;

}



@keyframes slide-in {

    from { transform: translateX(100%); }

    to { transform: translateX(0); }

}



/* Ticket Grid */

.ticket-btn {

    min-width: 2.5rem;

    min-height: 2.5rem;

    font-size: 0.75rem;

    border-radius: 0.375rem;

    font-weight: 500;

    transition: all 0.2s ease;

}



.ticket-btn:hover:not(:disabled) {

    transform: scale(1.1);

}



.ticket-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



/* Selection Mode Buttons */

.selection-mode-btn {

    text-align: center;

    transition: all 0.3s ease;

}



.selection-mode-btn:hover {

    transform: translateY(-2px);

}



/* Line Clamp */

.line-clamp-2 {

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



/* Responsive */

@media (max-width: 640px) {

    .hero-gradient h2 {

        font-size: 2.5rem;

    }

    

    .stats-number {

        font-size: 1.5rem;

    }

}



/* Loading State */

.loading {

    opacity: 0.6;

    pointer-events: none;

}



/* User Dropdown */

#userDropdown {

    min-width: 200px;

}



/* Wallet Modal */

.deposit-btn {

    transition: all 0.2s ease;

}



.deposit-btn:hover {

    transform: scale(1.05);

}



/* Payment Method Button */

.payment-method-btn {

    transition: all 0.3s ease;

}



.payment-method-btn:hover {

    transform: translateY(-2px);

}



/* Success Animation */

@keyframes success-pulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.05); }

    100% { transform: scale(1); }

}



.success-animation {

    animation: success-pulse 0.5s ease;

}



/* Custom Scrollbar */

::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}



::-webkit-scrollbar-track {

    background: #f1f1f1;

}



::-webkit-scrollbar-thumb {

    background: #888;

    border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

    background: #555;

}





/* Add this to your /css/app-style.css or create it */



/* Competition Modal Specific Styles */

.selection-mode-btn {

    text-align: center;

    transition: all 0.3s ease;

}



.selection-mode-btn:hover {

    transform: translateY(-2px);

}



.ticket-count-btn {

    transition: all 0.2s ease;

}



.ticket-count-btn:hover {

    transform: scale(1.05);

}



.ticket-btn {

    min-width: 2.5rem;

    min-height: 2.5rem;

    font-size: 0.75rem;

    border-radius: 0.375rem;

    font-weight: 500;

    transition: all 0.2s ease;

}



.ticket-btn:hover:not(:disabled) {

    transform: scale(1.1);

}



/* Gradient backgrounds */

.gradient-bg {

    background: linear-gradient(135deg, #3B82F6, #8B5CF6);

}



.gradient-text {

    background: linear-gradient(135deg, #3B82F6, #8B5CF6);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Animations */

@keyframes spin {

    to { transform: rotate(360deg); }

}



.loader {

    animation: spin 1s linear infinite;

}



/* Hide/Show */

.hidden {

    display: none !important;

}







/* ==================== ELEGANT BLACK & GOLD THEME ==================== */

:root {

    --primary-black: #000000;

    --secondary-black: #0a0a0a;

    --tertiary-black: #1a1a1a;

    --primary-gold: #FFD700;

    --secondary-gold: #FFC107;

    --accent-gold: #FFEB3B;

    --text-light: #ffffff;

    --text-gray: #b8b8b8;

    --shadow-gold: 0 0 30px rgba(255, 215, 0, 0.2);

}



/* Elegant body */

body {

    background-color: var(--primary-black) !important;

    color: var(--text-light) !important;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

}



/* Minimalist navigation */

.nav-sticky {

    background: rgba(0, 0, 0, 0.95) !important;

    backdrop-filter: blur(20px);

    border-bottom: 1px solid rgba(255, 215, 0, 0.2);

    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);

}



/* Elegant buttons */

.btn-primary {

    background: var(--primary-gold) !important;

    color: var(--primary-black) !important;

    font-weight: 600 !important;

    letter-spacing: 0.5px;

    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.btn-primary:hover {

    background: var(--secondary-gold) !important;

    transform: translateY(-2px);

    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);

}



/* Elegant cards */

.competition-card, .card-hover {

    background: var(--secondary-black) !important;

    border: 1px solid rgba(255, 215, 0, 0.1) !important;

    transition: all 0.4s ease;

}



.competition-card:hover {

    border-color: rgba(255, 215, 0, 0.3) !important;

    box-shadow: 0 20px 40px rgba(255, 215, 0, 0.1);

}



/* Clean inputs */

input, select, textarea {

    background: rgba(255, 255, 255, 0.03) !important;

    border: 1px solid rgba(255, 215, 0, 0.2) !important;

    color: var(--text-light) !important;

    transition: all 0.3s ease;

}



input:focus, select:focus, textarea:focus {

    background: rgba(255, 255, 255, 0.05) !important;

    border-color: var(--primary-gold) !important;

    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1) !important;

}



/* Elegant gradients */

.gradient-text {

    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--accent-gold) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font-weight: 700;

}



/* Subtle animations */

@keyframes elegant-glow {

    0%, 100% { opacity: 0.8; }

    50% { opacity: 1; }

}



.stats-number {

    color: var(--primary-gold) !important;

    animation: elegant-glow 3s ease-in-out infinite;

}

/* ==================== END ELEGANT THEME ==================== */


/* Countdown timer animations */
@keyframes pulse-countdown {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.competition-card .backdrop-blur-sm {
    animation: pulse-countdown 2s ease-in-out infinite;
}

/* Urgent countdown (less than 1 hour) */
.countdown-urgent {
    animation: pulse-countdown 1s ease-in-out infinite;
}

.countdown-urgent .bg-white\/20 {
    background-color: rgba(239, 68, 68, 0.3) !important;
}



/* Premier Modal Styles - Black & Gold Theme */
.premier-modal-overlay {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
overflow-y: auto;
}

.premier-modal-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.premier-modal-solid {
    background: #000000;
    border: 2px solid #FFD700;
    position: relative;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
}




.premier-modal-container {
    background: #0a0a0a; /* Solid black background */
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    max-height: 95vh;
    max-height: 95dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.premier-modal-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 1.5rem;
    padding: 2px;
    background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.premier-modal-header {
    background: #0f0f0f; /* Solid dark background */
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding: 1.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.premier-modal-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */

    padding: 2rem;
    background: #0a0a0a; /* Solid black */
    scrollbar-width: thin;
    scrollbar-color: #FFD700 #1a1a1a;
}


.premier-modal-content::-webkit-scrollbar {
    width: 8px;
}

.premier-modal-content::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

.premier-modal-content::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #FFD700, #FFA500);
    border-radius: 4px;
}

/* Gold elements */
.gold-text-gradient {
    background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

.gold-box {
    background: rgba(15, 15, 15, 0.95); /* Almost black with slight transparency */
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 1rem;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.gold-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.1) 100%);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 0.75rem;
    padding: 1.25rem;
    backdrop-filter: blur(10px);
}


.gold-button {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    font-weight: bold;
    border: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.gold-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    transition: all 0.6s;
}

.gold-button:hover::before {
    animation: shine 0.6s ease-in-out;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Responsive grid for modal */
.modal-responsive-grid {
    display: grid;
    gap: 1.5rem;
}

/* Mobile first approach */
@media (max-width: 768px) {
    .premier-modal-container {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }
    
    .premier-modal-content {
        padding: 1rem;
    }
    
    .modal-responsive-grid {
        grid-template-columns: 1fr;
    }
    
    .hide-mobile {
        display: none;
    }
}

@media (max-width: 768px) {
    .premier-modal-wrapper {
        padding: 0;
        align-items: flex-start;
    }
    
    .premier-modal-solid {
        max-height: 100vh;
        height: 100vh;
        border-radius: 0 !important;
        border: none;
    }
    
    .premier-modal-content {
        padding: 1rem;
    }
    
    .modal-responsive-grid {
        grid-template-columns: 1fr !important;
    }
}




@media (min-width: 769px) and (max-width: 1024px) {
    .modal-responsive-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1025px) {
    .modal-responsive-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Countdown specific for modal */
.modal-countdown-box {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-countdown-unit {
    text-align: center;
    min-width: 2.5rem;
}

.modal-countdown-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFD700;
    line-height: 1;
}

.modal-countdown-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    color: rgba(255, 215, 0, 0.7);
    letter-spacing: 0.05em;
}

/* Ticket selection for modal */
.ticket-grid-modal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.ticket-number-modal {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-weight: bold;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.ticket-available {
    background: rgba(255, 215, 0, 0.1);
    color: #FFD700;
    border-color: rgba(255, 215, 0, 0.3);
}

.ticket-available:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: scale(1.1);
}

.ticket-selected {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    border-color: #FFD700;
    transform: scale(1.1);
}

.ticket-sold {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

/* Animation for modal entrance */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-animate-in {
    animation: modalSlideIn 0.3s ease-out;
}

/* Success animation */
.gold-confetti {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
}

@keyframes goldFall {
    to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

.gold-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    animation: goldFall 3s ease-in-out;
}

/* Firebase Modal Specific Styles - Black Background */
#enhancedLoginModal {
    background: rgba(0, 0, 0, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#enhancedLoginModal .modal-content {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}

#enhancedLoginModal .modal-content::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 1rem;
    padding: 2px;
    background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Style the Firebase modal inputs */
#enhancedLoginModal input {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: white !important;
}

#enhancedLoginModal input:focus {
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2) !important;
}

#enhancedLoginModal input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Style labels and text */
#enhancedLoginModal label {
    color: #FFD700 !important;
}

#enhancedLoginModal .text-gray-light {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Hide Apple Login Button */
#enhancedLoginModal button[onclick*="handleAppleLogin"] {
    display: none !important;
}

/* Style the remaining buttons with gold theme */
#enhancedLoginModal button[type="submit"],
#enhancedLoginModal .btn-primary {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #000 !important;
    font-weight: bold !important;
    border: none !important;
}

#enhancedLoginModal button[type="submit"]:hover,
#enhancedLoginModal .btn-primary:hover {
    background: linear-gradient(135deg, #FFA500, #FFD700) !important;
    transform: scale(1.02);
}

/* Style Google and Phone buttons */
#enhancedLoginModal .btn-secondary {
    background: rgba(255, 215, 0, 0.1) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: white !important;
}

#enhancedLoginModal .btn-secondary:hover {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: #FFD700 !important;
}

/* Gold gradient for headings */
#enhancedLoginModal h3 {
    background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

/* Fix the divider */
#enhancedLoginModal .border-gold-subtle {
    border-color: rgba(255, 215, 0, 0.2) !important;
}

#enhancedLoginModal .bg-black-card {
    background: transparent !important;
}

/* Make sure close button is visible */
#enhancedLoginModal button[onclick*="closeModal"] {
    color: rgba(255, 255, 255, 0.5) !important;
}

#enhancedLoginModal button[onclick*="closeModal"]:hover {
    color: #FFD700 !important;
}


/* Golden Crown Icon in Firebase Modal */
#enhancedLoginModal .fa-crown {
    color: #FFD700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: crownGlow 2s ease-in-out infinite;
}

/* Optional: Add a glowing animation to the crown */
@keyframes crownGlow {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
        transform: translateY(0);
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
        transform: translateY(-2px);
    }
}

/* If the crown is inside a background circle/container */
#enhancedLoginModal .bg-gradient-to-br {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
}

/* Make the crown container have a golden glow */
#enhancedLoginModal .w-16.h-16 {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* If you want the crown to be black on gold background */
#enhancedLoginModal .w-16.h-16 .fa-crown {
    color: #000 !important;
    text-shadow: none;
    animation: none;
}

/* Golden Crown Icon with Pulsate Effect */
#enhancedLoginModal .fa-crown {
    color: #FFD700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: crownPulsate 2s ease-in-out infinite;
}

/* Smooth pulsating animation */
@keyframes crownPulsate {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9));
    }
}

/* If the crown is in a container, make the container pulsate too */
#enhancedLoginModal .animate-bounce {
    animation: containerPulsate 2s ease-in-out infinite !important;
}

@keyframes containerPulsate {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    }
}

/* Custom branded notifications */
#toast .toast {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Add crown or logo to all success notifications */
#toastIcon .fa-check-circle {
    display: none;
}

#toastIcon::after {
    content: '\f521'; /* Crown icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #FFD700;
    font-size: 1.5rem;
}

/* Or use background image for logo */
/*
#toastIcon {
    background-image: url('/images/your-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
*/

/* Style the notification text */
#toastTitle {
    color: #FFD700 !important;
    font-weight: bold;
}

#toastMessage {
    color: rgba(255, 255, 255, 0.9) !important;
}


/* Wallet Modal - Black & Gold Theme */
#walletModal {
    background: rgba(0, 0, 0, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#walletModal .premier-wallet-container {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    max-height: 95vh;
    max-height: 95dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#walletModal .premier-wallet-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 1.5rem;
    padding: 2px;
    background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Wallet balance display */
.wallet-balance-box {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.1) 100%);
    border: 2px solid #FFD700;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.wallet-balance-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Quick amount buttons */
.amount-button {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: white;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.amount-button:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #FFD700;
    transform: scale(1.05);
}

.amount-button.selected {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    border-color: #FFD700;
}

/* Custom amount input */
#depositAmount {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
    color: white !important;
    font-size: 1.25rem;
    text-align: center;
    font-weight: bold;
}

#depositAmount:focus {
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2) !important;
}

/* Payment method cards */
.payment-method-card {
    background: rgba(255, 215, 0, 0.05);
    border: 2px solid rgba(255, 215, 0, 0.2);
    border-radius: 1rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-method-card:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.5);
}

.payment-method-card.selected {
    background: rgba(255, 215, 0, 0.15);
    border-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Stripe card element */
#card-element {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Transaction history */
.transaction-item {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.transaction-item:hover {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.2);
}

/* Mobile optimizations */
@media (max-width: 640px) {
    #walletModal .premier-wallet-container {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }
    
    .wallet-balance-box {
        padding: 1.5rem;
    }
    
    .amount-button {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .payment-method-card {
        padding: 0.75rem;
    }
}

/* Header Specific Styles */
.nav-sticky {
    background: rgba(0, 0, 0, 0.98) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Gold gradient text */
.gold-text-gradient {
    background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

/* Shadow gold effect */
.shadow-gold {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* Navigation links */
.nav-link {
    position: relative;
    padding: 0.5rem 0;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Button styles */
.btn-primary-gold {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-primary-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.btn-secondary-gold {
    background: transparent;
    color: #FFD700;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: 1px solid rgba(255, 215, 0, 0.5);
    transition: all 0.3s ease;
}

.btn-secondary-gold:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: #FFD700;
}

/* Wallet button */
.wallet-button-header {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
    color: #FFD700;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

.wallet-button-header:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.2));
    border-color: #FFD700;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
}

/* Mobile wallet button */
.wallet-button-mobile {
    background: rgba(255, 215, 0, 0.1);
    color: #FFD700;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid rgba(255, 215, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Dropdown styles */
#userDropdown {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Mobile menu styles */
.mobile-nav-link {
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    color: #fff;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 0.5rem;
}

.mobile-nav-link:hover {
    background: rgba(255, 215, 0, 0.1);
    color: #FFD700;
}

/* Active states */
.nav-link.active {
    color: #FFD700 !important;
}

.nav-link.active::after {
    width: 100%;
}

/* Mobile optimizations */
@media (max-width: 1024px) {
    .nav-sticky {
        padding: 0.5rem 0;
    }
    
    .nav-sticky h-20 {
        height: 4rem;
    }
}

@media (max-width: 640px) {
    .wallet-button-mobile {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }
    
    #mobileMenu {
        background: rgba(0, 0, 0, 0.95);
        margin: 0 -1rem;
        padding: 1rem;
    }
}


/* GOLD BRANDING - Mobile wallet button BIGGER */
.mobile-wallet-button {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 0.75rem;
    padding: 0.625rem 1rem;
    min-width: 100px;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.3s ease;
    color: #FFD700;
}

.mobile-wallet-button:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.2));
}

.mobile-wallet-button i {
    color: #FFD700;
}

.mobile-wallet-button span {
    white-space: nowrap;
    color: #FFD700;
}

/* Make sure all gold icons are visible */
.text-gold-500 {
    color: #FFD700 !important;
}

.text-gold-400 {
    color: #FFC107 !important;
}

/* Button consistency */
.btn-primary-gold,
.btn-secondary-gold {
    height: 42px;
    display: flex;
    align-items: center;
}

/* Mobile specific */
@media (max-width: 640px) {
    .mobile-wallet-button {
        min-width: 90px;
        padding: 0.5rem 0.875rem;
    }
}

/* Profile Section Styling */
#profile-section {
    background: transparent !important;
}

.profile-content-wrapper {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Override the white background */
#profile-content {
    background: transparent !important;
}

/* Make sure all stat cards use black background */
#profile-content .bg-white {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
}

/* Fix any text that might be black on black */
#profile-content .text-gray-700,
#profile-content .text-gray-600,
#profile-content .text-gray-500 {
    color: rgba(255, 255, 255, 0.7) !important;
}

#profile-content .text-gray-800 {
    color: #FFD700 !important;
}

/* Style any remaining white elements */
#profile-content .bg-blue-50 {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05)) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

#profile-content .bg-green-50 {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05)) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

#profile-content .bg-purple-50 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05)) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* Gold text for values */
#profile-content .text-blue-800,
#profile-content .text-green-800,
#profile-content .text-purple-800 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold !important;
}

/* Style form inputs in profile */
#profile-content input:not([type="checkbox"]) {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: white !important;
}

#profile-content input:focus {
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1) !important;
}

/* Style buttons in profile */
#profile-content button {
    transition: all 0.3s ease !important;
}

#profile-content .bg-blue-600 {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #000 !important;
    font-weight: bold !important;
    border: none !important;
}

#profile-content .bg-blue-600:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3) !important;
}

/* Remove the rounded white box */
.section > div:last-child {
    background: transparent !important;
    box-shadow: none !important;
}

/* Style labels */
#profile-content label {
    color: #FFD700 !important;
}

/* Fix disabled inputs */
#profile-content input:disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    opacity: 0.7 !important;
}

<!-- ADD THIS CSS TO YOUR app-styles.css OR IN A STYLE TAG -->

#recentActivity {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
}

/* Fix activity items */
#recentActivity .bg-gray-50 {
    background: rgba(255, 215, 0, 0.05) !important;
    border: 1px solid rgba(255, 215, 0, 0.1) !important;
    color: white !important;
}

#recentActivity .bg-gray-50:hover {
    background: rgba(255, 215, 0, 0.08) !important;
    border-color: rgba(255, 215, 0, 0.2) !important;
}

/* Fix text colors in activity */
#recentActivity .text-gray-600,
#recentActivity .text-gray-500 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Fix History Section */
#history-section {
    background: transparent !important;
}

#history-content {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
}

/* Fix history tables */
#history-content table {
    color: white !important;
}

#history-content th {
    color: #FFD700 !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3) !important;
}

#history-content td {
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1) !important;
}

#history-content tr:hover {
    background: rgba(255, 215, 0, 0.05) !important;
}

/* Fix history items */
#history-content .bg-gray-50 {
    background: rgba(255, 215, 0, 0.05) !important;
    border: 1px solid rgba(255, 215, 0, 0.1) !important;
}

#history-content .bg-gray-50:hover {
    background: rgba(255, 215, 0, 0.08) !important;
    border-color: rgba(255, 215, 0, 0.2) !important;
}

/* Winner badges */
#history-content .text-green-600 {
    color: #10B981 !important;
    font-weight: bold !important;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

/* History section title */
#history-section h3 {
    background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fix any remaining gray text */
#history-content .text-gray-600,
#history-content .text-gray-500,
#history-content .text-gray-dark {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Empty state styling */
#history-content .text-gray-500 {
    color: rgba(255, 215, 0, 0.5) !important;
}

/* Prize text styling */
#history-content .font-medium {
    color: white !important;
}

/* Date text */
#history-content .text-sm {
    color: rgba(255, 215, 0, 0.6) !important;
}

/* Section headers in history */
#history-content h4 {
    color: #FFD700 !important;
    font-weight: bold !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* Tabs or filters if any */
#history-content .border-b {
    border-color: rgba(255, 215, 0, 0.2) !important;
}

/* Make sure all backgrounds are dark */
#history-content > div {
    background: transparent !important;
}

/* Style the "No wins" text */
#history-content span:contains("No win") {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Gold glow for important elements */
.gold-glow {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}
<!-- ADD THIS CSS TO YOUR app-styles.css -->

#luckyDipBtn, #manualBtn {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
}

#luckyDipBtn:hover, #manualBtn:hover {
    background: rgba(255, 215, 0, 0.1) !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
}

/* Active selection mode */
#luckyDipBtn.border-gold-500, #manualBtn.border-gold-500 {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: #FFD700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Fix Ticket Count Buttons */
.ticket-count-btn {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: white !important;
}

.ticket-count-btn:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
    transform: scale(1.05);
}

/* Selected ticket count button */
.ticket-count-btn.bg-blue-600,
.ticket-count-btn.border-gold-500 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.2)) !important;
    border-color: #FFD700 !important;
    color: #FFD700 !important;
    font-weight: bold;
}

/* Fix Manual Ticket Grid */
.ticket-grid-modal {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    border-radius: 0.75rem;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(10, minmax(2.5rem, 1fr));
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

/* Available tickets */
.ticket-grid-modal button:not(:disabled) {
    background: rgba(255, 215, 0, 0.1) !important;
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
    color: #FFD700 !important;
    font-weight: bold;
    position: relative;
    transition: all 0.2s ease;
}

.ticket-grid-modal button:not(:disabled):hover {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: #FFD700 !important;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Selected tickets */
.ticket-grid-modal button.bg-blue-600,
.ticket-grid-modal button.ticket-selected {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    border: 2px solid #FFD700 !important;
    color: #000 !important;
    font-weight: 900;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* SOLD/TAKEN TICKETS - VERY DISTINCT */
.ticket-grid-modal button:disabled,
.ticket-grid-modal button.bg-gray-300 {
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 0, 0, 0.1),
        rgba(255, 0, 0, 0.1) 5px,
        rgba(0, 0, 0, 0.3) 5px,
        rgba(0, 0, 0, 0.3) 10px
    ) !important;
    border: 2px solid rgba(255, 0, 0, 0.5) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    cursor: not-allowed !important;
    position: relative;
    overflow: hidden;
}

/* Add X mark to sold tickets */
.ticket-grid-modal button:disabled::after,
.ticket-grid-modal button.bg-gray-300::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: rgba(255, 0, 0, 0.8);
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* Fix Custom Amount Input */
#customAmountDiv input {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
    color: #FFD700 !important;
    font-weight: bold;
}

#customAmountDiv input:focus {
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2) !important;
}

/* Fix the increment/decrement buttons */
#customAmountDiv .gold-button {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.2)) !important;
    border: 1px solid #FFD700 !important;
    color: #FFD700 !important;
}

#customAmountDiv .gold-button:hover {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #000 !important;
}

/* Selected tickets display */
#selectedTicketsList span {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.2)) !important;
    border: 1px solid #FFD700 !important;
    color: #FFD700 !important;
}

/* Fix any remaining white backgrounds */
.gold-card {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

/* Improve contrast for skill question input */
#skillAnswer {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
    color: white !important;
}

#skillAnswer:focus {
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2) !important;
}

/* Ticket grid scrollbar */
.ticket-grid-modal::-webkit-scrollbar {
    width: 8px;
}

.ticket-grid-modal::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.ticket-grid-modal::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #FFD700, #FFA500);
    border-radius: 4px;
}

/* Add visual indicator for available tickets info */
.ticket-grid-modal + div {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

/* Popular badge on ticket count */
.ticket-count-btn .absolute {
    background: #10B981 !important;
    color: white !important;
    font-weight: bold;
}

/* Fix ticket count display colors */
#totalTickets, #availableTicketsDisplay {
    color: #FFD700 !important;
}

/* Make sure all text is readable */
.modal-responsive-grid .text-gray-400 {
    color: rgba(255, 215, 0, 0.7) !important;
}

.modal-responsive-grid .text-gray-300 {
    color: rgba(255, 255, 255, 0.8) !important;
}

.modal-responsive-grid .text-white {
    color: #ffffff !important;
}

#toast {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    z-index: 9999 !important;
    transition: all 0.3s ease !important;
}

/* When it has translate-x-full class, COMPLETELY HIDE IT */
#toast.translate-x-full {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Animation to fade out and hide */
@keyframes disappearCompletely {
    0% {
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
    }
    90% {
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
    }
    99% {
        opacity: 0;
        transform: translateX(100%);
        visibility: visible;
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
        visibility: hidden;
        display: none;
    }
}

/* Auto disappear after showing */
#toast:not(.translate-x-full) .toast {
    animation: disappearCompletely 5.5s forwards !important;
}

/* Nuclear option - force hide everything after 6 seconds */
#toast {
    animation: forceHide 6s forwards !important;
}

@keyframes forceHide {
    0%, 95% {
        visibility: visible;
    }
    100% {
        visibility: hidden !important;
        display: none !important;
    }
}

/* Make sure the parent container also hides */
#toast:empty {
    display: none !important;
}

/* Logo success animation */
.confetti-logo {
    width: 200px;
    height: auto;
    animation: logoSuccess 3s ease-out forwards;
}

@keyframes logoSuccess {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: scale(1.2) rotate(360deg);
        opacity: 1;
    }
    40% {
        transform: scale(0.9) rotate(380deg);
    }
    60% {
        transform: scale(1.1) rotate(370deg);
    }
    80% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 0;
    }
}

/* Alternative: Crown icon animation */
.confetti-crown {
    font-size: 120px;
    color: #FFD700;
    animation: crownSuccess 3s ease-out forwards;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

@keyframes crownSuccess {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: scale(1.2) rotate(360deg);
        opacity: 1;
    }
    40% {
        transform: scale(0.9) rotate(380deg);
    }
    60% {
        transform: scale(1.1) rotate(370deg);
    }
    80% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg) translateY(-50px);
        opacity: 0;
    }
}

/* Gold particles effect (optional) */
.confetti-logo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    animation: goldGlow 1.5s ease-out;
}

@keyframes goldGlow {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* If you want multiple gold particles falling */
.gold-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 49;
}

.gold-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-radius: 50%;
    animation: particleFall 3s ease-out forwards;
}

@keyframes particleFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}


/* PROPER RESPONSIVE HIDING - Desktop elements */
@media (max-width: 1023px) {
    /* Hide desktop navigation on mobile/tablet */
    .hidden.lg\:flex {
        display: none !important;
    }
    
    /* Make sure mobile menu button is visible */
    .flex.lg\:hidden {
        display: flex !important;
    }
}

@media (min-width: 1024px) {
    /* Hide mobile menu button on desktop */
    .flex.lg\:hidden {
        display: none !important;
    }
    
    /* Show desktop navigation */
    .hidden.lg\:flex {
        display: flex !important;
    }
    
    /* Hide mobile menu dropdown on desktop */
    #mobileMenu {
        display: none !important;
    }
}

/* Fix for the specific desktop nav section */
@media (max-width: 1023px) {
    /* Target the desktop nav specifically */
    nav .hidden.lg\:flex.items-center.space-x-6 {
        display: none !important;
    }
}

/* Mobile-specific styles */
@media (max-width: 1023px) {
    /* Ensure mobile auth buttons show correctly */
    #authButtonsMobile {
        display: flex !important;
    }
    
    #userMenuMobile.hidden {
        display: none !important;
    }
    
    #userMenuMobile:not(.hidden) {
        display: flex !important;
    }
}

/* Desktop-specific styles */
@media (min-width: 1024px) {
    /* Desktop auth buttons */
    #authButtons.hidden {
        display: none !important;
    }
    
    #authButtons:not(.hidden) {
        display: flex !important;
    }
    
    #userMenu.hidden {
        display: none !important;
    }
    
    #userMenu:not(.hidden) {
        display: flex !important;
    }
    
    /* Hide all mobile-specific elements on desktop */
    #authButtonsMobile,
    #userMenuMobile,
    #mobileUserSection {
        display: none !important;
    }
}

/* Fix the nav container flex layout */
nav .max-w-7xl > .flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Ensure proper spacing */
nav .flex.items-center.space-x-6 {
    gap: 1.5rem;
}

/* Mobile menu button always visible on mobile */
@media (max-width: 1023px) {
    button[onclick*="toggleMobileMenu"] {
        display: block !important;
    }

/* ADD THIS TO YOUR wheel.css FILE */

/* Disclaimer Box - Black & Gold Theme */
.disclaimer-box {
    margin-top: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 165, 0, 0.03) 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

/* Animated border effect */
.disclaimer-box::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 0, 0.3) 25%, 
        rgba(255, 215, 0, 0.5) 50%, 
        rgba(255, 215, 0, 0.3) 75%, 
        transparent 100%);
    border-radius: 0.75rem;
    opacity: 0;
    animation: disclaimerGlow 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes disclaimerGlow {
    0%, 100% { 
        opacity: 0;
        transform: translateX(-100%);
    }
    50% {
        opacity: 1;
        transform: translateX(100%);
    }
}

.disclaimer-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.disclaimer-icon i {
    color: #000;
    font-size: 1.25rem;
    animation: pulseInfo 2s ease-in-out infinite;
}

@keyframes pulseInfo {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.disclaimer-content {
    flex: 1;
}

.disclaimer-title {
    color: #FFD700;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.disclaimer-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.3), transparent);
}

.disclaimer-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .disclaimer-box {
        margin-top: 1rem;
        padding: 0.875rem;
        gap: 0.75rem;
    }
    
    .disclaimer-icon {
        width: 35px;
        height: 35px;
    }
    
    .disclaimer-icon i {
        font-size: 1rem;
    }
    
    .disclaimer-title {
        font-size: 0.9rem;
    }
    
    .disclaimer-text {
        font-size: 0.8rem;
    }
}

/* Extra small mobile */
@media (max-width: 480px) {
    .disclaimer-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .disclaimer-title::after {
        display: none;
    }
}

/* ==================== WINNERS SECTION - BLACK & GOLD - FIXED RESPONSIVE ==================== */

/* Winners Section Container */
#winners-section {
    min-height: 60vh;
}

/* Winners Tabs */
.winners-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.winners-tab {
    padding: 0.75rem 1.5rem;
    border-bottom: 3px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.winners-tab:hover {
    color: #FFD700;
}

.winners-tab.active {
    color: #FFD700 !important;
    border-color: #FFD700 !important;
}

/* Winners Grid - FIXED FOR DESKTOP */
.winners-grid {
    display: grid;
    gap: 1.5rem;
    width: 100%;
}

/* Mobile First */
@media (max-width: 767px) {
    .winners-grid {
        grid-template-columns: 1fr;
        padding: 0 0.5rem;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .winners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .winners-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Large Desktop */
@media (min-width: 1440px) {
    .winners-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Winner Card - FIXED SIZING */
.winner-card {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.winner-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.winner-card:hover {
    border-color: rgba(255, 215, 0, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.2);
}

/* Winner Header */
.winner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.winner-type-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.winner-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Winner Content */
.winner-content {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.winner-image {
    width: 100%;
    height: 200px;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 1rem;
    background: rgba(255, 215, 0, 0.05);
}

.winner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.winner-card:hover .winner-image img {
    transform: scale(1.05);
}

.winner-details {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.winner-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.winner-prize {
    margin-bottom: 0.75rem;
}

.prize-name {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.prize-value {
    color: #FFD700;
    font-size: 1.25rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.winning-ticket {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #FFD700;
    margin-top: 0.5rem;
}

/* Winner Celebration - FIXED POSITION */
.winner-celebration {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: celebrate 2s ease-in-out infinite;
    z-index: 10;
}

.celebration-icon {
    font-size: 1.5rem;
    animation: bounce 1s ease-in-out infinite;
}

.celebration-text {
    font-size: 0.625rem;
    font-weight: bold;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Animations */
@keyframes celebrate {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Loading State */
.winners-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Empty State */
.empty-winners {
    text-align: center;
    padding: 4rem 2rem;
}

/* Fix for very small mobile */
@media (max-width: 480px) {
    .winner-card {
        margin: 0;
    }
    
    .winner-image {
        height: 150px;
    }
    
    .winner-name {
        font-size: 1.25rem;
    }
    
    .prize-value {
        font-size: 1.1rem;
    }
    
    .winner-celebration {
        top: 0.5rem;
        right: 0.5rem;
    }
    
    .celebration-icon {
        font-size: 1.25rem;
    }
}

/* Type Badge Colors */
.winner-type-badge.competition-win {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
    color: #FFD700;
}

.winner-type-badge.instant-win {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    color: #10B981;
}

.winner-type-badge.wheel-win {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
    color: #8B5CF6;
}

/* Glow Effects */
.winner-card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    opacity: 0.1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.winner-card:hover .winner-card-glow {
    opacity: 0.2;
}

.winner-card-glow.competition-win {
    background: radial-gradient(circle, #FFD700 0%, transparent 70%);
}

.winner-card-glow.instant-win {
    background: radial-gradient(circle, #10B981 0%, transparent 70%);
}

.winner-card-glow.wheel-win {
    background: radial-gradient(circle, #8B5CF6 0%, transparent 70%);
}


/* Add this to your app-styles.css */

/* Modal entrance animation */
@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-modal-in {
    animation: modal-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Gold confetti fall animation */
@keyframes goldFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Enhanced input focus styles for DOB modal */
#dobModal input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2), 0 0 20px rgba(255, 215, 0, 0.1);
}

/* Gradient text animation for the title */
#dobModal .gold-text-gradient {
    background-size: 200% auto;
    animation: goldShine 3s linear infinite;
}

@keyframes goldShine {
    to {
        background-position: 200% center;
    }
}

/* Celebration animation for profile completion */
@keyframes fall {
    to {
        transform: translateY(calc(100vh + 20px)) rotate(720deg);
        opacity: 0;
    }
}

/* Phone profile form styling */
#phoneProfileForm input {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: white !important;
}

#phoneProfileForm input:focus {
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2) !important;
}

#phoneProfileForm input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Nice gradient background for the form */
#phoneProfileForm {
    position: relative;
}

#phoneProfileForm::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* Animated gift icon */
.fa-gift {
    animation: giftBounce 2s ease-in-out infinite;
}

@keyframes giftBounce {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg) scale(1.1);
    }
}

/* Rocket launch animation on submit */
.fa-rocket {
    transition: transform 0.3s ease;
}

button:hover .fa-rocket {
    transform: translateX(5px) translateY(-2px) rotate(45deg);
}