/* pin.css – PIN cyfra po cyfrze (pin.js). Kolory i zaokrąglenia jak w kreatorze (szablon Orisa);
   wartości zapasowe, gdy strona nie ma zmiennych z kreator.css.
   Pola mają stały rozmiar (--pin-szer × --pin-wys), ale zwężają się, gdy nie mieszczą się w rodzicu
   (długi PIN w oknie, telefon) – rząd nigdy nie wystaje poza okno ani stronę. */
.pin-cyfry {
  --pin-szer: 52px;
  --pin-wys: 60px;
  --pin-odstep: 10px;
  --pin-font: 26px;
  --pin-promien: 14px;
  display: flex;
  justify-content: center;
  gap: var(--pin-odstep);
  flex-wrap: nowrap;
  min-width: 0;          /* w siatce (display: grid) rząd nie rozpycha kolumny – pola się zwężają */
  max-width: 100%;
  margin: 8px 0 4px;
}

.pin-cyfry .pin-cyfra {
  box-sizing: border-box;
  flex: 0 1 var(--pin-szer);
  width: var(--pin-szer);
  min-width: 0;
  height: var(--pin-wys);
  padding: 0;
  border: 1px solid var(--ramka-mocna, #B7B7B7);
  border-radius: var(--pin-promien);
  background: var(--at-common-white, #FFFFFF);
  color: var(--tekst, #1D1D1D);
  font: 600 var(--pin-font)/1 var(--at-ff-body, 'DM Sans', system-ui, sans-serif);
  text-align: center;
  letter-spacing: 0;
  caret-color: var(--akcent, #1D1D1D);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pin-cyfry .pin-cyfra:focus {
  outline: none;
  border-color: var(--akcent, #1D1D1D);
  box-shadow: 0 0 0 3px rgba(29, 29, 29, .12);
}

.pin-cyfry .pin-cyfra:disabled {
  background: var(--panel, #F2F2F2);
  color: var(--muted, #585959);
  cursor: progress;
}

.pin-cyfry.pin-blad .pin-cyfra {
  border-color: var(--blad, #D93628);
}

.pin-cyfry.pin-blad .pin-cyfra:focus {
  box-shadow: 0 0 0 3px rgba(217, 54, 40, .15);
}

/* rząd przy lewej krawędzi (formularze, np. nowy PIN w Edytorze) zamiast na środku */
.pin-cyfry.pin-do-lewej {
  justify-content: flex-start;
}

.pin-cyfry.pin-wstrzas {
  animation: pin-wstrzas .32s ease;
}

@keyframes pin-wstrzas {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .pin-cyfry.pin-wstrzas { animation: none; }
}

/* długi PIN (7–12 cyfr): mniejsze pola i odstępy */
.pin-cyfry:has(.pin-cyfra:nth-child(7)) {
  --pin-szer: 44px;
  --pin-wys: 54px;
  --pin-odstep: 6px;
  --pin-font: 22px;
  --pin-promien: 12px;
}

/* wąskie ekrany */
@media (max-width: 480px) {
  .pin-cyfry {
    --pin-szer: 48px;
    --pin-wys: 56px;
    --pin-odstep: 8px;
    --pin-font: 24px;
  }
  .pin-cyfry:has(.pin-cyfra:nth-child(7)) {
    --pin-szer: 34px;
    --pin-wys: 46px;
    --pin-odstep: 4px;
    --pin-font: 18px;
    --pin-promien: 10px;
  }
  /* 9–12 cyfr na telefonie: dwa rzędy po 6 pól (zamiast 12 pól po kilkanaście pikseli) */
  .pin-cyfry:has(.pin-cyfra:nth-child(9)) {
    --pin-szer: 40px;
    --pin-wys: 48px;
    --pin-font: 20px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, var(--pin-szer)));
    justify-content: center;
    gap: 8px 6px;
  }
  .pin-cyfry.pin-do-lewej:has(.pin-cyfra:nth-child(9)) { justify-content: start; }
  .pin-cyfry:has(.pin-cyfra:nth-child(9)) .pin-cyfra { width: 100%; }
}