/* BuitenSneupen.nl — Knop-classes
   Een class uit Elementor komt op de widget-wrapper, niet op de <a>.
   Daarom stylen we de <a> erbinnen: ".bs-btn-x a". !important
   overschrijft de Elementor-standaard. Eén class per knop:
   bs-btn-primary | bs-btn-secondary | bs-btn-warm | bs-btn-ghost
   (optioneel kleiner: zet "bs-btn-sm" ernaast). */

/* Gedeelde basis */
.bs-btn-primary a,
.bs-btn-secondary a,
.bs-btn-warm a,
.bs-btn-ghost a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.5em !important;
  font-family:'Montserrat',-apple-system,sans-serif !important;
  font-weight:600 !important;
  font-size:15px !important;
  line-height:1.2 !important;
  letter-spacing:.04em !important;
  text-decoration:none !important;
  border:2px solid transparent !important;
  border-radius:9999px !important;
  padding:12px 28px !important;
  cursor:pointer !important;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease !important;
}

/* Primary — zwart (standaard-CTA) */
.bs-btn-primary a{
  background-color:#000000 !important;
  color:#FFFFFF !important;
  border-color:#000000 !important;
}
.bs-btn-primary a:hover,
.bs-btn-primary a:focus{
  background-color:#37514D !important;
  border-color:#37514D !important;
  color:#FFFFFF !important;
}

/* Secondary — outline zwart */
.bs-btn-secondary a{
  background-color:transparent !important;
  color:#000000 !important;
  border-color:#000000 !important;
}
.bs-btn-secondary a:hover,
.bs-btn-secondary a:focus{
  background-color:#000000 !important;
  color:#FFFFFF !important;
}

/* Warm — cranberry (shop / koop) */
.bs-btn-warm a{
  background-color:#B6594C !important;
  color:#FFFFFF !important;
  border-color:#B6594C !important;
}
.bs-btn-warm a:hover,
.bs-btn-warm a:focus{
  background-color:#9E4A3E !important;
  border-color:#9E4A3E !important;
  color:#FFFFFF !important;
}

/* Ghost — subtiele outline */
.bs-btn-ghost a{
  background-color:transparent !important;
  color:#37514D !important;
  border-color:#D6C8B8 !important;
}
.bs-btn-ghost a:hover,
.bs-btn-ghost a:focus{
  border-color:#000000 !important;
  color:#37514D !important;
}

/* Toegankelijkheid — toetsenbordfocus */
.bs-btn-primary a:focus-visible,
.bs-btn-secondary a:focus-visible,
.bs-btn-warm a:focus-visible,
.bs-btn-ghost a:focus-visible{
  outline:3px solid #90AEB2 !important;
  outline-offset:3px !important;
}

/* Kleine variant (stapelbaar naast een kleurclass) */
.bs-btn-sm a{
  font-size:13px !important;
  padding:8px 18px !important;
}

/* Mobiel (≤767px): iets kleiner */
@media (max-width:767px){
  .bs-btn-primary a,
  .bs-btn-secondary a,
  .bs-btn-warm a,
  .bs-btn-ghost a{
    font-size:14px !important;
    padding:10px 22px !important;
  }
  .bs-btn-sm a{
    font-size:12px !important;
    padding:7px 16px !important;
  }
}