/* EncarteWeb — Tela de Login & Cadastro estilo modern split screen */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

.login-page {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background:
    radial-gradient(1200px 700px at 80% -10%, #e0e7ff 0%, transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, #eff6ff 0%, transparent 60%),
    #f8fafc;
}

/* Container Principal Split */
.login-container {
  width: 100%;
  max-width: 960px;
  min-height: 580px;
  display: flex;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(30, 41, 59, 0.09), 0 4px 16px rgba(30, 41, 59, 0.04);
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* --- Painel Esquerdo (Banner Visual) --- */
/* As cores da logo (pedido do dono, 15/10/2026, com a logo de referência):
   carrinho #0862e0 -> #013fbd, "encarte" marinho #021c4a, "web" laranja #fe7703.
   A logo só fica com essas cores sobre fundo claro, então o painel é claro,
   puxado de leve para o azul da marca para se separar do formulário branco. */
.login-hero {
  --lh-marinho: #021c4a;
  --lh-azul: #0862e0;
  --lh-laranja: #fe7703;
  flex: 1.1;
  background:
    radial-gradient(85% 55% at 0% 0%, rgba(8, 98, 224, 0.12) 0%, transparent 70%),
    radial-gradient(70% 50% at 100% 100%, rgba(254, 119, 3, 0.1) 0%, transparent 70%),
    #f3f7ff;
  border-right: 1px solid #e2e8f0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  color: var(--lh-marinho);
}

/* Retícula de impressão (o pontilhado de um encarte de papel), só nos cantos */
.login-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(8, 98, 224, 0.22) 1.3px, transparent 1.8px);
  background-size: 15px 15px;
  -webkit-mask-image:
    radial-gradient(60% 45% at 100% 0%, #000 0%, transparent 100%),
    radial-gradient(55% 40% at 0% 100%, #000 0%, transparent 100%);
  mask-image:
    radial-gradient(60% 45% at 100% 0%, #000 0%, transparent 100%),
    radial-gradient(55% 40% at 0% 100%, #000 0%, transparent 100%);
  pointer-events: none;
}

/* Brilho laranja bem baixo no rodapé: a cor da marca, sem disputar com a logo */
.login-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  right: -25%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255, 138, 0, 0.16) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- Gôndolas no rodapé do painel (15/10/2026) ----------
   Só em forma, sem foto nem marca de ninguém. Os cartazes pendurados que
   ficavam no alto saíram a pedido do dono ("não gostei, tire eles"). */
.lh-cena {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.lh-gondolas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  /* uma prateleira de 132x48: caixas, garrafas e pacotes de alturas diferentes */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='48'%3E%3Cg fill-opacity='.07'%3E%3Crect x='3' y='16' width='15' height='28' rx='2' fill='%230862e0'/%3E%3Crect x='19' y='16' width='15' height='28' rx='2' fill='%230862e0'/%3E%3Cpath d='M40 44V24q0-4 3-6v-5h4v5q3 2 3 6v20z' fill='%23fe7703'/%3E%3Cpath d='M53 44V24q0-4 3-6v-5h4v5q3 2 3 6v20z' fill='%23fe7703'/%3E%3Crect x='68' y='26' width='22' height='18' rx='3' fill='%23021c4a'/%3E%3Crect x='94' y='10' width='16' height='34' rx='2' fill='%230862e0'/%3E%3Crect x='112' y='20' width='17' height='24' rx='4' fill='%23fe7703'/%3E%3C/g%3E%3Crect y='44' width='132' height='4' rx='1' fill='%23021c4a' fill-opacity='.1'/%3E%3C/svg%3E");
  background-size: 132px 48px;
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 20%, transparent 100%);
  mask-image: linear-gradient(to top, #000 20%, transparent 100%);
}

.login-hero-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.login-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.2s ease;
}
.login-brand:hover { transform: scale(1.04); }
.login-brand img {
  /* 44px, e nao 120: o arquivo agora vem aparado do vazio, e a altura antiga
     -- pensada para um quadrado 64% transparente -- deixaria a marca 2,7 vezes
     maior do que ela sempre apareceu aqui. */
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25)) brightness(0) invert(1);
}

.login-hero-body {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: auto 0;
  padding: 20px 10px;
}

/* ---------- A logo grande, montada em peças (15/10/2026) ----------
   No lugar da ilustração redonda. É o MESMO arquivo da logo cinco vezes, cada
   cópia recortada (clip-path) numa peça: carrinho, "encarte", "web", faíscas e
   seta. Os cortes saem do arquivo logo-encarteweb-topo.png (1001x365), medidos
   pixel a pixel: o carrinho acaba em x=424 e as palavras começam em 453; o
   "encarte" acaba em y=164 e o "web" começa em 172; o "b" acaba em x=817 e as
   faíscas começam em 818; a seta começa em y=222 (y=228 depois de x=870, onde a
   faísca da direita desce até 225). Sem a classe .anima, as peças só se
   sobrepõem e a logo aparece inteira e parada. */
.login-marca {
  position: relative;
  display: block;
  width: min(360px, 100%);
  aspect-ratio: 1001 / 365;
  margin: 0 auto 34px;
}
.login-brand.login-marca:hover { transform: none; }
.login-marca .lm-peca {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: none;
  user-select: none;
  -webkit-user-drag: none;
}
.lm-carrinho { clip-path: inset(0 57% 0 0); transform-origin: 30% 92%; }
.lm-encarte  { clip-path: inset(0 0 52.88% 43%); }
.lm-web      { clip-path: inset(47.12% 18.28% 0 43%); }
.lm-faiscas  { clip-path: polygon(81.72% 47.12%, 100% 47.12%, 100% 62.47%, 86.91% 62.47%, 86.91% 60.82%,
                                  85.21% 60.82%, 85.21% 100%, 81.72% 100%);
               transform-origin: 85.6% 61.1%; }
.lm-seta     { clip-path: polygon(85.21% 60.82%, 86.91% 60.82%, 86.91% 62.47%, 100% 62.47%, 100% 100%, 85.21% 100%);
               transform-origin: 85.6% 61.1%; }

/* Nada aqui esconde a logo: ela está inteira desde o primeiro quadro (pedido do
   dono, 15/10/2026: a janela tem de abrir NA HORA; a montagem de 1,4 s fazia o
   painel parecer lento). O movimento que sobrou vem por cima, sem atrasar nada:
   logo depois de abrir, a seta dá um clique e as faíscas piscam; passar o mouse
   na logo repete o clique. */
.login-marca .lm-clique { position: absolute; inset: 0; transform-origin: 85.6% 61.1%; }
.login-marca.anima .lm-clique-seta    { animation: lm-clica 0.26s ease-out 0.15s; }
.login-marca.anima .lm-clique-faiscas { animation: lm-pisca 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; }
/* nomes próprios para o mouse: trocar o nome é o que faz a animação recomeçar */
.login-marca:hover .lm-clique-seta,
.login-marca.anima:hover .lm-clique-seta    { animation: lm-clica-mouse 0.26s ease-out; }
.login-marca:hover .lm-clique-faiscas,
.login-marca.anima:hover .lm-clique-faiscas { animation: lm-pisca-mouse 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.06s; }

@keyframes lm-clica       { 45% { transform: scale(0.82); } }
@keyframes lm-clica-mouse { 45% { transform: scale(0.82); } }
@keyframes lm-pisca       { from { transform: scale(0.7); } 60% { transform: scale(1.08); } }
@keyframes lm-pisca-mouse { from { transform: scale(0.7); } 60% { transform: scale(1.08); } }

.login-hero-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--lh-marinho) !important;
}

.login-hero-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
  margin: 0 auto;
  max-width: 320px;
  text-wrap: pretty;
}

.login-hero-footer {
  position: relative;
  z-index: 2;
  font-size: 12px;
  color: #556377;
  text-align: center;
}

/* Sem animação no sistema (Windows com "Efeitos de animação" desligado): nada se mexe. */
@media (prefers-reduced-motion: reduce) {
  .login-marca .lm-clique { animation: none !important; }
}

/* --- Painel Direito (Card do Formulário) --- */
.login-card {
  flex: 1;
  padding: 44px 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
}

/* Navegação por Abas (Sign Up / Sign In) */
.login-nav-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 2px solid #f1f5f9;
  margin-bottom: 22px;
  position: relative;
}

.login-tab {
  background: none;
  border: 0;
  padding: 0 0 12px 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.login-tab:hover {
  color: #334155;
}

.login-tab.active {
  color: #2563eb;
}

.login-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2.5px;
  background: #2563eb;
  border-radius: 4px;
}

.login-sub {
  color: #64748b;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 24px;
}

/* Labels e Campos */
.login-lbl {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 14px 0 6px;
}

.login-lbl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.login-lbl-row .login-lbl {
  margin-top: 0;
}

.login-opt {
  font-weight: 500;
  color: #94a3b8;
}

.login-forgot {
  font-size: 12.5px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  transition: color 0.15s;
}

.login-forgot:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Campos com Ícone */
.login-field {
  position: relative;
  display: flex;
  align-items: center;
}

.login-ico {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  display: flex;
  pointer-events: none;
  transition: color 0.15s ease;
}

.login-field input {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px 14px 12px 42px;
  font-family: inherit;
  font-size: 14.5px;
  color: #0f172a;
  /* nunca "all": a visibilidade entraria na transição e o campo ficaria escondido
     um instante quando a janela abre (o cursor não conseguia entrar no e-mail) */
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.login-field input::placeholder {
  color: #94a3b8;
}

.login-field input:focus {
  outline: none;
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.login-field input:focus + .login-ico,
.login-field:focus-within .login-ico {
  color: #2563eb;
}

.login-eye {
  position: absolute;
  right: 8px;
  background: none;
  border: 0;
  padding: 8px;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.login-eye:hover {
  color: #1e293b;
}

/* Checkbox Lembre-me */
.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #64748b;
  margin: 16px 0 4px;
  cursor: pointer;
  user-select: none;
}

.login-remember input {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
  border-radius: 4px;
  cursor: pointer;
}

/* Dica da senha no cadastro (a regra mora no servidor: senha-forte.js) */
.login-dica {
  font-size: 12.5px;
  line-height: 1.45;
  color: #64748b;
  margin: 8px 0 0;
}
.login-dica[hidden] { display: none; }

/* Alerta de Erro */
.login-erro {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 0;
}

/* Botão Principal */
.login-btn {
  width: 100%;
  margin-top: 22px;
  border: 0;
  border-radius: 12px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.32);
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-btn:hover {
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.42);
  transform: translateY(-1px);
}

.login-btn:active {
  transform: translateY(1px);
}

.login-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Termos */
.login-terms {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.5;
}

.login-terms a {
  color: #2563eb;
  text-decoration: none;
}

.login-terms a:hover {
  text-decoration: underline;
}

/* Rodapé do Formulário */
.login-footer-info {
  text-align: center;
  margin: 24px 0 0;
  font-size: 14px;
  color: #64748b;
}

.login-footer-info a {
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  margin-left: 4px;
}

.login-footer-info a:hover {
  text-decoration: underline;
}

/* --- MODAL OVERLAY COM FUNDO DESFOCADO (MODAL LOGIN) --- */
.login-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s;
}

/* Abrir é NA HORA (pedido do dono, 15/10/2026): sem esmaecer nem crescer, a
   janela aparece no mesmo quadro do clique. Fechar continua suave (a transição
   de fora vale para a saída). */
.login-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.login-modal-overlay.open .login-modal-wrapper { transition: none; }

.login-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.login-modal-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  transform: scale(0.94) translateY(14px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-modal-overlay.open .login-modal-wrapper {
  transform: scale(1) translateY(0);
}

.login-modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: #ffffff;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.login-modal-close:hover {
  background: #f8fafc;
  color: #0f172a;
  transform: scale(1.08) rotate(90deg);
}

@media (max-width: 990px) {
  .login-modal-close {
    top: 12px;
    right: 12px;
  }
}

/* --- Responsividade --- */
@media (max-width: 860px) {
  .login-hero { display: none; }
  .login-container {
    max-width: 440px;
    min-height: auto;
    border-radius: 24px;
  }
  .login-card {
    padding: 36px 28px 30px;
  }
}

@media (max-width: 480px) {
  .login-page { padding: 12px; }
  .login-container {
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  }
  .login-card {
    padding: 28px 20px 24px;
  }
}

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
  .login-page {
    background: #090d16;
  }
  .login-container {
    background: #111827;
    border-color: #1f2937;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
  .login-card {
    background: #111827;
  }
  .login-nav-tabs {
    border-bottom-color: #1f2937;
  }
  .login-tab {
    color: #6b7280;
  }
  .login-tab:hover {
    color: #e5e7eb;
  }
  .login-tab.active {
    color: #60a5fa;
  }
  .login-tab.active::after {
    background: #60a5fa;
  }
  .login-sub, .login-footer-info, .login-remember {
    color: #9ca3af;
  }
  .login-lbl {
    color: #f3f4f6;
  }
  .login-field input {
    background: #1f2937;
    border-color: #374151;
    color: #f9fafb;
  }
  .login-field input::placeholder {
    color: #6b7280;
  }
  .login-field input:focus {
    background: #1f2937;
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
  }
  .login-forgot, .login-footer-info a {
    color: #60a5fa;
  }
}