/* ============================================================
   BUTTON.CSS  –  Gedeelde knoppen
   ============================================================ */

/* gevulde knop (blauw) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: url('../img/cursor-pointer.svg') 8 3, pointer;
  border: 2px solid var(--blauw);
  background: var(--blauw);
  color: var(--wit);
  transition: background-color .25s ease, color .25s ease, transform .15s ease;
}
.btn:hover { background: var(--lichtblauw); border-color: var(--lichtblauw); }
.btn:active { transform: translateY(1px); }

.btn svg { width: 18px; height: 18px; }

/* omlijnde knop (transparant met rand) */
.btn-outline {
  background: transparent;
  color: currentColor;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.15); }

/* omlijnde knop op donkere (blauwe) achtergrond */
.btn-outline-light {
  background: transparent;
  border-color: var(--wit);
  color: var(--wit);
}
.btn-outline-light:hover { background: rgba(0, 0, 0, 0.18); }