/* ============================================================
   BUNKERWOW FROSTBOUND - LOGIN / REGISTER
   ============================================================ */

html,
body.login{
    min-height:100%;
}

body.login{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color:#dff5ff;

    background:
        linear-gradient(
            180deg,
            rgba(1,8,15,.28) 0%,
            rgba(1,8,15,.60) 55%,
            #01070d 100%
        ),
        linear-gradient(
            90deg,
            rgba(0,5,10,.50),
            transparent 35%,
            transparent 65%,
            rgba(0,5,10,.50)
        ),
        url("assets/hero-frostbound-v2.png")
        center top / cover
        no-repeat fixed;

    background-color:#01070d;
}


/* brilho de gelo atrás do painel */
body.login::before{
    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(56,190,255,.13),
            transparent 38%
        );

    z-index:0;
}


/* ============================================================
   CONTAINER
   ============================================================ */

#login{
    position:relative;
    z-index:2;

    width:min(430px,calc(100% - 36px));

    padding:38px 0 50px;

    margin:0 auto;
}


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

.login h1{
    margin:0 0 22px;
}

.login h1 a{
    width:100%;
    height:auto;

    margin:0;

    padding:0;

    background:none !important;

    text-indent:0;

    overflow:visible;

    color:#edfaff;

    font-size:0;

    font-weight:950;

    text-align:center;

    text-decoration:none;
}

.login h1 a::before{
    content:"BUNKER";

    color:#f2f8fc;

    font-size:31px;

    font-weight:950;

    letter-spacing:-.045em;

    text-shadow:
        0 0 20px rgba(255,255,255,.10);
}

.login h1 a::after{
    content:"WOW";

    color:#58d4ff;

    font-size:31px;

    font-weight:950;

    letter-spacing:-.045em;

    text-shadow:
        0 0 20px rgba(68,201,255,.35);
}


/* ============================================================
   INTRO
   ============================================================ */

.bw-login-intro{
    margin:0 0 18px;

    padding:0 8px;

    text-align:center;
}

.bw-login-intro strong{
    display:block;

    color:#f2f9ff;

    font-size:25px;

    line-height:1.2;

    letter-spacing:-.03em;
}

.bw-login-intro span{
    display:block;

    margin-top:7px;

    color:#91afc2;

    font-size:13px;

    line-height:1.5;
}


/* ============================================================
   PAINEL
   ============================================================ */

.login form{
    margin-top:0;

    padding:30px 30px 26px;

    background:
        linear-gradient(
            150deg,
            rgba(7,28,45,.96),
            rgba(2,14,25,.97)
        );

    border:
        1px solid rgba(87,197,247,.40);

    border-radius:14px;

    box-shadow:
        0 28px 75px rgba(0,0,0,.55),
        inset 0 0 38px rgba(42,153,207,.05);

    overflow:visible;
}


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

.login label{
    color:#b8d2e2;

    font-size:13px;

    font-weight:700;
}


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

.login input[type="text"],
.login input[type="email"],
.login input[type="password"]{
    min-height:48px;

    margin-top:7px;

    padding:9px 13px;

    color:#ecfaff;

    background:
        rgba(0,9,17,.82);

    border:
        1px solid rgba(82,183,232,.40);

    border-radius:7px;

    box-shadow:
        inset 0 0 15px rgba(0,0,0,.20);

    font-size:15px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.login input[type="text"]:focus,
.login input[type="email"]:focus,
.login input[type="password"]:focus{
    border-color:#5ed4ff;

    box-shadow:
        0 0 0 1px #5ed4ff,
        0 0 18px rgba(49,190,247,.18);

    outline:none;
}


/* password eye */
.login .button.wp-hide-pw{
    color:#69d8ff;
}


/* ============================================================
   BOTÃO PRINCIPAL
   ============================================================ */

.wp-core-ui .button-primary{
    min-height:46px;

    padding:0 24px;

    color:#021019;

    background:
        linear-gradient(
            180deg,
            #8ce8ff,
            #47c5f4
        );

    border:
        1px solid #b8f1ff;

    border-radius:7px;

    box-shadow:
        inset 0 0 18px rgba(255,255,255,.22),
        0 0 24px rgba(50,198,255,.18);

    font-weight:850;

    text-shadow:none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus{
    color:#021019;

    background:
        linear-gradient(
            180deg,
            #a0edff,
            #59cef8
        );

    border-color:#d2f7ff;

    transform:translateY(-1px);

    box-shadow:
        0 0 25px rgba(70,205,255,.30);
}


/* botão ocupa largura toda no registo */
.login-action-register .submit .button-primary{
    width:100%;
}


/* ============================================================
   CHECKBOX
   ============================================================ */

.login input[type="checkbox"]{
    border-color:
        rgba(83,185,233,.50);

    background:
        rgba(0,10,18,.80);
}


/* ============================================================
   MENSAGENS / ERROS
   ============================================================ */

.login .message,
.login .notice,
.login #login_error{
    margin:
        0 0
        18px;

    padding:
        13px 15px;

    color:#cde9f7;

    background:
        rgba(5,29,45,.92);

    border:
        1px solid rgba(79,183,232,.35);

    border-left:
        3px solid #58cfff;

    border-radius:7px;

    box-shadow:none;
}

.login #login_error{
    border-left-color:#ff6161;
}


/* ============================================================
   LINKS INFERIORES
   ============================================================ */

.login #nav,
.login #backtoblog,
.login .privacy-policy-page-link{
    margin:
        18px 0
        0;

    padding:0;

    text-align:center;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a{
    color:#8db5cc;

    font-size:13px;

    text-decoration:none;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover{
    color:#65d7ff;
}


/* voltar ao site */
.login #backtoblog a::before{
    content:"← ";
}


/* ============================================================
   TEXTO AUXILIAR WORDPRESS
   ============================================================ */

.login .description,
.login .indicator-hint{
    color:#7795a9;

    font-size:12px;
}


/* ============================================================
   PASSWORD STRENGTH
   ============================================================ */

#pass-strength-result{
    color:#cceaf7;

    background:#071b2a;

    border-color:#25536d;
}

#pass-strength-result.strong{
    color:#88ff9d;

    background:#0a2919;

    border-color:#2a8a47;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:650px){

    body.login{
        align-items:flex-start;

        background-size:
            auto 100vh;

        background-position:
            center top;

        background-attachment:scroll;
    }

    #login{
        width:
            calc(100% - 28px);

        padding:
            55px 0
            35px;
    }

    .login h1 a::before,
    .login h1 a::after{
        font-size:27px;
    }

    .login form{
        padding:
            25px 20px
            22px;
    }

    .bw-login-intro strong{
        font-size:22px;
    }

}


/* ============================================================
   DESATIVAR FUNDO BRANCO DO AUTOFILL CHROME
   ============================================================ */

.login input:-webkit-autofill,
.login input:-webkit-autofill:hover,
.login input:-webkit-autofill:focus{
    -webkit-text-fill-color:#ecfaff;

    -webkit-box-shadow:
        0 0 0 1000px #04111d inset;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* ============================================================
   V2 - AJUSTES REGISTO FROSTBOUND
   ============================================================ */

/* esconder o logo BUNKERWOW do WordPress:
   o lettering já existe no background */
.login h1{
    display:none !important;
}


/* painel geral mais largo */
#login{
    width:min(500px,calc(100% - 36px)) !important;
    padding-top:250px !important;
}


/* remover mensagem padrão "Register For This Site" */
.login-action-register .message.register{
    display:none !important;
}


/* formulário */
.login-action-register form{
    width:100% !important;
    box-sizing:border-box !important;

    padding:30px !important;
}


/* todos os campos com exatamente a mesma largura */
.login-action-register input[type="text"],
.login-action-register input[type="email"],
.login-action-register input[type="password"],
.login-action-register .input,
.login-action-register .password-input-wrapper{
    width:100% !important;
    max-width:none !important;

    box-sizing:border-box !important;
}


/* wrapper password também ocupa tudo */
.login-action-register .user-pass-wrap,
.login-action-register .wp-pwd{
    width:100% !important;
}


/* espaço uniforme entre campos */
.login-action-register form > p,
.login-action-register .user-pass-wrap{
    margin-bottom:20px !important;
}


/* botão */
.login-action-register .submit{
    margin-top:24px !important;
}

.login-action-register .submit .button-primary{
    width:100% !important;
}


/* intro */
.login-action-register .bw-login-intro{
    margin-bottom:22px !important;
}


/* mobile */
@media(max-width:650px){

    #login{
        width:calc(100% - 28px) !important;

        padding-top:180px !important;
    }

    .login-action-register form{
        padding:24px 20px !important;
    }
}


/* ============================================================
   V3 - PASSWORD WIDTH + POLIMENTO
   ============================================================ */

/* WordPress / ACore wrappers de password */
.login-action-register #reg_passmail,
.login-action-register .user-pass1-wrap,
.login-action-register .user-pass2-wrap,
.login-action-register .password-input-wrapper,
.login-action-register .wp-pwd{
    width:100% !important;
    max-width:none !important;
}


/* password inputs */
.login-action-register input[name="pass1"],
.login-action-register input[name="pass2"],
.login-action-register #pass1,
.login-action-register #pass2{
    display:block !important;

    width:100% !important;
    max-width:none !important;

    box-sizing:border-box !important;
}


/* qualquer p que contenha campos */
.login-action-register form p{
    width:100% !important;
    box-sizing:border-box !important;
}


/* pequeno espaço adicional antes do botão */
.login-action-register .submit{
    padding:0 !important;
}


/* links inferiores */
.login-action-register #nav{
    margin-top:20px !important;
}

.login-action-register #backtoblog{
    margin-top:14px !important;
}


/* mobile */
@media(max-width:650px){

    #login{
        padding-top:155px !important;
    }

    .login-action-register form{
        border-radius:12px !important;
    }
}


/* ============================================================
   V4 - POLIMENTO LOGIN
   ============================================================ */

/* mais espaço dentro do formulário */
.login-action-login form{
    padding:32px 30px 28px !important;
}


/* espaço entre password e opções */
.login-action-login .user-pass-wrap{
    margin-bottom:20px !important;
}


/* linha lembrar-me / botão */
.login-action-login .forgetmenot{
    margin-top:7px !important;
    margin-bottom:18px !important;
}


/* botão Entrar em largura total */
.login-action-login .submit{
    clear:both !important;
    margin:18px 0 0 !important;
    padding:0 !important;
}

.login-action-login .submit .button-primary{
    float:none !important;

    display:block !important;

    width:100% !important;
    min-height:46px !important;
}


/* corrigir alinhamento do checkbox */
.login-action-login .forgetmenot label{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
}

.login-action-login .forgetmenot input{
    margin:0 !important;
}


/* a seta já é colocada pelo PHP */
.login #backtoblog a::before{
    content:none !important;
}


/* links */
.login-action-login #nav{
    margin-top:22px !important;
}

.login-action-login #backtoblog{
    margin-top:15px !important;
}


/* mobile */
@media(max-width:650px){

    .login-action-login form{
        padding:26px 20px !important;
    }

}


/* ============================================================
   V5 - MELHORAR LEITURA DO TÍTULO LOGIN
   ============================================================ */

.bw-login-intro{
    width:fit-content !important;
    max-width:90% !important;

    margin:
        0 auto 22px !important;

    padding:
        12px 22px 13px !important;

    border-radius:
        10px !important;

    background:
        rgba(1,12,22,.58) !important;

    border:
        1px solid rgba(90,196,244,.18) !important;

    backdrop-filter:
        blur(5px) !important;

    -webkit-backdrop-filter:
        blur(5px) !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.20) !important;
}

.bw-login-intro strong{
    color:
        #ffffff !important;

    font-size:
        26px !important;

    font-weight:
        900 !important;

    text-shadow:
        0 2px 4px rgba(0,0,0,.95),
        0 0 16px rgba(64,199,255,.28) !important;
}

.bw-login-intro span{
    color:
        #c1d8e6 !important;

    font-size:
        13px !important;

    text-shadow:
        0 1px 3px rgba(0,0,0,.95) !important;
}


/* ============================================================
   V6 - LINKS INFERIORES FROSTBOUND
   ============================================================ */

body.login #nav{
    width:100% !important;
    margin:18px auto 0 !important;
    padding:0 !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;

    color:transparent !important;
    font-size:0 !important;
}

body.login #nav a{
    min-width:150px !important;
    min-height:40px !important;

    padding:9px 16px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    border:1px solid rgba(90,200,250,.38) !important;
    border-radius:8px !important;

    background:
        linear-gradient(
            180deg,
            rgba(12,54,79,.82),
            rgba(3,25,40,.88)
        ) !important;

    color:#bcecff !important;

    font-size:12px !important;
    font-weight:750 !important;
    line-height:1 !important;

    text-decoration:none !important;

    box-shadow:
        inset 0 0 14px rgba(67,190,244,.04),
        0 8px 20px rgba(0,0,0,.18) !important;

    transition:.18s ease !important;
}

body.login #nav a:hover{
    color:#fff !important;
    border-color:#62d6ff !important;

    background:
        linear-gradient(
            180deg,
            rgba(21,91,128,.92),
            rgba(5,42,65,.94)
        ) !important;

    box-shadow:
        0 0 18px rgba(54,198,255,.18) !important;

    transform:translateY(-1px) !important;
}

body.login #backtoblog{
    width:100% !important;
    margin:12px auto 0 !important;
    padding:0 !important;
    text-align:center !important;
}

body.login #backtoblog a{
    min-width:310px !important;
    min-height:38px !important;

    padding:8px 16px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    border:1px solid rgba(84,162,199,.24) !important;
    border-radius:8px !important;

    background:rgba(1,17,29,.72) !important;

    color:#82b5cc !important;

    font-size:12px !important;
    font-weight:700 !important;

    text-decoration:none !important;

    transition:.18s ease !important;
}

body.login #backtoblog a:hover{
    color:#d5f5ff !important;
    border-color:rgba(89,205,255,.55) !important;
    background:rgba(5,42,62,.82) !important;
}

@media(max-width:650px){

    body.login #nav{
        flex-direction:column !important;
    }

    body.login #nav a,
    body.login #backtoblog a{
        width:100% !important;
        min-width:0 !important;
    }

}