/* ================================
   IDP ATC + BUY NOW BUTTON WIDGET
   ================================ */

/* Container */
.idp-atc-buy-now {
  display: flex;
  align-items: stretch;
  gap: 10px; /* Overschrijfbaar via Elementor 'Tussenruimte' */
}

/* Basisknop (custom modus) */
.idp-atc-buy-now .idp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;

  /* BELANGRIJK: de knop is de 'bron' van de tekstkleur */
  color: inherit;
}

/* Theme-modus (Motta) laat de themaklassen leidend zijn */
.idp-atc-buy-now .motta-button {
  width: 100%;
  /* Kleur van de motta-button erft nu ook door naar iconen */
  color: inherit !important;
}

/* Iconen */
.idp-atc-buy-now .idp-btn.has-icon { display: inline-flex; }

.idp-atc-buy-now .idp-btn .idp-btn__icon {
  display: inline-flex;
  line-height: 1;

  /* Icoon wrapper volgt altijd tekstkleur van de knop */
  color: inherit !important;
}

/* Icongrootte gelijk aan tekst */
.idp-atc-buy-now .idp-btn .idp-btn__icon svg,
.idp-atc-buy-now .idp-btn .idp-btn__icon i {
  width: 1em;
  height: 1em;
}

/* Spacing wordt door Elementor 'Icoon afstand' geregeld:
   .has-icon-left => margin-right
   .has-icon-right => margin-left
*/

/* --- Iconen dezelfde kleur als tekst (incl. hover) --- */

/* Voor SVG-iconen: forceer fill/stroke = currentColor
   Gebruik !important om inline fills van icon-libraries te overrulen */
.idp-atc-buy-now .idp-btn .idp-btn__icon svg,
.idp-atc-buy-now .idp-btn .idp-btn__icon svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Voor font-based iconen (<i> uit Elementor libraries) */
.idp-atc-buy-now .idp-btn .idp-btn__icon i,
.idp-atc-buy-now .idp-btn .idp-btn__icon i:before {
  color: inherit !important;
}

/* Zorg dat ook de tekst-span zelf geen eigen kleur vasthoudt */
.idp-atc-buy-now .idp-btn .idp-btn__text { 
  color: inherit !important; 
}

/* Optioneel: nette overgang bij hover-kleurwissel */
.idp-atc-buy-now .idp-btn,
.idp-atc-buy-now .idp-btn .idp-btn__icon,
.idp-atc-buy-now .idp-btn .idp-btn__icon svg,
.idp-atc-buy-now .idp-btn .idp-btn__icon i {
  transition: color .2s ease, fill .2s ease, stroke .2s ease, background-color .2s ease, border-color .2s ease;
}

/* Theme-modus (Motta) expliciet: kleur spiegelen naar iconen */
.idp-atc-buy-now .motta-button .idp-btn__icon,
.idp-atc-buy-now .motta-button .idp-btn__icon svg,
.idp-atc-buy-now .motta-button .idp-btn__icon svg * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Als Motta de tekstkleur op een interne span zet, spiegel die naar ons */
.idp-atc-buy-now .motta-button .motta-button__text { 
  color: inherit !important; 
}