.elementor-20477 .elementor-element.elementor-element-8f444c8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-20477 .elementor-element.elementor-element-85286df{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;overflow:visible;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;color:var( --e-global-color-primary );}.elementor-20477 .elementor-element.elementor-element-529d023 .elementor-heading-title{font-size:13px;}.elementor-20477 .elementor-element.elementor-element-529d023{width:var( --container-widget-width, 32% );max-width:32%;--container-widget-width:32%;--container-widget-flex-grow:0;}.elementor-20477 .elementor-element.elementor-element-9b9a8a9 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:20px;color:var( --e-global-color-text );}.elementor-20477 .elementor-element.elementor-element-9b9a8a9 > .elementor-widget-container{margin:10px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-widget-text-editor{color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-20477 .elementor-element.elementor-element-ea09796{font-size:15px;color:var( --e-global-color-secondary );}.elementor-20477 .elementor-element.elementor-element-ea09796 > .elementor-widget-container{margin:5px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-20477 .elementor-element.elementor-element-1870644 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-20477 .elementor-element.elementor-element-1870644 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-20477 .elementor-element.elementor-element-1870644 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-20477 .elementor-element.elementor-element-1870644 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-field-group > label{font-size:13px;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-field-type-html{padding-bottom:0px;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-field-group .elementor-field, .elementor-20477 .elementor-element.elementor-element-1870644 .elementor-field-subgroup label{font-family:"Montserrat", Sans-serif;font-size:14px;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;border-radius:5px 5px 5px 5px;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;border-radius:5px 5px 5px 5px;}.elementor-20477 .elementor-element.elementor-element-1870644 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-button[type="submit"]{color:#ffffff;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-20477 .elementor-element.elementor-element-1870644 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-20477 .elementor-element.elementor-element-1870644 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-20477 .elementor-element.elementor-element-1870644 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-20477 .elementor-element.elementor-element-1870644 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-20477 .elementor-element.elementor-element-1870644{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-20477 .elementor-element.elementor-element-6afd309{text-align:center;font-size:13px;color:var( --e-global-color-secondary_hover );}.elementor-20477 .elementor-element.elementor-element-6afd309 > .elementor-widget-container{margin:10px 0px 0px 0px;}#elementor-popup-modal-20477 .dialog-message{width:460px;height:auto;}#elementor-popup-modal-20477{justify-content:flex-end;align-items:center;pointer-events:all;background-color:rgba(0,0,0,.8);}#elementor-popup-modal-20477 .dialog-close-button{display:flex;}#elementor-popup-modal-20477 .dialog-widget-content{animation-duration:1.2s;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}@media(max-width:767px){.elementor-20477 .elementor-element.elementor-element-529d023 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-20477 .elementor-element.elementor-element-529d023{--container-widget-width:42%;--container-widget-flex-grow:0;width:var( --container-widget-width, 42% );max-width:42%;}.elementor-20477 .elementor-element.elementor-element-9b9a8a9 > .elementor-widget-container{margin:5px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-20477 .elementor-element.elementor-element-6afd309 > .elementor-widget-container{margin:5px 0px 0px 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for heading, class: .elementor-element-529d023 *//* ===== Badge: Dobór skakanki (FORCE COLORS) ===== */
.cf-badge{
  display: inline-block !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: rgba(21,127,149,.10) !important;
  color: #157F95 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: .2px !important;
}

/* Elementor potrafi kolorować span-y w Text Editorze */
.elementor-text-editor .cf-badge{
  color: #157F95 !important;
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-1870644 *//* =========================================================
   COOLROPE • Help Popup • Elementor Form (HTML-look)
   Wymagana klasa na widget Form: cf-help-form
========================================================= */

:root{
  --cf-accent:#157F95;          /* turkus */
  --cf-ink:#0b1220;
  --cf-muted:#667085;
  --cf-border:#e7e9ee;
  --cf-bg:#ffffff;
  --cf-soft: rgba(21,127,149,.10);
  --cf-shadow: 0 18px 45px rgba(15,23,42,.10);
  --cf-shadow-soft: 0 10px 25px rgba(15,23,42,.10);
}

/* --- 1) Wrapper formularza (jak .cf-help z HTML) --- */
.cf-help-form{
  background: var(--cf-bg);
  border: 1px solid var(--cf-border);
  border-radius: 22px;
  box-shadow: var(--cf-shadow);
  padding: 18px;
  color: var(--cf-ink);
}

/* Usuń domyślne marginesy formularza */
.cf-help-form form.elementor-form{
  margin: 0 !important;
}

/* --- 2) Każda “sekcja” pytania jako karta (jak fieldset) --- */
.cf-help-form .elementor-field-group{
  border: 1px solid var(--cf-border) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  background: #fff !important;
  box-shadow: var(--cf-shadow-soft) !important;
  margin: 0 0 12px 0 !important;
}

/* Label = “legend” */
.cf-help-form .elementor-field-label{
  display:block !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  margin: 0 0 10px 0 !important;
  color: var(--cf-ink) !important;
}

/* --- 3) Inputy (email/text/textarea/select) jak HTML --- */
.cf-help-form .elementor-field,
.cf-help-form select.elementor-field{
  width: 100% !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: 14px !important;
  padding: 12px 12px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  outline: none !important;
  background: #fff !important;
  color: var(--cf-ink) !important;
  transition: border-color .12s ease, box-shadow .12s ease !important;
}

.cf-help-form .elementor-field:focus,
.cf-help-form select.elementor-field:focus{
  border-color: rgba(21,127,149,.55) !important;
  box-shadow: 0 0 0 4px rgba(21,127,149,.12) !important;
}

.cf-help-form .elementor-field::placeholder{
  color: rgba(102,112,133,.75) !important;
}

/* Textarea jak HTML */
.cf-help-form textarea.elementor-field{
  min-height: 92px !important;
  resize: vertical !important;
}

/* --- 4) RADIO / CHECKBOX jako kafelki (to największa różnica) --- */

/* Ułóż opcje w “grid” */
.cf-help-form .elementor-field-subgroup{
  display: grid !important;
  gap: 10px !important;
  margin: 6px 0 0 0 !important;
}

/* Label opcji = kafel */
.cf-help-form .elementor-field-subgroup label{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  padding: 12px 12px !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  background: #fff !important;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease !important;
  color: var(--cf-ink) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Hover */
.cf-help-form .elementor-field-subgroup label:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(21,127,149,.35) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
}

/* Same inputy */
.cf-help-form input[type="radio"],
.cf-help-form input[type="checkbox"]{
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--cf-accent) !important;
}

/* Ukryj pseudo-znaczniki, jeśli Elementor je dorzuca */
.cf-help-form .elementor-field-subgroup .elementor-field-option{
  margin: 0 !important;
}

/* --- 5) STAN ZAZNACZENIA (kafel “active”) --- */
/* W różnych wersjach Elementora input jest w label lub obok — łapiemy oba przypadki */
.cf-help-form .elementor-field-subgroup label input:checked + span,
.cf-help-form .elementor-field-subgroup label input:checked ~ span{
  /* jeśli Elementor trzyma tekst w spanach */
}

/* Gdy input jest w labelu – daj styl całemu labelowi */
.cf-help-form .elementor-field-subgroup label:has(input:checked){
  border-color: rgba(21,127,149,.60) !important;
  background: rgba(21,127,149,.06) !important;
  box-shadow: 0 12px 26px rgba(21,127,149,.14) !important;
}

/* Fallback dla przeglądarek bez :has() – nadal będzie premium, tylko bez “active” */
@supports not(.elementor-20477 .elementor-element.elementor-element-1870644(:has(*))){
  .cf-help-form .elementor-field-subgroup label{
    /* bez zmian */
  }
}

/* --- 6) Submit button jak HTML --- */
.cf-help-form .elementor-field-type-submit{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.cf-help-form .elementor-button{
  width: 100% !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 14px 14px !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  background: var(--cf-accent) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(21,127,149,.28) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 10px !important;
}

.cf-help-form .elementor-button:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 34px rgba(21,127,149,.34) !important;
  filter: brightness(1.02) !important;
}

.cf-help-form .elementor-button:active{
  transform: translateY(0px) !important;
}

/* --- 7) Success / error message --- */
.cf-help-form .elementor-message{
  border-radius: 14px !important;
  padding: 12px 12px !important;
  font-weight: 700 !important;
  margin-top: 10px !important;
}
.cf-help-form .elementor-message.elementor-message-success{
  background: rgba(34,197,94,.10) !important;
  color: #166534 !important;
  border: 1px solid rgba(34,197,94,.25) !important;
}
.cf-help-form .elementor-message.elementor-message-danger{
  background: rgba(239,68,68,.10) !important;
  color: #7f1d1d !important;
  border: 1px solid rgba(239,68,68,.25) !important;
}

/* --- 8) Checkbox “delikatny” (jeśli chcesz, dodaj klasę cf-plain na grupie checkbox) ---
   Elementor: kliknij POLE checkbox -> Advanced -> CSS Classes -> cf-plain
*/
.cf-help-form .elementor-field-group.cf-plain{
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: -2px !important;
}
.cf-help-form .elementor-field-group.cf-plain .elementor-field-label{
  display:none !important;
}
.cf-help-form .elementor-field-group.cf-plain .elementor-field-subgroup{
  gap: 0 !important;
}
.cf-help-form .elementor-field-group.cf-plain .elementor-field-subgroup label{
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  background: transparent !important;
  font-weight: 600 !important;
  color: var(--cf-muted) !important;
}
.cf-help-form .elementor-field-group.cf-plain .elementor-field-subgroup label:hover{
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* --- 9) Mobile tuning --- */
@media (max-width: 480px){
  .cf-help-form{ padding: 16px !important; border-radius: 20px !important; }
  .cf-help-form .elementor-field-group{ padding: 11px !important; }
  .cf-help-form .elementor-field-subgroup label{ padding: 11px !important; }
}

/* =========================================================
   FIX: radio/checkbox ma być W ŚRODKU kafla (nie obok)
   Wklej na samym końcu CSS.
========================================================= */

/* Opcja = wrapper (Elementor często używa .elementor-field-option) */
.cf-help-form .elementor-field-subgroup .elementor-field-option{
  position: relative !important;
  display: block !important;
  margin: 0 !important;
}

/* Kafel robimy na WRAPPERZE, nie tylko na label */
.cf-help-form .elementor-field-subgroup .elementor-field-option{
  border: 1px solid var(--cf-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease !important;
  padding: 12px 12px 12px 46px !important; /* miejsce na radio */
  cursor: pointer !important;
}

/* Hover jak wcześniej */
.cf-help-form .elementor-field-subgroup .elementor-field-option:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(21,127,149,.35) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
}

/* Tekst w środku (label/tekst) */
.cf-help-form .elementor-field-subgroup .elementor-field-option label{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-weight: 700 !important;
  color: var(--cf-ink) !important;
  cursor: pointer !important;
}

/* RADIO/checkbox ustawiamy w środku kafla */
.cf-help-form .elementor-field-subgroup .elementor-field-option input[type="radio"],
.cf-help-form .elementor-field-subgroup .elementor-field-option input[type="checkbox"]{
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--cf-accent) !important;
  cursor: pointer !important;
}/* End custom CSS */