/* =====================================================
   OVERRIDES (must load LAST)
   Fix: LaTulipe orange hover on "Send Message" buttons
   ===================================================== */

/* Pak alle Elementor form submit buttons + gewone submit buttons */
html body .elementor form .elementor-button[type="submit"]:hover,
html body .elementor form .elementor-button[type="submit"]:focus,
html body .elementor form button[type="submit"]:hover,
html body .elementor form button[type="submit"]:focus,
html body .elementor form input[type="submit"]:hover,
html body .elementor form input[type="submit"]:focus,
html body .wpcf7 input[type="submit"]:hover,
html body .wpcf7 input[type="submit"]:focus{
  background: var(--theme-primary-hover) !important;
  background-color: var(--theme-primary-hover) !important;
  background-image: none !important;
  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-text-on-primary-hover) !important;
}

/* Hover tekst */
html body .elementor form .elementor-button[type="submit"]:hover .elementor-button-text,
html body .elementor form .elementor-button[type="submit"]:focus .elementor-button-text{
  color: var(--theme-text-on-primary-hover) !important;
}

/* Veel themes gebruiken :before/:after overlay op hover */
html body .elementor .elementor-button:hover:before,
html body .elementor .elementor-button:hover:after,
html body .elementor .elementor-button:focus:before,
html body .elementor .elementor-button:focus:after{
  background: var(--theme-primary-hover) !important;
  background-image: none !important;
  opacity: 1 !important;
}

html body .btn:hover,
html body .theme_button:hover,
html body a.button:hover,
html body button.button:hover,
html body input.button:hover{
  background: var(--theme-primary-hover) !important;
  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-text-on-primary-hover) !important;
  background-image: none !important;
}

/* =====================================================
   FIX — Elementor Form submit hover stays orange
   Target: Elementor Form submit button structure
   ===================================================== */

/* 1) Map Elementor Form variables to your theme */
html body .elementor form.elementor-form,
html body .elementor .elementor-widget-form form{
  --e-form-submit-button-background-color: var(--theme-primary) !important;
  --e-form-submit-button-border-color: var(--theme-primary) !important;
  --e-form-submit-button-text-color: var(--theme-on-primary) !important;

  --e-form-submit-button-hover-background-color: var(--theme-primary-hover) !important;
  --e-form-submit-button-hover-border-color: var(--theme-primary-hover) !important;
  --e-form-submit-button-hover-text-color: var(--theme-on-primary-hover) !important;

  /* Some templates still use global accent on hover */
  --e-global-color-accent: var(--theme-primary-hover) !important;
}

/* 2) Force the actual submit button (common Elementor Form markup) */
html body .elementor form.elementor-form .elementor-field-type-submit .elementor-button,
html body .elementor form.elementor-form .e-form__buttons .elementor-button,
html body .elementor .elementor-widget-form form .elementor-field-type-submit .elementor-button,
html body .elementor .elementor-widget-form form .e-form__buttons .elementor-button{
  background: var(--theme-primary) !important;
  background-color: var(--theme-primary) !important;
  background-image: none !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
}

/* 3) Hover/Focus (the one that keeps turning orange) */
html body .elementor form.elementor-form .elementor-field-type-submit .elementor-button:hover,
html body .elementor form.elementor-form .elementor-field-type-submit .elementor-button:focus,
html body .elementor form.elementor-form .e-form__buttons .elementor-button:hover,
html body .elementor form.elementor-form .e-form__buttons .elementor-button:focus,
html body .elementor .elementor-widget-form form .elementor-field-type-submit .elementor-button:hover,
html body .elementor .elementor-widget-form form .elementor-field-type-submit .elementor-button:focus,
html body .elementor .elementor-widget-form form .e-form__buttons .elementor-button:hover,
html body .elementor .elementor-widget-form form .e-form__buttons .elementor-button:focus{
  background: var(--theme-primary-hover) !important;
  background-color: var(--theme-primary-hover) !important;
  background-image: none !important;
  border-color: var(--theme-primary-hover) !important;
  color: var(--theme-on-primary-hover) !important;
}

/* 4) Force the text inside the button (Elementor wraps it) */
html body .elementor form.elementor-form .elementor-button:hover .elementor-button-text,
html body .elementor form.elementor-form .elementor-button:focus .elementor-button-text,
html body .elementor .elementor-widget-form form .elementor-button:hover .elementor-button-text,
html body .elementor .elementor-widget-form form .elementor-button:focus .elementor-button-text{
  color: var(--theme-on-primary-hover) !important;
}

/* 5) Kill hover overlays (some themes paint orange via :before/:after) */
html body .elementor form.elementor-form .elementor-button:before,
html body .elementor form.elementor-form .elementor-button:after,
html body .elementor form.elementor-form .elementor-button:hover:before,
html body .elementor form.elementor-form .elementor-button:hover:after,
html body .elementor .elementor-widget-form form .elementor-button:before,
html body .elementor .elementor-widget-form form .elementor-button:after,
html body .elementor .elementor-widget-form form .elementor-button:hover:before,
html body .elementor .elementor-widget-form form .elementor-button:hover:after{
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}