/* Floating language switch (inc/lang-switch.php). inset-inline-end = left in Arabic, right in English. */
.sanam-lang {
    position: fixed;
    bottom: calc(22px + env(safe-area-inset-bottom));
    inset-inline-end: 22px;
    z-index: 990;
    font-family: var(--sanam-font-ui, "Lama Sans SemiBold", Tahoma, Arial, sans-serif);
    animation: sanam-lang-in .6s cubic-bezier(.2, .8, .2, 1) .8s backwards;
}

/* Pill link: frosted glass like the homepage top bar (assets/topbar.css, «زجاجي فاتح»). */
.sanam-lang__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 46px;
    padding: 0 16px 0 14px;
    border: 0;
    border-radius: 999px;
    background: rgb(250 250 252 / .8);
    color: #291f1e;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    font: 600 14px/1 var(--sanam-font-ui, "Lama Sans SemiBold", Tahoma, Arial, sans-serif);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .14);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.sanam-lang__btn > * { opacity: .8; transition: opacity .2s ease; }
.sanam-lang__btn:hover { background: rgb(255 255 255 / .9); transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 12px 28px rgb(0 0 0 / .18); }
.sanam-lang__btn:hover > *,
.sanam-lang.is-open .sanam-lang__btn > * { opacity: 1; }
.sanam-lang__btn:focus-visible { outline: 2px solid #291f1e; outline-offset: 3px; }
.sanam-lang__globe { width: 17px; height: 17px; }
.sanam-lang__code { font-size: 13px; }
.sanam-lang__chev { width: 13px; height: 13px; transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
.sanam-lang.is-open .sanam-lang__chev { transform: rotate(180deg); }

/* Menu, opening above the button */
.sanam-lang__menu {
    position: absolute;
    bottom: calc(100% + 14px);
    inset-inline-end: 0;
    min-width: 210px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border-radius: 18px;
    background: rgb(250 250 252 / .86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 18px 40px rgb(0 0 0 / .18);
    opacity: 0;
    transform: translateY(8px) scale(.97);
    transform-origin: bottom;
    transition: opacity .22s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.sanam-lang__menu[hidden] { display: block; visibility: hidden; pointer-events: none; }
.sanam-lang.is-open .sanam-lang__menu { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
/* little tail toward the button */
.sanam-lang__menu::after {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline-end: 22px;
    border: 8px solid transparent;
    border-top-color: rgb(250 250 252 / .86);
}
.sanam-lang__menu li + li { margin-top: 4px; }

.sanam-lang__item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 50px;
    padding: 0 14px;
    border-radius: 12px;
    color: #291f1e;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    transition: background-color .2s ease;
}
.sanam-lang__item img {
    width: 36px;
    height: 24px;
    flex: none;
    border-radius: 5px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgb(102 38 39 / .15), 0 2px 5px rgb(41 31 30 / .15);
}
.sanam-lang__name { flex: 1; }
.sanam-lang__check { width: 20px; height: 20px; flex: none; color: #291f1e; }
a.sanam-lang__item:hover, a.sanam-lang__item:focus-visible { background: rgb(0 0 0 / .05); }
a.sanam-lang__item:focus-visible { outline: 2px solid #291f1e; outline-offset: -2px; }
.sanam-lang__item.is-current { background: rgb(0 0 0 / .06); color: #291f1e; cursor: default; }

@keyframes sanam-lang-in {
    from { opacity: 0; transform: translateY(18px) scale(.85); }
    to { opacity: 1; transform: none; }
}

/* The phone menu panel covers the screen: keep the switch out of its way. */
html.sanam-mm-open .sanam-lang { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
    .sanam-lang { bottom: calc(16px + env(safe-area-inset-bottom)); inset-inline-end: 16px; }
    .sanam-lang__btn { height: 42px; padding: 0 14px 0 12px; }
}

@media print { .sanam-lang { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .sanam-lang, .sanam-lang__btn, .sanam-lang__chev, .sanam-lang__menu { animation: none !important; transition: none !important; }
}