.tb-lang-switcher {
    --tb-lang-wine: #850735;
    --tb-lang-wine-dark: #650225;
    --tb-lang-paper: #fffaf8;
    --tb-lang-ink: #332d31;
    --tb-lang-muted: #756a70;

    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 99999;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.tb-lang-switcher * {
    box-sizing: border-box;
}

.tb-lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 78px;
    height: 42px;
    padding: 0 13px;

    border: 1px solid rgba(133, 7, 53, .18);
    border-radius: 999px;

    background: rgba(255, 250, 248, .94);
    color: var(--tb-lang-wine);

    box-shadow:
        0 8px 28px rgba(51, 45, 49, .10);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    cursor: pointer;

    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.tb-lang-switcher__toggle:hover {
    background: #fff;
    box-shadow:
        0 10px 32px rgba(51, 45, 49, .15);
}

.tb-lang-switcher__toggle:active {
    transform: translateY(1px);
}

.tb-lang-switcher__toggle:focus-visible,
.tb-lang-switcher__item:focus-visible {
    outline: 2px solid var(--tb-lang-wine);
    outline-offset: 3px;
}

.tb-lang-switcher__globe {
    width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1.5px solid currentColor;
    border-radius: 50%;

    font-size: 0;
}

.tb-lang-switcher__globe::before {
    content: "";
    width: 6px;
    height: 14px;

    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;
    border-radius: 50%;
}

.tb-lang-switcher__chevron {
    position: relative;
    top: -1px;

    font-size: 15px;
    transition: transform .18s ease;
}

.tb-lang-switcher.is-open
.tb-lang-switcher__chevron {
    transform: rotate(180deg);
}

.tb-lang-switcher__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;

    width: 190px;
    padding: 7px;

    border: 1px solid rgba(133, 7, 53, .12);
    border-radius: 15px;

    background: rgba(255, 250, 248, .98);

    box-shadow:
        0 18px 50px rgba(51, 45, 49, .16);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.tb-lang-switcher__menu[hidden] {
    display: none;
}

.tb-lang-switcher__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border-radius: 10px;

    color: var(--tb-lang-ink) !important;
    text-decoration: none !important;

    font-size: 14px;
    line-height: 1;

    transition:
        background .15s ease,
        color .15s ease;
}

.tb-lang-switcher__item:hover {
    background: rgba(133, 7, 53, .07);
}

.tb-lang-switcher__item.is-active {
    background: rgba(133, 7, 53, .09);
    color: var(--tb-lang-wine) !important;
    font-weight: 700;
}

.tb-lang-switcher__code {
    color: var(--tb-lang-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

body.admin-bar .tb-lang-switcher {
    top: 50px;
}

@media (max-width: 782px) {
    .tb-lang-switcher {
        top: 12px;
        right: 12px;
    }

    body.admin-bar .tb-lang-switcher {
        top: 60px;
    }

    .tb-lang-switcher__toggle {
        min-width: 70px;
        height: 40px;
        padding: 0 11px;
    }

    .tb-lang-switcher__menu {
        width: 180px;
    }
}
