/* Katalog stylów tusy.org (spec 017 - style guide, spec 018 - katalog jako styl strony).
   Nazwy: <zestaw>-<size|style|state|width>-<wartość>, rozmiary xsmall, small, medium, large, xlarge,
   xxlarge. Ładowany na każdej stronie po stylach Webflow, przed strona.css; ten sam plik ładuje panel
   zgłoszeń (spec 018, etap 2). Przegląd wszystkich klas: https://dev.tusy.org/style-guide (tylko dev).
   Progi strony (Webflow): 991px, 767px, 479px. */

/* ---------- kolory: nazwy dla kolorów wpisanych dziś wprost + kolory komunikatów ---------- */
:root {
  --sand: #faf1e7;           /* tło plakietek (dziś wpisane wprost w .badge-size-s) */
  --lavender-grey: #b7bbd1;  /* ramka pól formularza (dziś wprost w .input) */
  --royal-blue: #434de7;     /* pole aktywne, zaznaczenie (dziś wprost w .input:focus) */
  --violet-shadow: #1d01501a; /* cień pól (dziś wprost w .input) */
  --taupe: #4d4a47;          /* tekst pomocniczy (panel: --kolor-tekst-drugi) */
  --linen: #e3ddd8;          /* linie tabel (panel: --kolor-ramka) */
  --deep-blue: #005a7d;      /* niebieski ciemny (panel: --kolor-akcent-ciemny) */
  --forest-green: #2f7d4a;   /* sukces */
  --pale-green: #e3f4e6;     /* tło sukcesu (panel: zapisana komórka) */
  --pale-yellow: #fff6db;    /* tło ostrzeżenia (panel: odkryta komórka) */
  --pale-red: #fbeae7;       /* tło błędu */
  --pale-blue: #e5f1f6;      /* tło informacji */
  --dim-grey: #6e6e6e;       /* podpowiedź w pustym polu (dziś wprost w .input::placeholder) */
}

/* ---------- tekst: wyrównanie, styl, wysokość linii (pozostałe klasy już są w stylach strony) ---------- */
.text-align-justify {
  text-align: justify;
}

.text-style-nocaps {
  text-transform: none;
}

.line-height-size-small {
  line-height: 1.2;
}

.line-height-size-medium {
  line-height: 1.5;
}

.line-height-size-large {
  line-height: 1.7;
}

/* ---------- link w tekście: standard = pełne podkreślenie, po najechaniu niebieski (decyzja A) ---------- */
.text-style-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s;
}

.text-style-link:hover {
  color: var(--steel-blue);
}

.text-style-link-light {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s;
}

.text-style-link-light:hover {
  color: var(--peach-puff);
}

/* ---------- przyciski: wygląd jak .button, rozmiar z klasy ---------- */
.button-size-xsmall,
.button-size-small,
.button-size-medium,
.button-size-large,
.button-size-xlarge,
.button-size-xxlarge {
  display: inline-block;
  border: 0;
  border-radius: 8rem;
  background-color: var(--peach-puff);
  color: var(--black);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s;
}

.button-size-xsmall:hover,
.button-size-small:hover,
.button-size-medium:hover,
.button-size-large:hover,
.button-size-xlarge:hover,
.button-size-xxlarge:hover {
  filter: brightness(95%);
  color: var(--black);
}

/* Skala wg uwagi właściciela (2026-10-23): największy (XXL) ok. 67px wysokości, obecny .button = XL. */
.button-size-xsmall {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
}

.button-size-small {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
}

/* ← .button.small */
.button-size-medium {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.button-size-large {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* ← .button */
.button-size-xlarge {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.button-size-xxlarge {
  padding: 1.25rem 2.5rem;
  font-size: 1.125rem;
}

/* odmiany (łączone z rozmiarem, np. "button-size-small button-style-secondary") */
.button-style-secondary {
  background-color: var(--white);
  box-shadow: inset 0 0 0 2px var(--peach-puff);
}

.button-style-text {
  background-color: transparent;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.button-style-text:hover {
  filter: none;
  color: var(--steel-blue);
}

/* stany */
.button-size-xsmall:focus-visible,
.button-size-small:focus-visible,
.button-size-medium:focus-visible,
.button-size-large:focus-visible,
.button-size-xlarge:focus-visible,
.button-size-xxlarge:focus-visible {
  outline: 2px solid var(--steel-blue);
  outline-offset: 2px;
}

.button-state-disabled,
.button-size-xsmall:disabled,
.button-size-small:disabled,
.button-size-medium:disabled,
.button-size-large:disabled,
.button-size-xlarge:disabled,
.button-size-xxlarge:disabled {
  opacity: 0.5;
  filter: none;
  cursor: default;
  pointer-events: none;
}

.button-width-full {
  display: block;
  width: 100%;
}

/* ---------- rozmiary tekstu ---------- */
.text-size-xsmall {
  font-size: 0.75rem;
}

/* ← .text-size-tiny */
.text-size-small {
  font-size: 0.85rem;
}

/* .text-size-regular (1rem) - tekst podstawowy, bez zmian; .text-size-medium … .text-size-xxlarge
   mają już nazwy zgodne ze standardem i zostają w stylach strony. */

/* ---------- nagłówki ---------- */
.heading-size-xsmall,
.heading-size-small,
.heading-size-medium,
.heading-size-large,
.heading-size-xlarge,
.heading-size-xxlarge {
  font-weight: 700;
  text-transform: none;
}

/* ← .heading-xsmall */
.heading-size-xsmall {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ← .heading-small */
.heading-size-small {
  font-size: 1.25rem;
  line-height: 1.4;
}

.heading-size-medium {
  font-size: 1.5rem;
  line-height: 1.3;
}

.heading-size-large {
  font-size: 2.2rem;
  line-height: 1.2;
}

.heading-size-xlarge {
  font-size: 3rem;
  line-height: 1.2;
}

.heading-size-xxlarge {
  font-size: 4rem;
  line-height: 1.2;
}

/* ---------- plakietki: wygląd jak .badge-size-s ---------- */
.badge-size-xsmall,
.badge-size-small,
.badge-size-medium,
.badge-size-large,
.badge-size-xlarge,
.badge-size-xxlarge {
  border-radius: 300px;
  background-color: #faf1e7;
  color: var(--blue-black);
  font-weight: 400;
  line-height: 1.3;
}

/* Skala zmniejszona jak przyciski (uwaga właściciela 2026-10-23): obecna plakietka = XL. */
.badge-size-xsmall {
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
}

.badge-size-small {
  padding: 0.1875rem 0.625rem;
  font-size: 0.6875rem;
}

.badge-size-medium {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

.badge-size-large {
  padding: 0.3125rem 0.875rem;
  font-size: 0.8125rem;
}

/* ← .badge-size-s (6px 16px = 0.375rem 1rem) */
.badge-size-xlarge {
  padding: 0.375rem 1rem;
  font-size: 0.9rem;
}

.badge-size-xxlarge {
  padding: 0.625rem 1.5rem;
  font-size: 1.125rem;
}

/* odmiana: wybrana (dziś .badge-size-s.w--current ma fioletowe kolory z szablonu, spoza palety) */
.badge-style-selected {
  background-color: var(--peach-puff);
}

/* ---------- ikony ---------- */
.icon-size-xsmall {
  width: 1.5rem;
  height: 1.5rem;
}

/* ← .icon-1x1-small */
.icon-size-small {
  width: 2rem;
  height: 2rem;
}

/* ← .icon-1x1-medium */
.icon-size-medium {
  width: 3rem;
  height: 3rem;
}

.icon-size-large {
  width: 4rem;
  height: 4rem;
}

.icon-size-xlarge {
  width: 5rem;
  height: 5rem;
}

.icon-size-xxlarge {
  width: 6rem;
  height: 6rem;
}

/* ---------- odstępy pionowe ---------- */
.spacer-size-xsmall,
.spacer-size-small,
.spacer-size-medium,
.spacer-size-large,
.spacer-size-xlarge,
.spacer-size-xxlarge {
  width: 100%;
}

/* ← .spacer-0-5rem */
.spacer-size-xsmall {
  height: 0.5rem;
}

/* ← .spacer-1rem */
.spacer-size-small {
  height: 1rem;
}

/* ← .spacer-2rem */
.spacer-size-medium {
  height: 2rem;
}

/* ← .spacer-3rem */
.spacer-size-large {
  height: 3rem;
}

/* ← .spacer-4rem */
.spacer-size-xlarge {
  height: 4rem;
}

.spacer-size-xxlarge {
  height: 5rem;
}

/* ---------- kontenery (bez xxlarge: konstytucja ogranicza treść do 1600px = 100rem) ---------- */
.container-size-xsmall,
.container-size-small,
.container-size-medium,
.container-size-large,
.container-size-xlarge {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.container-size-xsmall,
.container-size-small,
.container-size-medium,
.container-size-xlarge {
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}

/* ← .container-xxsmall */
.container-size-xsmall {
  max-width: 40rem;
}

/* ← .container-small */
.container-size-small {
  max-width: 62.5rem;
}

/* ← .container-medium */
.container-size-medium {
  max-width: 80rem;
}

/* ← .container-large (bez marginesów wewnętrznych, jak obecnie) */
.container-size-large {
  max-width: 90rem;
  overflow: hidden;
}

.container-size-xlarge {
  max-width: 100rem;
}

/* ---------- listy: rozmiar (list-size-*) + odmiana (list-style-check / -bullet / -number) ---------- */
.list-size-xsmall,
.list-size-small,
.list-size-medium,
.list-size-large,
.list-size-xlarge,
.list-size-xxlarge {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 1.5;
}

/* rozmiar tekstu, odstęp między punktami i rozmiar ikony (--lista-ikona, używana przez list-style-check) */
.list-size-xsmall { gap: 0.5rem; font-size: 0.75rem; --lista-ikona: 1rem; }
.list-size-small { gap: 0.75rem; font-size: 0.875rem; --lista-ikona: 1.25rem; }
/* ← .list-options-size-m + .list-item-size-m (odstęp 16px, ikona 24px) */
.list-size-medium { gap: 1rem; font-size: 1rem; --lista-ikona: 1.5rem; }
.list-size-large { gap: 1.125rem; font-size: 1.125rem; --lista-ikona: 1.625rem; }
.list-size-xlarge { gap: 1.25rem; font-size: 1.25rem; --lista-ikona: 1.75rem; }
.list-size-xxlarge { gap: 1.5rem; font-size: 1.5rem; --lista-ikona: 2rem; }

.list-style-check {
  padding-left: 0;
  list-style: none;
}

.list-style-check > li {
  min-height: var(--lista-ikona);
  margin: 0;
  padding-left: calc(var(--lista-ikona) + 0.75rem);
  background-image: url(/assets/wf/63382920a918c27b8020627b/6433cb651ddcb05734f53513_Icon-Check-2.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: var(--lista-ikona) var(--lista-ikona);
}

.list-style-bullet {
  padding-left: 1.25em;
  list-style: disc;
}

.list-style-number {
  padding-left: 1.5em;
  list-style: decimal;
}

.list-style-bullet > li,
.list-style-number > li {
  margin: 0;
}

/* ---------- formularze: pola (field-size-*), etykieta, opis, błąd, stany ---------- */
.field-size-small,
.field-size-medium,
.field-size-large {
  display: block;
  width: 100%;
  margin-bottom: 0;
  border: 1px solid var(--lavender-grey);
  border-radius: 6px;
  background-color: var(--white);
  box-shadow: 0 3px 6px -2px var(--violet-shadow);
  color: var(--black);
  font-family: inherit;
  font-weight: 300;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field-size-small {
  height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
}

/* ← .input (wysokość 48px, tekst 15px, wypełnienie 10px 12px 8px 16px) */
.field-size-medium {
  height: 3rem;
  padding: 0.625rem 0.75rem 0.5rem 1rem;
  font-size: 0.9375rem;
}

.field-size-large {
  height: 3.75rem;
  padding: 0.875rem 1.25rem 0.625rem;
  font-size: 1.125rem;
}

textarea.field-size-small,
textarea.field-size-medium,
textarea.field-size-large {
  height: auto;
}

textarea.field-size-small {
  min-height: 6rem;
}

/* ← .input-text-area (min. 150px) */
textarea.field-size-medium {
  min-height: 9.375rem;
}

textarea.field-size-large {
  min-height: 12rem;
}

.field-size-small::placeholder,
.field-size-medium::placeholder,
.field-size-large::placeholder {
  color: var(--dim-grey);
}

/* ← .input-text-area::placeholder */
textarea.field-size-medium::placeholder {
  font-size: 0.875rem;
}

.field-size-small:hover,
.field-size-medium:hover,
.field-size-large:hover {
  border-color: var(--royal-blue);
  box-shadow: none;
}

.field-size-small:focus,
.field-size-medium:focus,
.field-size-large:focus {
  border-color: var(--royal-blue);
  outline: none;
}

.field-state-error,
.field-state-error:focus {
  border-color: var(--indian-red);
}

.field-size-small:disabled,
.field-size-medium:disabled,
.field-size-large:disabled {
  border-color: var(--lavender-grey);
  background-color: var(--grey);
  box-shadow: none;
  opacity: 0.7;
  cursor: not-allowed;
}

.field-wrapper {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* ← .input-label (etykieta na górnej ramce pola) */
.field-label {
  display: inline-block;
  position: relative;
  bottom: -7px;
  left: 6px;
  z-index: 2;
  margin-bottom: 0;
  padding-right: 7px;
  padding-left: 6px;
  border-radius: 3px;
  background-color: var(--white);
  color: var(--black);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 15px;
}

/* etykieta dopasowana do rozmiaru pola (field-label + field-label-size-*; medium = .input-label) */
.field-label-size-small {
  bottom: -6px;
  font-size: 0.75rem;
  line-height: 13px;
}

.field-label-size-medium {
  bottom: -7px;
  font-size: 0.875rem;
  line-height: 15px;
}

.field-label-size-large {
  bottom: -9px;
  font-size: 1rem;
  line-height: 18px;
}

/* ← .input-description */
.field-description {
  margin-top: 5px;
  margin-bottom: 6px;
  padding-left: 6px;
  font-size: 0.8rem;
  font-weight: 300;
  opacity: 0.8;
}

/* ← .pole-blad */
.field-error {
  margin-top: 5px;
  padding-left: 6px;
  color: var(--indian-red);
  font-size: 0.8rem;
  font-weight: 400;
}

/* ← .pole-blad:empty - pusty komunikat nie zajmuje miejsca */
.field-error:empty {
  display: none;
}

/* pola wyboru (checkbox, radio): rozmiar kwadratu/kółka */
.check-size-small,
.check-size-medium,
.check-size-large {
  flex: none;
  margin: 0;
  accent-color: var(--royal-blue);
}

.check-size-small { width: 0.875rem; height: 0.875rem; }
/* ← .checkbox (16px) */
.check-size-medium { width: 1rem; height: 1rem; }
.check-size-large { width: 1.5rem; height: 1.5rem; }

/* wiersz: pole wyboru + opis; bez wcięcia i marginesu Webflow (.w-checkbox, .w-radio) - decyzja D3 */
.check-field-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  padding-left: 0;
  color: var(--black);
}

/* ---------- komunikaty ---------- */
.message-style-success,
.message-style-error,
.message-style-info,
.message-style-warning {
  padding: 1rem 1.25rem;
  border-left: 4px solid;
  border-radius: 6px;
  color: var(--black);
}

.message-style-success { border-left-color: var(--forest-green); background-color: var(--pale-green); }
.message-style-error { border-left-color: var(--indian-red); background-color: var(--pale-red); }
.message-style-info { border-left-color: var(--steel-blue); background-color: var(--pale-blue); }
.message-style-warning { border-left-color: var(--orange); background-color: var(--pale-yellow); }

/* ---------- kształty: zaokrąglenia, cienie, linie ---------- */
.radius-none { border-radius: 0; }
.radius-size-xsmall { border-radius: 3px; }
.radius-size-small { border-radius: 6px; }
.radius-size-medium { border-radius: 15px; }
.radius-size-large { border-radius: 1.5rem; }
.radius-size-xlarge { border-radius: 2rem; }
.radius-pill { border-radius: 999px; }
.radius-circle { border-radius: 50%; }

.shadow-none { box-shadow: none; }
/* ← cień pól .input */
.shadow-size-small { box-shadow: 0 3px 6px -2px var(--violet-shadow); }
.shadow-size-medium { box-shadow: 0 6px 16px -4px rgb(13 13 13 / 0.12); }
.shadow-size-large { box-shadow: 0 12px 32px -8px rgb(13 13 13 / 0.18); }

/* ← .divider (1px, szary) */
.divider-size-small { height: 1px; background-color: var(--grey); }
.divider-size-medium { height: 2px; background-color: var(--linen); }
.divider-size-large { height: 4px; background-color: var(--peach-puff); }

/* ---------- karty ---------- */
.card-size-small,
.card-size-medium,
.card-size-large {
  border-radius: 15px;
  background-color: var(--white);
  box-shadow: 0 3px 6px -2px var(--violet-shadow);
}

.card-size-small { padding: 1rem; }
.card-size-medium { padding: 1.5rem; }
.card-size-large { padding: 2.5rem; }

.card-style-peach {
  background-color: var(--light-peach);
  box-shadow: none;
}

/* ---------- tablet (do 991px) ---------- */
@media screen and (max-width: 991px) {
  .heading-size-large {
    font-size: 1.8rem;
  }

  .heading-size-xlarge {
    font-size: 2.5rem;
  }
}

/* ---------- telefon poziomo (do 767px) ---------- */
@media screen and (max-width: 767px) {
  .button-size-xsmall,
  .button-size-small,
  .button-size-medium,
  .button-size-large,
  .button-size-xlarge,
  .button-size-xxlarge {
    border-radius: 0.5rem;
  }

  .heading-size-small {
    font-size: 1rem;
  }

  .heading-size-large {
    font-size: 1.5rem;
  }

  .heading-size-xlarge {
    font-size: 2rem;
  }

  .heading-size-xxlarge {
    font-size: 2.5rem;
  }

  .container-size-xsmall,
  .container-size-small,
  .container-size-medium,
  .container-size-xlarge {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

/* ---------- telefon pionowo (do 479px) ---------- */
@media screen and (max-width: 479px) {
  .button-size-large {
    padding: 0.625rem 1rem;
  }

  /* ← .button na telefonie */
  .button-size-xlarge {
    padding: 0.75rem 1rem;
  }

  .button-size-xxlarge {
    padding: 1rem 1.5rem;
  }
}