/* ====== LAYOUT PRINCIPAL ====== */
.login-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.on-top {
  width: 90vw;               /* 90% da tela */
  max-width: 1200px;         /* máx 1200 */
  min-height: 600px;         /* altura mínima */
  background-color: var(--dark-sec);
  border-radius: 15px;
  box-shadow: 0 3px 7px rgba(0,0,0,.9);
  overflow: hidden;

  /* GRID responsivo */
  display: grid;
  grid-template-columns: 1fr;            /* < 600px: empilhado */
}

/* 600–999px: 50 / 50 */
@media (min-width: 600px) and (max-width: 999px) {
  .on-top { grid-template-columns: 1fr 1fr; }
}

/* >=1000px: 60 / 40 */
@media (min-width: 1000px) {
  .on-top { grid-template-columns: 60% 40%; }
}

/* ====== COLUNA ESQUERDA (BANNER) ====== */
.welcome-container {
  position: relative;
  display: flex;                /* 👈 vira flex container */
  align-items: center;          /* 👈 centraliza vertical */
  background-image: url("../img/bckgr.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.welcome-container::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.79), rgba(0,0,0,0));
  z-index: 0;
}

.welcome-text {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(1rem, 3vw, 3rem);
  line-height: 1.6;
  /* não precisa mais de translateY */
}

.welcome-text h1 {
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: .5rem;
}

.welcome-text h2 {
  font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.4rem);
  margin-bottom: .25rem;
}

/* ====== COLUNA DIREITA (FORM) ====== */
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
}

.sign-in {
  width: min(560px, 92%);
  margin: 0 auto;
}

.sign-in-img {
  display: block;
  max-width: 50%;       /* <= pedido */
  height: auto;
  margin: 0 auto 1rem;
}

/* ====== FORM / INPUTS ====== */
.pos-r {
  position: relative;
  display: block;
  transition: transform .25s ease;
  transform-origin: center center;    /* fica natural quando o olho está à direita */
}
.pos-r:hover,
.pos-r:focus-within {
  transform: scale(1.05);            /* 👈 agora input + ícone crescem juntos */
}

input.inpt,
.sign-in input.inpt {
  width: 100%;
  background-color: rgb(233,233,233);
  margin: 0.5rem 0 0.5rem 0;
  height: 50px;
  line-height: 50px; /* garante centralização vertical do texto */
  padding: 0 2.5rem 0 0.9rem; /* espaço extra à direita p/ ícone */
  border: none;
  border-radius: 50px;
  font-family: inherit;
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);

}

input.inpt:hover,
input.inpt:focus {
  border: 2px solid var(--accent);
  outline: none;
}

/* botão submit 100% apenas aqui */
.sign-in form > button[type="submit"],
.sign-in > button.submit {
  position: relative;
  width: 100%;
  font-weight: 400;
  font-family: inherit;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  padding: .75rem 1rem;
}

/* ícone animado do botão (opcional) */
.sign-in-svg {
  width: 22px;
  position: absolute;
  right: 14px;
  top: 50%;
  left:70%;
  transform: translateY(-50%);
  transition: left 0.5s;
}

.sign-in button:hover .sign-in-svg{
    left: 88%;
    transition: left 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);}

/* Mantém o input com altura fixa */
input.inpt {
  height: 50px;
  line-height: 50px; /* garante centralização vertical do texto */
  padding: 0 2.5rem 0 0.9rem; /* espaço extra à direita p/ ícone */
}

/* Ícone dentro do input */
.sign-in input.inpt + i {
  position: absolute;
  right: 15px;
  top: 0;                /* fica colado no topo do input */
  height: 100%;          /* ocupa 100% da altura do input */
  display: flex;         /* centraliza verticalmente */
  align-items: center;   /* 👈 aqui que corrige */
  font-size: 18px;
  color: rgb(24, 80, 103);
  cursor: pointer;
}
/* cor no foco do input */
.sign-in input.inpt:focus + i { color: #4bccff; }


/* ====== DICAS / ERROS ABAIXO DO CAMPO ====== */
.hint {
  font-size: .9rem;
  margin-top: .35rem;
  opacity: .85;
}

.hint-error { color: #ff6666; }
.hint-ok    { color: #8dfe24; }

.is-invalid {
  border: 2px solid #a33 !important;
}

/* ====== MOBILE FINO (Ajustes visuais) ====== */
@media (max-width: 599px) {
  .welcome-container { min-height: 220px; }
  .sign-in { width: 94%; }
}

/* ====== TWEAKS EXTRAS ====== */
/* Mantenha seu estilo original de labels/erros, caso use */
.username::after, .password::after {
  content: "";
  display: inline-block;
  color: red;
  margin-left: 1rem;
  font-size: .9rem;
}


/* ====== MENSAGENS DE ERRO ABAIXO DO CAMPO ====== */

.hint {
  font-size: .9rem;
  margin-top: 0rem;
  margin-bottom: 1rem;
  opacity: .85;
}

.hint-error {
  color: #ff6666;
}

.hint-ok {
  color: #8dfe24;
}

/* borda vermelha quando inválido (reutilizável) */
.is-invalid {
  border: 2px solid #a33 !important;
}

/* opcional: borda laranja quando ok/focado (segue seu tema) */
input:focus {
  border: 2px solid var(--accent);
  outline: none;
}