/* 02-naglowek-c: przełącznik motywu (trzy ikonki) — przeniesiony z ai4buyers/css/04-naglowek.css:196-252.
   Wybór Romana: ikonki zamiast listy rozwijanej z makiety. Kolory tylko z tokenów. */
.ai-motyw {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--ai-card-alt);
  border: 1px solid var(--ai-line);
  border-radius: 999px;
}

.ai-motyw__opcja {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--ai-text-mute);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--ai-fast) var(--ai-ease),
              background-color var(--ai-fast) var(--ai-ease);
}

.ai-motyw__opcja svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-motyw__opcja:hover { color: var(--ai-heading); }

/* Stan wybrany niesie znaczenie, więc nie może opierać się na samym kolorze:
   niesie go też wypełniona powierzchnia pod ikoną. */
.ai-motyw__opcja[aria-pressed="true"] {
  color: var(--ai-on-accent);
  background: var(--ai-rose);
}

.ai-motyw__opcja:focus-visible {
  outline: 2px solid var(--ai-focus);
  outline-offset: 2px;
}

/* W pasku przełącznik znika razem z CTA — na wąskim ekranie żyje w menu. */
@media (max-width: 900px) {
  .ai-topbar__motyw { display: none; }
}

.ai-overlay__motyw { margin-top: var(--ai-s4); }
@media (min-width: 901px) {
  .ai-overlay__motyw { display: none; }
}

/* Tekst tylko dla czytników ekranu — etykiety przełącznika motywu i podobne. Z ai4buyers/css/01-baza.css. */
.ai-tylko-dla-czytnika {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Nagłówek minimalny (checkout): sam znak i przełącznik motywu, wyrównane do krawędzi. */
.header-minimalny {
  justify-content: space-between;
}
.header-minimalny nav {
  /* Na wąskich ekranach nav jest chowany do menu (02-naglowek-b): tu nie ma menu,
     więc przełącznik motywu zostaje w pasku na każdej szerokości. */
  display: flex !important;
  position: static;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  flex-direction: row;
  align-items: center;
}