/* Styles for GameZone Burkina Faso website */

/* Base transitions */
* {
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.cloud-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(252, 209, 22, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(252, 209, 22, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(252, 209, 22, 0);
    }
}

.pulse {
    animation: pulse 2s infinite;
    position: relative;
}

.pulse:hover {
    animation-play-state: paused;
    transform: scale(1.02);
}

/* Device icons hover effects */
.device-icon {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.device-icon:hover {
    transform: translateY(-5px) !important;
    filter: brightness(1.2);
}

/* Background patterns */
.dots-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}

/* Form focus effects */
#phoneInputContainer:focus-within,
#pinInputContainer:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Button hover effects */
button[type="submit"] {
    transition: all 0.3s ease;
}

button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}

button[type="submit"]:active {
    transform: translateY(0);
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .device-icons-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .dots-pattern {
        background-size: 15px 15px;
    }
}

/* Print styles */
@media print {
    .cloud-animation,
    .device-icons-container,
    .dots-pattern {
        display: none;
    }
}

/* Theme-specific styles */
/* Red Theme */
.bg-\[\#C0302B\] {
    background-color: #C0302B !important;
}

/* Yellow Theme */
.bg-\[\#E1B12C\] {
    background-color: #E1B12C !important;
}

/* Orange Theme */
.bg-\[\#D35400\] {
    background-color: #D35400 !important;
}

/* Navy Theme */
.bg-\[\#2C3E50\] {
    background-color: #2C3E50 !important;
}

/* Burkina Faso Theme */
.bg-\[\#009E49\] {
    background-color: #009E49 !important;
}

.bg-\[\#FCD116\] {
    background-color: #FCD116 !important;
}

.text-\[\#009E49\] {
    color: #009E49 !important;
}

/* RTL specific adjustments */
html[dir="rtl"] .space-x-4 > * + * {
    margin-right: 1rem;
    margin-left: 0;
}

html[dir="rtl"] .flex-row-reverse {
    flex-direction: row-reverse;
}

/* Language-specific font adjustments */
html[lang="ar"] {
    font-family: 'Tajawal', Arial, sans-serif;
}

/* Custom button styles */
.bg-gradient-custom-indigo {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: white;
}

.bg-gradient-custom-green {
    background: linear-gradient(135deg, #00C853 0%, #00E676 100%);
    color: white;
}

/* Response message styling */
#responseMessage, #pinResponseMessage {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

/* Improve accessibility */
input:focus, button:focus {
    outline: 2px solid rgba(99, 102, 241, 0.5);
    outline-offset: 2px;
}