/*==================================================
BUTTONS
==================================================*/

.btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.75rem;

  height: 56px;

  padding: 0 28px;

  border-radius: var(--radius-pill);

  font-family: var(--heading-font);

  font-weight: 600;

  font-size: 1rem;

  transition:
    transform var(--duration-normal) ease,
    background-color var(--duration-normal) ease,
    border-color var(--duration-normal) ease,
    box-shadow var(--duration-normal) ease;

  cursor: pointer;

  user-select: none;

  position: relative;

  overflow: hidden;
}

.btn::before {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    120deg,
    transparent,
    var(--white-alpha-25),
    transparent
  );

  translate: -150%;

  transition: translate var(--duration-slow) ease;
}

.btn:hover::before {
  translate: 150%;
}

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

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--primary-soft);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 3px solid var(--secondary-alpha-35);

  outline-offset: 4px;
}

.btn-primary:hover {
  background: var(--primary-dark);

  box-shadow: var(--shadow-lg);
}

.btn-outline {
  border: 2px solid var(--primary);

  color: var(--primary);

  background: var(--white);
}

.btn-outline:hover {
  background: var(--primary-soft);
}

.btn-block {
  width: 100%;
}