/* Colorful Button Styles for All Pages */

/* Base Button Styles */
.btn, .submit-btn, .flag-btn, .challenge-btn, .setup-btn, .change-btn, .refresh-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Button Hover Effects */
.btn:hover, .submit-btn:hover, .flag-btn:hover, .challenge-btn:hover, 
.setup-btn:hover, .change-btn:hover, .refresh-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Button Active Effects */
.btn:active, .submit-btn:active, .flag-btn:active, .challenge-btn:active,
.setup-btn:active, .change-btn:active, .refresh-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Primary Button - Orange Gradient */
.btn-primary, .submit-btn {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 50%, #ff6b35 100%);
    color: #0a0a0a;
    border: 2px solid #ff6b35;
}

.btn-primary:hover, .submit-btn:hover {
    background: linear-gradient(135deg, #ff8c42 0%, #ffd700 50%, #ff8c42 100%);
    border-color: #ffd700;
    color: #0a0a0a;
}

/* Secondary Button - Gold Gradient */
.btn-secondary {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    color: #0a0a0a;
    border: 2px solid #ffd700;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #ffed4e 0%, #ffffff 50%, #ffed4e 100%);
    border-color: #ffffff;
    color: #0a0a0a;
}

/* Success Button - Green Gradient */
.btn-success, .flag-btn {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 50%, #4CAF50 100%);
    color: #ffffff;
    border: 2px solid #4CAF50;
}

.btn-success:hover, .flag-btn:hover {
    background: linear-gradient(135deg, #66BB6A 0%, #81C784 50%, #66BB6A 100%);
    border-color: #81C784;
    color: #ffffff;
}

/* Danger Button - Red Gradient */
.btn-danger {
    background: linear-gradient(135deg, #F44336 0%, #EF5350 50%, #F44336 100%);
    color: #ffffff;
    border: 2px solid #F44336;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #EF5350 0%, #E57373 50%, #EF5350 100%);
    border-color: #E57373;
    color: #ffffff;
}

/* Warning Button - Orange Gradient */
.btn-warning {
    background: linear-gradient(135deg, #FF9800 0%, #FFB74D 50%, #FF9800 100%);
    color: #0a0a0a;
    border: 2px solid #FF9800;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #FFB74D 0%, #FFCC80 50%, #FFB74D 100%);
    border-color: #FFCC80;
    color: #0a0a0a;
}

/* Info Button - Blue Gradient */
.btn-info {
    background: linear-gradient(135deg, #2196F3 0%, #42A5F5 50%, #2196F3 100%);
    color: #ffffff;
    border: 2px solid #2196F3;
}

.btn-info:hover {
    background: linear-gradient(135deg, #42A5F5 0%, #64B5F6 50%, #42A5F5 100%);
    border-color: #64B5F6;
    color: #ffffff;
}

/* Purple Button - Purple Gradient */
.btn-purple {
    background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 50%, #9C27B0 100%);
    color: #ffffff;
    border: 2px solid #9C27B0;
}

.btn-purple:hover {
    background: linear-gradient(135deg, #BA68C8 0%, #CE93D8 50%, #BA68C8 100%);
    border-color: #CE93D8;
    color: #ffffff;
}

/* Setup Button - Special Orange */
.setup-btn {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 50%, #ff6b35 100%);
    color: #0a0a0a;
    border: 2px solid #ff6b35;
}

.setup-btn:hover {
    background: linear-gradient(135deg, #ff8c42 0%, #ffd700 50%, #ff8c42 100%);
    border-color: #ffd700;
    color: #0a0a0a;
}

/* Change Button - Gold */
.change-btn {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    color: #0a0a0a;
    border: 2px solid #ffd700;
}

.change-btn:hover {
    background: linear-gradient(135deg, #ffed4e 0%, #ffffff 50%, #ffed4e 100%);
    border-color: #ffffff;
    color: #0a0a0a;
}

/* Refresh Button - Blue */
.refresh-btn {
    background: linear-gradient(135deg, #2196F3 0%, #42A5F5 50%, #2196F3 100%);
    color: #ffffff;
    border: 2px solid #2196F3;
}

.refresh-btn:hover {
    background: linear-gradient(135deg, #42A5F5 0%, #64B5F6 50%, #42A5F5 100%);
    border-color: #64B5F6;
    color: #ffffff;
}

/* Challenge Button - Purple */
.challenge-btn {
    background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 50%, #9C27B0 100%);
    color: #ffffff;
    border: 2px solid #9C27B0;
}

.challenge-btn:hover {
    background: linear-gradient(135deg, #BA68C8 0%, #CE93D8 50%, #BA68C8 100%);
    border-color: #CE93D8;
    color: #ffffff;
}

/* Button Sizes */
.btn-small {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.2rem;
}

.btn-xl {
    padding: 20px 40px;
    font-size: 1.4rem;
}

/* Button with Icon */
.btn-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Disabled Button */
.btn:disabled, .submit-btn:disabled, .flag-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Loading Button */
.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Buttons */
@media (max-width: 768px) {
    .btn, .submit-btn, .flag-btn, .challenge-btn, .setup-btn, .change-btn, .refresh-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .btn-large {
        padding: 14px 28px;
        font-size: 1.1rem;
    }
    
    .btn-xl {
        padding: 18px 36px;
        font-size: 1.3rem;
    }
}