/*
  Snack On — login-snackon.css
  Estilo exclusivo da tela de login redesenhada (app/views/auth/login.php).
  Sempre data-theme="dark" fixo (ver DESIGN.md > "Preferência de tema por usuário").
  Layout porta login-redesign-proposta.html 1:1.
  Nao usar em outras telas de auth (esqueci_minha_senha, nova_senha, primeiro_acesso,
  redefinir_senha) — essas continuam em assets/css/login.css (tema roxo antigo).
*/

*{box-sizing:border-box;}
body{ font-family:'Inter', sans-serif; margin:0; }

.wrap{ display:grid; grid-template-columns: 1fr 1fr; min-height:100vh; }

/* ---- Painel de marca (esquerda) ---- */
.panel{
  background: var(--panel);
  color: var(--panel-text);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:40px;
  overflow:hidden;
}

/* Logo animada: fundo do video e quase preto puro, mix-blend-mode:screen
   faz ele "desaparecer" contra o fundo escuro do painel sem transparencia real */
.panel-video-wrap{ margin:-10px -10px 0; }
.panel-video-wrap video{ width:100%; max-width:480px; display:block; mix-blend-mode:screen; }

.panel-headline{
  font-family:'Space Grotesk', sans-serif; font-weight:600;
  font-size:clamp(24px, 3.4vw, 38px); line-height:1.18; max-width:88%;
}
.panel-sub{ color: var(--panel-dim); font-size:14.5px; margin-top:14px; line-height:1.6; max-width:80%; }
.panel-foot{ font-size:12px; color: var(--panel-dim); }

/* ---- Formulário (direita) ---- */
.form-side{ display:flex; align-items:center; justify-content:center; padding:40px; }
.form-box{ width:100%; max-width:340px; }
.form-title{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:24px; margin-bottom:6px; color:var(--text); }
.form-hint{ font-size:13.5px; color: var(--text-dim); margin-bottom:28px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; color: var(--text-dim); margin-bottom:6px; }
.field input{
  width:100%; border:1px solid var(--line); background: var(--surface); color:var(--text);
  border-radius:9px; padding:12px 14px; font-size:14px; font-family:'Inter', sans-serif;
}
.field input::placeholder{ color: var(--text-dim); }
.field input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.btn-main{
  width:100%; border:none; border-radius:9px; padding:14px 0;
  background: var(--accent); color: var(--accent-ink);
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:14.5px;
  cursor:pointer; margin-top:8px;
}
.btn-main:hover{ filter:brightness(0.94); }

.form-foot{ margin-top:14px; font-size:12.5px; color:var(--text-dim); text-align:center; }

@media (max-width: 860px){
  .wrap{ grid-template-columns: 1fr; }
  .panel{ display:none; }
}

/* ---- Toasts (erro/sucesso) ---- */
#toast-region{position:fixed;top:16px;right:16px;z-index:2147483647;display:flex;flex-direction:column;gap:8px}
.toast{
  min-width:280px;max-width:360px;padding:12px 14px;border-radius:9px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  background:var(--surface);color:var(--text);border:1px solid var(--line);border-left:4px solid;
  display:flex;gap:10px;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s;
  font-size:13.5px;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast-error{border-left-color:var(--danger)}
.toast-success{border-left-color:var(--good)}
.toast .msg{flex:1}

/* ---- Aviso de cookies ---- */
.cookie-bar{
  position:fixed;z-index:99999;left:50%;transform:translateX(-50%);bottom:1.2rem;
  width:calc(100% - 2.4rem);max-width:980px;padding:1rem 1.2rem;
  background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  box-shadow:0 12px 32px rgba(0,0,0,.35);font-size:.9rem;
}
.cookie-bar a{ color:var(--accent); text-decoration:underline; font-weight:500; }
.cookie-bar button#cookie-ack{
  background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;
  padding:.55rem 1.2rem;cursor:pointer;font-weight:600;flex-shrink:0;
  font-family:'Space Grotesk', sans-serif;
}

@media (max-width:600px){
  .form-side{ padding:24px; }
  .cookie-bar{ flex-direction:column; align-items:flex-start; }
}