/**
 * Job-Linker - kolor przycisku Aplikuj (KROK 1 - tylko kolor)
 * 2026-08-08
 *
 * Zielen #16A34A zamiast granatu: kontrastuje z niebieskim motywem
 * strony (nawigacja, linki), a jednoczesnie czytana jest jako
 * "dzialaj / zatwierdz", co pasuje do akcji aplikowania.
 * Latwo zmienic - wystarczy podmienic --jl-action ponizej.
 */

:root {
  --jl-action: #16A34A;
  --jl-action-hover: #128A3E;
}

/* Wszystkie warianty przycisku Aplikuj (wtyczka + moje kopie).
   !important, bo motyw Superio definiuje .btn-apply w kilku miejscach. */
a.btn-apply,
a.btn-apply-job-internal,
a.btn-apply-job-internal-without-login,
a.btn-apply-job-internal-required,
a.btn-apply-job-email,
a.btn-apply-job-call {
  background-color: var(--jl-action) !important;
  border-color: var(--jl-action) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

a.btn-apply:hover,
a.btn-apply-job-internal:hover,
a.btn-apply-job-internal-without-login:hover,
a.btn-apply-job-internal-required:hover,
a.btn-apply-job-email:hover,
a.btn-apply-job-call:hover {
  background-color: var(--jl-action-hover) !important;
  border-color: var(--jl-action-hover) !important;
}

/* Przycisk wysylki w samym formularzu - ten sam kolor akcji */
form.cmb-form input[type="submit"],
form.cmb-form button[type="submit"] {
  background-color: var(--jl-action) !important;
  border-color: var(--jl-action) !important;
  color: #fff !important;
}

/* Stan "juz aplikowano" - neutralny szary, akcja jest zakonczona */
a.btn-applied-job-internal {
  background-color: #6B7280 !important;
  border-color: #6B7280 !important;
  color: #fff !important;
}



/* =====================================================================
 * FORMULARZ APLIKACJI - czytelnosc i wygoda na telefonie
 * Dodane 2026-08-08 (krok 2: same style, bez zmian w JS)
 * ================================================================== */

/* Modal aplikacji - wiecej oddechu, mniej scisku */
.job-apply-email-form-wrapper .inner {
  padding: 26px 24px !important;
}
.job-apply-email-form-wrapper .widget-title {
  margin-bottom: 6px !important;
}

/* Odstepy miedzy polami - obecnie sa zbyt scisniete */
form.cmb-form .cmb-row {
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Etykiety - czytelne, blisko swojego pola */
form.cmb-form .cmb-th label {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #181a1f !important;
  margin-bottom: 6px !important;
  display: block !important;
  line-height: 1.35 !important;
}
form.cmb-form .cmb-th,
form.cmb-form .cmb-td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Pola tekstowe: 16px zapobiega automatycznemu przyblizaniu na iOS,
   48px to wygodny cel dotykowy wg wytycznych mobilnych */
form.cmb-form input[type="text"],
form.cmb-form input[type="email"],
form.cmb-form input[type="tel"],
form.cmb-form input[type="number"] {
  height: 48px !important;
  font-size: 16px !important;
  border-radius: 9px !important;
  border: 1.5px solid #e1e5ea !important;
  padding: 0 14px !important;
  width: 100% !important;
  background: #fff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
}
form.cmb-form input[type="text"]:focus,
form.cmb-form input[type="email"]:focus,
form.cmb-form input[type="tel"]:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.13) !important;
  outline: none !important;
}
form.cmb-form input::placeholder {
  color: #9aa1ab !important;
  opacity: 1;
}

/* Select2 - dopasowanie do reszty pol (ta sama wysokosc i zaokraglenie) */
form.cmb-form .select2-container--default .select2-selection--single,
form.cmb-form .select2-container--default .select2-selection--multiple {
  min-height: 48px !important;
  border-radius: 9px !important;
  border: 1.5px solid #e1e5ea !important;
  padding: 6px 8px !important;
}
form.cmb-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
  font-size: 15px !important;
  padding-left: 6px !important;
}
form.cmb-form .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
}
/* Wybrane jezyki jako czytelne "pigulki" zamiast szarych prostokatow */
form.cmb-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #eaf7ee !important;
  border: 1px solid #bfe3ca !important;
  color: #12622f !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  margin: 3px 4px 3px 0 !important;
}
form.cmb-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #12622f !important;
  margin-right: 5px !important;
}
.select2-dropdown {
  border-radius: 9px !important;
  border-color: #e1e5ea !important;
}
.select2-container--default .select2-results__option {
  padding: 10px 12px !important;
  font-size: 14px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #16a34a !important;
}
.select2-search--dropdown .select2-search__field {
  font-size: 16px !important;
  padding: 9px 11px !important;
  border-radius: 7px !important;
  border: 1.5px solid #e1e5ea !important;
}

/* Prawo jazdy - lista checkboxow jako klikalne wiersze zamiast ciasnej listy */
form.cmb-form .cmb-type-multicheck ul.cmb2-checkbox-list {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 2px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
form.cmb-form .cmb-type-multicheck ul.cmb2-checkbox-list li {
  margin: 0 !important;
  padding: 9px 10px !important;
  border-radius: 8px;
  transition: background 0.12s ease;

  /* 🔴 TO JEST WLASCIWA PRZYCZYNA "opcje lamia sie na 5 wierszy" (Z-09,
   * 2026-08-22). NIE KASUJ TYCH DWOCH LINII.
   *
   * `template.css` motywu, okolice linii 20950:
   *
   *     @media (min-width: 1200px) {
   *       form.cmb-form .cmb2-checkbox-list li { width: 33%; float: left; }
   *     }
   *
   * (i to samo z `width:50%` dla 768-1199px). `li` jest elementem NASZEJ
   * siatki, ale motyw wymusza mu 33% szerokosci sciezki - wiec siatka
   * moze byc dowolnie szeroka, a etykieta i tak dostanie jedna trzecia.
   *
   * Zmierzone na produkcji: sciezka 381,91px * 33% = 126,03px, minus
   * padding tego `li` (10+10) = 106,03px na tekst. DevTools pokazal
   * 106,024px - zgadza sie co do setnej.
   *
   * 🔴 Dlatego trzy pierwsze podejscia do Z-09 nie dzialaly: poszerzanie
   * okna (600 -> 820 -> 940px) i zmiana progu siatki powiekszaly SCIEZKE,
   * a `li` konsekwentnie bral z niej 33%. Objaw znikal tylko pozornie.
   * Jesli kiedys wroci lamanie tekstu w tej liscie - sprawdz najpierw
   * `width` i `float` na `li`, nie szerokosc okna. */
  width: auto !important;
  float: none !important;
}
form.cmb-form .cmb-type-multicheck ul.cmb2-checkbox-list li:hover {
  background: #f4f7fa;
}
form.cmb-form .cmb-type-multicheck ul.cmb2-checkbox-list label {
  font-weight: 400 !important;
  font-size: 14px !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
}
form.cmb-form .cmb-type-multicheck input[type="checkbox"] {
  width: 19px !important;
  height: 19px !important;
  accent-color: #16a34a;
  flex-shrink: 0;
  margin: 0 !important;
}

/* Podpowiedzi pod polami - mniejsze i stonowane, zeby nie krzyczaly */
form.cmb-form .cmb2-metabox-description,
form.cmb-form p.cmb2-metabox-description {
  font-size: 12px !important;
  color: #7a828d !important;
  margin-top: 5px !important;
  line-height: 1.45 !important;
  font-style: normal !important;
}

/* Wgrywanie CV - wyrazna strefa zamiast surowego pola pliku */
form.cmb-form .cmb-type-wp-job-board-pro-file .cmb-td {
  border: 1.5px dashed #cdd5de !important;
  border-radius: 10px !important;
  padding: 16px !important;
  background: #fafbfc !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
form.cmb-form .cmb-type-wp-job-board-pro-file .cmb-td:hover {
  border-color: #16a34a !important;
  background: #f6fbf7 !important;
}
form.cmb-form input[type="file"] {
  font-size: 14px !important;
  width: 100% !important;
}

/* Zgoda na regulamin - wygodniejszy cel dotykowy */
form.cmb-form .form-group label[for="register-terms-and-conditions"],
form.cmb-form label[for="jl-consent-alerts"] {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #4a5058 !important;
  cursor: pointer;
  padding: 4px 0;
}
form.cmb-form input[type="checkbox"] {
  accent-color: #16a34a;
}

/* Przycisk wyslania - glowna akcja, pelna szerokosc, duzy cel */
form.cmb-form input[type="submit"],
form.cmb-form button[type="submit"] {
  width: 100% !important;
  height: 52px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 0 !important;
  cursor: pointer;
  margin-top: 6px !important;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.28) !important;
  transition: background-color 0.15s ease !important;
}

/* Komunikaty walidacji / bledow - czytelne, nie krzykliwe */
form.cmb-form .alert {
  border-radius: 9px !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
}

/* Na malych ekranach modal ma zajmowac praktycznie cala szerokosc */
@media (max-width: 575px) {
  .job-apply-email-form-wrapper .inner { padding: 20px 16px !important; }
  form.cmb-form .cmb-row { margin-bottom: 14px !important; }
}

/* =====================================================================
 * SZEROKOSC MODALU NA MOBILE (krok 3)
 *
 * Motyw Superio (template.css) ustawia:
 *   .apus-mfp-zoom-in .mfp-content { width:600px; max-width:85%; padding:40px }
 * Na telefonie 390px daje to ~250px realnej szerokosci na pola.
 * Odzyskujemy przestrzen: prawie pelna szerokosc + mniejszy padding.
 * ================================================================== */
@media (max-width: 767px) {
  .apus-mfp-zoom-in .mfp-content {
    max-width: 96% !important;
    width: 96% !important;
    padding: 18px 14px !important;
  }
  .job-apply-email-form-wrapper .inner {
    padding: 0 !important;
  }
  .apus-mfp-zoom-in .widget-title {
    font-size: 19px !important;
    margin-bottom: 14px !important;
  }
}

/* Na tablecie tez warto odzyskac troche miejsca */
@media (min-width: 768px) and (max-width: 991px) {
  .apus-mfp-zoom-in .mfp-content {
    max-width: 92% !important;
    padding: 26px !important;
  }
}

/* ---------------------------------------------------------------------
 * DLUGIE ETYKIETY (jezyki, branze) - maja sie ZAWIJAC, nie uciekac
 * Nazwy typu "niemiecki - B2 - Wyzszy sredniozaawansowany" nie zmieszcza
 * sie w jednej linii na telefonie - pozwalamy im lamac sie na kilka.
 * ------------------------------------------------------------------ */
form.cmb-form .select2-container--default .select2-selection--multiple {
  min-height: 48px !important;
  height: auto !important;
}
form.cmb-form .select2-container--default .select2-selection--multiple ul.select2-selection__rendered {
  display: block !important;
  width: 100% !important;
  padding: 2px !important;
  margin: 0 !important;
}
form.cmb-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: block !important;
  float: none !important;
  width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  padding: 7px 10px 7px 26px !important;
  position: relative !important;
  box-sizing: border-box !important;
}
/* Krzyzyk usuwania - stala pozycja po lewej, nie skacze przy zawijaniu */
form.cmb-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: absolute !important;
  left: 8px !important;
  top: 7px !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

/* Opcje na liscie rozwijanej tez maja sie zawijac, nie ucinac */
.select2-container--default .select2-results__option {
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
}
.select2-container .select2-dropdown {
  min-width: 0 !important;
}

/* Prawo jazdy - dlugie opisy kategorii tez zawijamy poprawnie */
form.cmb-form .cmb-type-multicheck ul.cmb2-checkbox-list label {
  white-space: normal !important;
  word-break: break-word !important;
  align-items: flex-start !important;
  line-height: 1.45 !important;
}
form.cmb-form .cmb-type-multicheck input[type="checkbox"] {
  margin-top: 2px !important;
}

/* Nic w formularzu nie powinno powodowac poziomego przewijania.
   UWAGA: overflow-x tylko na samym formularzu - NIE na .cmb-row/.cmb-td,
   bo tam przycinalby rozwiniete listy Select2 wychodzace poza pole. */
form.cmb-form {
  max-width: 100% !important;
}
form.cmb-form .cmb-row,
form.cmb-form .cmb-td {
  max-width: 100% !important;
  overflow: visible !important;
}
form.cmb-form select,
form.cmb-form .select2-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* =====================================================================
 * GTRANSLATE - element plywajacy
 *
 * Wtyczka renderuje <div id="gt_float_wrapper" style="position:fixed;
 * bottom:20px;left:20px;z-index:999999"> - style sa WPISANE w atrybut,
 * wiec celowanie w .gtranslate_wrapper (pusty kontener) nic nie dawalo.
 * Nadpisujemy wlasciwy element przez #id + !important.
 *
 * Na stronach ofert podnosimy flage nad sticky pasek Aplikuj (52px
 * wysokosci + zapas), zeby sie nie nakladaly.
 * ================================================================== */
body.single-job_listing #gt_float_wrapper {
  bottom: 84px !important;
  transition: bottom 0.25s ease;
}

/* Na malych ekranach flaga moze byc nieco mniejsza i blizej krawedzi */
@media (max-width: 575px) {
  body.single-job_listing #gt_float_wrapper {
    bottom: 78px !important;
    left: 12px !important;
  }
  #gt_float_wrapper .gt_float_switcher {
    font-size: 15px !important;
  }
}

/* UWAGA: NIE podnosic tu z-index modalu (.mfp-wrap/.mfp-bg).
   Listy rozwijane Select2 sa doklejane do <body> z z-index 1051, wiec
   podniesienie modalu ponad te wartosc powoduje, ze rozwiniete listy
   (jezyki, plec, rok urodzenia, branza) chowaja sie ZA oknem modalu.
   Natywne wartosci magnific popup (1042/1043) sa nizsze niz Select2
   i wszystko dziala poprawnie. Flage GTranslate chowamy skryptem
   w jl-application-form-enhance.js (zdarzenia mfpOpen/mfpClose). */

/* Dla pewnosci: listy Select2 zawsze nad modalem */
.select2-container--open,
.select2-container.select2-container--open .select2-dropdown {
  z-index: 1100 !important;
}

/* =====================================================================
 * PRZYCISK ZAMKNIECIA MODALU (X)
 *
 * Motyw Superio (template.css) ma:
 *   .apus-mfp-zoom-in .mfp-close { display: none !important; }
 * czyli calkowicie ukrywa X w tym typie okna. Na desktopie da sie
 * kliknac obok okna, ale na telefonie modal zajmuje prawie caly ekran
 * i uzytkownik nie ma jak wyjsc bez wypelnienia formularza.
 *
 * Przywracamy go z wyzsza specyficznoscia (body + button + !important)
 * i stylizujemy na czytelne, latwe do trafienia kolko.
 * ================================================================== */
body .apus-mfp-zoom-in .mfp-content button.mfp-close,
body .apus-mfp-zoom-in button.mfp-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #f1f3f5 !important;
  color: #4a5058 !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  z-index: 1046 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
body .apus-mfp-zoom-in button.mfp-close:hover,
body .apus-mfp-zoom-in button.mfp-close:focus {
  background: #e4e7eb !important;
  color: #181a1f !important;
  outline: none !important;
}

/* Tytul modalu nie moze wchodzic pod przycisk X */
.apus-mfp-zoom-in .widget-title {
  padding-right: 46px !important;
}

/* Na telefonie X ma byc jeszcze latwiejszy do trafienia */
@media (max-width: 575px) {
  body .apus-mfp-zoom-in button.mfp-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 28px !important;
    top: 6px !important;
    right: 6px !important;
  }
}

/* Kontener modalu nie moze przycinac rozwinietych list Select2.
   template.css motywu ma: .mfp-container { overflow-x: hidden }
   co ucinaloby liste wychodzaca poza krawedz okna. */
.apus-mfp-zoom-in .mfp-container,
.apus-mfp-zoom-in .mfp-content,
.job-apply-email-form-wrapper,
.job-apply-email-form-wrapper .inner {
  overflow: visible !important;
}

/* Select2 doklejany do body - ma byc widoczny i poprawnie szeroki */
.select2-container {
  z-index: 1100 !important;
}

/* =====================================================================
 * POPRAWKI 2026-08-08 (wieczor)
 * ================================================================== */

/* 1) Podpowiedz pod polem ma sie WIZUALNIE trzymac swojego pola.
 * W HTML jest poprawnie (wewnatrz wiersza jezykow), ale przy rownych
 * odstepach czytalo sie jako opis nastepnego pola (prawo jazdy).
 * Rozwiazanie: podpowiedz blisko swojego pola + wiekszy odstep
 * miedzy wierszami formularza. */
form.cmb-form .cmb2-metabox-description,
form.cmb-form p.cmb2-metabox-description {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  padding-left: 10px !important;
  border-left: 3px solid #d7dde3 !important;
  font-size: 12px !important;
  color: #7a828d !important;
  line-height: 1.45 !important;
}

/* Wiekszy oddech miedzy polami - kazde pole to osobna calosc */
form.cmb-form .cmb-row {
  margin-bottom: 26px !important;
}

/* 2) Prawo jazdy - lista ma wykorzystac cala szerokosc formularza.
 * Wczesniej byla wymuszona jedna kolumna (1fr), przez co na szerszym
 * ekranie zajmowala waski pasek. Teraz: automatycznie 2 kolumny tam,
 * gdzie sie miesci, 1 na telefonie.
 *
 * ⚠️ Prog 230px zmieniony przy Z-09 (2026-08-22) na `min(100%, 300px)`.
 * Przy 230px najdluzsza opcja lamala sie na 5 linii; przy probowanym
 * 330px siatka zwijala sie do JEDNEJ kolumny (zabraklo 14px - rachunek
 * w sekcji Z-09 na koncu pliku). 300px to wartosc, przy ktorej dwie
 * kolumny mieszcza sie w szerokim oknie, a waskie okno dostaje jedna
 * pelna - nigdy piec linii.
 *
 * 🔴 NIE WPISUJ TU `min(100%, 300px)` - BYLO, WYSADZILO UKLAD (2026-08-22).
 * Procent w MINIMUM sciezki musi sie rozwiazac wzgledem zdefiniowanej
 * szerokosci kontenera. W tym modalu jest ona nieokreslona, wiec `100%`
 * nie ma sie do czego odniesc i przegladarka traktuje caly prog jako
 * `auto`. `minmax(auto, 1fr)` znaczy "minimum = szerokosc najdluzszego
 * slowa" - tutaj okolo 130px ("miedzynarodowe"). Efekt: dwie bardzo
 * waskie kolumny i lamanie kazdej opcji na 5+ wierszy. Zapis mial chronic
 * przed przepelnieniem na telefonie, a zniszczyl uklad na komputerze.
 *
 * Przed przepelnieniem na telefonie chroni regula `@media (max-width:520px)`
 * ponizej - stoi PO tej i wymusza `1fr`. To jest wlasciwe miejsce na ten
 * wyjatek, nie prog siatki. */
form.cmb-form .cmb-type-multicheck .cmb-td {
  width: 100% !important;
  display: block !important;
}
form.cmb-form .cmb-type-multicheck ul.cmb2-checkbox-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 2px 14px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Na waskich ekranach zawsze jedna kolumna - dwie bylyby za ciasne */
@media (max-width: 520px) {
  form.cmb-form .cmb-type-multicheck ul.cmb2-checkbox-list {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
 * Z-09 (2026-08-22) - ZA WASKA KOLUMNA NA KOMPUTERZE
 *
 * Zgloszenie wlasciciela: w sekcji "Zwieksz swoje szanse w 60 sekund"
 * pola Dostepnosc prawa jazdy / srodka transportu oraz Branza sa w zbyt
 * waskiej kolumnie; "Posiadam prawo jazdy kat. B (samochod osobowy)"
 * lamie sie na ~5 linii.
 *
 * 🔴 PRZYCZYNA - trzy warstwy, wszystkie trzeba ruszyc, bo kazda z osobna
 * nie wystarcza:
 *
 * 1) SZEROKOSC MODALU. template.css motywu: .apus-mfp-zoom-in .mfp-content
 *    { width:600px }. Na komputerze z ekranem 1920px formularz i tak dostaje
 *    600px - to jest ta "waska kolumna" ze zgloszenia. Reszta pol (imie,
 *    e-mail, telefon) tego nie odczuwa, bo to krotkie inputy; odczuwaja to
 *    wylacznie pola z dlugimi etykietami opcji.
 *
 * 2) SIATKA CHECKBOXOW prawa jazdy: minmax(230px, 1fr) z linii ~530.
 *    Przy 600px modalu auto-fit wchodzi w DWIE kolumny po ~230px, a opcja
 *    "Posiadam prawo jazdy kat. B (samochod osobowy)" (44 znaki) w 230px
 *    lamie sie wlasnie na 5 linii. Podniesienie progu do 330px sprawia,
 *    ze przy waskim modalu zostaje JEDNA pelna kolumna, a przy szerokim
 *    dwie - ale juz takie, w ktorych opcja sie miesci.
 *
 * 3) BRANZA (select2 multiple): regula z linii ~323 ustawia kazdemu
 *    zaznaczeniu display:block + width:100%, czyli KAZDA branza zajmuje
 *    caly wiersz. Powstalo to dla dlugich etykiet jezykow na telefonie
 *    ("niemiecki - B2 - Wyzszy sredniozaawansowany") i tam ma sens.
 *    Nazwy branz sa krotkie ("Spawalnictwo", "Hydraulika") - na komputerze
 *    ten sam zapis robi z nich waska, wysoka kolumne. Dlatego cofamy to
 *    TYLKO od 768px w gore; telefon zostaje bez zmian.
 *
 * ⚠️ Zadnego z-index tutaj - listy Select2 doczepiaja sie do <body>
 *    z z-index 1051 i podniesienie modalu schowaloby je za oknem.
 * ⚠️ Reszty formularza nie przebudowujemy - to sa wylacznie szerokosci.
 * ================================================================== */

/* 1) Szerszy modal na komputerze.
 * `:has()` zawezajacy do formularza aplikacji - inne okna motywu
 * (spotkania, kontakt) maja zostac przy swoich 600px. Przegladarka bez
 * `:has()` po prostu ignoruje regule i widzi stan sprzed poprawki. */
@media (min-width: 992px) {
  .apus-mfp-zoom-in .mfp-content:has(.job-apply-email-form-wrapper) {
    width: 940px !important;
    max-width: 92% !important;
  }
}

/* 2) Prog siatki - patrz punkt 2 komentarza wyzej. Sama zmiana jest
 * wprowadzona w regule zrodlowej (szukaj "minmax(300px"), a NIE tutaj:
 * dopisana ponizej nadpisalaby regule telefonu z @media (max-width:520px),
 * ktora stoi wczesniej w pliku.
 *
 * 🔴 RACHUNEK, KTORY TRZEBA ZNAC PRZED ZMIANA SZEROKOSCI OKNA. Do listy
 * checkboxow nie dociera szerokosc okna, tylko to, co zostaje po trzech
 * warstwach paddingu:
 *
 *     940  okno (ta regula)
 *     -80  padding .mfp-content (40+40 od 1200px; 20+20 ponizej)
 *     -48  padding .job-apply-email-form-wrapper .inner (24+24)
 *     -32  padding zwijanej sekcji "Zwieksz swoje szanse" (16+16, z JS)
 *     =780 px realnie dla siatki
 *
 * Dwie kolumny przy progu 300px potrzebuja 2*300 + 14 (gap) = 614px - miesci
 * sie z zapasem, kolumny wychodza po ~383px.
 *
 * ⚠️ Pierwsza wersja Z-09 miala okno 820px i prog 330px: zostawalo 660px,
 * a dwie kolumny potrzebowaly 674px. Zabraklo 14px i siatka zwinela sie do
 * jednej kolumny - wlasciciel zglosil "nadal jest w jednej kolumnie".
 * Jesli kiedys zwezisz okno, przelicz to ponownie, bo prog sam sie nie
 * dostosuje. */

/* 3) Branza i pozostale multiselecty: na komputerze zaznaczenia plyna
 * obok siebie i zawijaja sie dopiero na koncu wiersza. Dlugi tekst nadal
 * ma prawo zlamac sie w srodku tagu - stad `max-width` zamiast `nowrap`. */
@media (min-width: 768px) {
  form.cmb-form .select2-container--default .select2-selection--multiple ul.select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  form.cmb-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
  }
}