/* WebcamTest.com — i18n additions: language switcher + auto-detect banner.
   Kept in a separate file (not merged into styles.css) so the shared,
   cache-busted core stylesheet used by all 328 existing pages never has to
   be re-versioned for this. Uses the site's existing CSS custom properties
   so it automatically follows the light/dark theme toggle. */

/* ---------- Language switcher (header control) ---------- */
.lang-switcher{position:relative}
.lang-toggle{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text-dim);font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.lang-toggle:hover{color:var(--text);border-color:var(--text-dim)}
.lang-toggle svg{flex:none}
.lang-toggle .lang-chevron{transition:transform .15s ease}
.lang-switcher.is-open .lang-toggle .lang-chevron,
.lang-switcher:hover .lang-toggle .lang-chevron{transform:rotate(180deg)}
.lang-current-label{text-transform:uppercase}

.lang-menu{display:none;position:absolute;top:calc(100% + 10px);right:0;width:250px;max-height:70vh;overflow-y:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-raised);padding:6px;z-index:80}
.lang-switcher:hover .lang-menu,.lang-switcher.is-open .lang-menu{display:block}
.lang-option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--text-dim);text-decoration:none;font-size:.9rem;transition:background .15s ease,color .15s ease}
.lang-option:hover,.lang-option:focus-visible{background:var(--panel);color:var(--text)}
.lang-option.is-current{color:var(--text);background:rgba(227,162,74,.1)}
.lang-option-native{font-family:var(--font-body)}
.lang-option-code{font-family:var(--font-mono);font-size:.7rem;color:var(--text-faint);letter-spacing:.03em}
.lang-option.is-current .lang-option-code{color:var(--signal)}

@media (max-width:480px){
  .lang-toggle{padding:0 9px}
  .lang-current-label{display:none}
  .lang-menu{width:224px;right:-8px}
}

/* ---------- Auto-detect language banner ---------- */
.lang-banner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:10px 24px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:.88rem;color:var(--text-dim);text-align:center}
.lang-banner[hidden]{display:none}
.lang-banner .lang-banner-msg{color:var(--text)}
.lang-banner-actions{display:inline-flex;align-items:center;gap:8px}
.lang-banner-switch{font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--signal-ink);background:var(--signal);border:1px solid var(--signal);border-radius:var(--radius-sm);padding:6px 14px;cursor:pointer;text-decoration:none;display:inline-block}
.lang-banner-switch:hover{opacity:.88}
.lang-banner-dismiss{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--text-faint);cursor:pointer;line-height:1;font-size:.85rem}
.lang-banner-dismiss:hover{color:var(--text);border-color:var(--text-dim)}