/**
 * Bebelume PMPro Profile — login.css
 * Customiza visualmente o wp-login.php sem alterar estrutura HTML.
 *
 * Variáveis CSS (--bbl-*) são definidas via inject_head() em PHP,
 * pois dependem do contexto do site.
 */

/* ============================================================
   BODY / FUNDO
   ============================================================ */

body.login {
    background: linear-gradient(135deg, #fce4ec 0%, #e3f2fd 100%);
    font-family: var(--bbl-font-body, 'Quicksand', sans-serif);
}

body.login::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(231, 54, 101, .08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 188, 212, .08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   LOGO
   ============================================================ */

#login h1 a {
    /* Dimensões e background-image são definidos via inject_head() */
    display: block;
    margin: 0 auto 8px;
    text-indent: -9999px;
    overflow: hidden;
}

/* ============================================================
   CAIXA PRINCIPAL (#login)
   ============================================================ */

#login {
    width: 360px;
    padding: 32px 0 16px;
    position: relative;
    z-index: 1;
}

/* ============================================================
   FORMULÁRIO
   ============================================================ */

#loginform,
#registerform,
#lostpasswordform,
#resetpassform {
    background: #ffffff;
    border: none;
    border-radius: var(--bbl-radius-lg, 16px);
    box-shadow: 0 8px 32px rgba(44, 62, 80, .10), 0 2px 8px rgba(44, 62, 80, .06);
    padding: 32px 28px 24px;
    margin-top: 0;
}

/* Título do formulário (h1 fica fora, mas p.message fica dentro) */

/* ============================================================
   LABELS
   ============================================================ */

#loginform label,
#registerform label,
#lostpasswordform label,
#resetpassform label {
    font-family: var(--bbl-font-display, 'Nunito', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--bbl-text-secondary, #5A6C7D);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
    display: block;
}

/* ============================================================
   INPUTS
   ============================================================ */

#loginform input[type="text"],
#loginform input[type="email"],
#loginform input[type="password"],
#registerform input[type="text"],
#registerform input[type="email"],
#registerform input[type="password"],
#lostpasswordform input[type="text"],
#lostpasswordform input[type="email"],
#resetpassform input[type="text"],
#resetpassform input[type="email"],
#resetpassform input[type="password"] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 2px solid var(--bbl-border, #E0E7ED);
    border-radius: var(--bbl-radius-md, 12px);
    background: var(--bbl-bg-light, #F5F9FC);
    font-family: var(--bbl-font-body, 'Quicksand', sans-serif);
    font-size: 15px;
    color: var(--bbl-text-primary, #2C3E50);
    transition: border-color .2s, box-shadow .2s;
    box-shadow: none;
    outline: none;
    box-sizing: border-box;
}

#loginform input[type="text"]:focus,
#loginform input[type="email"]:focus,
#loginform input[type="password"]:focus,
#registerform input[type="text"]:focus,
#registerform input[type="email"]:focus,
#registerform input[type="password"]:focus,
#lostpasswordform input[type="text"]:focus,
#lostpasswordform input[type="email"]:focus,
#resetpassform input[type="text"]:focus,
#resetpassform input[type="email"]:focus,
#resetpassform input[type="password"]:focus {
    border-color: var(--bbl-pink, #E73665);
    box-shadow: 0 0 0 3px rgba(231, 54, 101, .12);
    background: #ffffff;
}

/* Força o input[type="password"] show/hide do WP a respeitar o border-radius */
.wp-pwd {
    border-radius: var(--bbl-radius-md, 12px) !important;
    overflow: hidden;
}

.wp-pwd input[type="password"],
.wp-pwd input[type="text"] {
    border-radius: 0 !important;
}

/* ============================================================
   CHECKBOX "Lembrar-me"
   ============================================================ */

#rememberme {
    accent-color: var(--bbl-pink, #E73665);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.forgetmenot label {
    font-size: 13px;
    color: var(--bbl-text-secondary, #5A6C7D);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

/* ============================================================
   BOTÃO SUBMIT
   ============================================================ */

#loginform .button-primary,
#registerform .button-primary,
#lostpasswordform .button-primary,
#resetpassform .button-primary,
input#wp-submit,
input.button-primary {
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, var(--bbl-pink, #E73665) 0%, #c0254f 100%);
    border: none;
    border-radius: var(--bbl-radius-md, 12px);
    color: #ffffff !important;
    font-family: var(--bbl-font-display, 'Nunito', sans-serif);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, filter .15s;
    box-shadow: 0 4px 16px rgba(231, 54, 101, .30);
    text-shadow: none;
    margin-top: 8px;
}

input#wp-submit:hover,
input.button-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(231, 54, 101, .38);
}

input#wp-submit:active,
input.button-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(231, 54, 101, .25);
}

/* ============================================================
   LINKS ABAIXO DO FORMULÁRIO
   ============================================================ */

#nav,
#backtoblog {
    text-align: center;
    padding: 12px 0 4px;
}

#nav a,
#backtoblog a {
    color: var(--bbl-text-secondary, #5A6C7D);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s;
}

#nav a:hover,
#backtoblog a:hover {
    color: var(--bbl-pink, #E73665);
}

/* Separador entre links do #nav */
#nav .login-link-separator {
    color: var(--bbl-border, #E0E7ED);
    margin: 0 4px;
}

/* ============================================================
   MENSAGENS (erro / sucesso / info)
   ============================================================ */

/* Erro */
#login_error,
.login .message.error,
.login #login_error {
    background: #fff0f3;
    border-left: 4px solid var(--bbl-pink, #E73665);
    border-radius: 0 var(--bbl-radius-md, 12px) var(--bbl-radius-md, 12px) 0;
    color: #c0254f;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: none;
}

/* Info / sucesso */
.login .message,
#login .message {
    background: #e8f8fb;
    border-left: 4px solid var(--bbl-cyan, #00BCD4);
    border-radius: 0 var(--bbl-radius-md, 12px) var(--bbl-radius-md, 12px) 0;
    color: #006d7e;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: none;
}

/* ============================================================
   INDICADOR DE FORÇA DE SENHA
   ============================================================ */

.pw-weak  { color: var(--bbl-pink,   #E73665); }
.pw-short { color: var(--bbl-yellow, #FFD54F); }
.pw-good  { color: var(--bbl-cyan,   #00BCD4); }
.pw-strong,
.pw-strong + .pw-strength-text { color: var(--bbl-green, #66BB6A); }

/* ============================================================
   FOOTER DO WP-LOGIN (versão WordPress)
   ============================================================ */

.login #backtoblog,
.login #nav {
    position: relative;
    z-index: 1;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 400px) {
    #login {
        width: 100%;
        padding: 24px 16px 16px;
    }

    #loginform,
    #registerform,
    #lostpasswordform,
    #resetpassform {
        padding: 24px 20px 20px;
    }
}