/* EL-SKLEP — przycisk „Pobierz dane z GUS" i komunikat pod polem NIP.
   Kolory i promienie biorą się z tokenów motywu (--g, --g-deep, --s-*, --r-sm),
   żeby to nie odstawało od reszty formularza adresu. Gdyby arkusz motywu się nie
   wczytał, wartości zapasowe po przecinku dają neutralny, czytelny wygląd. */

/* Motyw trzyma NIP w połówkowej komórce siatki, w parze z polem „NIP UE" (custom.css,
   reguła z :has(input[name="vat_number"]) w sekcji od 576 px). W tym sklepie NIP UE się
   nie pokazuje, więc obok zostawało pusto, a długi komunikat z rejestru łamał się w tej
   wąskiej kolumnie po jednym słowie w wierszu. Rozciągamy ten wiersz na całą szerokość —
   selektor musi być celniejszy od motywowego, stąd pełna ścieżka. */
@media (min-width: 576px) {
  body#checkout section.checkout-step .js-address-form .form-fields .form-group.row.el-nip-grupa { grid-column: 1 / -1; }
}
body.page-customer-account .js-address-form .form-fields .form-group.row.el-nip-grupa { grid-column: 1 / -1; }
.el-nip-grupa .el-nip { grid-column: 1 / -1; }

.el-nip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .45rem 0 0; }

.el-nip__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .9rem;
  border: 1px solid var(--g, #1F8A5B);
  border-radius: var(--pill, 999px);
  background: transparent;
  color: var(--g-deep, #0B6E47);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.el-nip__btn:hover:not(:disabled) { background: var(--g, #1F8A5B); color: #FFFFFF; }
.el-nip__btn:focus-visible { outline: 2px solid var(--g, #1F8A5B); outline-offset: 2px; }
.el-nip__btn:disabled { opacity: .55; cursor: progress; }

.el-nip__stan { flex: 1 1 100%; margin: .1rem 0 0; font-size: .85rem; line-height: 1.45; }
.el-nip__stan--praca { color: var(--s-500, #6B7280); }
.el-nip__stan--ok { color: var(--g-deep, #0B6E47); }
.el-nip__stan--uwaga { color: #B45309; }
.el-nip__stan--blad { color: var(--red, #C1303E); }

/* krótki błysk na polach, które właśnie się uzupełniły — żeby było widać, co przyszło z rejestru */
.el-nip__wypelnione {
  animation: el-nip-blysk 1.5s ease-out;
}
@keyframes el-nip-blysk {
  0% { background-color: rgba(31, 138, 91, .18); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .el-nip__wypelnione { animation: none; }
}

html[data-el-theme="dark"] .el-nip__btn { color: var(--g-neon, #3DDC97); border-color: var(--g-neon, #3DDC97); }
html[data-el-theme="dark"] .el-nip__btn:hover:not(:disabled) { background: var(--g, #1F8A5B); color: #FFFFFF; }
html[data-el-theme="dark"] .el-nip__stan--uwaga { color: #F3C677; }