/* ═══════════════════════════════════════════════════════════════════
   OC — Entrar / Recuperar senha (área de membros)
   Substitui o formulário cru do WooCommerce em /minha-conta/.
   Prefixo .oclg-  ·  paleta do header: #7958D7 / #331869 / #F8F8FF
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --oclg-roxo:        #7958D7;
    --oclg-roxo-fundo:  #4b2a8f;
    --oclg-tinta:       #331869;
    --oclg-tinta-fraca: #6b6484;
    --oclg-borda:       #e3ddf5;
}

/* ── Fundo da página inteira, só quando o card está no ar ───────────── */
body.oclg-entrar {
    background: linear-gradient(180deg, #f8f8ff 0%, #f3f0fd 45%, #efeafb 100%) !important;
}
body.oclg-entrar article.page > .entry-content {
    margin: 0;
    padding: 0;
}
body.oclg-entrar .woocommerce,
body.oclg-entrar #page,
body.oclg-entrar #content,
body.oclg-entrar #primary,
body.oclg-entrar .site-main,
body.oclg-entrar article.page {
    background: transparent !important;
}

/* ── Bloco ──────────────────────────────────────────────────────────── */
.oclg {
    max-width: 420px;
    margin: 0 auto;
    padding: 3.25rem 0 4rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--oclg-tinta);
    box-sizing: border-box;
}
.oclg *,
.oclg *::before,
.oclg *::after { box-sizing: border-box; }

.oclg-titulo {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--oclg-tinta);
    text-align: center;
    margin: 0 0 0.5rem;
}
.oclg-sub {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--oclg-tinta-fraca);
    text-align: center;
    margin: 0 0 1.75rem;
}

/* ── Cartão ─────────────────────────────────────────────────────────── */
.oclg-card {
    background: #fff;
    border: 1px solid rgba(121, 88, 215, 0.12);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 24px 50px -34px rgba(51, 24, 105, 0.55),
                0 2px 6px -2px rgba(51, 24, 105, 0.06);
}

/* ── Avisos (erros do Woo + flash de logout) ────────────────────────── */
/* A folga vem dos filhos, não do container: sem aviso o div fica com altura
   zero, e :empty não serviria (o PHP deixa espaços em branco dentro dele). */
.oclg-avisos { margin: 0; }
.oclg-avisos > * { margin-bottom: 0.75rem; }
.oclg-avisos > *:last-child { margin-bottom: 1.25rem; }
.oclg-avisos .woocommerce-error,
.oclg-avisos .woocommerce-message,
.oclg-avisos .woocommerce-info,
.oclg-flash {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.45;
    border: 1px solid transparent;
    background: #f6f3ff;
    color: var(--oclg-tinta);
}
.oclg-avisos .woocommerce-error {
    background: #fdf1ef;
    border-color: rgba(192, 57, 43, 0.25);
    color: #8f2b20;
}
.oclg-avisos .woocommerce-message {
    background: #eef8f4;
    border-color: rgba(31, 122, 92, 0.25);
    color: #135843;
}
.oclg-flash {
    border-color: rgba(121, 88, 215, 0.25);
    color: #46297f;
}
/* O Woo desenha um ícone em ::before com padding-left de 3.5em, e o tema
   centraliza o texto do aviso. Nenhum dos dois cabe dentro do cartão. */
.oclg-avisos .woocommerce-error,
.oclg-avisos .woocommerce-message,
.oclg-avisos .woocommerce-info { text-align: left !important; }
.oclg-avisos .woocommerce-error::before,
.oclg-avisos .woocommerce-message::before,
.oclg-avisos .woocommerce-info::before,
.oclg-avisos li::before { content: none !important; display: none !important; }

.oclg-avisos .woocommerce-error li,
.oclg-avisos .woocommerce-message li,
.oclg-avisos .woocommerce-info li { list-style: none; margin: 0; padding: 0; }
.oclg-avisos .woocommerce-error li + li { margin-top: 0.35rem; }
.oclg-avisos a { color: var(--oclg-roxo); }
.oclg-avisos .button { display: none; }

/* Sem JS o aviso não é movido para dentro do cartão: pelo menos fica
   alinhado com ele, em vez de esparramar na largura do container. */
body.oclg-entrar .woocommerce > .woocommerce-notices-wrapper {
    max-width: 420px;
    margin: 2.5rem auto -1.5rem;
}
body.oclg-entrar .woocommerce > .woocommerce-notices-wrapper .woocommerce-error,
body.oclg-entrar .woocommerce > .woocommerce-notices-wrapper .woocommerce-message,
body.oclg-entrar .woocommerce > .woocommerce-notices-wrapper .woocommerce-info {
    list-style: none;
    margin: 0;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.45;
    background: #fdf1ef;
    border: 1px solid rgba(192, 57, 43, 0.25);
    color: #8f2b20;
}
body.oclg-entrar .woocommerce > .woocommerce-notices-wrapper li { list-style: none; margin: 0; }

/* ── Desmonta o que o WooCommerce põe por conta própria ─────────────── */

/* form.login vem com moldura e padding do CSS do Woo: viraria um cartão
   dentro do cartão. */
.oclg form.login,
.oclg form.register,
.oclg form.lost_reset_password,
.oclg form.woocommerce-form {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* O Woo injeta por JS um <span class="password-input"> com um olhinho.
   Aqui quem revela a senha é o botão "Mostrar", então o olho sai.
   O span vira `display: contents` porque o CSS do Woo o deixa flex-column
   com justify-content:center — o que empurrava o campo 25px para baixo do
   próprio invólucro e desalinhava o "Mostrar". Sem caixa, sem briga. */
.oclg .password-input { display: contents !important; }
.oclg .show-password-input { display: none !important; }

/* ── Campos ─────────────────────────────────────────────────────────── */
.oclg-campo { margin-bottom: 1.15rem; padding: 0 !important; }

.oclg-rotulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}
/* line-height forçado: o Woo põe 2 nos labels de .form-row, o que abre um
   buraco entre o rótulo e o campo. */
.oclg-campo label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35 !important;
    color: var(--oclg-tinta);
    margin: 0 0 0.4rem !important;
    letter-spacing: 0.005em;
}
.oclg-rotulo label { margin-bottom: 0 !important; }

.oclg-campo input[type="text"],
.oclg-campo input[type="email"],
.oclg-campo input[type="password"] {
    width: 100% !important;
    display: block;
    padding: 0.8rem 1rem !important;
    font-family: inherit;
    font-size: 1rem !important;
    line-height: 1.4;
    color: var(--oclg-tinta) !important;
    background: #fff !important;
    border: 1px solid var(--oclg-borda) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    height: auto !important;
    margin: 0 !important;
}
.oclg-campo input::placeholder { color: #a9a3bd; opacity: 1; }
.oclg-campo input:focus {
    outline: none !important;
    border-color: var(--oclg-roxo) !important;
    box-shadow: 0 0 0 3px rgba(121, 88, 215, 0.18) !important;
}

/* senha + botão Mostrar */
.oclg-senha { position: relative; }
.oclg-senha input { padding-right: 5.25rem !important; }
.oclg-mostrar {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0.25rem 0.15rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--oclg-roxo);
    cursor: pointer;
    line-height: 1;
}
.oclg-mostrar:hover { color: var(--oclg-roxo-fundo); text-decoration: underline; }
.oclg-mostrar:focus-visible {
    outline: 2px solid var(--oclg-roxo);
    outline-offset: 2px;
    border-radius: 4px;
}

.oclg-esqueci {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--oclg-roxo);
    text-decoration: none;
    white-space: nowrap;
}
.oclg-esqueci:hover { text-decoration: underline; }

/* ── Lembrar-me ─────────────────────────────────────────────────────── */
.oclg-lembrar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.15rem 0 1rem;
    font-size: 0.875rem;
    color: var(--oclg-tinta-fraca);
    cursor: pointer;
}
.oclg-lembrar input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--oclg-roxo);
    cursor: pointer;
    flex: 0 0 auto;
}

/* ── Botão ──────────────────────────────────────────────────────────── */
.oclg button[type="submit"] {
    display: block;
    float: none !important; /* o tema flutua .button e o cartão perdia a altura */
    width: 100%;
    padding: 0.95rem 1rem !important;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.2;
    color: #fff !important;
    background: linear-gradient(135deg, var(--oclg-roxo-fundo) 0%, var(--oclg-roxo) 100%) !important;
    border: 0 !important;
    border-radius: 10px !important;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.005em;
    box-shadow: 0 12px 24px -14px rgba(75, 42, 143, 0.85);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    height: auto !important;
    margin: 0.35rem 0 0 !important;
}
.oclg button[type="submit"]:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 16px 28px -14px rgba(75, 42, 143, 0.9);
}
.oclg button[type="submit"]:active { transform: translateY(0); }
.oclg button[type="submit"]:focus-visible {
    outline: 2px solid var(--oclg-tinta);
    outline-offset: 3px;
}

/* ── Rodapé do bloco ────────────────────────────────────────────────── */
.oclg-rodape {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--oclg-tinta-fraca);
}
.oclg-rodape a {
    color: var(--oclg-tinta);
    font-weight: 600;
    text-decoration: none;
}
.oclg-rodape a:hover { color: var(--oclg-roxo); text-decoration: underline; }

.oclg-legal {
    margin: 0.9rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #8f89a3;
}
.oclg-legal a { color: #8f89a3; text-decoration: underline; }
.oclg-legal a:hover { color: var(--oclg-roxo); }

/* ── Recuperar / redefinir senha ────────────────────────────────────── */
.oclg-explica {
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--oclg-tinta-fraca);
}

/* ── Criar conta ────────────────────────────────────────────────────── */
/* Nasce da mesma folha do login de propósito: as duas telas são a mesma
   porta, e qualquer diferença de espaçamento entre elas seria lida como
   "mudei de site". Só a dica abaixo do e-mail é nova. */
.oclg-dica {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #8f89a3;
}

/* ── Telas estreitas ────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .oclg { padding: 2.25rem 0 3rem; max-width: 100%; }
    .oclg-titulo { font-size: 1.65rem; }
    .oclg-card { padding: 1.5rem 1.25rem; border-radius: 14px; }
    .oclg-rotulo { flex-wrap: wrap; gap: 0.25rem 0.75rem; }
}