.wl-btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-heading);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.wl-btn:hover {
  transform: translateY(-1px);
}

.wl-btn__body {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  position: relative;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--radius-pill);
  border: var(--btn-border-width) solid transparent;
}

.wl-btn--primary .wl-btn__body {
  background: var(--color-primary);
  color: var(--color-text-invert);
  border-color: var(--color-primary);
}

.wl-btn--primary-white .wl-btn__body {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}

.wl-btn--secondary .wl-btn__body {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.wl-btn--secondary-white .wl-btn__body {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.wl-btn__icon {
  width: var(--btn-icon);
  height: var(--btn-icon);
  flex: 0 0 auto;
  margin-right: -2px;
  border-radius: 50%;
  overflow: hidden;
}

.wl-btn__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wl-btn__label {
  white-space: nowrap;
}

.wl-btn__badge {
  position: absolute;
  bottom: -10px;
  right: -5px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--fs-badge);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Bez ikony badge niżej i dalej w prawo (wg Figmy) */
.wl-btn--no-icon .wl-btn__badge {
  bottom: -12px;
  right: -7px;
}

.btn-row,
.wl-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--btn-row-gap);
  padding-bottom: 12px;
}