/* === ForróLover | Login layout fix v5.1 ===
   Mobile: card centralizado (sem translate), 15% menor (scale .85),
   área marrom ~15% menor (header/rodapé um pouco maiores),
   rodapé sempre visível, sem rolagem.
*/
:root{ --bg:#FAF6EF; --ink:#423E3B; --surface:#FFF7E5; }
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow-x:hidden;font-family:'Exo',system-ui}
.page-auth{
  min-height:100vh;display:grid;
  grid-template-rows:170px 1fr 56px;
  background:var(--bg);color:var(--ink);
  overflow:hidden;
}
.auth-header{display:flex;justify-content:center;align-items:center;background:var(--surface);border-bottom:1px solid rgba(0,0,0,.06)}
.auth-header .logo{height:200px;width:auto}

.auth-main{background:#423E3B;display:flex;align-items:center;justify-content:center;padding:24px 12px}
.auth-card{
  width:min(720px,92vw);background:var(--surface);
  border:1px solid rgba(0,0,0,.06);border-radius:22px;box-shadow:0 22px 44px rgba(0,0,0,.18);
  padding:26px;overflow:hidden
}
.auth-title{margin:0 0 14px 0;text-align:center;font-weight:900;font-size:clamp(20px,3.2vw,34px)}

.auth-field{margin-bottom:14px}
.auth-label{font-weight:800;display:block;margin-bottom:6px}
.auth-input-wrap{position:relative;width:100%}
.auth-input{width:100%;height:50px;display:block;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fff;padding:0 44px 0 14px;font-size:16px;outline:none}

/* Olhinho SVG */
.auth-eye{
  width:22px;height:22px;position:absolute;right:12px;top:50%;transform:translateY(-50%);
  cursor:pointer;opacity:.8;background-repeat:no-repeat;background-size:22px 22px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23423E3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z'/><circle cx='12' cy='12' r='3'/></svg>");
}
.auth-eye.showing{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23423E3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.94 10.94 0 0 1 12 20C5 20 1 12 1 12a21.8 21.8 0 0 1 5.06-5.94'/><path d='M10.58 10.58a2 2 0 1 0 2.83 2.83'/><path d='M1 1l22 22'/></svg>");
}

.auth-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.auth-links{display:flex;gap:16px;flex-wrap:wrap;font-weight:400}
.auth-links a{color:#423E3B;text-decoration:underline}

.btn-primary{
  min-width:338px;height:56px;padding:0 28px;border:none;border-radius:14px;background:#FFB400;color:#2f281e;
  font-weight:900;font-size:18px;cursor:pointer;position:relative;overflow:hidden
}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.35) 25%,transparent 50%);transform:translateX(-120%);animation:shine 4s linear infinite}
@keyframes shine{to{transform:translateX(120%)}}

.auth-footer{display:flex;justify-content:center;align-items:center;background:var(--surface);border-top:1px solid rgba(0,0,0,.06);font-weight:400}

/* ===== MOBILE ===== */
@media (max-width:620px){
  /* reduz “área marrom” ~25%: aumentamos header e footer um pouco */
  .page-auth{grid-template-rows:120px minmax(0,1fr) 50px}
  .auth-header .logo{height:140px}

  .auth-main{
    padding:10px 8px;
    align-items:center; justify-content:center; /* card centralizado verticalmente */
  }
  .auth-card{
    width:min(560px,90vw); padding:18px;
    transform: scale(.90); transform-origin:center; /* 15% menor */
  }

  .auth-actions{flex-direction:column;gap:12px;align-items:center;justify-content:center}
  .btn-primary{width:85%;min-width:0}
  .auth-links{width:85%;order:2;justify-content:flex-start} /* abaixo do botão */
}