/* ==========================================================================
   Bridle2Fit · knop, hoofdstuk 4.1
   min-height, nooit height. Twee maten, standaard en compact.
   Onder 768 px mag het label op twee regels en groeit de knop mee in hoogte.
   Vanaf 768 px blijft het label op één regel en krimpt de knop niet.
   ========================================================================== */

.b2f-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-shrink:0;
  min-height:var(--b2f-btn-h);   /* nooit height */
  min-width:44px;
  max-width:100%;
  padding:var(--b2f-btn-py) var(--b2f-btn-px);
  white-space:normal;           /* onder 768 px, zie de media query */
  text-align:center;
  box-sizing:border-box;
  margin:0;
  border:1px solid transparent;
  border-radius:var(--b2f-radius);
  background:transparent;
  color:inherit;
  --b2f-btn-fg:currentColor;
  --b2f-btn-h:52px;
  --b2f-btn-px:28px;
  --b2f-btn-py:10px;
  font:600 var(--b2f-btn-fs, var(--b2f-fs-button))/1.25 var(--b2f-font);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:
    filter var(--b2f-dur) var(--b2f-ease),
    border-color var(--b2f-dur) var(--b2f-ease),
    color var(--b2f-dur) var(--b2f-ease),
    background-color var(--b2f-dur) var(--b2f-ease);
}
.b2f-btn svg{flex-shrink:0;width:16px;height:auto}

/* compact: vaste balken onderaan, de zoekknop bij de store locator, knoppen in een kaart. */
.b2f-btn--compact{
  --b2f-btn-h:48px;
  --b2f-btn-px:20px;
  --b2f-btn-py:8px;
  --b2f-btn-fs:12px;
}

@media (min-width:768px){
  .b2f-btn{
    --b2f-btn-h:56px;
    --b2f-btn-py:0px;
    white-space:nowrap;
    line-height:1.1;
  }
  .b2f-btn--compact{
    --b2f-btn-h:48px;
    --b2f-btn-fs:12.5px;
  }
}

.b2f-btn:focus-visible{
  outline:2px solid var(--b2f-focus);
  outline-offset:2px;
}

/* gold: grond goud, tekst graphite, geen rand. */
.b2f-btn--gold{
  background:var(--b2f-gold);
  color:var(--b2f-graphite);
  --b2f-btn-fg:var(--b2f-graphite);
}
.b2f-btn--gold:hover{
  color:var(--b2f-graphite);
  filter:brightness(1.08);
}

/* line: op licht. */
.b2f-btn--line{
  border-color:var(--b2f-charcoal);
  color:var(--b2f-charcoal);
  --b2f-btn-fg:var(--b2f-charcoal);
}
.b2f-btn--line:hover{
  border-color:var(--b2f-gold-deep);
  color:var(--b2f-charcoal);
}

/* line-dark: op donker. */
.b2f-btn--line-dark{
  border-color:var(--b2f-line-dark);
  color:var(--b2f-warm-white);
  --b2f-btn-fg:var(--b2f-warm-white);
  --b2f-focus:var(--b2f-gold);
}
.b2f-btn--line-dark:hover{
  border-color:var(--b2f-gold);
  color:var(--b2f-warm-white);
}

/* Volle breedte, bijvoorbeeld in de sticky balk of op de catalogus mobiel. */
.b2f-btn--block{display:flex;width:100%}

/* Uit: 45% dekking. Werkt op <button disabled> en op een link met aria-disabled. */
.b2f-btn:disabled,
.b2f-btn[aria-disabled="true"],
.b2f-btn.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:none;
}
.b2f-btn--line:disabled:hover,
.b2f-btn--line[aria-disabled="true"]:hover{border-color:var(--b2f-charcoal)}
.b2f-btn--line-dark:disabled:hover,
.b2f-btn--line-dark[aria-disabled="true"]:hover{border-color:var(--b2f-line-dark)}

/* Bezig: het label blijft staan maar wordt onzichtbaar, zodat de knop zijn
   breedte houdt en de pagina niet springt (bord Toestanden). Zet ook aria-busy. */
.b2f-btn.is-loading{
  position:relative;
  cursor:progress;
  color:transparent;
}
.b2f-btn.is-loading > *{visibility:hidden}
.b2f-btn.is-loading::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:14px;height:14px;
  border:1.5px solid var(--b2f-btn-fg);
  border-right-color:transparent;
  border-radius:var(--b2f-radius-round);
  animation:b2f-spin .8s linear infinite;
}
@keyframes b2f-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .b2f-btn{transition:none}
  .b2f-btn.is-loading::after{animation:none}
}