/* Botão Inicial */
.btn-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 300px;
    margin-top: 10px;
    padding: 6px;
    color: var(--white);
    background-color: #771611;
    border: #771611;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 100ms ease-in-out;
}

.btn-initial:hover {
  background-color: #771611;
  border-color: #771611;
}

.btn-initial:focus {
  background-color: #16b384;
  outline: 2px solid #16b384;
  border: 2px solid var(--body-bg);
}

/* Botão Desabilitado */
button:disabled {
  background-color: transparent;
  border: 2px solid var(--border-color);
  color: var(--secondary-color);
  transition: all 300ms ease-in-out;
}

button:disabled:hover {
  background-color: transparent;
  border: 2px solid var(--border-color);
  color: var(--secondary-color);
}

/* Botão de Cálculo */
.btn-calc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 40px;
  padding: 6px;
  color: var(--white);
  background-color: #771611;
  border: 2px #771611;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 100ms ease-in-out;
}

.btn-calc:hover {
  background-color: #157347;
  border-color: #157347;
}

.btn-calc:focus {
  background-color: #157347;
  outline: 2px solid #157347;
  border: 2px solid var(--tertiary-bg);
}

/* Botão de Voltar */
.btn-back {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border-radius: var(--border-radius-pill);
  background-color: var(--tertiary-bg);
  color: var(--body-color);
  border: none;
  transition: all 300ms ease-in-out;
  cursor: pointer;
  opacity: 0.6;
}

.btn-back:hover,
.btn-back:focus {
  background-color: var(--secondary-bg);
  opacity: 1;
}

/* Botão pequeno */
.btn-sm {
  width: 80px;
}

/* Botão grande */
.btn-lg {
  width: 120px;
}

/* Botão extra grande */
.btn-xl {
  width: 150px;
}

/* Botão muito grande */
.btn-xxl {
  width: 180px;
}

/* Botão de Avançar */
.btn-container {
  display: flex;
  justify-content: end;
  margin-top: 40px;
}
.btn-next {
    padding: 6px;
    border-radius: var(--border-radius);
    border: 2px solid #771611;
    background-color: #771611;
    color: var(--white);
    width: 40%;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 100ms ease-in-out;
    cursor: pointer;
}

.btn-next:hover {
  background-color: #157347;
  border-color: #157347;
}

.btn-next:focus {
  background-color: #157347;
  outline: 2px solid #157347;
  border: 2px solid var(--tertiary-bg);
}

/* Botão "Saiba Mais" */
.btn-learn-more {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 120px;
  padding: 5px;
  border-radius: var(--border-radius);
  appearance: none;
  color: var(--link-color);
  border: none;
  background-color: var(--tertiary-bg);
  cursor: pointer;
  transition: all 300ms ease-in-out;
  font-size: 0.875rem;
}

.btn-learn-more:hover,
.btn-learn-more:focus {
  color: var(--link-hover-color);
  text-decoration: var(--link-decoration);
}

.btn-lm-container {
  display: flex;
  justify-content: end;
}

.btn-lm {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  align-items: center;
  background-color: transparent;
  border: 1px solid var(--border-color);
  opacity: 0.6;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 300ms ease-in-out;
}

.btn-lm:hover,
.btn-lm:focus {
  background-color: var(--secondary-bg);
  opacity: 1;
}

.btn-lm svg {
  width: 1rem;
  height: auto;
  color: var(--body-color);
}

/* Botão "Reset Form" */

.btn-reset {
  display: flex;
  padding: 5px;
  align-items: center;
  background-color: transparent;
  border: 1px solid var(--border-color);
  opacity: 0.6;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 300ms ease-in-out;
}

.btn-reset:hover,
.btn-reset:focus {
  background-color: var(--secondary-bg);
  opacity: 1;
}

.btn-reset svg {
  width: 1rem;
  height: auto;
  color: var(--body-color);
}