.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 400;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
}

.btn-primary:hover {
  background: var(--btn-primary-hover-bg);
  transform: scale(1.03);
}

.btn-vert {
  background: var(--btn-vert-bg);
  color: var(--btn-vert-color);
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  font-size: 13px;
}

.btn-vert:hover {
  background: var(--btn-vert-hover-bg);
  transform: scale(1.03);
}

.btn-outline,
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  border: var(--border-med);
}

.btn-outline:hover,
.btn-secondary:hover {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
}

.btn-yellow {
  background: var(--btn-yellow-bg);
  color: var(--btn-yellow-color);
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
}

.btn-yellow:hover {
  background: var(--btn-primary-hover-bg);
  transform: scale(1.03);
}

.btn-ghost {
  background: none;
  color: var(--color-text);
  font-size: 13px;
  opacity: 0.6;
  padding: 0;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-ghost::after {
  content: "→";
  opacity: 0;
  transform: translateX(-4px);
  transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}

.btn-ghost:hover {
  opacity: 1;
}

.btn-ghost:hover::after {
  opacity: 1;
  transform: translateX(5px);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 12px;
}

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-icon:hover {
  background: var(--color-yellow-dark);
}

.btn-icon.btn-sm {
  width: 36px;
  height: 36px;
  font-size: 16px;
}