/* ============================================================
   WorkZen – wz-form-leadblock
   Formular 7: Referenzen-Seite, Lead-Block (PLZ + Bürogröße)
   Custom CSS Class (Formular-Einstellungen): wz-form-leadblock
   Präfix dieses Moduls: --wzlb-
   ============================================================ */
:root{
  --wzlb-petrol: #255959;
  --wzlb-white: #FFFFFF;
  --wzlb-input-bg: rgba(255,255,255,0.12);
  --wzlb-input-border: rgba(255,255,255,0.25);
  --wzlb-placeholder: rgba(255,255,255,0.6);
  --wzlb-radius: 8px;
}

.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper,
.wz-form-leadblock{
  background: transparent !important;
}

.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Heading/Beschreibung ausserhalb des <form>-Tags -> Elementor-Widgets davor uebernehmen das */
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gform_heading{
  display: none !important;
}

/* --------------------------------------------------------------
   LAYOUT: bewusst KEIN eigenes display:flex/grid auf .gform_fields
   (Grid-im-Grid-Falle – Orbital legt darueber schon ein 12-Spalten-
   Grid via layoutGridColumnSpan). Stattdessen die AEUSSERE Ebene
   (form = Feld-Grid + Footer als Geschwister) in eine Reihe flexen.
   -------------------------------------------------------------- */
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper form{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 12px !important;
  width: fit-content !important;
  max-width: 100%;
  margin: 0 auto !important;
}

.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gform_fields{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
}

.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gfield{
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  flex-basis: auto !important;
}

/* Sichtbare Labels + Zaehler/Hinweistexte ausblenden */
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gfield_label,
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper legend.gfield_label,
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gfield_description,
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gfield_validation_message,
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .ginput_counter,
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .charleft,
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper [class*="counter"]{
  display: none !important;
}

.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .wz-lb-field--plz{
  width: 180px !important;
}
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .wz-lb-field--groesse{
  width: 260px !important;
}

.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper input[type="text"]{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  border-radius: var(--wzlb-radius) !important;
  border: 1px solid var(--wzlb-input-border) !important;
  background-color: var(--wzlb-input-bg) !important;
  color: var(--wzlb-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  line-height: normal !important;
  outline: none !important;
  box-shadow: none !important;
}

.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper select{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  border-radius: var(--wzlb-radius) !important;
  border: 1px solid var(--wzlb-input-border) !important;
  background-color: var(--wzlb-input-bg) !important;
  color: var(--wzlb-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  line-height: normal !important;
  outline: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper input[type="text"]::placeholder{
  color: var(--wzlb-placeholder) !important;
}

/* Native <select>-Rendering meist CSS-resistent -> appearance:none +
   eigener Pfeil, sonst ignorieren manche Browser Hintergrund/Textfarbe */
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 38px !important;
}
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper select option{
  color: #252525;
  background: #ffffff;
}

/* --------------------------------------------------------------
   BUTTON: Klassenname von Orbital nicht sicher bekannt -> ueber
   das funktionale type="submit" ansprechen (Button ODER Input),
   Klassen-Verdopplung + !important gegen Hello-Elementor-Reset
   und Orbital-eigene Styles.
   -------------------------------------------------------------- */
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gform_footer{
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper button[type="submit"],
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper input[type="submit"],
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gform_button.gform_button{
  display: inline-block !important;
  background-color: var(--wzlb-white) !important;
  color: var(--wzlb-petrol) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 22px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: var(--wzlb-radius) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: opacity .12s ease !important;
  white-space: nowrap;
}
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper button[type="submit"]:hover,
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper input[type="submit"]:hover,
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gform_button.gform_button:hover{
  opacity: .92 !important;
  color: var(--wzlb-petrol) !important;
  background-color: var(--wzlb-white) !important;
}

/* Validierungsfehler auf dunklem Petrol-Hintergrund lesbar halten */
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gfield_error input,
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gfield_error select{
  border-color: #F2B8B5 !important;
}
.wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .validation_message{
  display: block !important;
  color: #F2B8B5 !important;
  font-size: 11px !important;
  margin-top: 4px !important;
}

@media (max-width: 720px){
  .wz-form-leadblock_wrapper.wz-form-leadblock_wrapper form{
    flex-direction: column;
    align-items: stretch !important;
  }
  .wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .wz-lb-field--plz,
  .wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .wz-lb-field--groesse{
    width: 100% !important;
  }
  .wz-form-leadblock_wrapper.wz-form-leadblock_wrapper .gform_footer,
  .wz-form-leadblock_wrapper.wz-form-leadblock_wrapper button[type="submit"],
  .wz-form-leadblock_wrapper.wz-form-leadblock_wrapper input[type="submit"]{
    width: 100% !important;
  }
}