/* 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;
}

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

.btn-secondary:hover {
  background: #a95d34;
  color: #fff;
  border-color: none;
}


.modal-header,
.modal-footer {
  background-color:#C76F47; 
  color: white;
  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-body{
  background-color:#C76F47; 
  color: white;
}
.modal.show {
  z-index: 11000 !important;
}

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

/*Survey Page Form*/
.survey-page input {
  background: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  color: #fff;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}

.survey-page input:hover,
.survey-page input:focus {
  border-bottom: 2px solid #fff;
  background: transparent;
  color: #fff;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}