/* Language switcher — its own file on purpose.
 *
 * The switcher appears on pages that extend base.html AND on standalone public
 * pages (login / public directory, public profile, self-edit) which load only
 * their own stylesheet. These rules used to live in components.css, which those
 * pages never load, so the button rendered unstyled and its row failed to lay
 * out — the "ع" button stacked on top of "Staff Login" instead of beside it.
 * Every page that includes _lang_switch.html must load this file.
 */

/* Action rows in a page header (base.html and the public topbar). */
.top-header__actions,
.lp-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-switch { margin: 0; display: inline-flex; }

.lang-switch__btn {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 6px;
    padding: 5px 11px;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.lang-switch__btn:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .5);
}

.lang-switch__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Match the height of a neighbouring header button (e.g. Staff Login) so the
   two sit on one baseline. */
.lp-topbar-actions .lang-switch__btn {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .85rem;
}

/* Floating variant: pages with no header of their own place the switcher as a
   small fixed pill in the top corner. */
.lang-switch--float {
    position: fixed;
    top: 14px;
    inset-inline-end: 14px;              /* right in LTR, left in RTL */
    z-index: 1300;
}

.lang-switch--float .lang-switch__btn {
    background: rgba(26, 45, 74, .92);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 20px;
    padding: 6px 13px;
    font-size: .82rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.lang-switch--float .lang-switch__btn:hover { background: #1a2d4a; }

@media print {
    .lang-switch, .lang-switch--float { display: none !important; }
}