.hx-lang-switcher {
    cursor: pointer !important;
    min-width: 46px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.hx-lang-switcher::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
}

.hx-lang-switcher[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(225deg);
}

.hx-lang-switcher-shell {
    position: relative !important;
    display: inline-flex !important;
    align-items: stretch !important;
    align-self: stretch;
}

.hx-lang-menu {
    position: absolute;
    z-index: 100000;
    top: calc(100% + 10px);
    right: 0;
    display: none;
    width: 154px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #d9e0ea;
    box-shadow: 0 12px 30px rgba(3, 19, 49, 0.18);
}

.hx-lang-menu.is-open {
    display: block;
}

.hx-lang-menu-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 40px;
    padding: 0 11px !important;
    color: #172f50 !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.hx-lang-menu-link:hover,
.hx-lang-menu-link:focus-visible,
.hx-lang-menu-link.is-current {
    color: #001132 !important;
    background: #eef1f5 !important;
}

.hx-lang-menu-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 24px;
    border: 1px solid #cbd4e0;
    color: #43546c;
    font-size: 11px !important;
    letter-spacing: 0.05em;
}

/*
 * Russian pages share the English templates and component CSS. The original
 * English font files do not include Cyrillic, so without this override the
 * browser substitutes a serif font and makes the same modules look like a
 * different design. These rules change typography only on /ru/ pages.
 */
:root:lang(ru) {
    /* Preserve the English design fonts wherever their glyphs are available.
     * Cyrillic falls through to a metrically similar Russian-capable family. */
    --hx-ru-body-font: "DM Sans", "Roboto", "Segoe UI", Arial, sans-serif;
    --hx-ru-display-font: "Rajdhani", "Roboto Condensed", "Arial Narrow", "Segoe UI", Arial, sans-serif;
    --hx-ru-mono-font: "DM Mono", "Roboto Mono", Consolas, "Courier New", monospace;
}

html[lang^="ru"] body,
html[lang^="ru"] #root,
html[lang^="ru"] button,
html[lang^="ru"] input,
html[lang^="ru"] select,
html[lang^="ru"] textarea {
    font-family: var(--hx-ru-body-font) !important;
}

html[lang^="ru"] #root :where(
    p,
    a,
    span,
    li,
    dt,
    dd,
    td,
    th,
    label,
    input,
    textarea,
    select,
    option
) {
    font-family: var(--hx-ru-body-font) !important;
}

html[lang^="ru"] #root :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    button,
    [role="button"],
    nav a,
    .site-header a,
    .main-navigation a,
    [class*="title"],
    [class*="heading"],
    [class*="headline"],
    [class*="eyebrow"]
) {
    font-family: var(--hx-ru-display-font) !important;
    font-style: normal !important;
}

html[lang^="ru"] #root :where(
    code,
    pre,
    kbd,
    samp,
    .font-mono,
    [class*="mono"]
) {
    font-family: var(--hx-ru-mono-font) !important;
}