/*================ GLOBAL RESET ================*/
body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  padding-bottom: 100px; /* Espaço para rodapé */
  background: linear-gradient(135deg, #f8f6fa 0%, #e9e3f5 100%);
  color: #3a3a3a;
  min-height: 100vh;
}

.hidden {
  display: none;
}

/*================ TYPOGRAPHY ================*/
h1, h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  margin-bottom: 1rem;
}

.block-title {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  color: #620070;
}

/*================ BUTTONS ================*/
.btn {
  background-color: #620070;
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 50px;
}

.btn:hover {
  background-color: #7EEDC5;
  color: #3a3a3a;
}

.btn-next {
  display: block;
  padding: 10px 20px;
  font-size: 0.9rem;
  margin-top: 20px;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

.btn.fade-down {
  animation: fadeDown 1s ease forwards;
}

.btn.fade-up {
  animation: fadeUp 1s ease forwards;
}

/*================ CONTAINERS ================*/
.welcome-container,
.form-container {
  max-width: 900px;
  margin: 5% auto;
  padding: 40px 20px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  animation: fadeIn 0.6s ease;
  text-align: center;
}

.welcome-container {
  max-width: 800px;
  margin-top: 10%;
}

.form-container.hidden {
  display: none;
}

/*================ FORM BLOCO ================*/
.form-block {
  display: none;
  animation: fadeIn 1s ease;
}

.form-block.active {
  display: block;
}

.form-block.fade-down {
  animation: fadeDown 1s ease forwards;
}

/*================ QUESTION ================*/
.question {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 6px;
  background-color: #f9f9f9;
  border: 2px solid #f9f9f9;
}

.question-label {
  display: block;
  margin-bottom: 10px;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  color: #4B006E;
  font-size: 1.15rem;
  background: #f3edf3;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(98,0,112,0.04);
  letter-spacing: 0.01em;
}

.question.active {
  background-color: #f3edf3;
  border-color: #620070;
  transition: background-color 0.6s ease, border 0.6s ease;
  z-index: 0;
}

.question.unanswered {
  background-color: #ffe6e6;
  border-color: #ff4d4f;
  z-index: 1;
}

/*================ LIKERT SCALE ================*/
.likert-scale {
  display: flex;
  justify-content: space-evenly;
  gap: 12px;
}

.likert-scale label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.9rem;
}

.likert-scale input[type="radio"] {
  margin-bottom: 4px;
  cursor: pointer;
}

/*================ MODAIS ================*/
.modal-overlay,
.modal-back,
.modal-thank-you {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-overlay,
.modal-back {
  background: rgba(0, 0, 0, 0.5);
}

.modal-thank-you {
  background: #fff;
  animation: fadeIn 0.6s ease;
}

.modal,
.modal-back .modal,
.modal-thank-you .modal {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal h2,
.modal-back h2,
.modal-thank-you h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #333;
}

.modal p,
.modal-back p,
.modal-thank-you p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #555;
}

.modal button,
.modal-back button,
.modal-thank-you button {
  background-color: #620070;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.modal button:hover,
.modal-back button:hover,
.modal-thank-you button:hover {
  background-color: #7EEDC5;
  color: #3a3a3a;
}

.modal-overlay.active,
.modal-back.active,
.modal-thank-you.active {
  display: flex;
}

/*================ DROPDOWN ================*/
.dropdown {
  width: 100%;
  padding: 10px 15px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  color: #333;
  background-color: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 8px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
}

/*================ FOOTER ================*/
.footer {
  text-align: center;
  padding: 10px 0;
  font-size: 0.6rem;
  color: #555;
  background-color: #CABACC;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

/*================ ANIMATIONS ================*/
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

@keyframes slideHighlight {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

/* ========== MODERNIZAÇÃO VISUAL E UX ========== */

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  padding-bottom: 100px;
  background: linear-gradient(135deg, #f8f6fa 0%, #e9e3f5 100%);
  color: #3a3a3a;
  min-height: 100vh;
}

@media (max-width: 700px) {
  .form-container, .welcome-container, .error-container {
    max-width: 98vw;
    padding: 18px 4vw;
    margin: 2vw auto 60px auto;
    border-radius: 10px;
  }
  .block-title { font-size: 1.2rem; }
  .footer {
    font-size: 0.7rem;
    position: static;
    width: 100vw;
    padding-bottom: 60px;
    background-color: #CABACC;
    z-index: 10;
  }
  .logo-footer-container {
    margin: 24px auto 12px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    z-index: 5;
  }
  .logo-footer-container .logo {
    max-width: 60vw;
    min-width: 90px;
    height: auto;
    margin-bottom: 8px;
  }
  body {
    padding-bottom: 120px;
  }
  .btn-next {
    width: auto;
    margin-left: auto;
    margin-right: 0;
    display: block;
    text-align: right;
  }
  .question-label {
    font-size: 1rem;
    padding: 10px 8px;
  }
}

/* Card visual para containers principais */
.form-container, .welcome-container, .error-container {
  background: rgba(255,255,255,0.98);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(98,0,112,0.10), 0 1.5px 4px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s;
}
.form-container:hover, .welcome-container:hover, .error-container:hover {
  box-shadow: 0 12px 36px rgba(98,0,112,0.16), 0 2px 8px rgba(0,0,0,0.07);
}

/* Modern button with ripple effect */
.btn, .btn-next, .btn-voltar, .btn-start, .modal button, .modal-back button, .modal-thank-you button {
  background: #620070;
  color: #fff;
  border: none;
  padding: 13px 32px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(98,0,112,0.08);
  transition: background 0.3s, color 0.3s, box-shadow 0.2s, transform 0.1s;
  position: relative;
  overflow: hidden;
}
.btn:hover, .btn-next:hover, .btn-voltar:hover, .btn-start:hover, .modal button:hover, .modal-back button:hover, .modal-thank-you button:hover {
  background: #7EEDC5;
  color: #3a3a3a;
  box-shadow: 0 4px 16px rgba(98,0,112,0.13);
  transform: translateY(-2px) scale(1.03);
}

/* Ripple effect */
.btn:active::after, .btn-next:active::after, .btn-voltar:active::after, .btn-start:active::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 200%;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 0.4s linear;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Loader spinner */
.loader {
  border: 4px solid #e9e3f5;
  border-top: 4px solid #620070;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  animation: spin 0.8s linear infinite;
  margin: 30px auto;
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  background: transparent;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Microinterações e animações suaves */
.fade-in { animation: fadeIn 0.7s cubic-bezier(.4,0,.2,1); }
.fade-up { animation: fadeUp 0.7s cubic-bezier(.4,0,.2,1) forwards; }
.fade-down { animation: fadeDown 0.5s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(20px); }
}

/* Cards para blocos do formulário */
.form-block {
  display: none;
  background: #f9f7fc;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(98,0,112,0.07);
  margin-bottom: 32px;
  padding: 32px 18px 18px 18px;
  animation: fadeIn 0.7s cubic-bezier(.4,0,.2,1);
}
.form-block.active { display: block; }

/* Questões com destaque visual */
.question {
  margin-bottom: 22px;
  padding: 18px 12px;
  border-radius: 8px;
  background: #fff;
  border: 2px solid #f3edf3;
  box-shadow: 0 1px 4px rgba(98,0,112,0.04);
  transition: border 0.3s, box-shadow 0.3s, background 0.3s;
}
.question.active {
  border-color: #7EEDC5;
  background: #f3fdf8;
  box-shadow: 0 2px 8px rgba(126,237,197,0.10);
  z-index: 1;
}
.question.unanswered {
  background: #ffe6e6;
  border-color: #ff4d4f;
  box-shadow: 0 2px 8px rgba(255,77,79,0.10);
  z-index: 2;
}

/* Escala likert moderna */
.likert-scale {
  display: flex;
  justify-content: space-evenly;
  gap: 12px;
  margin-top: 10px;
}
.likert-scale label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.97rem;
  color: #555;
  cursor: pointer;
  transition: color 0.2s;
}
.likert-scale input[type="radio"] {
  margin-bottom: 4px;
  accent-color: #7EEDC5;
  cursor: pointer;
}
.likert-scale label:hover { color: #3a3a3a; }

/* Dropdown customizado */
.dropdown {
  width: 100%;
  padding: 12px 15px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  color: #333;
  background: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 8px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
  transition: border 0.2s;
}
.dropdown:focus { border-color: #7EEDC5; outline: none; }

/* Modais modernos */
.modal-overlay, .modal-back, .modal-thank-you {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  background: rgba(98,0,112,0.13);
  animation: fadeIn 0.4s;
}
.modal-overlay.active, .modal-back.active, .modal-thank-you.active { display: flex; }
.modal, .modal-back .modal, .modal-thank-you .modal {
  background: #fff;
  padding: 32px 24px;
  border-radius: 12px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 5px 18px rgba(98,0,112,0.13);
  animation: fadeIn 0.5s;
}
.modal h2, .modal-back h2, .modal-thank-you h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #620070;
}
.modal p, .modal-back p, .modal-thank-you p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #555;
}

/* Footer fixo e responsivo */
.footer {
  text-align: center;
  padding: 10px 0;
  font-size: 0.8rem;
  color: #555;
  background: #e9e3f5;
  position: fixed;
  bottom: 0; left: 0; width: 100vw;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(98,0,112,0.04);
}

/* Ripple effect para botões */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.4s linear;
  background: rgba(255,255,255,0.4);
  pointer-events: none;
  width: 120px;
  height: 120px;
  left: 50%;
  top: 50%;
  opacity: 0.7;
  z-index: 2;
}
@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Foco visual para acessibilidade */
.focus-visible {
  outline: 2px solid #7EEDC5 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #7eedc555;
}