/* =========================================================
   Flecso — IT / EN language switch (Italian office UI, 2026-10-06)
   partials/locale-switcher.blade.php. Self-contained: also used on the login / register /
   onboarding pages, which do not load styles.css. Two real submit buttons in a POST form:
   keyboard (Tab / Enter / Space) and screen readers work with no script at all.
   ========================================================= */
.locale-switch { display: inline-flex; margin: 0; flex: none; }
.locale-switch__group {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--surface-line, #E5E7EB);
  border-radius: 12px; background: var(--white, #fff); overflow: hidden;
}
.locale-switch__btn {
  /* 44px targets at every width (WCAG 2.5.5 / the app's --tap). */
  min-width: 44px; min-height: 44px; margin: 0; padding: 0 8px;
  display: inline-grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-600, #4B5563);
  font: 700 12px/1 var(--font-sans, "Inter", system-ui, sans-serif); letter-spacing: .04em;
  transition: background-color .16s ease, color .16s ease;
}
.locale-switch__btn + .locale-switch__btn { border-left: 1px solid var(--surface-line, #E5E7EB); }
/* Hover only where there is a real pointer: touch screens keep :hover "stuck" after a tap. */
@media (hover: hover) {
  .locale-switch__btn:hover { background: var(--ink-50, #F9FAFB); color: var(--ink-900, #111827); }
}
.locale-switch__btn[aria-pressed="true"] {
  background: var(--orange-50, #FFF4EC); color: var(--orange-700, #B43B00);
  box-shadow: inset 0 -2px 0 var(--orange-500, #FF6B1A);
}
.locale-switch__btn:focus-visible {
  outline: 2px solid var(--focus-color, #F25108); outline-offset: -3px; border-radius: 10px;
}
.locale-switch .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) { .locale-switch__btn { transition: none; } }

/* Signed-out pages (login / register / onboarding): a floating pill in the top-right corner. */
.locale-switch--floating .locale-switch__group {
  border-radius: 999px; border-color: rgba(255, 107, 26, .22);
  background: rgba(255, 255, 255, .92); box-shadow: 0 16px 35px rgba(15, 23, 42, .14);
}
.locale-switch--floating .locale-switch__btn { color: #FF6B1A; }
/* Over the dark hero the light "pressed" tint is too subtle: a solid chip (white on #C2410C = 5.2:1). */
.locale-switch--floating .locale-switch__btn[aria-pressed="true"] { background: #C2410C; color: #fff; box-shadow: none; }

/* The corner position on the stand-alone auth pages (forgot / reset password, OTP): same as the
   inline .auth-lang rule of login / register. */
.auth-lang { position: fixed; top: 22px; right: 22px; z-index: 100000; }
@media (max-width: 640px) { .auth-lang { top: 14px; right: 14px; } }