/* Language multiselector — self-contained styles for /fonts & /browse.
 * Deliberately isolated from the legacy .prompt-options rules in /css/style.css
 * (which colour hover/active with the old #8B5CF6). Everything here is scoped to
 * #languageSelect / #menuLanguages so it never leaks and never picks up the
 * legacy purple. Visual parity with the index.php language picker: selected
 * languages leave the list and appear as removable chips at the top. */

#languageSelect.langselect { position: relative; z-index: 45; width: auto; }
#languageSelect.langselect.open { z-index: 1300; }

#btn-languages.prompt-btn {
    width: auto; min-width: 150px; height: 44px;
    padding: .4rem 1rem; font-size: 13px; gap: .4rem;
    background: #f3eee6;
}
#btn-languages.prompt-btn:hover { background: #000; color: #fff; }

#menuLanguages.prompt-options {
    min-width: 272px; max-height: 360px; overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    text-align: left; border-radius: 16px; left: 0; right: auto; padding: 6px;
}
#menuLanguages.prompt-options::-webkit-scrollbar { display: none; }

/* option rows — neutralise legacy purple hover/active completely */
#menuLanguages .option {
    display: flex; justify-content: flex-start; align-items: center; gap: 8px;
    text-align: left; padding: 10px 12px; border-radius: 12px; margin: 2px 2px;
    font-weight: 600; color: #15130e; background: transparent; background-image: none;
    transition: background .14s ease, color .14s ease;
}
#menuLanguages .option:hover { background: rgba(42, 67, 255, .08); color: #15130e; }
#menuLanguages .option:not(.active):hover span { color: #15130e; }
#menuLanguages .option.disabled { opacity: .55; cursor: default; font-weight: 500; }
#menuLanguages .option.disabled:hover { background: transparent; }
#menuLanguages .option > span { display: inline-flex; align-items: center; gap: 8px; }
#menuLanguages .option .menu-right {
    margin-left: auto; display: inline-flex; align-items: center; gap: 9px; color: #5c574e;
}
#menuLanguages .option .menu-right i.fa-plus,
#menuLanguages .option .menu-right .fa-plus { color: #2A43FF; }

.v2-back {
    cursor: pointer; border-bottom: 1px solid #ececec; margin: 0 4px 4px;
    padding: 8px 8px 10px; font-weight: 700; text-align: left; color: #15130e;
}
.v2-back:hover { color: #2A43FF; }

.v2-badge-count {
    display: inline-block; border: 2px solid #111; border-radius: 999px;
    padding: 1px 7px; font-size: .73rem; margin-left: 6px; line-height: 1.3;
}
#btn-languages:hover .v2-badge-count { border-color: #fff; color: #fff; background: transparent; }

.v2-flag { font-size: 14px; line-height: 1; }

/* selected languages as removable chips at the top of the menu (like index) */
.v2-lang-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 4px 4px 8px; margin: 0 2px 4px; border-bottom: 1px solid #ececec;
}
.v2-lang-tag {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid #cfcfcf; border-radius: 999px; background: #efefef;
    padding: 4px 8px; font-size: .72rem; font-weight: 700; line-height: 1; color: #4a4a4a;
}
.v2-lang-tag-remove {
    border: 0; background: transparent; padding: 0; line-height: 1;
    font-size: 11px; color: #7a7a7a; cursor: pointer;
}
.v2-lang-tag-remove:hover { color: #c1121f; }