/* Shared native language switcher contract for public, auth, cabinet, and admin surfaces. */
:root {
  --p2a-language-switcher-min-width: 88px;
  --p2a-language-switcher-min-height: 38px;
  --p2a-language-switcher-padding-x: 12px;
  --p2a-language-switcher-padding-right: 34px;
  --p2a-language-switcher-radius: 8px;
  --p2a-language-switcher-border: var(--line, #d9e2ef);
  --p2a-language-switcher-border-hover: var(--accent, #2563eb);
  --p2a-language-switcher-bg: var(--surface, #ffffff);
  --p2a-language-switcher-bg-hover: var(--soft, #edf5ff);
  --p2a-language-switcher-color: var(--ink, #17202a);
  --p2a-language-switcher-option-bg: var(--surface, #ffffff);
  --p2a-language-switcher-option-color: var(--ink, #17202a);
  --p2a-language-switcher-arrow: var(--muted, #5b6472);
  --p2a-language-switcher-arrow-hover: var(--accent-strong, #1d4ed8);
  --p2a-language-switcher-focus: rgba(37, 99, 235, 0.3);
  --p2a-language-switcher-shadow: none;
  --p2a-language-switcher-shadow-hover: none;
  --p2a-language-switcher-font-size: 0.9rem;
  --p2a-language-switcher-font-weight: 800;
}

.language-switcher,
.language-pill[data-language-switcher] {
  width: auto;
  max-width: 100%;
  min-width: var(--p2a-language-switcher-min-width);
  min-height: var(--p2a-language-switcher-min-height);
  padding: 0 var(--p2a-language-switcher-padding-right) 0 var(--p2a-language-switcher-padding-x);
  border: 1px solid var(--p2a-language-switcher-border);
  border-radius: var(--p2a-language-switcher-radius);
  background:
    linear-gradient(45deg, transparent 50%, var(--p2a-language-switcher-arrow) 50%) calc(100% - 17px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--p2a-language-switcher-arrow) 50%, transparent 50%) calc(100% - 12px) 50% / 6px 6px no-repeat,
    var(--p2a-language-switcher-bg);
  color: var(--p2a-language-switcher-color);
  box-shadow: var(--p2a-language-switcher-shadow);
  cursor: pointer;
  font: inherit;
  font-size: var(--p2a-language-switcher-font-size);
  font-weight: var(--p2a-language-switcher-font-weight);
  letter-spacing: 0;
  line-height: 1;
  appearance: none;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.language-switcher:hover,
.language-pill[data-language-switcher]:hover {
  border-color: var(--p2a-language-switcher-border-hover);
  background:
    linear-gradient(45deg, transparent 50%, var(--p2a-language-switcher-arrow-hover) 50%) calc(100% - 17px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--p2a-language-switcher-arrow-hover) 50%, transparent 50%) calc(100% - 12px) 50% / 6px 6px no-repeat,
    var(--p2a-language-switcher-bg-hover);
  box-shadow: var(--p2a-language-switcher-shadow-hover);
}

.language-switcher:focus-visible,
.language-pill[data-language-switcher]:focus-visible {
  outline: 3px solid var(--p2a-language-switcher-focus);
  outline-offset: 2px;
}

.language-switcher option,
.language-pill[data-language-switcher] option {
  background: var(--p2a-language-switcher-option-bg);
  color: var(--p2a-language-switcher-option-color);
  font-weight: 700;
}

@media (max-width: 780px) {
  .language-switcher,
  .language-pill[data-language-switcher] {
    min-height: 44px;
  }
}