/* =========================================================
   CUSTOM WORDPRESS LOGIN PAGE
   ========================================================= */

/* ---------------------------------------------------------
   COLOR VARIABLES
   --------------------------------------------------------- */

:root {
    --login-red: #F90B31;
    --login-red-dark: #DD0525;
    --login-black: #111111;
    --login-charcoal: #191919;
    --login-border: #dddddd;
    --login-light: #f7f7f7;
    --login-text: #191919;
    --login-muted: #777777;
}


/* =========================================================
   PAGE
   ========================================================= */

body.login {
    background: #ffffff !important;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 30px 20px !important;
}


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

body.login #login {
    width: 100%;
    max-width: 400px;

    padding: 0 !important;
    margin: 0 auto !important;
}


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

body.login h1 {
    margin: 0 0 30px !important;
    padding: 0 !important;

    text-align: center;
}


/*
 * Replace the URL below with your logo.
 *
 * Example:
 * background-image: url('/wp-content/uploads/my-logo.png');
 */

body.login h1 a {
    display: block;

    width: 250px !important;
    height: 250px !important;

    margin: 0 auto !important;

    background-image: url('images/Transparent_logo.png') !important;

    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    padding: 0 !important;

    box-shadow: none !important;

    text-indent: -9999px;
    overflow: hidden;
}


/* =========================================================
   LOGIN FORM
   ========================================================= */

body.login form#loginform,
body.login form#lostpasswordform,
body.login form#registerform {
    margin-top: 0 !important;

    background: #f1f1f1 !important;

    border: 1px solid #191919 !important;

    border-radius: 14px !important;

    padding: 32px !important;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.12),
        0 3px 10px rgba(0, 0, 0, 0.06) !important;
}


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

body.login form label {
    display: block;

    color: #040404 !important;

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

    margin-bottom: 7px !important;
}


/* =========================================================
   INPUT FIELDS
   ========================================================= */

body.login form input[type="text"],
body.login form input[type="password"],
body.login form input[type="email"] {
    width: 100% !important;

    box-sizing: border-box !important;

    min-height: 46px !important;

    background: #fff !important;

    color: #040404 !important;

    border: 1px solid #3a3a3a !important;

    border-radius: 7px !important;

    padding: 10px 12px !important;

    font-size: 15px !important;

    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease !important;
}


/* =========================================================
   INPUT HOVER
   ========================================================= */

body.login form input[type="text"]:hover,
body.login form input[type="password"]:hover,
body.login form input[type="email"]:hover {
    border-color: #555555 !important;
}


/* =========================================================
   INPUT FOCUS
   ========================================================= */

body.login form input[type="text"]:focus,
body.login form input[type="password"]:focus,
body.login form input[type="email"]:focus {
    background: #f5f5f5 !important;

    color: #040404 !important;

    border-color: #F90B31 !important;

    box-shadow:
        0 0 0 1px #F90B31 !important;

    outline: none !important;
}


/* =========================================================
   AUTOFILL
   ========================================================= */

body.login form input:-webkit-autofill,
body.login form input:-webkit-autofill:hover,
body.login form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;

    -webkit-box-shadow:
        0 0 0 1000px #111111 inset !important;

    box-shadow:
        0 0 0 1000px #111111 inset !important;

    border-color: #F90B31 !important;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

body.login form input::placeholder {
    color: #777777 !important;

    opacity: 1;
}


/* =========================================================
   PASSWORD FIELD
   ========================================================= */

body.login .wp-pwd {
    position: relative;
}


body.login .wp-pwd input {
    padding-right: 45px !important;
}


/* Password visibility button */

body.login .button.wp-hide-pw {
    color: #F90B31 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


body.login .button.wp-hide-pw:hover {
    color: #DD0525 !important;

    background: transparent !important;
}


body.login .button.wp-hide-pw:focus {
    color: #F90B31 !important;

    border: none !important;

    box-shadow: none !important;

    outline: none !important;
}


/* =========================================================
   REMEMBER ME
   ========================================================= */

body.login .forgetmenot {
    margin-top: 18px !important;
}


body.login .forgetmenot label {
    display: flex !important;

    align-items: center;

    gap: 8px;

    color: #040404 !important;

    font-size: 13px !important;
}


/* Checkbox */

body.login input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;

    margin: 0 !important;

    accent-color: #F90B31;

    cursor: pointer;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

body.login #wp-submit {
    width: 100% !important;

    min-height: 46px !important;

    margin-top: 18px !important;

    background: #F90B31 !important;

    border: 1px solid #F90B31 !important;

    border-radius: 7px !important;

    color: #ffffff !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    line-height: 1 !important;

    padding: 0 20px !important;

    text-shadow: none !important;

    box-shadow: none !important;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.1s ease !important;
}


/* Button hover */

body.login #wp-submit:hover {
    background: #DD0525 !important;

    border-color: #DD0525 !important;
}


/* Button active */

body.login #wp-submit:active {
    transform: translateY(1px);
}


/* Button focus */

body.login #wp-submit:focus {
    background: #DD0525 !important;

    border-color: #DD0525 !important;

    box-shadow:
        0 0 0 3px rgba(249, 11, 49, 0.25) !important;

    outline: none !important;
}


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

body.login #nav,
body.login #backtoblog {
    text-align: center;

    margin-left: 0 !important;
}


body.login #nav a,
body.login #backtoblog a {
    color: #F90B31 !important;

    text-decoration: none !important;

    font-size: 13px !important;

    transition: color 0.2s ease !important;
}


body.login #nav a:hover,
body.login #backtoblog a:hover {
    color: #DD0525 !important;

    text-decoration: underline !important;
}


/* =========================================================
   BACK TO WEBSITE
   ========================================================= */

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


body.login #backtoblog a {
    color: #777777 !important;
}


body.login #backtoblog a:hover {
    color: #F90B31 !important;
}


/* =========================================================
   LOGIN NAVIGATION
   ========================================================= */

body.login #nav {
    margin-top: 20px !important;
}


/* =========================================================
   ERROR / SUCCESS / MESSAGE
   ========================================================= */

body.login #login_error,
body.login .message,
body.login .success {
    box-sizing: border-box;

    width: 100%;

    margin: 0 0 20px !important;

    padding: 14px 16px !important;

    background: #ffffff !important;

    border: 1px solid #dddddd !important;

    border-left: 4px solid #F90B31 !important;

    border-radius: 7px !important;

    color: #191919 !important;

    font-size: 13px !important;

    box-shadow: none !important;
}


/* Error links */

body.login #login_error a,
body.login .message a {
    color: #F90B31 !important;
}


body.login #login_error a:hover,
body.login .message a:hover {
    color: #DD0525 !important;
}


/* =========================================================
   PRIVACY POLICY
   ========================================================= */

body.login #login #nav + .privacy-policy-page-link {
    margin-top: 20px !important;
}


body.login .privacy-policy-page-link a {
    color: #777777 !important;

    font-size: 12px !important;

    text-decoration: none !important;
}


body.login .privacy-policy-page-link a:hover {
    color: #F90B31 !important;
}


/* =========================================================
   PASSWORD RESET PAGE
   ========================================================= */

body.login #lostpasswordform {
    margin-bottom: 20px !important;
}


/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */

body.login .language-switcher {
    margin-top: 20px !important;

    text-align: center;
}


body.login .language-switcher select {
    min-height: 38px !important;

    background: #ffffff !important;

    color: #191919 !important;

    border: 1px solid #dddddd !important;

    border-radius: 6px !important;

    padding: 5px 10px !important;
}


/* =========================================================
   REMOVE DEFAULT WORDPRESS SHADOWS
   ========================================================= */

body.login input,
body.login select,
body.login button {
    text-shadow: none !important;
}


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

@media screen and (max-width: 480px) {

    body.login {
        padding: 20px 15px !important;
    }

    body.login #login {
        max-width: 100%;
    }

    body.login form#loginform,
    body.login form#lostpasswordform,
    body.login form#registerform {
        padding: 25px 20px !important;

        border-radius: 12px !important;
    }

    body.login h1 {
        margin-bottom: 25px !important;
    }

    body.login h1 a {
        width: 190px !important;
        height: 70px !important;
    }

}