.btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  min-width: 360px;

  height: 62px;

  padding: 0 30px;

  border: none;

  border-radius: 16px;

  background: linear-gradient(180deg, #205d90 0%, #174f80 100%);

  color: white;

  font-size: 1.08rem;

  font-weight: 600;

  text-decoration: none;

  cursor: pointer;

  transition:
    transform 0.18s,
    box-shadow 0.18s,
    background 0.18s;

  box-shadow:
    0 12px 28px rgba(22, 74, 119, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

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

  background: linear-gradient(180deg, #25679d, #1a578d);

  box-shadow:
    0 18px 36px rgba(22, 74, 119, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;
}

.btn-icon img {
  width: 28px;

  height: 28px;

  filter: brightness(0) invert(1);
}

.btn-text {
  flex: 1;

  text-align: center;
}

.btn-arrow {
  display: flex;

  align-items: center;

  justify-content: center;
}

.btn-arrow img {
  width: 22px;

  height: 22px;

  filter: brightness(0) invert(1);

  transition: transform 0.18s;
}

.btn:hover .btn-arrow img {
  transform: translateX(5px);
}
/*--------------------------------------------------*/

.btn:active {
  transform: scale(0.985);
}

/*=====================================================

PRIMARY

=====================================================*/

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

  color: white;

  box-shadow: 0 6px 18px rgba(35, 98, 143, 0.18);
}

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

/*=====================================================

SECONDARY

=====================================================*/

.btn-secondary {
  background: white;

  color: var(--primary);

  border: 1px solid var(--border);
}

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

/*=====================================================

SMALL

=====================================================*/

.btn-small {
  min-height: 42px;

  padding: 0 18px;

  font-size: 0.88rem;
}

/*=====================================================

FULL WIDTH

=====================================================*/

.btn-block {
  width: 260px;

  max-width: 100%;
}

/*=====================================================

FOCUS

=====================================================*/

.btn:focus-visible {
  outline: none;

  border-color: #66b4ff;

  box-shadow: 0 0 0 4px rgba(102, 180, 255, 0.2);
}