/* form-wniosek.css — motyw formularza zlecenia uslug ksiegowych
   Zrodlo designu: SzablonFormularz/form.css (porty kolorow/typografii). */
.fw-page {
  background: #e9f5f4;
  color: #14131c;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  padding: 56px 0;
  /* Zmienne motywu inputow z core-x (input.css) - komponenty licza wzgledem nich
     swoje rozmiary, np. datepicker: width = calc(Nch + 2 * --input-padding-h). */
  --input-padding-v: 12px;
  --input-padding-h: 16px;
  --input-wysokosc: 24px;
  --input-kolor-obramowanie: #28655b;
  --border-radius-input: 4px;
  /* Checkboxy core-x ([checkbox]::before/::after) - zaznaczony: czerwone tlo + bialy ptaszek. */
  --checkbox-color: #e62e2e;
  --checkbox-color-contrast: #fff;
}
.fw-page *, .fw-page *::before, .fw-page *::after { box-sizing: border-box; }
.fw-container {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/* Naglowek z logo i kontaktem - elastyczny (flex-wrap), bez sztywnych szerokosci,
   zeby nie rozpychal strony na telefonie. Uzywany tez poza .fw-page
   (ekran wyboru rodzaju, komunikaty) - stad brak scope'a. */
.fw-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  padding: 0 16px 16px;
  border-bottom: 1px solid #14131c;
  font-weight: 700;
}
.fw-header-logo { width: 200px; max-width: 100%; height: auto; }
.fw-header-kontakt { display: flex; flex-direction: column; min-width: 0; }
.fw-header-kontakt a { color: inherit; word-break: break-all; }
.fw-title {
  color: #124738;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin: 0;
}
@media (min-width: 992px) {
  .fw-title { font-size: 56px; } /* skala jak w projekcie graficznym (h5: 20px mobile / 56px desktop) */
}
/* Karta-sekcja */
.fw-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 9px 9px rgba(54,135,130,.16), 0 2px 5px rgba(54,135,130,.19);
  padding: 8px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fw-card.--transparent { background: transparent; box-shadow: none; padding: 0; }
.fw-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d4eae9;
  padding: 24px 0;
  cursor: pointer;
  color: #124738;
  font-size: 18px;
  font-weight: 600;
}
.fw-card.--transparent .fw-card-header { border-bottom-color: #28655b; }
/* Chevron z projektu graficznego (SVG z szablonu, fill #28655B). */
.fw-card-header .fw-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.544575 15.53C0.252164 15.2493 0.23357 14.7748 0.503046 14.4703L9.19595 4.64445C9.30192 4.52501 9.43024 4.43135 9.57138 4.3679C9.71246 4.30447 9.86421 4.27214 10.0169 4.27214C10.1695 4.27214 10.3213 4.30447 10.4624 4.3679C10.6035 4.43135 10.7318 4.52501 10.8378 4.64445L19.5307 14.4703C19.8002 14.7748 19.7816 15.2493 19.4892 15.53C19.1968 15.8107 18.7413 15.7914 18.4718 15.4868L10.0169 5.92996L1.56196 15.4868C1.29249 15.7914 0.836986 15.8107 0.544575 15.53Z' fill='%2328655B'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s ease;
}
.fw-card.--collapsed .fw-card-header .fw-chevron { transform: rotate(180deg); }
.fw-card-content { display: flex; flex-direction: column; gap: 16px; }
.fw-card.--collapsed .fw-card-content { display: none; }
/* Wiersze pol */
.fw-row { display: flex; flex-direction: column; gap: 16px; }
.fw-row.--cols { flex-direction: row; gap: 24px; align-items: flex-end; }
.fw-row.--cols > * { flex: 1; }
.fw-section-label { color: #124738; font-weight: 600; font-size: 16px; }
/* Pole z etykieta nad polem */
.fw-input-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.fw-input-label { color: #101717; font-size: 14px; }
.fw-input-label.--required::after { content: " *"; }
.fw-input-label.--required::after, .fw-required-mark { color: #e62e2e; }
/* Inputy/selecty generatora.
   Komponent pola z GeneratorObiektu to <table> (Grid-wrapper) > td > input/select,
   a inputy maja inline'owe szerokosci w px - stad !important. */
.fw-input-wrap input:not([type="checkbox"]):not([type="radio"]),
.fw-input-wrap select,
.fw-input-wrap textarea {
  width: 100% !important;
  min-height: 48px;
  padding: 12px 16px !important; /* selecty maja inline padding:0 */
  border: 1px solid #28655b;
  border-radius: 4px;
  background: #fff;
  color: #124738 !important; /* selecty maja inline color:#000 */
  outline: 0;
}
.fw-input-wrap td { padding: 0; }
/* Selecty: wlasny chevron zamiast natywnej strzalki (ikona z projektu graficznego). */
.fw-input-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.544575 15.53C0.252164 15.2493 0.23357 14.7748 0.503046 14.4703L9.19595 4.64445C9.30192 4.52501 9.43024 4.43135 9.57138 4.3679C9.71246 4.30447 9.86421 4.27214 10.0169 4.27214C10.1695 4.27214 10.3213 4.30447 10.4624 4.3679C10.6035 4.43135 10.7318 4.52501 10.8378 4.64445L19.5307 14.4703C19.8002 14.7748 19.7816 15.2493 19.4892 15.53C19.1968 15.8107 18.7413 15.7914 18.4718 15.4868L10.0169 5.92996L1.56196 15.4868C1.29249 15.7914 0.836986 15.8107 0.544575 15.53Z' fill='%23124738' transform='rotate(180 10 10)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  padding-right: 44px !important;
}
/* Ramka niezaznaczonego checkboxa zielona jak w projekcie (tlo zaznaczonego steruje --checkbox-color). */
.fw-page [checkbox]::before { border-color: #28655b; }
/* Pola zlozone (slowniki, enumy, daty): wartosc siedzi w dodatkowych wrapperach
   Echo2 (Column/Row = div > table), ktore jako flex-itemy kurcza sie do zawartosci -
   wymus 100% na dzieciach wrappera d-flex. Komponenty z wlasnym d-flex w srodku
   (np. DatePickerControl) maja te sama klase - ich dzieciom (przyciski kalendarza)
   przywracamy auto, zeby sie nie rozciagaly. */
.fw-input-wrap .d-flex > div { width: 100%; }
.fw-input-wrap .d-flex .d-flex > div { width: auto; }
.fw-input-wrap table { width: 100%; }
/* Datepicker: jedna ikona kalendarza wewnatrz inputa (wg projektu graficznego);
   przycisk "dzisiaj" chowany w Javie (PoleDatepicker.ukryjPrzyciskDzisiaj). */
.fw-input-wrap .d-flex .d-flex { position: relative; }
.fw-input-wrap .d-flex .d-flex > input { padding-right: 48px !important; }
.fw-input-wrap .datepicker-dropdown { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.fw-page .przycisk.datepicker-button {
  background: transparent;
  border: none;
  box-shadow: none;
  min-width: 0;
  padding: 0 8px;
}
/* Checkbox: Grid-wrapper (table, inline width:100%) musi sie zwezic do zawartosci,
   inaczej odpycha etykiete na koniec wiersza. */
.fw-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fw-checkbox.--top { align-items: flex-start; }
.fw-checkbox > span { cursor: pointer; user-select: none; }
.fw-checkbox table { width: auto !important; }
.fw-checkbox td { padding: 0; }
/* Kolekcje (adresy, reprezentanci).
   Generator opakowuje wartosc pola w div.d-flex - bez width:100%
   kolekcja kurczy sie do zawartosci zamiast wypelniac karte. */
.fw-collection { display: flex; flex-direction: column; gap: 16px; width: 100%; }
/* Powtarzalne bloki kolekcji */
.fw-repeat-item {
  border-top: 2px solid #28655b;
  padding-top: 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.fw-collection > .fw-repeat-item:first-child { border-top: 0; padding-top: 0; }
.fw-repeat-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fw-repeat-subheader { color: #124738; font-weight: 600; font-size: 16px; margin-top: 8px; }
/* Przyciski - warianty jak w szablonie (c-btn): domyslnie outline,
   .fw-btn-fill = czerwone wypelnienie (submit), .fw-btn-text = sam tekst (dodawanie).
   Przyciski wewnatrz komponentow pol (kalendarz datepickera) zostaja przy stylach core-x. */
/* ButtonEx wpisuje white-space:nowrap INLINE na przycisku i na td z tekstem
   (chyba ze ustawiono lineWrap) - stad !important, inaczej dlugie etykiety
   rozpychaja karte i cala strone na telefonie. */
.fw-page .przycisk,
.fw-page .przycisk td {
  white-space: normal !important;
}
.fw-page .przycisk:not(.datepicker-button) {
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid #28655b;
  border-radius: 4px;
  background: transparent;
  color: #124738;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.fw-page .przycisk::before { border-radius: 4px; background: transparent; }
.fw-page .przycisk:hover::before { background: #e9f5f4; }
.fw-page .przycisk.fw-btn-fill { background: #e62e2e; border-color: #e62e2e; color: #fff; }
.fw-page .przycisk.fw-btn-fill:hover { background: #c83232; border-color: #c83232; }
.fw-page .przycisk.fw-btn-fill:hover::before { background: transparent; }
.fw-page .przycisk.fw-btn-text { border-color: transparent; min-height: 0; padding: 0; }
.fw-page .przycisk.fw-btn-text:hover { color: #c83232; }
.fw-page .przycisk.fw-btn-text:hover::before { background: transparent; }
/* Wiersz akcji na dole formularza: przyciski 200px wyrownane do prawej,
   na telefonie w kolumnie na pelnej szerokosci (jak w projekcie graficznym). */
.fw-actions { display: flex; flex-direction: column; gap: 16px; justify-content: flex-end; }
.fw-actions > .przycisk { width: 100%; }
@media (min-width: 576px) {
  .fw-actions { flex-direction: row; }
  .fw-actions > .przycisk { width: 200px; }
}
@media (max-width: 575px) {
  .fw-row.--cols { flex-direction: column; align-items: stretch; }
  .fw-card { padding-left: 20px; padding-right: 20px; }
}