/* ====== ESTILO DO FORMULÁRIO ====== */

form {
  background: #ffffff;
  padding: 25px;
  border-radius: 15px;
  margin: auto;
  box-shadow: 0px 4px 10 px rgba(0, 64, 128, 0.2)
  text-align: left;
}

/* Labels */

label {
  font-weight: bold;
  display: incline-block;
  margin-bottom: 6px;
  color: #004080;
}

/* Campos */

input, 
select, 
textarea {
  with: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #99ccff;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

/* Checkbox e radio */

input[type="checkbox"],
input[type="radio"] {
  with: auto;
  margin-right: 8px;
}

/* Textarea */

textarea {
  resize: none;
}

/* Botões */

button {
  background: #3399ff;
  color: white;
  border: none;
  padding: 12px 18px;
  margin: 5px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #2673cc;
}


/* Parágrafos do formulário */
form p {
  font-weight: bold;
  margin-bottom: 10px;
  color: 003366;
}

/* ======== DARK MODE FORMULÁRIO ====== */
body.dark-mode form {
  background: linear-gradient(135deg, #1e1e1e, #2c2c2c); /* gradiente cinza escuro */
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.1); /* sombra clara */
  color: #f1f1f1; /* texto claro */
  border: 1px solid #444; /* borda discreta */
}

body.dark-mode label {
  color: #f1f1f1; /* labels brancas */
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #2c2c2c; /* campos escuros */
  color: #f1f1f1; /* texto claro */
  border: 1px solid #555; /* borda cinza */
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #aaa; /* placeholder mais suave */
}

body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
  accent-color: #f1f1f1; /* cor dos checkboxes e radios */
}

body.dark-mode button {
  background: #333; /* botão escuro */
  color: #f1f1f1;
  border: 2px solid #f1f1f1; /* borda branca */
}

body.dark-mode button:hover {
  background: #555; /* hover mais claro */
}

body.dark-mode form p {
  color: #f1f1f1; /* parágrafos claros */
}