/* Buttons */
.btn, input[type="submit"] {
  color: var(--button-primary-text);
  background-color: var(--button-primary);
  border: none;
  cursor: pointer;
  line-height: 1.25;
  padding: .75em 1.5em;
  border-radius: 1.5em;
  text-decoration: none;
  text-align: center;
  font-weight: var(--heavy);
  text-transform: uppercase;
  display: inline-block;
  transition: all 150ms ease-out;
  font-size: .875rem;
}

@media (min-width: 768px) {
  .btn, input[type="submit"] {
    font-size: .9375rem;
  }
}

.btn.h5, input[type="submit"].h5 {
  font-size: var(--h5);
}

.btn.h6, input[type="submit"].h6 {
  font-size: var(--h6);
}

.btn:has(span.icon) {
  position: relative;
  padding-left: 2.75em;
}

.btn span.icon {
  position: absolute;
  padding-inline: 1em;
  left: 0;
  font-size: 1em;
}

.btn:hover, .btn:focus {
  background-color: var(--button-primary-hover, var(--button-secondary));
  color: var(--button-primary-text);
  text-decoration: none;
}

.btn:active {
  translate: 0 .1em;
}


/* Primary Button */
.btn-primary {
  box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
}

.btn-primary:active {
  box-shadow: 0 0px 0px rgba(0, 0, 0, .2);
}


/* Secondary Button */
.btn-secondary {
  color: var(--button-primary);
  background: none;
  box-shadow: inset 0 0 0 2px var(--button-primary), inset 0 0 0 0 var(--button-primary);
}

.btn-secondary:hover, .btn-secondary:focus {
  background: none;
  color: var(--button-primary);
  box-shadow: inset 0 0 0 3px var(--button-primary), inset 0 0 0 0 var(--button-primary);
}

.btn-secondary:active {
  color: var(--button-primary);
  box-shadow: inset 0 0 0px 1px var(--button-primary), inset 0 -2px 4px 0 var(--button-primary);
}

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


/* Multiple buttons next to each other */

.buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
}

.buttons.center {
  justify-content: center;
}

.buttons.start {
  justify-content: flex-start;
}

.buttons.end {
  justify-content: flex-end;
}