/* ===================================
   CRITICAL FIXES FOR KOORAARABIC.COM
   =================================== */

/* Fix 1: Language Switcher Dropdown Z-index */
.lang-dropdown {
    z-index: 9999 !important;
}

/* Fix 2: Ensure Language Dropdown Only Shows When Clicked */
.lang-dropdown {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.lang-dropdown.show {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Fix 3: Better Mobile Header Layout (max-width: 768px) */
@media (max-width: 768px) {
    .header-content {
        gap: var(--space-2);
    }

    .language-switcher {
        margin: 0;
        margin-left: auto;
    }

    .lang-btn {
        padding: var(--space-2) var(--space-3);
        font-size: 0.85rem;
    }

    .current-lang-flag {
        font-size: 1.2rem;
    }

    .current-lang-code {
        display: none;
        /* Hide text on mobile, show only flag */
    }

    .logo-text {
        font-size: 1.1rem;
    }
}

/* Fix 4: Better Small Mobile Layout (max-width: 480px) */
@media (max-width: 480px) {
    .header-content {
        justify-content: space-between;
        padding: var(--space-3) var(--space-4);
    }

    .logo-container {
        gap: var(--space-2);
    }

    .logo-container img {
        height: 35px !important;
    }

    .logo-text {
        font-size: 0.95rem;
    }

    .lang-btn {
        padding: var(--space-2);
        min-width: 40px;
        justify-content: center;
    }

    .lang-btn i {
        display: none;
        /* Hide arrow on very small screens */
    }
}

/* Fix 5: Ensure Header Elements Don't Overlap */
@media (max-width: 1024px) {
    .header-content {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .logo-container {
        flex-shrink: 0;
    }

    .language-switcher {
        flex-shrink: 0;
        margin-right: var(--space-4);
    }

    .hamburger-container {
        flex-shrink: 0;
    }
}

/* Fix 6: Language Dropdown Better Positioning on Mobile */
@media (max-width: 480px) {
    .lang-dropdown {
        right: -10px;
        min-width: 150px;
    }

    .lang-option {
        padding: var(--space-2) var(--space-3);
        font-size: 0.875rem;
    }

    .lang-option .flag {
        font-size: 1.3rem;
    }
}

/* Fix 7: Prevent Text Wrapping in Header */
.logo-text {
    white-space: nowrap;
}

/* Fix 8: Better Hero Section on Mobile */
@media (max-width: 768px) {
    .hero-stadium {
        padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-12);
    }
}

/* Fix 9: Ultra-Small Mobile Devices (320px-360px) - Reduce Header Crowding */
@media (max-width: 360px) {
    .logo-text {
        font-size: 0.85rem !important;
    }

    .header-content {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
    }

    .logo-container img {
        height: 32px !important;
    }

    .lang-btn {
        padding: var(--space-1) var(--space-2);
        font-size: 0.75rem;
        min-width: 35px;
    }

    .current-lang-flag {
        font-size: 1rem;
    }
}

/* Fix 10: Ensure Match Cards Are Fully Responsive */
@media (max-width: 480px) {
    .matches-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .match-card {
        max-width: 100%;
    }

    .match-team-name {
        font-size: 0.9rem;
    }
}