/* Custom styles for Bet724 Early Access */

/* Animation for success messages */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

/* Custom button styles */
.btn-primary {
    @apply bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition-all duration-200;
}

.btn-primary:disabled {
    @apply bg-gray-400 cursor-not-allowed;
}

/* Form styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

/* Card styles */
.card {
    @apply bg-white rounded-xl shadow-lg p-6 border border-gray-200;
}

.card-success {
    @apply bg-green-50 border-green-200;
}

.card-error {
    @apply bg-red-50 border-red-200;
}

/* Progress bar */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-3 overflow-hidden;
}

.progress-fill {
    @apply bg-green-600 h-3 rounded-full transition-all duration-500;
}

/* Question styling */
.question {
    @apply mb-8 p-4 bg-gray-50 rounded-lg border border-gray-200;
}

.question label {
    @apply block text-lg font-semibold text-gray-800 mb-3;
}

/* HTMX indicators */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .container {
        @apply px-4;
    }

    .question {
        @apply p-3;
    }

    h1 {
        @apply text-3xl;
    }

    h2 {
        @apply text-2xl;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    .card {
        @apply bg-gray-800 border-gray-700;
    }

    .question {
        @apply bg-gray-800 border-gray-700;
    }

    .form-input {
        @apply bg-gray-700 border-gray-600 text-white;
    }
}

/* Bonus display animations */
.bonus-display {
    @apply relative overflow-hidden;
}

.bonus-display::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-green-400/10 to-blue-400/10;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}