/**
 * Estilos do shortcode [mpi_login] (abas de entrar/criar conta).
 *
 * Motivo de existir num arquivo próprio, enfileirado via wp_enqueue_style,
 * em vez de <style> inline no template: esse shortcode costuma rodar
 * dentro de um menu offset/flyout do tema, e vários desses construtores de
 * menu filtram o HTML do item (removendo tags <style>/<script>, mas
 * mantendo o texto de dentro como conteúdo visível). Um arquivo .css
 * carregado no <head> da página não passa por esse filtro.
 */
.mpi-login-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--mpi-border, #e5e7eb); }
.mpi-login-tab {
    all: unset;
    flex: 1;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    font-weight: 700;
    color: var(--mpi-muted, #6b7280);
    background-color: transparent;
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
    transition: background-color .15s, color .15s;
}
/* Sobrescreve qualquer hover de botão/link vindo do tema (por isso o
   !important) — cores fixas do padrão do site, não as do tema. */
.mpi-login-tab:hover,
.mpi-login-tab:focus-visible {
    background-color: #f9b400 !important;
    color: #2D241F !important;
}
.mpi-login-tab.is-active { color: var(--mpi-dark, #12172b); border-bottom-color: var(--mpi-accent, #F9B400); }
.mpi-login-erro { color: #dc2626; font-weight: 600; }
.mpi-login-tipo-conta { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 4px; width: 100%; }
.mpi-login-tipo-opcao { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.mpi-login-tipo-opcao input { width: auto; }
.mpi-login-tipo-aviso { font-size: 12px; color: var(--mpi-muted, #6b7280); margin: 8px 0 0; }

.mpi-login-forca-senha { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.mpi-login-forca-senha li {
    font-size: 12px;
    color: var(--mpi-muted, #6b7280);
    padding-left: 20px;
    position: relative;
}
.mpi-login-forca-senha li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--mpi-border, #e5e7eb);
    box-sizing: border-box;
}
.mpi-login-forca-senha li.is-ok { color: var(--mpi-green, #16a34a); }
.mpi-login-forca-senha li.is-ok::before {
    content: '✓';
    border-color: var(--mpi-green, #16a34a);
    background: var(--mpi-green, #16a34a);
    color: #fff;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
}

/* Botão "mostrar senha" — injetado por mpi-login.js ao redor de cada
   input[type=password] dentro do shortcode de login/cadastro. */
.mpi-senha-wrap { position: relative; }
.mpi-senha-wrap input[type="password"],
.mpi-senha-wrap input[type="text"] {
    padding-right: 42px !important;
}
.mpi-senha-toggle {
    all: unset;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--mpi-muted, #6b7280);
}
.mpi-senha-toggle:hover,
.mpi-senha-toggle:focus-visible { color: var(--mpi-dark, #12172b); }
.mpi-senha-toggle svg { width: 18px; height: 18px; }
