/* ==========================================================================
   KONTROLKA: ZGODA
   Oswiadczenie. Kwadrat, nie suwak, bo suwak sugeruje ustawienie,
   a kwadrat z haczykiem deklaracje. Etykieta obok, klikalna.

   Tylko do odczytu na polu wyboru wymaga pointer-events, bo przegladarka
   ignoruje atrybut readonly na tym typie pola i bez tego haczyk dalej
   daje sie przestawic.
   ========================================================================== */
.k-zgoda {
  appearance: none;
  inline-size: calc(var(--u) * 4.5);
  block-size: calc(var(--u) * 4.5);
  flex: none;
  background: var(--pole-tlo);
  border: 1px solid var(--pole-kreska-mocna);
  border-radius: var(--promien-1);
  cursor: pointer;
  position: relative;
  transition: background-color var(--czas-1) var(--wyjscie),
              border-color var(--czas-1) var(--wyjscie);
}

.k-zgoda::after {
  content: "";
  position: absolute;
  inset-inline-start: 30%;
  inset-block-start: 12%;
  inline-size: 30%;
  block-size: 55%;
  border: solid var(--plyta);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--czas-1) var(--wyjscie);
}

.k-zgoda:checked {
  background: var(--marka);
  border-color: var(--marka);
}

.k-zgoda:checked::after {
  transform: rotate(45deg) scale(1);
}

.k-zgoda:hover:not(:disabled):not([readonly]) {
  border-color: var(--marka);
}

.k-zgoda:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
}

.k-zgoda:active:not(:disabled) {
  transform: var(--wcisniecie);
}

.k-zgoda:disabled {
  background: var(--pole-tlo-wylaczone);
  border-color: var(--kreska);
  cursor: not-allowed;
}

.k-zgoda:disabled:checked {
  background: var(--kreska-2);
  border-color: var(--kreska-2);
}

.k-zgoda[readonly] {
  pointer-events: none;
  border-color: transparent;
  background: var(--plyta-2);
}

.k-zgoda[readonly]:checked {
  background: var(--atrament-2);
  border-color: var(--atrament-2);
}

.k-zgoda[aria-busy="true"] {
  opacity: .6;
  pointer-events: none;
}

.k-zgoda[aria-invalid="true"] {
  border-color: var(--alarm);
  outline: 1px solid var(--alarm);
  outline-offset: var(--pierscien-odstep);
}

.k-zgoda[data-stan="powodzenie"] {
  border-color: var(--powodzenie);
}

@media (prefers-reduced-motion: reduce) {
  .k-zgoda,
  .k-zgoda::after {
    transition: none;
  }
  .k-zgoda:active:not(:disabled) {
    transform: none;
  }
}