.if-mfb-button-wrap{display:block}
.if-mfb-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.if-mfb-button--justify{width:100%;justify-content:center}
.if-mfb-button__icon{display:inline-flex;align-items:center;line-height:1}
.if-mfb-button__icon svg{width:1em;height:1em}
.if-mfb-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:20px}
.if-mfb-modal.is-open{display:flex}
.if-mfb-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.if-mfb-modal__dialog{position:relative;z-index:2;width:min(650px,100%);max-width:100%;max-height:90vh;overflow-y:auto;background:#fff;padding:32px;border-radius:10px;-webkit-overflow-scrolling:touch}
.if-mfb-modal__title{margin-top:0;padding-right:36px}
.if-mfb-modal__intro{margin-bottom:20px}
.if-mfb-modal__close{position:absolute;top:12px;right:14px;z-index:3;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:inherit;font-size:30px;line-height:1;cursor:pointer}
.if-mfb-modal__close:hover,.if-mfb-modal__close:focus{opacity:.7}
html.if-mfb-modal-open,
body.if-mfb-modal-open{overflow:hidden !important;overscroll-behavior:none}
.if-mfb-notice{padding:12px 14px;background:#fff4d6;border:1px solid #e7cf84}
.if-mfb-modal .gform_wrapper{max-width:none;width:100%}
@media(max-width:767px){
	.if-mfb-modal{padding:12px;align-items:flex-start;overflow-y:auto}
	.if-mfb-modal__dialog{width:100%!important;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:0;padding:24px 20px}
}

/* v1.1.0: zorg dat de modal boven Houzez/Elementor media en stacking contexts staat */
.if-mfb-modal{
	z-index:2147483000 !important;
	isolation:isolate;
}
.if-mfb-modal__overlay{
	z-index:2147483001 !important;
}
.if-mfb-modal__dialog{
	z-index:2147483002 !important;
}

/* Voorkom dat transforms/stacking van de widget-parent de modal onder andere content drukken */
.elementor-widget-if-modal-form-button{
	position:static !important;
	z-index:auto !important;
}


/* v1.2.5 --------------------------------------------------------------
 * Modal wordt naar <body> verplaatst. De host is een viewport-overlay,
 * zodat tablet/mobiel dezelfde full-screen ervaring krijgt als desktop.
 */
body > .if-mfb-modal-host {
	position: fixed !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	height: 100dvh !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	contain: none !important;
	z-index: 2147483000 !important;
}

body > .if-mfb-modal-host .if-mfb-modal.is-open {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	transform: none !important;
	filter: none !important;
}

.if-mfb-modal.is-open {
	z-index: 2147483000 !important;
}

/*
 * Houzez/Elementor kan .elementor-button hover-regels met hogere specificiteit
 * gebruiken. Deze regels zorgen dat de door Elementor gegenereerde widgetkleur
 * daadwerkelijk wint.
 */
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button:hover,
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button:focus,
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button:focus-visible {
	text-decoration: none;
}

/*
 * Gravity Forms verzendknop volgt standaard de globale Elementor themakleuren.
 * Primary = normale achtergrond, Accent = hover.
 * Fallbacks zorgen dat de knop ook zonder Elementor Site Settings bruikbaar blijft.
 * !Important weggehaald zodat de makelaars en hypotheek css sheets ze kunnen overrulen.
 */
.if-mfb-modal .gform_wrapper input[type="submit"],
.if-mfb-modal .gform_wrapper input[type="button"].gform_button,
.if-mfb-modal .gform_wrapper button[type="submit"],
.if-mfb-modal .gform_wrapper .gform_button {
	background-color: var(--e-global-color-primary, #1f2937) ;
	border-color: var(--e-global-color-primary, #1f2937) ;
	color: #fff !important;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.if-mfb-modal .gform_wrapper input[type="submit"]:hover,
.if-mfb-modal .gform_wrapper input[type="submit"]:focus,
.if-mfb-modal .gform_wrapper input[type="button"].gform_button:hover,
.if-mfb-modal .gform_wrapper input[type="button"].gform_button:focus,
.if-mfb-modal .gform_wrapper button[type="submit"]:hover,
.if-mfb-modal .gform_wrapper button[type="submit"]:focus,
.if-mfb-modal .gform_wrapper .gform_button:hover,
.if-mfb-modal .gform_wrapper .gform_button:focus {
	background-color: var(--e-global-color-accent, var(--e-global-color-secondary, #111827)) !important;
	border-color: var(--e-global-color-accent, var(--e-global-color-secondary, #111827)) !important;
	color: #fff !important;
}


/* v1.2.1: standaard rustig, effect alleen bij hover */
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button {
	border-radius: 3px;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
	-webkit-transition:
		-webkit-box-shadow .25s ease,
		-webkit-transform .25s ease,
		background-color .2s ease,
		color .2s ease;
	transition:
		box-shadow .25s ease,
		transform .25s ease,
		background-color .2s ease,
		color .2s ease;
}

.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button:hover,
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button:focus-visible {
	-webkit-box-shadow: 0 70px 70px rgba(0, 0, 0, .2) !important;
	box-shadow: 0 70px 70px rgba(0, 0, 0, .2) !important;
	-webkit-transform: translate(0, -10px);
	transform: translate(0, -10px);
}


/* v1.2.2 --------------------------------------------------------------
 * De eerdere 70px shadow was te groot voor een compacte button.
 * Hieronder een proportionele hoverversie met dezelfde visuele intentie.
 */

/* Zorg dat Houzez/Elementor geen eigen schaduw of filter kan blijven tonen. */
.elementor-widget-if-modal-form-button,
.elementor-widget-if-modal-form-button .elementor-widget-container,
.elementor-widget-if-modal-form-button .if-mfb-button-wrap {
	overflow: visible !important;
}

.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button,
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button:link,
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button:visited {
	position: relative;
	z-index: 1;
	border-radius: 3px !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	-webkit-filter: none !important;
	filter: none !important;
	-webkit-transform: translateY(0) !important;
	transform: translateY(0) !important;
	-webkit-transition:
		-webkit-transform .22s ease,
		-webkit-box-shadow .22s ease,
		background-color .2s ease,
		color .2s ease !important;
	transition:
		transform .22s ease,
		box-shadow .22s ease,
		background-color .2s ease,
		color .2s ease !important;
}

/* Ook pseudo-elementen van thema's neutraliseren. */
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button::before,
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button::after {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	-webkit-filter: none !important;
	filter: none !important;
}

/* Hover: subtiel omhoog en een passende schaduw voor een knop. */
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button:hover,
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button:focus-visible {
	-webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, .20) !important;
	box-shadow: 0 14px 28px rgba(0, 0, 0, .20) !important;
	-webkit-transform: translateY(-4px) !important;
	transform: translateY(-4px) !important;
}

/* Bij actieve klik iets terugveren. */
.elementor-widget-if-modal-form-button .if-mfb-button.elementor-button:active {
	-webkit-box-shadow: 0 7px 14px rgba(0, 0, 0, .14) !important;
	box-shadow: 0 7px 14px rgba(0, 0, 0, .14) !important;
	-webkit-transform: translateY(-1px) !important;
	transform: translateY(-1px) !important;
}


/* v1.2.3 --------------------------------------------------------------
 * Elementor kan een box-shadow op de widget-container zelf zetten.
 * Die wrapper-schaduw hoort niet bij deze knop en wordt daarom alleen
 * voor IF Modal Form Button uitgeschakeld.
 */
.elementor-widget-if-modal-form-button > .elementor-widget-container {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}