/* ============================================================
   LABRINT · CSS para LoginPress
   Cole isto em: LoginPress → Customizer → Custom CSS
   ============================================================ */

/* Importa as fontes do Google (LoginPress permite @import no topo) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ----- Tokens ----- */
:root {
  --c-bg: #F5F1EE;
  --c-bg-alt: #EFE9E5;
  --c-rose: #D9B5AE;
  --c-rose-deep: #B8928B;
  --c-rose-pale: #ECD9D2;
  --c-navy: #3A4A6B;
  --c-navy-deep: #2A3650;
  --c-ink: #1A1F2E;
  --c-ink-soft: #4A4F5C;
  --c-mute: #8A8580;
  --c-rule: #D8D2CC;
  --f-serif: 'Fraunces', Georgia, serif;
  --f-sans: 'Outfit', -apple-system, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ----- Layout · duas colunas ----- */
html, body.login {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  background: var(--c-bg) !important;
  font-family: var(--f-sans) !important;
  color: var(--c-ink) !important;
}

body.login {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: 100vh !important;
}

/* Wrapper das duas colunas */
.labrint-login-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 0;
}


/* Coluna esquerda · navy (injetada pelo JS) */
.labrint-login-side {
  flex: 1;
  background: var(--c-navy-deep);
  color: var(--c-bg);
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 80px);
}
.labrint-login-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(217,181,174,0.18), transparent 50%);
  pointer-events: none;
}
.labrint-login-side > * { position: relative; z-index: 1; }
.labrint-login-side h2 {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 16ch;
  color: var(--c-bg);
  margin: 16px 0 0;
}
.lb-label-mono {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,241,238,0.6);
  font-weight: 400;
}
.labrint-login-side .lb-login-tip {
  background: rgba(245,241,238,0.06);
  border-left: 2px solid var(--c-rose);
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(245,241,238,0.85);
  max-width: 38ch;
  margin-top: 32px;
}
.labrint-login-side .lb-login-tip strong {
  color: var(--c-rose);
  font-weight: 500;
}

/* Coluna direita · formulário */
.labrint-login-form-side {
  flex: 1;
  background: var(--c-bg);
  padding: 64px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
}

/* Reset do container do WP */
#login {
  width: 100% !important;
  max-width: 380px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ----- Esconde o logo padrão WP (substituído pelo heading custom via JS) ----- */
#login h1.wp-login-logo,
.login h1 a {
  display: none !important;
}

/* ----- Heading custom (injetado pelo JS) ----- */
.labrint-heading {
  margin-bottom: 32px;
}
.labrint-heading .lb-label-mono {
  color: var(--c-mute);
}
.labrint-heading .lb-h1 {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 12px 0 8px;
  color: var(--c-ink);
}
.labrint-heading .lb-subtitle {
  color: var(--c-ink-soft);
  font-size: 14px;
  margin: 0;
}

/* ----- Form ----- */
#loginform,
#lostpasswordform,
#resetpassform {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
#loginform p,
#lostpasswordform p,
#resetpassform p { margin-bottom: 24px !important; }

/* Labels */
#loginform label,
#lostpasswordform label,
#resetpassform label {
  font-family: var(--f-mono);
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mute) !important;
  margin-bottom: 8px;
  font-weight: 400 !important;
  display: block;
}

/* Inputs · estilo só com linha embaixo */
#loginform input[type="text"],
#loginform input[type="email"],
#loginform input[type="password"],
#loginform input.input,
#lostpasswordform input[type="text"],
#lostpasswordform input[type="email"],
#lostpasswordform input[type="password"],
#lostpasswordform input.input,
#resetpassform input[type="text"],
#resetpassform input[type="email"],
#resetpassform input[type="password"],
#resetpassform input.input {
  width: 100% !important;
  padding: 14px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--c-rule) !important;
  background: transparent !important;
  font-family: var(--f-sans) !important;
  font-size: 16px !important;
  color: var(--c-ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  transition: border-color 0.18s ease;
  min-height: auto !important;
  line-height: 1.5 !important;
}
#loginform input[type="text"]:focus,
#loginform input[type="email"]:focus,
#loginform input[type="password"]:focus,
#loginform input.input:focus,
#lostpasswordform input[type="text"]:focus,
#lostpasswordform input[type="email"]:focus,
#lostpasswordform input[type="password"]:focus,
#lostpasswordform input.input:focus,
#resetpassform input[type="text"]:focus,
#resetpassform input[type="email"]:focus,
#resetpassform input[type="password"]:focus,
#resetpassform input.input:focus {
  border-bottom-color: var(--c-navy) !important;
  box-shadow: none !important;
  outline: none !important;
}
#loginform input::placeholder,
#lostpasswordform input::placeholder,
#resetpassform input::placeholder { color: var(--c-mute); }

/* Wrapper do password do WP · remove o estilo de "olhinho" caixa */
.wp-pwd {
  position: relative;
}
.wp-pwd button.button.button-secondary.wp-hide-pw {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
  height: auto !important;
  color: var(--c-mute) !important;
}
.wp-pwd button.button.button-secondary.wp-hide-pw:hover { color: var(--c-ink) !important; }

/* "Lembrar-me" + "Esqueci minha senha" na mesma linha */
.forgetmenot {
  display: block !important;
  margin-top: 24px !important;
  margin-bottom: 20px !important;
  clear: both;
}
.forgetmenot label {
  font-family: var(--f-sans) !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--c-ink-soft) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.forgetmenot input[type="checkbox"] {
  accent-color: var(--c-navy);
  margin: 0;
}

/* Botão Entrar */
.submit { margin-top: 24px !important; }
#wp-submit,
.submit input[type="submit"] {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px !important;
  font-family: var(--f-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--c-ink) !important;
  border-radius: 0 !important;
  background: var(--c-ink) !important;
  color: var(--c-bg) !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none !important;
  text-shadow: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
#wp-submit:hover,
.submit input[type="submit"]:hover {
  background: var(--c-navy) !important;
  border-color: var(--c-navy) !important;
  transform: translateY(-1px);
}

/* Página de redefinição: força/medidor de senha */
#resetpassform .wp-pwd {
  margin-bottom: 20px;
}
#resetpassform .description,
#resetpassform .indicator-hint,
#resetpassform #pass-strength-result {
  font-family: var(--f-sans) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--c-ink-soft) !important;
}
#resetpassform #pass-strength-result {
  margin: 8px 0 16px !important;
  padding: 8px 10px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Links abaixo do form ("Perdeu a senha", "Voltar ao site") */
#nav, #backtoblog {
  display: block !important;
  width: 100% !important;
  font-size: 13px !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  text-shadow: none !important;
  clear: both;
}
#nav a, #backtoblog a {
  color: var(--c-navy) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-shadow: none !important;
}
#nav a:hover, #backtoblog a:hover {
  color: var(--c-ink) !important;
}

/* Mensagens de erro */
.login .message,
.login #login_error {
  background: var(--c-rose-pale) !important;
  border-left: 3px solid var(--c-rose-deep) !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: var(--c-ink) !important;
  box-shadow: none !important;
  margin-bottom: 20px !important;
}

/* Esconde o "language switcher" se aparecer */
.login .language-switcher { display: none !important; }

/* ----- Responsivo ----- */
@media (max-width: 880px) {
  .labrint-login-body { flex-direction: column !important; }
  .labrint-login-side {
    padding: 40px 24px;
    min-height: 280px;
  }
  .labrint-login-side h2 { font-size: 28px; }
  .labrint-login-form-side {
    padding: 40px 24px;
    min-height: auto;
  }
}