/* The Box Plus 1.4.9: a separate row before desktop navigation. */
.boxplus-language-bar--desktop {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 6px 15px;
    background: #f5f5f5;
}

.boxplus-language-bar--desktop .boxplus-language-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}

.boxplus-language-bar--desktop .boxplus-language-link.is-current,
.boxplus-language-bar--desktop .boxplus-language-link:hover,
.boxplus-language-bar--desktop .boxplus-language-link:focus-visible {
    color: #222;
    text-decoration: underline;
}

/* The mobile switcher appears inside the mobile overlay when the menu opens,
 * even if that menu contains no items. It is placed ahead of the overlay in
 * the template, but fixed above it (z-index 1001 > theme's 999). */
.boxplus-language-bar--mobile {
    display: none;
}

@media (max-width: 768px), (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .boxplus-language-bar--desktop {
        display: none;
    }

    body.mobile-nav-open .boxplus-language-bar--mobile {
        position: fixed;
        top: 65px;
        right: 40px;
        z-index: 1001;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
        padding: 4px 0;
        background: #151515;
    }

    body.admin-bar.mobile-nav-open .boxplus-language-bar--mobile {
        top: 105px;
    }

    .boxplus-language-bar--mobile .boxplus-language-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #ddd;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        padding: 6px 0;
        text-decoration: none;
    }

    .boxplus-language-bar--mobile .boxplus-language-link.is-current,
    .boxplus-language-bar--mobile .boxplus-language-link:hover,
    .boxplus-language-bar--mobile .boxplus-language-link:focus-visible {
        color: #fff;
        text-decoration: underline;
    }

    /* Reserve space so languages don't overlap the mobile menu's first item. */
    #mobile-navigation {
        padding-top: 115px;
    }

    .admin-bar #mobile-navigation {
        padding-top: 155px;
    }
}

/* Small Polylang flag before each two-letter language code. */
.boxplus-language-bar .boxplus-language-flag {
    display: block;
    width: 18px;
    height: 12px;
    max-width: none;
    object-fit: contain;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Optional see-through backgrounds (both menu variants). */
.boxplus-language-bar--desktop.boxplus-language-bar--transparent,
body.mobile-nav-open .boxplus-language-bar--mobile.boxplus-language-bar--transparent {
    background: transparent;
}