/* ===========================================
   GLASSMORPHISM BUTTON STYLES
   =========================================== */

/* Base Glass Button Styling */
.btn,
.button,
.cta-button,
.action-btn,
button:not(.unstyled) {
    /* Glass Background */
    background: rgba(139, 0, 0, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Subtle Border Highlight */
    border: 1px solid rgba(139, 0, 0, 0.3) !important;
    
    /* Subtle Inner Glow */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 8px rgba(139, 0, 0, 0.1) !important;
    
    /* Typography */
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    
    /* Smooth Transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Border Radius */
    border-radius: 12px !important;
    
    /* Remove default styles */
    text-shadow: none !important;
}

/* Glass Button Hover State */
.btn:hover,
.button:hover,
.cta-button:hover,
.action-btn:hover,
button:not(.unstyled):hover {
    /* Enhanced Glass Effect */
    background: rgba(139, 0, 0, 0.15) !important;
    
    /* Subtle Border Glow */
    border: 1px solid rgba(139, 0, 0, 0.5) !important;
    
    /* Refined Glow */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 16px rgba(139, 0, 0, 0.15),
        0 0 0 1px rgba(139, 0, 0, 0.1) !important;
    
    /* Subtle Transform */
    transform: translateY(-1px) !important;
    
    /* Enhanced Text */
    color: rgba(255, 255, 255, 1) !important;
}

/* Glass Button Active State */
.btn:active,
.button:active,
.cta-button:active,
.action-btn:active,
button:not(.unstyled):active {
    /* Pressed Effect */
    transform: translateY(0) !important;
    
    /* Subtle Inner Shadow */
    box-shadow: 
        inset 0 2px 4px rgba(139, 0, 0, 0.2),
        0 1px 4px rgba(139, 0, 0, 0.1) !important;
}

/* Glass Button Focus State */
.btn:focus,
.button:focus,
.cta-button:focus,
.action-btn:focus,
button:not(.unstyled):focus {
    outline: none !important;
    
    /* Focus Ring */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 16px rgba(139, 0, 0, 0.15),
        0 0 0 3px rgba(139, 0, 0, 0.2) !important;
}

/* Primary CTA Button Enhancement */
.hero .cta-button,
.marketplace-btn,
.explore-btn {
    /* Slightly more prominent */
    background: rgba(139, 0, 0, 0.15) !important;
    border: 1px solid rgba(139, 0, 0, 0.4) !important;
    
    /* Enhanced shadow */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 4px 20px rgba(139, 0, 0, 0.15) !important;
}

.hero .cta-button:hover,
.marketplace-btn:hover,
.explore-btn:hover {
    background: rgba(139, 0, 0, 0.2) !important;
    border: 1px solid rgba(139, 0, 0, 0.6) !important;
    
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 6px 24px rgba(139, 0, 0, 0.2),
        0 0 0 1px rgba(139, 0, 0, 0.15) !important;
}

/* Glass Carousel Navigation Buttons */
.carousel-btn,
.carousel-nav,
.carousel-prev,
.carousel-next {
    /* Glass Background */
    background: rgba(139, 0, 0, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Subtle Border */
    border: 1px solid rgba(139, 0, 0, 0.25) !important;
    
    /* Refined Shadow */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 12px rgba(139, 0, 0, 0.08) !important;
    
    /* Clean Styling */
    border-radius: 50% !important;
    color: rgba(255, 255, 255, 0.8) !important;
    
    /* Smooth Transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.carousel-btn:hover,
.carousel-nav:hover {
    /* Enhanced Glass on Hover */
    background: rgba(139, 0, 0, 0.12) !important;
    
    /* Subtle Border Glow */
    border: 1px solid rgba(139, 0, 0, 0.4) !important;
    
    /* Gentle Glow */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 16px rgba(139, 0, 0, 0.12),
        0 0 0 1px rgba(139, 0, 0, 0.08) !important;
    
    /* Subtle Scale */
    transform: translateY(-50%) scale(1.05) !important;
    
    /* Enhanced Icon Visibility */
    color: rgba(255, 255, 255, 1) !important;
}

/* Glass Pagination Dots */
.carousel-dots .dot,
.pagination-dot {
    /* Glass Effect */
    background: rgba(139, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    /* Subtle Border */
    border: 1px solid rgba(139, 0, 0, 0.2) !important;
    
    /* Clean Shadow */
    box-shadow: 0 1px 4px rgba(139, 0, 0, 0.1) !important;
    
    /* Smooth Transition */
    transition: all 0.3s ease !important;
}

.carousel-dots .dot.active,
.pagination-dot.active {
    /* Active Glass State */
    background: rgba(139, 0, 0, 0.3) !important;
    border: 1px solid rgba(139, 0, 0, 0.5) !important;
    
    /* Subtle Active Glow */
    box-shadow: 
        0 2px 8px rgba(139, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.carousel-dots .dot:hover,
.pagination-dot:hover {
    background: rgba(139, 0, 0, 0.2) !important;
    border: 1px solid rgba(139, 0, 0, 0.3) !important;
    transform: scale(1.1) !important;
}

/* Glass Game Card Buttons */
.game-card .add-to-cart,
.game-card .purchase-btn,
.add-cart-btn {
    /* Glass Background */
    background: rgba(139, 0, 0, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    /* Subtle Border */
    border: 1px solid rgba(139, 0, 0, 0.3) !important;
    
    /* Clean Shadow */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 8px rgba(139, 0, 0, 0.1) !important;
    
    /* Typography */
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    
    /* Smooth Animation */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Border Radius */
    border-radius: 8px !important;
}

.game-card .add-to-cart:hover,
.game-card .purchase-btn:hover,
.add-cart-btn:hover {
    /* Enhanced Glass */
    background: rgba(139, 0, 0, 0.15) !important;
    
    /* Highlighted Border */
    border: 1px solid rgba(139, 0, 0, 0.5) !important;
    
    /* Subtle Glow */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 4px 12px rgba(139, 0, 0, 0.15),
        0 0 0 1px rgba(139, 0, 0, 0.1) !important;
    
    /* Gentle Lift */
    transform: translateY(-1px) !important;
    
    /* Enhanced Text */
    color: rgba(255, 255, 255, 1) !important;
}

/* Glass Navigation Links */
.navbar .nav-link:hover,
.nav-item:hover {
    /* Subtle Glass Background */
    background: rgba(139, 0, 0, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    /* Minimal Border */
    border: 1px solid rgba(139, 0, 0, 0.2) !important;
    border-radius: 6px !important;
    
    /* Soft Glow */
    box-shadow: 0 2px 8px rgba(139, 0, 0, 0.08) !important;
    
    /* Smooth Transition */
    transition: all 0.3s ease !important;
}

/* Glass Modal Buttons */
.auth-modal .btn,
.modal .button,
.form-submit,
input[type="submit"] {
    /* Glass Effect */
    background: rgba(139, 0, 0, 0.12) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Subtle Border */
    border: 1px solid rgba(139, 0, 0, 0.35) !important;
    
    /* Clean Shadow */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 3px 12px rgba(139, 0, 0, 0.12) !important;
    
    /* Typography */
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500 !important;
    
    /* Smooth Transition */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.auth-modal .btn:hover,
.modal .button:hover,
.form-submit:hover,
input[type="submit"]:hover {
    /* Enhanced Glass */
    background: rgba(139, 0, 0, 0.18) !important;
    
    /* Border Highlight */
    border: 1px solid rgba(139, 0, 0, 0.55) !important;
    
    /* Refined Glow */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 5px 20px rgba(139, 0, 0, 0.18),
        0 0 0 1px rgba(139, 0, 0, 0.12) !important;
    
    /* Gentle Transform */
    transform: translateY(-1px) !important;
}