/* Language switcher — same pattern as Menuify (round flag + code + chevron, dropdown with flags) */
.lang-pop { position: relative; display: inline-block; }
.langbtn {
    display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px 0 6px;
    border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #0f172a;
    font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.06);
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
[dir="rtl"] .langbtn { padding: 0 6px 0 10px; }
.langbtn:hover { border-color: var(--brand-primary, #64748b); box-shadow: 0 2px 8px rgba(15,23,42,.10); }
.dark .langbtn, .lang-pop--dark .langbtn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }
/* In the slim top bar (44px, 32px once scrolled) the pill has to fit inside the bar */
.lang-pop--dark .langbtn { height: 32px; gap: 6px; }
.lang-pop--dark .langbtn img { width: 22px; height: 22px; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(255,255,255,.25); }
.lang-pop--dark .lang-pop__panel { background: #1e293b; color: #f1f5f9; border-color: rgba(255,255,255,.1); }
.lang-pop--dark .lang-pop__item:hover { background: rgba(255,255,255,.06); }
.langbtn img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #cbd5e1; }
.langbtn__flag { display: inline-flex; }
.langbtn__code { letter-spacing: .02em; }
.langbtn__chev { opacity: .6; transition: transform .15s; }
.langbtn__chev.is-open { transform: rotate(180deg); }
.lang-pop__panel {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 90; min-width: 220px; padding: 6px;
    border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; color: #0f172a;
    box-shadow: 0 18px 40px -12px rgba(15,23,42,.28); animation: lang-pop-in .15s ease-out;
}
.dark .lang-pop__panel { background: #1e293b; color: #f1f5f9; border-color: rgba(255,255,255,.1); }
.lang-pop__item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px;
    border-radius: 10px; font-size: 15px; font-weight: 600; text-align: start; text-decoration: none; color: inherit;
}
.lang-pop__item:hover { background: #f1f5f9; }
.dark .lang-pop__item:hover { background: rgba(255,255,255,.06); }
.lang-pop__item.is-active { color: var(--brand-primary, #0f172a); font-weight: 700; }
.lang-pop__item img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px #cbd5e1; }
.lang-pop__label { min-width: 0; }
.lang-pop__check { margin-inline-start: auto; color: var(--brand-primary, currentColor); }
@keyframes lang-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 400px) {
    .langbtn { gap: 4px; padding: 0 7px 0 5px; }
    .langbtn__code { display: none; }
}