.ml-switcher,
.ml-switcher-auto {
    --ml-bg: #ffffff;
    --ml-bg-hover: #f3f4f6;
    --ml-bg-active: #e8edff;
    --ml-text: #374151;
    --ml-text-hover: #111827;
    --ml-text-active: #3b5bdb;
    --ml-border: #e5e7eb;
    --ml-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    --ml-radius: 8px;
    --ml-radius-sm: 6px;
    --ml-transition: 0.18s ease;
    --ml-font: inherit;
    --ml-font-size: 14px;
    --ml-h: 36px;
    --ml-px: 12px;
    --ml-gap: 6px;
    --ml-flag-w: 20px;
    --ml-flag-h: 14px;

    box-sizing: border-box;
    font-family: var(--ml-font);
    font-size: var(--ml-font-size);
    line-height: 1;
}


.ml-sz-sm {
    --ml-h: 28px;
    --ml-px: 8px;
    --ml-gap: 4px;
    --ml-font-size: 12px;
    --ml-flag-w: 16px;
    --ml-flag-h: 11px;
}

.ml-sz-md {
    --ml-h: 36px;
    --ml-px: 12px;
    --ml-gap: 6px;
    --ml-font-size: 14px;
    --ml-flag-w: 20px;
    --ml-flag-h: 14px;
}

.ml-sz-lg {
    --ml-h: 44px;
    --ml-px: 16px;
    --ml-gap: 8px;
    --ml-font-size: 16px;
    --ml-flag-w: 24px;
    --ml-flag-h: 17px;
}


.ml-theme-light {
    --ml-bg: #ffffff;
    --ml-bg-hover: #f3f4f6;
    --ml-bg-active: #e8edff;
    --ml-text: #374151;
    --ml-text-hover: #111827;
    --ml-text-active: #3b5bdb;
    --ml-border: #e5e7eb;
    --ml-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.ml-theme-dark {
    --ml-bg: #1f2937;
    --ml-bg-hover: #374151;
    --ml-bg-active: #1e3a8a;
    --ml-text: #e5e7eb;
    --ml-text-hover: #f9fafb;
    --ml-text-active: #93c5fd;
    --ml-border: #374151;
    --ml-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.ml-theme-transparent {
    --ml-bg: transparent;
    --ml-bg-hover: rgba(0, 0, 0, 0.06);
    --ml-bg-active: rgba(59, 91, 219, 0.12);
    --ml-text: inherit;
    --ml-text-hover: inherit;
    --ml-text-active: #3b5bdb;
    --ml-border: transparent;
    --ml-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}


.ml-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ml-gap);
    padding: 0 var(--ml-px);
    height: var(--ml-h);
    color: var(--ml-text);
    text-decoration: none;
    font-size: var(--ml-font-size);
    font-family: var(--ml-font);
    border-radius: var(--ml-radius-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ml-transition), color var(--ml-transition);
    box-sizing: border-box;
}

.ml-item:hover,
.ml-item:focus-visible {
    background-color: var(--ml-bg-hover);
    color: var(--ml-text-hover);
    outline: none;
}

.ml-item.active {
    background-color: var(--ml-bg-active);
    color: var(--ml-text-active);
    font-weight: 600;
}

.ml-flag {
    display: inline-block;
    width: var(--ml-flag-w);
    height: var(--ml-flag-h);
    flex-shrink: 0;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    vertical-align: middle;
}


.ml-switcher-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    background: var(--ml-bg);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
    box-sizing: border-box;
    align-items: center;
}

.ml-switcher-links .ml-item.active {
    background-color: var(--ml-bg-active);
    color: var(--ml-text-active);
    font-weight: 600;
}

.ml-switcher-links .ml-item:hover {
    background-color: var(--ml-bg-hover);
    color: var(--ml-text-hover);
}


.ml-switcher-dropdown {
    position: relative;
    display: inline-block;
}

.ml-dd-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--ml-gap);
    padding: 0 var(--ml-px);
    height: var(--ml-h);
    font-size: var(--ml-font-size);
    font-family: var(--ml-font);
    color: var(--ml-text);
    background: var(--ml-bg);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    outline: none;
    transition: background-color var(--ml-transition),
        border-color var(--ml-transition),
        box-shadow var(--ml-transition),
        color var(--ml-transition);
    box-sizing: border-box;
}

.ml-dd-trigger:hover {
    background-color: var(--ml-bg-hover);
    border-color: #d1d5db;
    color: var(--ml-text-hover);
}

.ml-dd-trigger[aria-expanded="true"],
.open .ml-dd-trigger {
    border-color: #3b5bdb;
    box-shadow: 0 0 0 2px rgba(59, 91, 219, 0.15);
}

.ml-caret {
    margin-left: 4px;
    flex-shrink: 0;
    transition: transform var(--ml-transition);
    opacity: 0.45;
    pointer-events: none;
}

.open .ml-dd-trigger .ml-caret,
.ml-dd-trigger[aria-expanded="true"] .ml-caret {
    transform: rotate(180deg);
}

.ml-dd-menu {
    position: absolute;
    z-index: 9999;
    min-width: 140px;
    background: var(--ml-bg);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow);
    list-style: none;
    margin: 0;
    padding: 4px;
    display: none;
    box-sizing: border-box;
}

.ml-dd-menu li {
    margin: 0;
    padding: 0;
}

.ml-dd-menu .ml-item {
    display: flex;
    width: 100%;
}

.ml-dd-bl .ml-dd-menu {
    top: calc(100% + 4px);
    left: 0;
}

.ml-dd-br .ml-dd-menu {
    top: calc(100% + 4px);
    right: 0;
}

.ml-dd-tl .ml-dd-menu {
    bottom: calc(100% + 4px);
    left: 0;
}

.ml-dd-tr .ml-dd-menu {
    bottom: calc(100% + 4px);
    right: 0;
}

.open .ml-dd-menu {
    display: block;
}

.ml-dd-menu li.ml-focus .ml-item {
    background-color: var(--ml-bg-hover);
    color: var(--ml-text-hover);
    outline: none;
}


.ml-anim-fade .ml-dd-menu {
    opacity: 0;
    transition: opacity var(--ml-transition), transform var(--ml-transition);
}

.ml-anim-fade.open .ml-dd-menu {
    opacity: 1;
}

.ml-anim-slide.ml-dd-bl .ml-dd-menu,
.ml-anim-slide.ml-dd-br .ml-dd-menu {
    transform: translateY(-8px);
    opacity: 0;
    transition: transform var(--ml-transition), opacity var(--ml-transition);
}

.ml-anim-slide.ml-dd-tl .ml-dd-menu,
.ml-anim-slide.ml-dd-tr .ml-dd-menu {
    transform: translateY(8px);
    opacity: 0;
    transition: transform var(--ml-transition), opacity var(--ml-transition);
}

.ml-anim-slide.open .ml-dd-menu {
    transform: translateY(0);
    opacity: 1;
}

.ml-anim-none .ml-dd-menu {
    transition: none;
}


.ml-switcher-select {
    position: relative;
    display: inline-block;
}

.ml-select-el {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--ml-h);
    padding: 0 calc(var(--ml-px) + 20px) 0 var(--ml-px);
    font-size: var(--ml-font-size);
    font-family: var(--ml-font);
    color: var(--ml-text);
    background: var(--ml-bg);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
    cursor: pointer;
    outline: none;
    transition: border-color var(--ml-transition), box-shadow var(--ml-transition);
    box-sizing: border-box;
    min-width: 100px;
    line-height: var(--ml-h);
}

.ml-select-el:hover {
    border-color: #9ca3af;
}

.ml-select-el:focus {
    border-color: #3b5bdb;
    box-shadow: 0 0 0 2px rgba(59, 91, 219, 0.15);
}

.ml-select-arrow {
    position: absolute;
    right: var(--ml-px);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.45;
}


.ml-switcher-auto {
    display: inline-block;
}

.ml-auto-mobile {
    display: none;
}

.ml-auto-desktop {
    display: inline-block;
}

.ml-switcher-auto.ml-mobile .ml-auto-desktop {
    display: none !important;
}

.ml-switcher-auto.ml-mobile .ml-auto-mobile {
    display: inline-block !important;
}

.ml-switcher-auto.ml-desktop .ml-auto-desktop {
    display: inline-block !important;
}

.ml-switcher-auto.ml-desktop .ml-auto-mobile {
    display: none !important;
}


[dir="rtl"] .ml-dd-bl .ml-dd-menu {
    left: auto;
    right: 0;
}

[dir="rtl"] .ml-dd-br .ml-dd-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .ml-dd-trigger .ml-caret {
    margin-left: 0;
    margin-right: 4px;
}

[dir="rtl"] .ml-select-el {
    padding-left: calc(var(--ml-px) + 20px);
    padding-right: var(--ml-px);
}

[dir="rtl"] .ml-select-arrow {
    right: auto;
    left: var(--ml-px);
}

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


.ml-lang-name,
.ml-lang-native,
.ml-lang-code {
    vertical-align: middle;
}

.ml-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}


.ml-item:focus-visible,
.ml-dd-trigger:focus-visible,
.ml-select-el:focus-visible {
    outline: 2px solid #3b5bdb;
    outline-offset: 2px;
}


@media print {

    .ml-switcher,
    .ml-switcher-auto {
        display: none !important;
    }
}


@media (prefers-reduced-motion: reduce) {

    .ml-switcher,
    .ml-switcher-auto,
    .ml-switcher * {
        transition: none !important;
        animation: none !important;
    }
}