/* Reset básico */
* {
  box-sizing: border-box;
}

/* Cores base */
:root {
  --cor-laranja: #ff6600;
  --cor-laranja-escuro: #cc5200;
  --cor-preto: #222222;
  --cor-cinza-claro: #f7f9fc;
  --cor-cinza-medio: #e1e6eb;
  --cor-cinza-escuro: #c4c9d2;
  --cor-texto-escuro: #1a1a1a;
}

/* Body fundo claro */
body {
  background-color: var(--cor-cinza-claro);
  color: var(--cor-texto-escuro);
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container do formulário */
.form-container {
  max-width: 480px;
  margin: 4rem auto 6rem auto;
  padding: 3rem 2.5rem 3.5rem 2.5rem;
  background-color: white;
  border-radius: 16px;
  
  /* Sombras suaves e elegantes */
  box-shadow:
    0px 8px 24px rgba(0,0,0,0.05),
    inset 0 -2px 8px rgba(255,102,0,0.1);
  
}

/* Título */
h1 {
  font-weight: 700;
  font-size: clamp(1.75rem,2vw + .5rem,2.25rem);
  color: var(--cor-preto);
}

/* Labels */
.form-label {
  font-weight: 600;
  color: var(--cor-preto);
}

/* Inputs modernos com bordas arredondadas e foco laranja */
.form-control {
  
   border-radius:12px !important; /* bordas mais arredondadas */
   border:1.5px solid var(--cor-cinza-medio) !important;
   padding:.85rem .95rem !important;

   font-size:1rem !important;

   color:#444 !important; /* texto escuro mas suave */

   transition:
      border-color .3s ease,
      box-shadow .3s ease;

   background-color:#fff !important;

   box-shadow:none !important; /* remover sombra padrão do bootstrap */

}

.form-control::placeholder {
    color:#999999 !important; /* placeholder suave */
}

.form-control:hover {
    border-color: var(--cor-laranja) !important;
}

.form-control:focus {
    outline:none !important;
    border-color: var(--cor-laranja) !important;

    box-shadow:
      0px 0px 8px rgba(255,102,0,.35) !important;

    background-color:#fff !important;

    color:#222 !important; /* texto mais escuro no foco */

}

/* Botão primário laranja grande e moderno */
.btn-primary {

    background-color: var(--cor-laranja) !important;

    border-color: var(--cor-laranja) !important;

    font-weight:bold;

    padding:.9rem;

    font-size:1.15rem;

    border-radius:14px;

    box-shadow:
       inset -2px -2px rgba(255,255,255,.15),
       inset 2px -2px rgba(255,255,255,.10);

    transition:
       background-color .25s ease,
       box-shadow .25s ease,
       transform .15s ease;

}

.btn-primary:hover,
.btn-primary:focus {

   background-color: var(--cor-laranja-escuro) !important;

   border-color: var(--cor-laranja-escuro) !important;

   box-shadow:
     inset -3px -3px rgba(255,255,255,.25),
     inset -3px -3px rgba(0,0,0,.08);

   transform: scale(1.03);

}

/* Link com cor laranja elegante */
a {

   color: var(--cor-laranja);

   text-decoration:none;

   font-weight:bold;

}

a:hover,
a:focus {

   text-decoration:none;

   filter:saturate(120%);

}

/* Mensagem de erro em vermelho suave com borda arredondada */
.alert-danger {

   background-color:#ffe6e6; 

   color:#b30000; 

   border-radius:10px; 

   padding:.85rem 1.25rem; 

   margin-bottom:.85rem; 

   font-weight:bold;

}

/* Responsividade mobile first */
@media (max-width:576px) {

   .form-container {

       margin-top:2rem;

       margin-bottom:3rem;

       padding-left:.75rem;

       padding-right:.75rem;

       box-shadow:
         none; /* sombra removida no mobile para leveza */

       border-radius:none; /* borda quadrada no mobile */

       max-width:none; /* largura fluida */

       width:auto; 

   }

}