/* 
Theme Name: Brand of Today
Theme URI: https://brandoftoday.nl
Description: Dit thema van Brand of Today biedt je een gebruiksvriendelijke basis voor jouw website. Perfect afgestemd op jouw behoeften, met een overzichtelijke uitstraling en eenvoudige mogelijkheden om zelf aanpassingen te doen.
Author: Brand of Today
Author URI: https://brandoftoday.nl
Template: hello-elementor
Version: 2.0.0
Text Domain: brandoftoday
Tags: Brand of Today development
*/

/* =========================================
   Evermark button anim 0
   Werkt als .button-anim0 op de knop OF op de widget staat
   ========================================= */

/* 1) Als .button-anim0 op de BUTTON zelf staat */
.elementor-button.button-anim0 {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  background: transparent !important;
  color: #13151C !important;
  border-radius: 0px !important;
  padding: 0em 0.5em 0.5em 1.5em !important;
  overflow: visible;
  text-align: left !important;

  /* force left placement als Elementor centreert */
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* wrapper binnen de knop */
.elementor-button.button-anim0 .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  width: auto !important;
}

/* tekst */
.elementor-button.button-anim0 .elementor-button-text {
  transition: transform 0.3s ease;
  will-change: transform;
}

/* icoon cirkel */
.elementor-button.button-anim0 .elementor-button-icon {
  background: #00FFC4 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  font-size: 2em;
  margin-left: 0.3em;
  flex-shrink: 0;
}

/* animaties */
.elementor-button.button-anim0 .elementor-button-icon svg {
  transition: transform 0.3s ease;
}

.elementor-button.button-anim0:hover .elementor-button-icon svg {
  transform: rotate(45deg);
}

.elementor-button.button-anim0:hover .elementor-button-text {
  transform: translateX(5px);
}

/* 2) Als .button-anim0 op de WIDGET (container) staat */
.button-anim0.elementor-widget,
.button-anim0.elementor-widget-button,
.button-anim0 .elementor-widget-container {
  text-align: left !important;
}

.button-anim0 .elementor-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  background: transparent !important;
  color: #13151C !important;
  border-radius: 0px !important;
  padding: 0em 0em 0em 0em !important;
  overflow: visible;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.button-anim0 .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  width: auto !important;
}

.button-anim0 .elementor-button-text {
  transition: transform 0.3s ease;
  will-change: transform;
}

.button-anim0 .elementor-button-icon {
  background: #00FFC4 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  font-size: 2em;
  margin-left: 0.3em;
  flex-shrink: 0;
}

.button-anim0 .elementor-button-icon svg {
  transition: transform 0.3s ease;
}

.button-anim0:hover .elementor-button-icon svg {
  transform: rotate(45deg);
}

.button-anim0:hover .elementor-button-text {
  transform: translateX(5px);
}



/* =========================================
   Evermark button anim 1
   Tekst: Wit | Icoon: Donker | Class: .button-anim1
   ========================================= */

/* 1) Als .button-anim1 op de BUTTON zelf staat */
.elementor-button.button-anim1 {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  background: transparent !important;
  color: #FFFFFF !important; /* Tekst kleur naar wit */
  border-radius: 0px !important;
  padding: 0em 0.5em 0.5em 1.5em !important;
  overflow: visible;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Wrapper binnen de knop */
.elementor-button.button-anim1 .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  width: auto !important;
}

/* Tekst */
.elementor-button.button-anim1 .elementor-button-text {
  transition: transform 0.3s ease;
  will-change: transform;
  color: #FFFFFF !important; /* Forceer wit voor de tekst */
}

/* Icoon cirkel */
.elementor-button.button-anim1 .elementor-button-icon {
  background: #00FFC4 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  font-size: 2em;
  margin-left: 0.3em;
  flex-shrink: 0;
  color: #13151C !important; /* Icoon kleur donker */
}

/* Zorg dat de SVG binnen de cirkel ook donker blijft */
.elementor-button.button-anim1 .elementor-button-icon svg {
  fill: #13151C !important;
  transition: transform 0.3s ease;
}

.elementor-button.button-anim1:hover .elementor-button-icon svg {
  transform: rotate(45deg);
}

.elementor-button.button-anim1:hover .elementor-button-text {
  transform: translateX(5px);
}

/* 2) Als .button-anim1 op de WIDGET (container) staat */
.button-anim1.elementor-widget,
.button-anim1.elementor-widget-button,
.button-anim1 .elementor-widget-container {
  text-align: left !important;
}

.button-anim1 .elementor-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  background: transparent !important;
  color: #FFFFFF !important; /* Tekst kleur naar wit */
  border-radius: 0px !important;
  padding: 0em 0em 0em 0em !important;
  overflow: visible;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.button-anim1 .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  width: auto !important;
}

.button-anim1 .elementor-button-text {
  transition: transform 0.3s ease;
  will-change: transform;
  color: #FFFFFF !important;
}

.button-anim1 .elementor-button-icon {
  background: #00FFC4 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  font-size: 2em;
  margin-left: 0.3em;
  flex-shrink: 0;
  color: #13151C !important; /* Icoon kleur donker */
}

.button-anim1 .elementor-button-icon svg {
  fill: #13151C !important;
  transition: transform 0.3s ease;
}

.button-anim1:hover .elementor-button-icon svg {
  transform: rotate(45deg);
}

.button-anim1:hover .elementor-button-text {
  transform: translateX(5px);
}









/* cases button


/* De bewegende button (cursor follower) */
.case-cursor-follower {
    position: fixed; /* Belangrijk voor het volgen van de muis */
    pointer-events: none; /* Zorgt dat de button niet in de weg zit voor klikken */
    width: auto;
    height: 50px;
    padding: 0 25px;
    background-color: #00FFC4;
    border-radius: 50px; /* Volledig afgerond zoals foto */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0; /* Standaard onzichtbaar */
    transition: opacity 0.3s ease; /* De fade-in */
    transform: translate(-50%, -50%); /* Centreert de pill op de muis */
}

/* De zwarte stip en tekst */
.case-cursor-follower::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #13151C;
    border-radius: 50%;
    margin-right: 12px;
}

.case-cursor-follower span {
    color: #13151C;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
}

/* Zichtbaar maken bij hover op de container */
.case-container:hover .case-cursor-follower {
    opacity: 1;
}