/* SkibidiLii Language Selector — matches VidLii pixel-for-pixel.
   This file ONLY adds rules for new elements (the language modal +
   .header-nav-item span). It does NOT touch #sm_nav > a or any
   pre-existing widget styling — those are handled correctly by m.css. */

.language-toggle-container {
    display: inline;
}
.language-toggle {
    display: none;
}
.language-toggle:checked ~ .language-modal {
    opacity: 1;
    pointer-events: all;
}
.language-modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;

    display: block;

    z-index: 1077701;

    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 5px;

    position: absolute;
    top: 25px;
    right: 0;

    background-color: #edede9;
    width: 130px;
}
.language-modal-choice {
    display: block;

    font-size: 0.8rem;
    font-weight: bold;

    border-top: 1px solid rgba(0, 0, 0, .25);
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    padding: 0.3rem;

    cursor: pointer;
}
.language-modal-choice-container input {
    display: none;
}
.language-modal-choice-container input:checked + span {
    background-color: rgba(0, 0, 0, .25);
}

/* Give the 🌐 globe span the same separator-bar treatment that
   #sm_nav > a links get from m.css, so it sits flush with them.
   This is exactly what VidLii does (their m.css declares
   "#sm_nav > a, .header-nav-item { border-left:1px solid #aaa; ... }"
   in one combined selector). We can't easily edit m.css from here, so
   we just style .header-nav-item directly with the same values. */
#sm_nav .header-nav-item {
    border-left: 1px solid #aaa;
    padding: 0 0 0 6px;
    margin: 0 0 0 6px;
}