/* ===== LANGUAGE SWITCHER - COMPREHENSIVE FIX ===== */

/* Base Language Switcher Container */
.language-switcher {
    position: relative;
    /* Remove float and use flexbox for proper alignment */
    display: flex;
    align-items: center;
    margin-left: 50px !important; /* Force proper separation from navigation menu */
    /* Remove margin-top hack */
    margin-top: 0;
}

/* RTL Support */
[dir="rtl"] .language-switcher {
    margin-left: 0 !important;
    margin-right: 50px !important; /* Force proper separation from navigation menu */
}

/* Language Switcher List */
.language-switcher ul {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-switcher li {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

/* Language Flag Links - PERFECT ALIGNMENT WITH NAVIGATION */
.language-switcher .lang-flag {
    position: relative;
    /* Use EXACT same flexbox approach as navigation links */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Use EXACT same padding as navigation links */
    padding: 27px 0px 28px;
    height: auto;
    width: auto;
    /* Ensure visibility with proper background */
    background-color: transparent;
    border-radius: 0;
    border: none;
    transition: all 200ms linear;
    transition-delay: 0.1s;
    z-index: 1;
    text-decoration: none;
    overflow: visible;
    margin: 0;
    transform: none;
}

/* Remove all pseudo-elements that could interfere */
.language-switcher .lang-flag:before,
.language-switcher .lang-flag:after {
    display: none !important;
}

/* Hover Effects */
.language-switcher .lang-flag:hover {
    transform: translateY(-2px);
    background-color: transparent;
}

/* Flag Images */
.language-switcher .lang-flag img {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: block;
}

.language-switcher .lang-flag:hover img {
    transform: scale(1.1);
}

/* Active State */
.language-switcher .lang-flag.active {
    background-color: transparent;
    transform: translateY(-2px);
    box-shadow: none;
}

.language-switcher .lang-flag.active img {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ===== STICKY HEADER STATE (SCROLLED) ===== */
/* When header becomes sticky on scroll */
.sticky-header .language-switcher {
    /* Ensure proper positioning in sticky header */
    display: flex;
    align-items: center;
    margin-left: 60px !important; /* Force proper separation in sticky header */
}

.sticky-header .language-switcher .lang-flag {
    /* Use EXACT same padding as sticky navigation */
    padding: 40px 0px 40px;
    background-color: transparent;
    border: none;
    /* Ensure perfect alignment */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sticky-header .language-switcher .lang-flag:hover {
    background-color: transparent;
}

.sticky-header .language-switcher .lang-flag.active {
    background-color: transparent;
    border-color: transparent;
}

/* ===== FIXED HEADER STATE (JAVASCRIPT TRIGGERED) ===== */
/* When JavaScript adds .fixed-header class */
.fixed-header .language-switcher {
    /* Ensure proper positioning in fixed header */
    display: flex;
    align-items: center;
    margin-left: 60px !important; /* Force proper separation in fixed header */
}

.fixed-header .language-switcher .lang-flag {
    /* Use EXACT same padding as sticky navigation */
    padding: 40px 0px 40px;
    background-color: transparent;
    border: none;
    box-shadow: none;
    /* Ensure perfect alignment */
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-header .language-switcher .lang-flag:hover {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.fixed-header .language-switcher .lang-flag.active {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Enhanced shadows for better visibility in fixed state */
.fixed-header .language-switcher .lang-flag img {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.fixed-header .language-switcher .lang-flag:hover img {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.fixed-header .language-switcher .lang-flag.active img {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ===== MOBILE LANGUAGE SWITCHER ===== */
.language-switcher-mobile {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.language-switcher-mobile ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-switcher-mobile .lang-flag {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.language-switcher-mobile .lang-flag:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
}

.language-switcher-mobile .lang-flag img {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.language-switcher-mobile .lang-flag span {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

.language-switcher-mobile .lang-flag.active {
    background-color: var(--thm-base);
    border-color: var(--thm-base);
    transform: translateX(5px);
}

/* RTL Support for Mobile */
[dir="rtl"] .language-switcher-mobile .lang-flag:hover {
    transform: translateX(-5px);
}

[dir="rtl"] .language-switcher-mobile .lang-flag.active {
    transform: translateX(-5px);
}

/* ===== RESPONSIVE DESIGN ===== */
/* Tablet and smaller desktop */
@media (max-width: 1199px) {
    .language-switcher {
        margin-left: 40px !important; /* Maintain good separation */
    }

    .sticky-header .language-switcher,
    .fixed-header .language-switcher {
        margin-left: 50px !important; /* Maintain good separation in fixed states */
    }
}

@media (max-width: 991px) {
    .language-switcher {
        margin-left: 35px !important; /* Good separation for medium screens */
    }

    .sticky-header .language-switcher,
    .fixed-header .language-switcher {
        margin-left: 45px !important; /* Maintain good separation in fixed states */
    }
}

/* Mobile landscape */
@media (max-width: 768px) {
    .language-switcher {
        margin-left: 25px !important; /* Good separation for mobile landscape */
    }

    .language-switcher ul {
        gap: 6px;
    }

    .language-switcher .lang-flag {
        /* Maintain same padding for consistency */
        padding: 27px 0px 28px;
    }

    .language-switcher .lang-flag img {
        width: 20px;
        height: 15px;
    }

    /* Sticky and fixed header responsive */
    .sticky-header .language-switcher,
    .fixed-header .language-switcher {
        margin-left: 35px !important; /* Good separation in fixed states on mobile */
    }

    .sticky-header .language-switcher .lang-flag,
    .fixed-header .language-switcher .lang-flag {
        /* Use same padding as mobile navigation if it exists */
        padding: 40px 0px 40px;
    }

    .sticky-header .language-switcher .lang-flag img,
    .fixed-header .language-switcher .lang-flag img {
        width: 20px;
        height: 15px;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .language-switcher {
        margin-left: 20px !important; /* Good separation for mobile portrait */
    }

    .language-switcher .lang-flag {
        padding: 27px 0px 28px;
    }

    .language-switcher .lang-flag img {
        width: 18px;
        height: 13px;
    }

    /* Sticky and fixed header responsive */
    .sticky-header .language-switcher,
    .fixed-header .language-switcher {
        margin-left: 30px !important; /* Good separation in fixed states on small mobile */
    }

    .sticky-header .language-switcher .lang-flag,
    .fixed-header .language-switcher .lang-flag {
        padding: 40px 0px 40px;
    }

    .sticky-header .language-switcher .lang-flag img,
    .fixed-header .language-switcher .lang-flag img {
        width: 18px;
        height: 13px;
    }
}

/* ===== SMOOTH TRANSITIONS ===== */
/* Page transition for language switching */
body {
    transition: opacity 0.2s ease-in-out;
}

body.language-switching {
    opacity: 0.8;
}

/* ===== FORCE ALIGNMENT OVERRIDES ===== */
/* Ensure language switcher is always perfectly aligned */
.language-switcher,
.sticky-header .language-switcher,
.fixed-header .language-switcher {
    /* Force flexbox alignment */
    display: flex !important;
    align-items: center !important;
    /* Remove any float interference */
    float: none !important;
}

.language-switcher .lang-flag,
.sticky-header .language-switcher .lang-flag,
.fixed-header .language-switcher .lang-flag {
    /* Force flexbox alignment */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Ensure consistent sizing */
    height: auto !important;
    width: auto !important;
    /* Remove any transform interference */
    transform: none !important;
}

/* ===== ADDITIONAL SPACING FOR NAVIGATION CONTAINER ===== */
/* Add right padding to the navigation container to create space */
.main-menu .navigation {
    margin-right: 20px !important; /* Add space after navigation items */
}

/* Ensure the right-col container has proper spacing */
.right-col {
    padding-right: 10px !important; /* Add some padding to the right side */
}

/* ===== DEBUGGING HELPERS ===== */
/* Uncomment these lines if you need to debug alignment issues */
/*
.language-switcher {
    border: 2px solid red;
}

.language-switcher .lang-flag {
    border: 2px solid blue;
}

.sticky-header .language-switcher {
    border: 2px solid green;
}

.fixed-header .language-switcher {
    border: 2px solid orange;
}
*/