#wpforms-form-1623 {
  font-family: 'Inter', sans-serif;
}

#wpforms-form-1623 button[type="submit"] {
  display: none;
}

.submit-arrow {
  cursor: pointer;
}

#wpforms-form-1623 input[type="text"], #wpforms-form-1623 input[type="email"] {
  background-color: var(--wp--preset--color--light-yellow);
  border-radius: 50px;
  border: 2px solid var(--wp--preset--color--new-blue);
}

#wpforms-form-1623 .wpforms-field-container {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

#wpforms-1623-field_2-container, #wpforms-1623-field_3-container {
  width: 48%;
}

/* ==========================================================
   SEO TIPS INBOX / NEWSLETTER
   Klasse im Gutenberg-Editor auf die ÄUSSERE gelbe Gruppe setzen:
   seo-tips-inbox

   Bestehende Struktur bleibt unverändert:
   - WPForms #1623
   - .submit-arrow
   ========================================================== */

.seo-tips-inbox {
  --seo-tips-ink: var(--wp--preset--color--almost-black, #111322);
  --seo-tips-yellow: var(--wp--preset--color--light-yellow, #ffd480);
  --seo-tips-muted: var(--seo-tips-ink);

  box-sizing: border-box !important;
}

/* Überschrift */
.seo-tips-inbox > .wp-block-group > .wp-block-heading {
  margin: 0 0 44px !important;
  color: var(--seo-tips-ink) !important;
}

/* Zeile: Formular links, Submit-Pfeil rechts */
.seo-tips-inbox > .wp-block-group > .wp-block-group.mcg-display-flex {
  align-items: center !important;
  gap: var(--g1, 24px) !important;
}

/* Formularspalte */
.seo-tips-inbox #wpforms-1623 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.seo-tips-inbox #wpforms-form-1623 {
  width: 100% !important;
  margin: 0 !important;
}

/* Name + E-Mail nebeneinander, Checkbox darunter */
.seo-tips-inbox #wpforms-form-1623 .wpforms-field-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: var(--g1, 24px) !important;
  row-gap: 0 !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Name */
.seo-tips-inbox #wpforms-1623-field_2-container {
  grid-column: 1 !important;
}

/* E-Mail */
.seo-tips-inbox #wpforms-1623-field_3-container {
  grid-column: 2 !important;
}

/* Checkbox über beide Spalten */
.seo-tips-inbox #wpforms-1623-field_4-container {
  grid-column: 1 / -1 !important;

  /* sichtbarer Abstand unter Name/E-Mail */
  margin: 0 !important;
  padding: 40px 0 0 !important;
}

/* WPForms-Feldabstände zurücksetzen */
.seo-tips-inbox #wpforms-form-1623 .wpforms-field {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Zustimmung: Abstand NACH dem allgemeinen .wpforms-field-Reset setzen,
   damit WPForms ihn nicht wieder auf 0 überschreibt. */
.seo-tips-inbox #wpforms-form-1623 #wpforms-1623-field_4-container {
  margin-top: 38px !important;
  padding-top: 0 !important;
}

/* Name + E-Mail */
.seo-tips-inbox #wpforms-1623-field_2,
.seo-tips-inbox #wpforms-1623-field_3 {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  height: 58px !important;
  min-height: 58px !important;

  margin: 0 !important;
  padding: 0 26px !important;

  box-sizing: border-box !important;

  background: transparent !important;
  background-color: transparent !important;

  color: var(--seo-tips-ink) !important;

  border: 3px solid var(--seo-tips-ink) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  outline: none !important;

  font-family: "Inter", sans-serif !important;
  font-size: var(--wp--preset--font-size--copy, 20px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  transition:
    border-color 180ms ease,
    background-color 180ms ease !important;
}

.seo-tips-inbox #wpforms-1623-field_2::placeholder,
.seo-tips-inbox #wpforms-1623-field_3::placeholder {
  color: var(--seo-tips-muted) !important;
  opacity: 1 !important;
}

.seo-tips-inbox #wpforms-1623-field_2:focus,
.seo-tips-inbox #wpforms-1623-field_3:focus {
  border-color: var(--seo-tips-ink) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Versteckte Labels wirklich aus dem Layout nehmen */
.seo-tips-inbox #wpforms-form-1623 .wpforms-label-hide {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: -1px !important;
  padding: 0 !important;

  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
}

/* Checkbox */
.seo-tips-inbox #wpforms-1623-field_4-container fieldset,
.seo-tips-inbox #wpforms-1623-field_4-container ul,
.seo-tips-inbox #wpforms-1623-field_4-container li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.seo-tips-inbox #wpforms-1623-field_4-container ul {
  list-style: none !important;
}

.seo-tips-inbox #wpforms-1623-field_4-container li {
  display: block !important;
  position: relative !important;
}

/* Native/alte WPForms-Checkbox komplett ausblenden */
.seo-tips-inbox #wpforms-1623-field_4_1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Nur noch EIN sichtbares Kästchen – am Label selbst */
.seo-tips-inbox #wpforms-1623-field_4-container .wpforms-field-label-inline {
  position: relative !important;
  display: block !important;

  margin: 0 !important;
  padding-left: 48px !important;

  color: var(--seo-tips-ink) !important;

  font-family: "Inter", sans-serif !important;
  font-size: var(--wp--preset--font-size--copy, 20px) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;

  cursor: pointer !important;
}

.seo-tips-inbox #wpforms-1623-field_4-container .wpforms-field-label-inline::before {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  top: 0.05em !important;

  width: 30px !important;
  height: 30px !important;
  box-sizing: border-box !important;

  background: transparent !important;
  border: 2px solid var(--seo-tips-ink) !important;
  border-radius: 3px !important;
}

/* Checked-Zustand */
.seo-tips-inbox #wpforms-1623-field_4_1:checked
+ .wpforms-field-label-inline::before {
  background-color: var(--seo-tips-ink) !important;
}

.seo-tips-inbox #wpforms-1623-field_4_1:checked
+ .wpforms-field-label-inline::after {
  content: "" !important;

  position: absolute !important;
  left: 10px !important;
  top: 6px !important;

  width: 8px !important;
  height: 14px !important;

  border-right: 3px solid var(--seo-tips-yellow) !important;
  border-bottom: 3px solid var(--seo-tips-yellow) !important;

  transform: rotate(45deg) !important;
}

/* Der echte WPForms-Submit bleibt unsichtbar:
   der bestehende .submit-arrow löst ihn bereits per JS aus. */
.seo-tips-inbox #wpforms-form-1623 .wpforms-submit-container {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

/* Submit-Pfeil */
.seo-tips-inbox .submit-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;

  width: 116px !important;
  height: auto !important;

  margin: 0 !important;

  cursor: pointer !important;

  transition: transform 180ms ease !important;
}

.seo-tips-inbox .submit-arrow img {
  display: block !important;

  width: 116px !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  .seo-tips-inbox .submit-arrow:hover {
    transform: translateX(6px) !important;
  }
}


/* ==========================================================
   MOBILE
   MCG verwendet für kleine Layouts u. a.
   mcg-sm-flex-flow-column / mcg-sm-width-c12.
   Hier wird dasselbe Verhalten über die Komponentenklasse
   erzwungen, damit im Gutenberg-Block nur EINE Klasse nötig ist.
   ========================================================== */

@media (max-width: 768px) {

  .seo-tips-inbox {
    padding: 48px var(--m1, 24px) !important;
  }

  .seo-tips-inbox > .wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
  }

  .seo-tips-inbox > .wp-block-group > .wp-block-heading {
    margin-bottom: 28px !important;
  }

  /* Entspricht funktional mcg-sm-flex-flow-column */
  .seo-tips-inbox > .wp-block-group > .wp-block-group.mcg-display-flex {
    display: flex !important;
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100% !important;

    gap: 24px !important;
  }

  /* Entspricht funktional mcg-sm-width-c12 */
  .seo-tips-inbox
  > .wp-block-group
  > .wp-block-group.mcg-display-flex
  > .wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
  }

  .seo-tips-inbox #wpforms-form-1623 .wpforms-field-container {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 16px !important;
  }

  .seo-tips-inbox #wpforms-1623-field_2-container,
  .seo-tips-inbox #wpforms-1623-field_3-container,
  .seo-tips-inbox #wpforms-1623-field_4-container {
    grid-column: 1 !important;
  }

  .seo-tips-inbox #wpforms-1623-field_2,
  .seo-tips-inbox #wpforms-1623-field_3 {
    height: 52px !important;
    min-height: 52px !important;

    padding-inline: 20px !important;

    border-width: 2px !important;

    font-size: var(--wp--preset--font-size--copy, 18px) !important;
  }

  .seo-tips-inbox #wpforms-form-1623 #wpforms-1623-field_4-container {
    margin-top: 20px !important;
    padding-top: 0 !important;
  }

  .seo-tips-inbox #wpforms-1623-field_4-container .wpforms-field-label-inline {
    padding-left: 42px !important;
    font-size: var(--wp--preset--font-size--copy, 18px) !important;
  }

  .seo-tips-inbox #wpforms-1623-field_4-container .wpforms-field-label-inline::before {
    width: 26px !important;
    height: 26px !important;
  }

  .seo-tips-inbox #wpforms-1623-field_4_1:checked
  + .wpforms-field-label-inline::after {
    left: 9px !important;
    top: 5px !important;
    width: 7px !important;
    height: 12px !important;
  }

  .seo-tips-inbox .submit-arrow {
    align-self: flex-end !important;

    width: 82px !important;

    margin-top: 2px !important;
  }

  .seo-tips-inbox .submit-arrow img {
    width: 82px !important;
  }
}