/* ============================================
   QuerOff — visual vermelho das telas de acesso
   (tela inicial, login, cadastro, senha)
   Carregar DEPOIS de queroff.css.
   ============================================ */

:root {
  --vermelho-marca: #E30613;
  --vermelho-link: #C1121F;
  --rosa: #FFF1F2;
  --rosa-2: #FFE4E6;
}

body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #FFFFFF;
}

a, .tema-loja a { color: var(--vermelho-link); }

/* ---------- Estrutura ---------- */
.acesso {
  max-width: 440px;
  padding: 18px 22px 28px;
  gap: 22px;
}

.topo-acesso {
  position: relative;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topo-acesso .voltar {
  position: absolute;
  left: -6px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto);
  border-radius: 12px;
}
.topo-acesso .voltar:hover { background: #F4F4F2; text-decoration: none; }
.topo-acesso .logo-img { width: 170px; height: auto; display: block; }

.pilula-loja {
  align-self: center;
  margin-top: -12px;
  font-size: 13px;
  font-weight: 900;
  color: var(--vermelho-link);
  background: var(--rosa-2);
  padding: 5px 12px;
  border-radius: 999px;
}

/* ---------- Abas Entrar / Criar conta ---------- */
.abas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #F4F4F2;
  border-radius: 14px;
  padding: 4px;
}
.abas a {
  height: 48px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: #3F3F3B;
}
.abas a:hover { text-decoration: none; background: #ECECE9; }
.abas a[aria-current="page"] {
  background: var(--vermelho-marca);
  color: #FFFFFF;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(227, 6, 19, 0.3);
}

/* ---------- Formulário sem caixa ---------- */
.card-form {
  background: transparent;
  border: 0;
  padding: 0;
  gap: 16px;
}
.card-form h1 { font-size: 22px; }

.campo { gap: 7px; }
.campo label, .campo > span:first-child { font-size: 15px; font-weight: 800; color: var(--texto); }

.campo input,
.campo select,
.campo textarea {
  border: 1.5px solid #E2E2DF;
  border-radius: 12px;
}
.campo input, .campo select { height: 52px; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus,
.tema-loja .campo input:focus,
.tema-loja .campo select:focus,
.tema-loja .campo textarea:focus {
  border-color: var(--vermelho-marca);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.15);
}

/* Campo com ícone dentro (e-mail, senha) */
.campo-icone {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 6px 0 14px;
  border: 1.5px solid #E2E2DF;
  border-radius: 12px;
  background: #FFFFFF;
}
.campo-icone:focus-within {
  border-color: var(--vermelho-marca);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.15);
}
.campo-icone > svg { flex-shrink: 0; color: #3F3F3B; }
.campo .campo-icone input,
.campo .campo-icone input:focus {
  border: 0;
  box-shadow: none;
  height: 48px;
  padding: 0;
  flex: 1;
  min-width: 0;
  background: transparent;
}
.ver-senha {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #3F3F3B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ver-senha:hover { background: #F4F4F2; }

/* ---------- Botões ---------- */
.btn { border-radius: 14px; }
.btn-primario,
.tema-loja .btn-primario,
.tema-loja a.btn-primario {
  height: 54px;
  background: linear-gradient(180deg, #EC1C24, #D40513);
  color: #FFFFFF;
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.28);
}
.btn-primario:hover:not(:disabled),
.tema-loja .btn-primario:hover:not(:disabled) { background: #C40018; }

.btn-secundario { border-color: #E2E2DF; border-width: 1.5px; }
.btn-secundario:hover { background: #F7F7F5; }

.link-esqueci {
  align-self: center;
  font-size: 16px;
  font-weight: 700;
  padding: 6px;
}

/* ---------- Cartão rosa "Ainda não tem conta?" ---------- */
.convite {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 18px;
  background: var(--rosa);
}
a.convite, .tema-loja a.convite { color: var(--texto); }
a.convite:hover { text-decoration: none; background: #FFE9EB; }
.convite-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.convite-titulo { font-size: 17px; font-weight: 900; }
.convite-detalhe { font-size: 14px; color: #3F3F3B; line-height: 1.35; }

/* ---------- Rodapé ---------- */
.acesso-rodape { font-size: 14px; color: #4A4A46; gap: 10px; }
.acesso-rodape a,
.acesso-rodape .link-loja,
.tema-loja .acesso-rodape .link-cliente { color: var(--vermelho-link); font-weight: 800; }
.acesso-rodape .link-termos { font-weight: 400; color: #6B6B66; }

/* ---------- Detalhes ---------- */
.etiqueta, .tema-loja .etiqueta { background: var(--rosa-2); color: var(--vermelho-link); }
.secao-form { color: #4A4A46; }
.descricao { color: #4A4A46; }