/* Language Switcher - Classic Style */

/* Container */
.mm-lang-switcher {
    position: relative;
    display: inline-block !important;
    font-size: 0.95rem;
    vertical-align: middle;
}

/* Current language button (looks like text link) */
.mm-lang-current {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    vertical-align: middle;
    line-height: 1;
    
    /* Looks like regular text link */
    color: #004225;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.mm-lang-current:hover {
    color: #006b3b;
}

/* Dropdown list */
.mm-lang-list {
    position: absolute;
    right: 0;
    top: 120%;
    
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    
    min-width: 9rem;
    background: #fdf8ea;
    border-radius: 0.5rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1000;
}

/* Show dropdown when container has is-open class */
.mm-lang-switcher.is-open .mm-lang-list {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Language option row */
.mm-lang-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    
    padding: 0.2rem 0.9rem;
    text-decoration: none;
    color: #004225;
    font-size: 0.9rem;
    white-space: nowrap;
}

.mm-lang-option:hover {
    background-color: rgba(0,0,0,0.04);
}

/* Active language in list */
.mm-lang-option.is-active {
    font-weight: 600;
}

/* Language icon - flag emoji */
.mm-lang-icon {
    display: inline-block !important;
    width: auto;
    height: auto;
    min-width: 1.2em;
    flex-shrink: 0;
    line-height: 1;
    font-style: normal;
    font-size: 1.2em;
    vertical-align: middle;
    margin-right: 0.3em;
    position: relative;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    unicode-bidi: bidi-override;
    direction: ltr;
}

/* STEP 3: CRITICAL FIX - Disable ALL pseudo-elements on language icons
 * Reason: HTML already contains emoji flag from PHP, CSS ::before was duplicating it
 * or adding language code as text (via attr(data-lang) fallback).
 * This ensures only HTML content (emoji) is displayed, no CSS-generated text.
 */
.mm-lang-icon::before,
.mm-lang-icon::after {
    content: none !important;
    display: none !important;
}

/* STEP 3: Additional protection - if flag is present in HTML, disable pseudo-elements */
.mm-lang-icon-has-flag::before,
.mm-lang-icon-has-flag::after {
    content: none !important;
    display: none !important;
}

/* STEP 3: Disable pseudo-elements on language options to prevent text injection */
.mm-lang-option::before,
.mm-lang-option::after {
    content: none !important;
    display: none !important;
}

/* STEP 3: REMOVED - All ::before pseudo-elements for language icons are disabled above.
 * Reason: HTML already contains emoji flags from PHP (get_language_flag()),
 * CSS ::before was causing duplication or adding language code as text.
 * The fallback "content: attr(data-lang)" was especially problematic as it could
 * output "RU" as text when data-lang="RU", causing the duplication issue.
 * 
 * All flag display now comes from HTML content only, no CSS pseudo-elements.
 */

/* Responsive */
@media (max-width: 768px) {
    .mm-lang-switcher {
        font-size: 0.9rem;
    }
    
    .mm-lang-list {
        right: auto;
        left: 0;
        min-width: 8rem;
    }
}

/* Legacy support - hide old switcher styles completely */
.ml-lang-switcher-dropdown,
.ml-lang-switcher-toggle,
.ml-lang-switcher-menu {
    display: none !important;
}

/* Menu integration - proper alignment */
.menu-item-lang-switcher {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.menu-item-lang-switcher .mm-lang-switcher {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.menu-item-lang-switcher .mm-lang-current {
    display: inline-flex !important;
    vertical-align: middle;
    line-height: inherit;
    font-size: inherit;
    font-family: inherit;
}

.menu-item-lang-switcher .mm-lang-label {
    vertical-align: middle;
    line-height: inherit;
}

/* Override any theme styles that might interfere */
.menu-item-lang-switcher .mm-lang-switcher * {
    box-sizing: border-box;
}

/* Ensure proper display */
.mm-lang-switcher {
    display: inline-block !important;
    vertical-align: middle;
}

.mm-lang-current {
    display: inline-flex !important;
    vertical-align: middle;
}
.mm-lang-list {
    display: block !important;
}

/* ========== Elementor / theme menu: switcher as inline menu item ========== */
/* Keep switcher on the same row and height as menu items (HOME, ABOUT US, etc.) */
.menu-item-lang-switcher,
li.menu-item-lang-switcher {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
    line-height: inherit !important;
    min-height: 0 !important;
}

/* Inside flex nav (Elementor, OceanWP, etc.) */
.elementor-nav-menu .menu-item-lang-switcher,
.elementor-item-wrap .menu-item-lang-switcher,
.oceanwp-theme .menu-item-lang-switcher,
nav .menu-item-lang-switcher,
ul .menu-item-lang-switcher {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0;
}

/* Switcher block: no extra block layout, no background box */
.menu-item-lang-switcher .mm-lang-switcher {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 0.5rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Button looks like a menu link, not a separate box */
.menu-item-lang-switcher .mm-lang-current {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    padding: 0.4em 0.5em !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap;
}

.menu-item-lang-switcher .mm-lang-current:hover {
    background: transparent !important;
    color: inherit !important;
    opacity: 0.85;
}

/* Wrapper used when switcher is injected into menu (Elementor/OceanWP) */
.mm-lang-switcher-in-menu {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}