[data-theme="custom"], :root{
	--primary-color-hue: 210;
	--primary-color-saturation: 100%;
	--primary-color-lightness: 25%;
	--banner-background: url(../img/banner.svg);
}

.login-page {
	--login-logo: url("https://popcolor.com.br/assets/logo-popcolor.png"); /* for relative path, must be relative to the css file or use full url starting by http:// */
}
/* Here, the content of the common custom CSS defined into Home - Setup - Display - CSS */
/* ===== POPCOLOR | ÁREA EXCLUSIVA DO CLIENTE ===== */

body.login-page {
    background:
        radial-gradient(circle at 65% 30%, rgba(230,0,126,.10), transparent 35%),
        linear-gradient(135deg,#050506 0%,#0b0b0e 55%,#151118 100%) !important;
    background-attachment: fixed !important;
}

.login-page__container {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:100vh !important;
}

/* CARTÃO */
.login-screen {
    width:500px !important;
    min-height:580px !important;
    background:linear-gradient(145deg,#151519,#070709) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:24px !important;
    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        0 0 45px rgba(230,0,126,.12) !important;
    overflow:hidden !important;
}

/* REMOVE O DESENHO AZUL ANTIGO */
.login-screen__background,
.login-screen__background__shape {
    display:none !important;
}

.login-screen__content {
    position:relative !important;
    z-index:2 !important;
}

.login {
    padding:42px 38px 45px !important;
}


/* =========================
   LOGO NOVA POPCOLOR
   ========================= */

.login__logo {
    width:300px !important;
    max-width:300px !important;
    height:115px !important;

    background-image:url("https://popcolor.com.br/wp-content/themes/popcolor/assets/images/logo.webp") !important;
    background-size:contain !important;
    background-position:center !important;
    background-repeat:no-repeat !important;

    margin:0 auto 78px !important;
    position:relative !important;
}


/* TÍTULO */
.login__logo::after {
    content:"ÁREA EXCLUSIVA DO CLIENTE";

    position:absolute !important;
    top:128px !important;
    left:0 !important;

    width:100% !important;

    text-align:center !important;

    color:#ffffff !important;

    font-size:14px !important;
    font-weight:700 !important;
    letter-spacing:1.3px !important;

    white-space:nowrap !important;
}


/* CAMPOS */
.login__field {
    padding:18px 0 !important;
    position:relative !important;
}

:is(input,select).login__input {
    --input-width:100%;

    width:100% !important;
    box-sizing:border-box !important;

    background:#111217 !important;
    color:#ffffff !important;

    border:1px solid #3a3a44 !important;
    border-bottom:2px solid #555560 !important;

    border-radius:10px !important;

    padding:13px 14px 13px 42px !important;

    transition:.25s ease !important;
}

.login__input::placeholder {
    color:#a6a6ad !important;
    opacity:1 !important;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
    outline:none !important;

    border-color:#e6007e !important;

    box-shadow:
        0 0 0 3px rgba(230,0,126,.12) !important;
}


/* ÍCONES */
.login__icon {
    color:#e6007e !important;
    left:11px !important;
}


/* BOTÃO */
.login__submit {
    width:100% !important;

    margin-top:28px !important;
    padding:17px 22px !important;

    background:
        linear-gradient(
            135deg,
            #f20a84,
            #d60073
        ) !important;

    color:#ffffff !important;

    border:none !important;
    border-radius:12px !important;

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

    text-transform:uppercase !important;

    box-shadow:
        0 12px 30px rgba(230,0,126,.28) !important;

    cursor:pointer !important;

    transition:.25s ease !important;
}

.login__submit:hover,
.login__submit:focus {
    background:
        linear-gradient(
            135deg,
            #ff2998,
            #e6007e
        ) !important;

    transform:translateY(-2px) !important;

    box-shadow:
        0 16px 35px rgba(230,0,126,.38) !important;
}

.button__icon {
    color:#ffffff !important;
}


/* LINKS */
.login-screen a {
    color:#e6007e !important;
}

.login-screen a:hover {
    color:#ff4aa5 !important;
}


/* =========================
   CELULAR
   ========================= */

@media(max-width:599px) {

    .login-page__container {
        padding:15px !important;
    }

    .login-screen {
        width:100% !important;
        max-width:430px !important;
        min-height:auto !important;
        border-radius:18px !important;
    }

    .login {
        padding:32px 24px 38px !important;
    }

    .login__logo {
        width:260px !important;
        max-width:100% !important;
        height:100px !important;
        margin-bottom:72px !important;
    }

    .login__logo::after {
        top:112px !important;

        font-size:12px !important;
        letter-spacing:.9px !important;
    }

    :is(input,select).login__input {
        --input-width:100%;
        width:100% !important;
    }
}