.btn {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 1.2rem 1.4rem;
  transition: 0.2s;
  white-space: nowrap;
}

.btn:disabled {
  filter: grayscale(1);
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  cursor: pointer;
}

.btn:has(img),
.btn:has(svg) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn img,
.btn svg {
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.btn img,
.btn svg:hover {
color: #fff;
}

.btn-primary {
  color: #C7A943;
  border: 1px solid #C7A943;
  background: transparent;
}

.btn-primary:hover,
.btn-primary.active {
  color: var(--white);
  border: 1px solid #fff;
  opacity: 1;
}

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

.btn-secondary:hover,
.btn-secondary.active {
  color: var(--black);
  opacity: 0.7;
}

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

.btn-outline:hover,
.btn-outline.active {
  color: var(--color-primary);
  opacity: 0.7;
}

.btn-shadow {
  box-shadow: 0px 5px 40px 0px rgba(199, 169, 67, 0.50);
}

.btn-black {
  color: var(--white);
  border-radius: 65px;
  background: #171717;
  padding: 12px 16px;
}

.btn-black:hover,
.btn-black.active {
  color: var(--white);
  opacity: 0.7;
}

input {
  display: inline-flex;
  align-items: center;
  color: #fff;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.20);
  padding: 17px 20px;
  min-height: 58px;
}

input::placeholder {
  color: #fff;
}

.btn-square {
  padding: 7px;
  aspect-ratio: 1 / 1;
}

.btn-square img,
.btn-square svg {
  height: 24px
}