/**
 * MZT Language Switcher - Frontend CSS
 *
 * Performance: minimal CSS, no external fonts, inline SVG flags.
 * Uses CSS-only flag emoji fallback with Unicode flag indicators.
 */

/* ===== Flag Indicators (CSS emoji flags) ===== */
/* Using Unicode regional indicator symbols for zero external requests */

.mzt-flag {
    display: inline-block;
    width: 20px;
    height: 15px;
    line-height: 15px;
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.mzt-flag-nl::before { content: "\01F1F3\01F1F1"; }
.mzt-flag-gb::before { content: "\01F1EC\01F1E7"; }
.mzt-flag-de::before { content: "\01F1E9\01F1EA"; }
.mzt-flag-fr::before { content: "\01F1EB\01F1F7"; }
.mzt-flag-es::before { content: "\01F1EA\01F1F8"; }
.mzt-flag-it::before { content: "\01F1EE\01F1F9"; }
.mzt-flag-pt::before { content: "\01F1F5\01F1F9"; }
.mzt-flag-pl::before { content: "\01F1F5\01F1F1"; }
.mzt-flag-tr::before { content: "\01F1F9\01F1F7"; }
.mzt-flag-sa::before { content: "\01F1F8\01F1E6"; }

/* Additional flags */
.mzt-flag-dk::before { content: "\01F1E9\01F1F0"; } /* Denmark (Danish: da) */
.mzt-flag-cz::before { content: "\01F1E8\01F1FF"; } /* Czechia (Czech: cs) */
.mzt-flag-ru::before { content: "\01F1F7\01F1FA"; } /* Russia (Russian: ru) */
.mzt-flag-eu::before { content: "\01F1EA\01F1FA"; } /* European Union (Basque: eu, or EU flag) */
.mzt-flag-si::before { content: "\01F1F8\01F1EE"; } /* Slovenia (Slovenian: sl) */
.mzt-flag-cn::before { content: "\01F1E8\01F1F3"; } /* China (Simplified Chinese: zh/sc) */
.mzt-flag-se::before { content: "\01F1F8\01F1EA"; } /* Sweden (Swedish: sv) */
.mzt-flag-no::before { content: "\01F1F3\01F1F4"; } /* Norway (Norwegian: nb/no) */
.mzt-flag-fi::before { content: "\01F1EB\01F1EE"; } /* Finland (Finnish: fi) */
.mzt-flag-gr::before { content: "\01F1EC\01F1F7"; } /* Greece (Greek: el) */
.mzt-flag-ro::before { content: "\01F1F7\01F1F4"; } /* Romania (Romanian: ro) */
.mzt-flag-hu::before { content: "\01F1ED\01F1FA"; } /* Hungary (Hungarian: hu) */
.mzt-flag-bg::before { content: "\01F1E7\01F1EC"; } /* Bulgaria (Bulgarian: bg) */
.mzt-flag-ua::before { content: "\01F1FA\01F1E6"; } /* Ukraine (Ukrainian: uk) */
.mzt-flag-jp::before { content: "\01F1EF\01F1F5"; } /* Japan (Japanese: ja) */
.mzt-flag-kr::before { content: "\01F1F0\01F1F7"; } /* South Korea (Korean: ko) */
.mzt-flag-id::before { content: "\01F1EE\01F1E9"; } /* Indonesia (Indonesian: id) */
.mzt-flag-sk::before { content: "\01F1F8\01F1F0"; } /* Slovakia (Slovak: sk) */
.mzt-flag-lt::before { content: "\01F1F1\01F1F9"; } /* Lithuania (Lithuanian: lt) */
.mzt-flag-lv::before { content: "\01F1F1\01F1FB"; } /* Latvia (Latvian: lv) */
.mzt-flag-ee::before { content: "\01F1EA\01F1EA"; } /* Estonia (Estonian: et) */
.mzt-flag-za::before { content: "\01F1FF\01F1E6"; } /* South Africa (Afrikaans: af) */
.mzt-flag-am::before { content: "\01F1E6\01F1F2"; } /* Armenia (Armenian: hy) */
.mzt-flag-ba::before { content: "\01F1E7\01F1E6"; } /* Bosnia (Bosnian: bs) */
.mzt-flag-ad::before { content: "\01F1E6\01F1E9"; } /* Andorra (Catalan: ca) */
.mzt-flag-hr::before { content: "\01F1ED\01F1F7"; } /* Croatia (Croatian: hr) */
.mzt-flag-th::before { content: "\01F1F9\01F1ED"; } /* Thailand (Thai: th) */
.mzt-flag-vn::before { content: "\01F1FB\01F1F3"; } /* Vietnam (Vietnamese: vi) */
.mzt-flag-in::before { content: "\01F1EE\01F1F3"; } /* India (Hindi: hi) */
.mzt-flag-rs::before { content: "\01F1F7\01F1F8"; } /* Serbia (Serbian: sr) */
.mzt-flag-ph::before { content: "\01F1F5\01F1ED"; } /* Philippines (Filipino: tl/fil) */
.mzt-flag-il::before { content: "\01F1EE\01F1F1"; } /* Israel (Hebrew: he) */
.mzt-flag-ge::before { content: "\01F1EC\01F1EA"; } /* Georgia (Georgian: ka) */
.mzt-flag-mk::before { content: "\01F1F2\01F1F0"; } /* North Macedonia (Macedonian: mk) */
.mzt-flag-al::before { content: "\01F1E6\01F1F1"; } /* Albania (Albanian: sq) */
.mzt-flag-br::before { content: "\01F1E7\01F1F7"; } /* Brazil (Portuguese-BR: pt-br) */
.mzt-flag-at::before { content: "\01F1E6\01F1F9"; } /* Austria (German-AT: de-at) */
.mzt-flag-be::before { content: "\01F1E7\01F1EA"; } /* Belgium (Dutch-BE/French-BE) */
.mzt-flag-ie::before { content: "\01F1EE\01F1EA"; } /* Ireland (Irish: ga) */
.mzt-flag-my::before { content: "\01F1F2\01F1FE"; } /* Malaysia (Malay: ms) */

/* ===== Dropdown Switcher ===== */
/* Using high specificity and !important to prevent theme overrides */

.mzt-switcher.mzt-switcher-dropdown {
    position: relative !important;
    display: inline-block !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
}

.mzt-switcher-dropdown .mzt-switcher-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 6px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    transition: opacity 0.15s !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    outline: none !important;
}

.mzt-switcher-dropdown .mzt-switcher-toggle:hover {
    opacity: 0.7 !important;
    background: transparent !important;
}

.mzt-switcher-dropdown .mzt-switcher-toggle:focus,
.mzt-switcher-dropdown .mzt-switcher-toggle:active {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.mzt-switcher-dropdown .mzt-switcher-toggle:focus-visible {
    outline: 2px solid #2271b1 !important;
    outline-offset: 1px !important;
}

.mzt-switcher-dropdown .mzt-chevron {
    transition: transform 0.2s !important;
    flex-shrink: 0 !important;
    opacity: 0.5 !important;
}

.mzt-switcher-dropdown[data-open="true"] .mzt-chevron {
    transform: rotate(180deg) !important;
}

.mzt-switcher-dropdown .mzt-switcher-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: auto !important;
    right: 0 !important;
    min-width: 180px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    list-style: none !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px -4px rgba(0,0,0,0.15), 0 4px 12px -2px rgba(0,0,0,0.08) !important;
    z-index: 10000 !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #d1d5db transparent !important;
    box-sizing: border-box !important;
}

/* Custom Scrollbar */
.mzt-switcher-dropdown .mzt-switcher-menu::-webkit-scrollbar {
    width: 4px !important;
}
.mzt-switcher-dropdown .mzt-switcher-menu::-webkit-scrollbar-track {
    background: transparent !important;
}
.mzt-switcher-dropdown .mzt-switcher-menu::-webkit-scrollbar-thumb {
    background-color: #d1d5db !important;
    border-radius: 4px !important;
}

.mzt-switcher-dropdown[data-open="true"] .mzt-switcher-menu {
    display: block !important;
    animation: mztReveal 0.15s ease-out !important;
}

@keyframes mztReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reset any theme styling on list items */
.mzt-switcher-dropdown .mzt-switcher-menu li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    list-style: none !important;
}

.mzt-switcher-dropdown .mzt-lang-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    color: #374151 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color 0.1s ease !important;
    border: none !important;
    border-radius: 6px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-sizing: border-box !important;
}

.mzt-switcher-dropdown .mzt-lang-option:hover {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
    text-decoration: none !important;
}

.mzt-switcher-dropdown .mzt-lang-option.mzt-active {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    font-weight: 500 !important;
}

.mzt-switcher-dropdown .mzt-lang-option.mzt-active:hover {
    background-color: #dbeafe !important;
}

/* Specific focus state to prevent ugly default rings */
.mzt-switcher-dropdown .mzt-lang-option:focus {
    outline: none !important;
    background-color: #f3f4f6 !important;
}

.mzt-switcher-dropdown .mzt-option-name {
    flex-grow: 1 !important;
    font-size: 14px !important;
}

.mzt-switcher-dropdown .mzt-check {
    color: #1d4ed8 !important;
    flex-shrink: 0 !important;
    margin-left: 4px !important;
    width: 14px !important;
    height: 14px !important;
}

/* Compact mode */
.mzt-switcher-dropdown.mzt-compact .mzt-switcher-toggle {
    padding: 4px 4px !important;
}

.mzt-switcher-dropdown.mzt-compact .mzt-lang-name {
    display: none !important;
}

/* ===== Flags-only Switcher ===== */

.mzt-switcher-flags {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.mzt-flag-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    border-radius: 3px;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: opacity 0.15s, border-color 0.15s;
    text-decoration: none;
}

.mzt-flag-link:hover {
    opacity: 1;
    text-decoration: none;
}

.mzt-flag-link.mzt-active {
    opacity: 1;
    border-color: #2271b1;
}

.mzt-flag-link:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}

/* ===== Inline Switcher ===== */

.mzt-switcher-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
}

.mzt-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #555;
    text-decoration: none;
    transition: color 0.15s;
}

.mzt-inline-link:hover {
    color: #000;
    text-decoration: none;
}

.mzt-inline-link.mzt-active {
    color: #000;
    font-weight: 600;
}

.mzt-sep {
    color: #ccc;
    user-select: none;
}

/* ===== Menu Item Integration ===== */

.mzt-menu-item {
    position: relative;
}

.mzt-menu-item .mzt-switcher-dropdown {
    display: flex;
    align-items: center;
    height: 100%;
}

.mzt-menu-item .mzt-switcher-toggle {
    border: none;
    background: transparent;
    padding: 0 4px;
    height: 100%;
    color: inherit;
    font-size: inherit;
}

.mzt-menu-item .mzt-switcher-toggle:hover {
    opacity: 0.7;
    background: transparent;
}

/* ===== RTL Support (Arabic) ===== */

[dir="rtl"] .mzt-switcher-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .mzt-check {
    margin-left: 0;
    margin-right: auto;
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
    .mzt-switcher-menu {
        min-width: 160px;
    }

    .mzt-switcher-toggle {
        padding: 4px 4px;
        font-size: 13px;
    }

    .mzt-flag {
        width: 18px;
        height: 13px;
        font-size: 14px;
    }
}

/* ===== Mobile Sidebar Language Switcher (Elessi theme) ===== */

.mzt-mobile-lang-item > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.mzt-mobile-lang-item > a .mzt-flag {
    font-size: 18px;
    width: 22px;
    height: 16px;
    line-height: 16px;
}

.mzt-mobile-lang-list {
    padding: 4px 0 !important;
}

.mzt-mobile-lang-link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 20px !important;
    min-height: 44px;
    font-size: 14px !important;
    color: inherit;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}

.mzt-mobile-lang-link:hover,
.mzt-mobile-lang-link:active {
    background-color: rgba(0, 0, 0, 0.04);
}

.mzt-mobile-lang-link .mzt-flag {
    font-size: 20px;
    width: 24px;
    height: 18px;
    line-height: 18px;
    flex-shrink: 0;
}

.mzt-mobile-lang-name {
    flex: 1;
}

.mzt-mobile-lang-active {
    color: #4caf50;
    font-weight: 700;
    font-size: 16px;
    margin-left: auto;
}

.mzt-mobile-lang-item .current-menu-item > a {
    font-weight: 600;
    color: #333;
}

/* RTL: mirror the checkmark position */
[dir="rtl"] .mzt-mobile-lang-active {
    margin-left: 0;
    margin-right: auto;
}

/* ===== Reduced Motion ===== */

@media (prefers-reduced-motion: reduce) {
    .mzt-chevron {
        transition: none;
    }

    .mzt-switcher-dropdown[data-open="true"] .mzt-switcher-menu {
        animation: none;
    }

    .mzt-lang-option,
    .mzt-flag-link,
    .mzt-inline-link,
    .mzt-switcher-toggle {
        transition: none;
    }
}