/* Dietlo — KOMPONENT: pole tekstowe (input).
   Jedyny wlasciciel .dietlo-input i wariantow --sm / --lg / --on-dark.
   Wzor wskazal wlasciciel 2026-10-29: pole newslettera na stronie
   potwierdzenia zamowienia i pola kalkulatora zdrowia metabolicznego
   (14px, ramka 1.5px, biale tlo, fioletowy fokus z poswiata).

   Komponent odpowiada tylko za WYGLAD. Walidacja zostaje tam, gdzie byla:
   skrypty szukaja pol po id/name/data-*, a stany ustawiaja przez
   aria-invalid, .is-invalid (pole) albo .is-error / .is-valid (rodzic).
   Komponent tylko te stany maluje - jednym kolorem w calym serwisie.

   Podwojna klasa (0,2,0): Blocksy stylizuje input[type=...] selektorem
   (0,1,1) i laduje sie pozniej (ta sama przyczyna co w button.css).
   Pliki stron dokladaja tylko warianty w swoim zasiegu (np. jednostka
   po prawej w kalkulatorze), nigdy nie redefiniuja wygladu bazy. */

.dietlo-input.dietlo-input {
  display: block;
  width: 100%;
  height: 56px;
  min-height: 0;
  margin: 0;
  padding: 0 18px;
  border: 1.5px solid var(--dietlo-field-line);
  border-radius: var(--dietlo-radius-field);
  background: var(--dietlo-card);
  box-shadow: none;
  color: var(--dietlo-text);
  font-family: inherit;
  /* >=16px: iOS nie przybliza strony po dotknieciu pola */
  font-size: var(--dietlo-text-lg);
  font-weight: 400;
  line-height: normal;
  transition:
    border-color var(--dietlo-motion-fast) var(--dietlo-ease-out),
    box-shadow var(--dietlo-motion-fast) var(--dietlo-ease-out);
}

.dietlo-input::placeholder {
  color: var(--dietlo-muted);
  opacity: 0.8;
}

/* Rozmiary jak w przyciskach: --sm stoi w jednym rzedzie z przyciskiem
   --sm (48px), --lg to kasa (wiekszy rozmiar dla klientek 40+, decyzja
   wlasciciela 2026-10-22). */
.dietlo-input.dietlo-input--sm {
  height: 48px;
  padding: 0 16px;
}

.dietlo-input.dietlo-input--lg {
  height: 60px;
  font-size: var(--dietlo-text-xl);
}

/* Fokus. :focus-within obsluguje pola zlozone (obudowa z jednostka). */
.dietlo-input.dietlo-input:focus,
.dietlo-input.dietlo-input:focus-within {
  border-color: var(--dietlo-purple);
  outline: none;
  box-shadow: 0 0 0 3px rgba(112, 34, 215, 0.12);
}

/* Stany walidacji - jeden czerwony i jeden zielony w calym serwisie. */
.dietlo-input.dietlo-input[aria-invalid="true"],
.dietlo-input.dietlo-input.is-invalid,
.is-error > .dietlo-input.dietlo-input {
  border-color: var(--dietlo-error);
}

.is-valid > .dietlo-input.dietlo-input {
  border-color: var(--dietlo-green);
}

/* Autouzupelnianie (Safari/Chrome): pole zostaje w naszym wygladzie,
   bez zoltego/niebieskiego tla przegladarki. */
.dietlo-input:-webkit-autofill,
.dietlo-input:-webkit-autofill:hover,
.dietlo-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--dietlo-text);
  box-shadow: 0 0 0 100px var(--dietlo-card) inset;
  caret-color: var(--dietlo-text);
}

/* Na ciemnym tle (stopka): ten sam ksztalt i wymiary, polprzezroczyste
   wypelnienie; fokus zielony, bo fiolet ginie na grafitowym tle. */
.dietlo-input.dietlo-input--on-dark {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.dietlo-input--on-dark::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.dietlo-input.dietlo-input--on-dark:focus {
  border-color: var(--dietlo-green);
  background: rgba(85, 185, 71, 0.08);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .dietlo-input.dietlo-input {
    transition: none;
  }
}