/* ============================================================================
   Language switcher — shared CSS used wherever js/lang-switcher.js is loaded.

   Lives in its own file because the switcher renders on multiple entry-point
   templates (landing base, signup base, onboarding wizard) and shipping its
   styling alongside the JS keeps them from drifting. Without this file the
   menu defaults to its un-styled visible state, showing both the collapsed
   button AND the expanded options at once.

   Token-driven; falls back to neutral defaults when tokens are absent.
   ============================================================================ */

.lang-switch {
    position: relative;
    display: inline-block;
}
.lang-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--color-border, rgba(0,0,0,.12));
    border-radius: 999px;
    background: var(--color-surface, #fff);
    color: var(--color-text, #111);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s, color .15s;
    line-height: 1;
}
.lang-switch-btn:hover {
    border-color: var(--color-primary, #0b6b62);
    color: var(--color-primary, #0b6b62);
}
.lang-switch-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring, var(--color-primary, #0b6b62)) 25%, transparent);
}
.lang-switch[data-open="true"] .lang-switch-btn {
    border-color: var(--color-primary, #0b6b62);
    background: var(--color-primary-tint, color-mix(in srgb, var(--color-primary, #0b6b62) 10%, transparent));
    color: var(--color-primary, #0b6b62);
}
.lang-switch-icon {
    width: 16px; height: 16px;
    color: currentColor;
    flex-shrink: 0;
}
.lang-switch-current {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.lang-switch-caret {
    width: 12px; height: 12px;
    color: currentColor;
    opacity: .65;
    transition: transform .2s ease;
}
.lang-switch[data-open="true"] .lang-switch-caret { transform: rotate(180deg); }

.lang-switch-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 180px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,.12));
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(6,51,47,.12), 0 4px 12px rgba(6,51,47,.06);
    padding: 6px;
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 100;
}
.lang-switch[data-open="true"] .lang-switch-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.lang-switch-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #111);
    cursor: pointer;
    text-align: start;
    transition: background-color .12s;
}
.lang-switch-opt:hover { background: var(--color-bg-subtle, rgba(0,0,0,.04)); }
.lang-switch-opt.is-active {
    color: var(--color-primary, #0b6b62);
    background: var(--color-primary-tint, color-mix(in srgb, var(--color-primary, #0b6b62) 10%, transparent));
}
.lang-switch-flag {
    display: inline-grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-bg-muted, rgba(0,0,0,.06));
    color: var(--color-text-secondary, #555);
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.lang-switch-opt.is-active .lang-switch-flag {
    background: var(--color-primary, #0b6b62);
    color: var(--color-text-on-brand, #fff);
}
.lang-switch-name {
    flex: 1;
    min-width: 0;
}
.lang-switch-name small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted, #888);
    margin-block-start: 1px;
}
.lang-switch-check {
    width: 16px; height: 16px;
    color: var(--color-primary, #0b6b62);
    flex-shrink: 0;
}