/* ======================
   FORGOT PASSWORD PAGE - SNDesk
   ====================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');


.logo {
  display: absolute;
  top: 30%;
  left: 37%;
  transform: translate(-50%, -50%); /* centraliza perfeitamente */
  width: 200px;
}

.forgot-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.forgot-page .login-card {
  display: flex;
  width: 850px;
  height: 550px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* LADO ESQUERDO (LARANJA) */


.forgot-page .login-left h2 {
  font-size: 26px;
  line-height: 1.4em;
}

.forgot-page .login-left .highlight {
  background: #3ebfdd;
  padding: 2px 6px;
  border-radius: 4px;
}

/* LADO DIREITO (AZUL) */
.forgot-page .login-right {
  flex: 1;
  background: #fefefe;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* color: #1D2F59 !important; */
}

/* CAMPOS DE TEXTO */
/*.forgot-page .form-control {
  background-color: #fff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 14px 15px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.25s ease-in-out;
  width: 100% !important;
} */

.forgot-page .form-control:focus {
  border: 2px solid #3ebfdd !important;
  box-shadow: none !important;
}

.forgot-page .form-floating > .form-control:focus ~ label,
.forgot-page .form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: none !important;
  font-size: 1rem !important;
  top: 100% !important;
  left: 0.50rem !important;
  color: #fff !important;
  background: transparent !important; /* 🔹 remove o fundo branco/azulado */
  padding: 0;                          /* 🔹 tira o espaçamento extra */
}



/* Quando o input está em foco ou preenchido */
.forgot-page .form-floating > .form-control:focus ~ label,
.forgot-page .form-floating > .form-control:not(:placeholder-shown) ~ label {
  top: 5px;                     /* sobe suavemente */
  left: 14px;
  font-size: 0.8rem;            /* reduz tamanho */
  color: #fff;                  /* mantém preto */
  background: #fff;             /* evita sobreposição com o fundo */
  padding: 0 6px;
  border-radius: 6px;
  transform: none;              /* remove translate */
}

/* BOTÕES */
.forgot-page .btn-primary {
  background-color: #1d2f59 !important;
  border: none;
  color: #fff !important;
  font-weight: 500;
  border-radius: 25px;
  transition: background-color 0.3s ease;
  margin-top: 15px;
  margin-bottom: -20px;
}

.forgot-page .btn-primary:hover {
  background-color: #e0a300 !important;
}

/* LINKS */
.forgot-page .links a {
  color: var(--bs-secondary-hover)  !important;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.forgot-page .links a:hover {
  color: #f8b722;
}

.forgot-page .form-floating > label {
  background-color: transparent !important;
  color: #000 !important;
  opacity: 1 !important;
}


.forgot-page .form-floating > .form-control:focus ~ label,
.forgot-page .form-floating > .form-control:not(:placeholder-shown) ~ label {
  top: 5px;
  font-size: 0.8rem;
  color: #000;
  background: transparent !important;
  padding: 0 6px;
}

/* ======================
   INPUT ESTILO FIGMA
   ====================== */

.figma-input {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 7px 8px !important;

    width: 384px;
    height: 30px;

    background: #F8F8F8 !important;
    border: 1px solid #CBCBCB !important;
    border-radius: 4px !important;

    font-size: 14px;
    color: #333;

    box-shadow: none !important;
}

.figma-input:focus {
    border: 1px solid #3ebfdd !important;
    background: #fff !important;
    outline: none !important;
}