/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  background-image: url(../imagem/tela012.jpg);
  font-family:Arial, sans-serif;
  font-size:16px;
  line-height:1.5;
}

/* Container centralizado */
.container {
  max-width:800px;
  margin:0 auto;
  padding:20px;
  text-align:center; /* centraliza títulos e footer */
}

/* Títulos  cadastro usuarios*/
h1, h2 {
  margin-bottom:20px;
  color:blue;
  font-size:1.8rem;
  text-shadow:1px 1px 4px rgba(0,0,0,0.4);
}

h2 {
  border-bottom:2px solid #32CD32;
  padding-bottom:10px;
}

/* Formulário */
.container form {
  width:100%;
  margin:20px auto;
  border:1px solid #32CD32;
  border-radius:12px;
  padding:25px;
  background:#f9f9f9;   /* fundo suave */
  color:#333;
  box-shadow:0 6px 16px rgba(0,0,0,0.2);
  text-align:left;      /* labels e inputs à esquerda */
}

/* Labels */
.container form label {
  display:block;
  font-weight:bold;
  margin-left:10px;   /* margem à esquerda */
  margin-top:10px;
  margin-bottom:5px;
  text-align:left;
}

/* Inputs */
input[name="email"],
input[name="whatsapp"],
input[name="cidade"],
input[name="estado"],
input[name="pais"],
input[name="quantidade"] {
  width:95%;
  padding:12px;
  border:1px solid #ccc;
  border-radius:8px;
  margin-left:10px;   /* margem à esquerda */
  margin-top:10px;
  margin-bottom:10px;
  font-size:1rem;
  background:#fff;
  color:#333;
  transition:all 0.3s ease;
}

form input:focus {
  border-color:#32CD32;
  outline:none;
  box-shadow:0 0 8px #32CD32;
}

/* Botões principais */
input[type="submit"],
input[type="reset"],
.botao {
  background:linear-gradient(135deg, #2e7d32, #43a047);
  color:white;
  border:none;
  padding:12px 20px;
  border-radius:8px;
  cursor:pointer;
  font-size:1rem;
  font-weight:bold;
  transition:background 0.3s ease, transform 0.2s ease;
  display:block;       /* centraliza */
  margin:15px auto;    /* centraliza horizontalmente */
  text-align:center;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
.botao:hover {
  background:linear-gradient(135deg, #388e3c, #4caf50);
  transform:scale(1.05);
  
}
/* Rodapé */
 footer{
  display: flex;
  flex-direction: column; /*coloca lado a lado os elementos do rodapé */
  justify-content: center;
  align-items: center;
  
  background: blue;
  color: white;
  padding: 10px;
  border-radius: 12px;
  gap: 3px;

}
/* Layout padrão: botões centralizados um abaixo do outro */
input[type="submit"],
input[type="reset"] {
  display: block;
  margin: 15px auto;
  text-align: center;
}

 

   .mensagem {
      padding: 15px;
      margin: 15px 0;
      text-align: center;
      font-weight: bold;
      font-size: 18px;
      border-radius: 5px;
    }
    .mensagem.insert {
      background-color: #e0ffe0;
      border: 1px solid #4CAF50;
      color: #2e7d32;
    }
    .mensagem.delete {
      background-color: #fff3cd;
      border: 1px solid #ff9800;
      color: #e65100;
    }
    .mensagem.erro {
      background-color: #f8d7da;
      border: 1px solid #dc3545;
      color: #721c24;
    }
 .form-wrapper {
      display: flex;
      align-items: stretch;
      max-width: 900px;
      margin: 40px auto;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    .menu-div {
      width: 80px;
      background-color: #90ee90;
      display: flex;
      justify-content: center;
      border-radius: 8px 0 0 8px;
    }
    .menu-links {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .menu-links a {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 18px;
      font-weight: bold;
      color: #064420;
      text-decoration: none;
      margin: 15px 0;
      transition: color 0.3s ease;
    }
    .menu-links a:hover {
      color: #006400;
    }
    .formulario {
      flex: 1;
      background: #fff;
      padding: 20px;
      border-radius: 0 8px 8px 0;
    }

/* No celular (até 600px), botões lado a lado */
@media (max-width: 600px) {
  .container form {
    text-align: center; /* centraliza o grupo */
  }

  input[type="submit"],
  input[type="reset"] {
    display: inline-block;   /* coloca lado a lado */
    margin: 10px 5px;        /* espaço entre eles */
    width: 45%;              /* cada botão ocupa metade da largura */
  }
}