/* ==========================================================================
   FLIP BUTTON voor de standaard Elementor Button widget
   --------------------------------------------------------------------------
   Gebruik:
   1. Zet de class  btn-flip  bij de knop onder Advanced → CSS Classes
   2. Zet de back-tekst onder Advanced → Attributes:   data-back|Jouw tekst
      (geen Pro? zie de fallback onderaan)
   3. Achtergrond, radius, padding, kleur stel je gewoon in het
      Elementor-paneel in — deze code doet alléén het flip-effect.
   Plakken in: Site Settings → Custom CSS, of de Advanced → Custom CSS
   van de knop zelf (vervang dan '.btn-flip' door 'selector').
   ========================================================================== */

.btn-flip .elementor-button{
	position: relative;
	overflow: hidden;
}

/* FRONT — de normale knoptekst van Elementor */
.btn-flip .elementor-button .elementor-button-content-wrapper{
	transition: transform .35s ease, opacity .25s ease;
}

/* BACK — tekst komt uit het data-back attribuut.
   background:inherit maakt er een dekkend paneel van dat over de
   front heen schuift — werkt met elke padding/hoogte/gradient. */
.btn-flip .elementor-button::after{
	content: attr(data-back);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: inherit;
	transform: translateY(100%);
	transition: transform .35s ease;
}

/* HOVER — front schuift omhoog weg, back schuift omhoog binnen */
.btn-flip .elementor-button:hover .elementor-button-content-wrapper{
	transform: translateY(-100%);
	opacity: 0;
}
.btn-flip .elementor-button:hover::after{
	transform: translateY(0);
}

/* CLICK */
.btn-flip .elementor-button:active{
	transform: scale(.92);
}

/* Toegankelijkheid */
@media (prefers-reduced-motion: reduce){
	.btn-flip .elementor-button .elementor-button-content-wrapper,
	.btn-flip .elementor-button::after{
		transition: none;
	}
}

/* ==========================================================================
   VARIANTEN (optioneel) — zet de extra class naast btn-flip
   in hetzelfde CSS Classes veld, bijv:  btn-flip flip-gold
   ========================================================================== */

.btn-flip.flip-gold .elementor-button{
	background: #222;
	border-radius: 20px 60px 20px 60px;
}

.btn-flip.flip-blue .elementor-button{
	background: #1e40af;
	border-radius: 60px 20px 60px 20px;
}

.btn-flip.flip-purple .elementor-button{
	background: #6d28d9;
	border-radius: 40px 0 40px 0;
}

/* ==========================================================================
   FALLBACK zonder Elementor Pro (geen Attributes-veld):
   geef de knop een extra eigen class en zet de back-tekst in CSS, bijv:

   .btn-flip.knop-aanvraag .elementor-button::after{
       content: "Start je aanvraag";
   }
   ========================================================================== */