/* ==========================================================================
   Buttons & Link Arrows
   ========================================================================== */

/* ---- Primary Button (filled) ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 12px 24px;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-body-bold);
  line-height: var(--lh-body);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default);
}

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

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

.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

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

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

.btn--white:hover {
  background-color: var(--color-border);
}

.btn--full {
  width: 100%;
}

/* ---- Link Arrow (text → ) ---- */

.link-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 12px 8px 12px 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-body-bold);
  line-height: var(--lh-body);
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 40, 76, 0.2);
  transition: color var(--duration-normal) var(--ease-default);
}

.link-arrow:hover {
  color: var(--color-accent);
}

.link-arrow--white {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

.link-arrow--white:hover {
  color: var(--color-border);
}

.link-arrow--accent {
  color: var(--color-accent);
}

/* ---- Navigation Arrows (sliders) ---- */

.nav-arrows {
  display: flex;
  gap: var(--gap-xs);
}

.nav-arrows__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--color-primary);
  transition: opacity var(--duration-fast) var(--ease-default);
}

.nav-arrows__btn:hover {
  opacity: 0.7;
}

.nav-arrows__btn svg {
  width: 32px;
  height: 32px;
}

.nav-arrows__btn--prev svg {
  transform: rotate(180deg);
}