/* Reset e layout */
* { box-sizing: border-box; }
body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: #f4f6f8;
  margin: 0;
  padding: 20px;
  color: #333;
  -webkit-font-smoothing:antialiased;
}

/* Wrapper similar ao survey */
.form-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

/* Container padrão (igual enquete) */
.form-container {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 20px;
  background: #fff;
  border-radius: 12px;
  padding: 22px 26px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Close inside container */
.close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #888;
  cursor: pointer;
}
.close-btn:hover { color: #333; }

/* Titles */
h2 { margin: 0 0 6px 0; text-align:center; color:#003d66; font-size:1.6rem; }
.subtitle { text-align:center; margin-bottom:10px; color:#666; font-size:0.95rem; }

/* Messages (same place as enquete) */
#messages { margin: 8px 0 12px 0; display:none; }
#messages .success { background:#e6f9f0; color:#0f5132; padding:12px; border-radius:8px; border:1px solid #badbcc; }
#messages .error { background:#fdecea; color:#842029; padding:12px; border-radius:8px; border:1px solid #f5c2c7; }

/* Progress bar (hidden on step 0) */
.progress-bar { height:8px; background:#edf1f4; border-radius:6px; overflow:hidden; margin-bottom:16px; display:block; }
.progress { height:100%; width:0%; background: linear-gradient(90deg,#0077b6,#005f8a); transition: width .25s ease; }

/* Steps */
.step { display:none; }
.step.active { display:block; }

/* Labels & inputs */
label { display:block; font-size:14px; margin-bottom:6px; color:#222; }
input[type="text"], input[type="email"], input[type="date"], textarea {
  width:100%; padding:10px; border-radius:8px; border:1px solid #dfe7eb; margin-bottom:12px; font-size:14px;
  background:#fff;
}
textarea { min-height:110px; resize:vertical; }

/* Confirmation layout (cards) */
.confirmation { display:flex; flex-direction:column; gap:12px; }
.confirmation .section { padding:12px; border-radius:8px; background:#fbfeff; border:1px solid #e6f4f9; }
.confirmation .section h4 { margin:0 0 8px 0; color:#003d66; font-size:1rem; }
.confirmation .section p { margin:4px 0; font-size:14px; }

/* Navigation - same style as enquete */
.navigation { display:flex; gap:10px; margin-top:8px; justify-content:flex-end; }
.navigation button {
  padding:10px 14px; border-radius:8px; border:none; cursor:pointer;
  font-size:15px;
}
#prev-btn { background:#eee; color:#333; }
#next-btn, #submit-btn { background:#0077b6; color:#fff; }
#next-btn[disabled], #submit-btn[disabled] { background:#b7c4ce; cursor:not-allowed; }

/* Loading overlay */
.loading-overlay, #loading-overlay { display:none; position:fixed; inset:0; z-index:9999; justify-content:center; align-items:center; background:rgba(255,255,255,0.9); }
.spinner { width:40px; height:40px; border-radius:50%; border:5px solid #e9eef2; border-top:5px solid #0077b6; animation:spin 1s linear infinite; margin-bottom:10px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Responsividade */
@media (max-width:600px){
  .form-container { padding:16px; margin:12px; }
  h2 { font-size:1.4rem; }
  .confirmation .section { padding:10px; }
  .navigation { flex-direction:column; }
  .navigation button { width:100%; }
}