/* Language selector: scoped slots avoid changing the document flow globally. */
.language-selector { margin: 0; font-family: inherit; line-height: 1; }
.language-selector__menu { position: relative; }
.language-selector__trigger {
    display: flex;
    min-width: 108px;
    height: 36px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(124, 102, 83, .16);
    border-radius: 12px;
    color: #4a4038;
    list-style: none;
    cursor: pointer;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 5px 16px rgba(79, 59, 43, .10);
    backdrop-filter: blur(10px);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.language-selector__trigger::-webkit-details-marker { display: none; }
.language-selector__trigger:hover { background: #fff; box-shadow: 0 8px 20px rgba(79, 59, 43, .16); transform: translateY(-1px); }
.language-selector__trigger:focus-visible { outline: 3px solid rgba(206, 139, 105, .32); outline-offset: 2px; }
.language-selector__flag { width: 22px; height: 15px; flex: 0 0 auto; overflow: hidden; border-radius: 3px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.language-selector__current { max-width: 7.4rem; overflow: hidden; font-size: .72rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.language-selector__trigger .bi { margin-inline-start: auto; font-size: .62rem; transition: transform .18s ease; }
.language-selector__menu[open] .language-selector__trigger .bi { transform: rotate(180deg); }

.language-selector__options {
    position: absolute;
    inset-block-start: calc(100% + 7px);
    inset-inline-end: 0;
    display: grid;
    min-width: 188px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid rgba(214, 202, 190, .85);
    border-radius: 14px;
    background: rgba(255, 253, 250, .98);
    box-shadow: 0 16px 36px rgba(62, 45, 34, .18);
    z-index: 1200;
}
.language-selector__option {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
    border: 0; border-radius: 10px; color: #4a4038; font: inherit; font-size: .8rem;
    font-weight: 600; text-align: start; cursor: pointer; background: transparent;
    transition: background-color .16s ease, color .16s ease;
}
.language-selector__option img { width: 23px; height: 15px; flex: 0 0 auto; border-radius: 3px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.16); }
.language-selector__option:hover, .language-selector__option:focus-visible { color: #a65a42; outline: 0; background: #fff0ea; }

/* Public menu: part of the existing header, never a fixed body child. */
.menu-header-actions { display: flex; align-items: center; gap: 10px; }
.language-selector-slot--header .language-selector__trigger { min-width: 100px; height: 34px; }
.language-selector-slot--header .language-selector__options { inset-inline-end: 0; }

/* Splash: positioned inside its own visual container only. */
.splash-container { position: relative; }
.language-selector-slot--splash { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; z-index: 5; }
.language-selector-slot--splash .language-selector__trigger { background: rgba(255,255,255,.86); }
/* In RTL the splash slot is anchored to the right edge. Align the menu to
   that same edge so the options expand toward the page instead of off-canvas. */
.language-selector-slot--splash .language-selector__options {
    inset-inline-start: 0;
    inset-inline-end: auto;
    max-width: calc(100vw - 20px);
}
html[dir="ltr"] .language-selector-slot--splash .language-selector__options {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* Plans and auth pages: controls stay within their own header/shell. */
.header nav { display: flex; align-items: center; gap: 14px; }
.language-selector-slot--plans { display: flex; align-items: center; }
.language-selector-slot--auth { display: flex; justify-content: flex-end; margin-block-end: 12px; }
.language-selector-slot--auth .language-selector__trigger { background: #fff; }

@media (max-width: 575px) {
    .language-selector__trigger { min-width: 92px; height: 33px; gap: 6px; padding: 0 8px; }
    .language-selector__flag { width: 20px; height: 14px; }
    .language-selector__current { max-width: 4.6rem; font-size: .67rem; }
    .menu-header-actions { gap: 7px; }
    .language-selector-slot--header .language-selector__trigger { min-width: 92px; }
    .language-selector-slot--splash { inset-block-start: 10px; inset-inline-start: 10px; }
}

html[dir="ltr"] .bi-arrow-right::before { transform: rotate(180deg); display: inline-block; }