/* Transição suave entre páginas do formulário */
.survey-page {
  display: none;
  opacity: 0;
  transition: opacity 0.4s;
  min-height: 300px;
}

.survey-page.active {
  display: block;
  opacity: 1;
  transition: opacity 0.4s;
}

.form-label.required::after {
  content: '*';
  color: #C76F47;
  margin-left: 2px;
  font-size: 1.2em;
}

.modal-content {
  border-radius: 20px;
  overflow: hidden;
}

.progress {
  height: 7px;
  background: #e8e8e8;
  margin-bottom: 24px;
}

.progress-bar {
  background: var(--accent-color, #C76F47);
  transition: width 0.4s;
}

.btn-accent {
  background: var(--accent-color, #C76F47);
  color: #fff;
  border-radius: 50px;
  padding-left: 2em;
  padding-right: 2em;
  transition: background 0.3s;
}

.btn-accent:hover {
  background: #a95d34;
  color: #fff;
}

.modal-header,
.modal-footer {
  background-image: url('../img/rodape.png');
  background-repeat: repeat;
  background-size: auto;
  /* Exemplo de sobreposição usando um gradiente translúcido */
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;

}

.modal-header .modal-title,
.modal-footer .modal-title {
  color: #4F616D;
  margin-top: 1%;
  margin-bottom: 1.5vh;
}

.modal-header .btn,
.modal-footer .btn {
  margin-top: 1.5vh;
}

.modal.show {
  z-index: 11000 !important;
}

/* Garante que backdrop também fique acima do banner */
.modal-backdrop.show {
  z-index: 10999 !important;
}