/*
 * Andrea & Kevin – Password Protected
 * Password Protected 2.8.4
 * Royal Elementor Kit / Elementor
 */


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

body.login-password-protected,
body.password-protected {

    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.20),
            rgba(0, 0, 0, 0.20)
        ),
        url("https://andrea-kevin.com/wp-content/uploads/2026/08/2026_Engagement.jpg") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;

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


/* ==========================================================
   PASSWORD PROTECTED CONTAINER
   ========================================================== */

#login {

    width: 100% !important;
    max-width: 430px !important;

    margin: 0 auto !important;
    padding: 30px 20px !important;

    box-sizing: border-box !important;
}


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

#login::before {

    content: "";

    display: block;

    width: 180px;
    height: 120px;

    margin: 0 auto 20px auto;

    background-image:
        url("https://andrea-kevin.com/wp-content/uploads/2026/08/Logo-2.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


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

#loginform {

    width: 100% !important;

    margin: 0 !important;
    padding: 40px !important;

    box-sizing: border-box !important;

    background: rgba(255, 255, 255, 0.94) !important;

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

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.18) !important;
}


/* ==========================================================
   WELCOME TEXT
   Elementor Global Text Typography
   ========================================================== */

#loginform .password-protected-text-above {

    display: block !important;

    margin: 0 0 28px 0 !important;

    text-align: center !important;

    color:
        var(
            --e-global-color-primary,
            #333333
        ) !important;

    font-family:
        var(
            --e-global-typography-primary-font-family,
            serif
        ) !important;

    font-size:
        var(
            --e-global-typography-primary-font-size,
            28px
        ) !important;

    font-weight:
        var(
            --e-global-typography-primary-font-weight,
            400
        ) !important;

    line-height:
        var(
            --e-global-typography-primary-line-height,
            1.3
        ) !important;
}


/* ==========================================================
   LABEL
   ========================================================== */

#loginform .user-pass-wrap > label {

    display: block !important;

    margin: 0 0 7px 0 !important;

    color:
        var(
            --e-global-color-text,
            #555555
        ) !important;

    font-family:
        var(
            --e-global-typography-text-font-family,
            sans-serif
        ) !important;

    font-size:
        var(
            --e-global-typography-text-font-size,
            14px
        ) !important;

    font-weight:
        var(
            --e-global-typography-text-font-weight,
            400
        ) !important;

    line-height: 1.4 !important;
}


/* ==========================================================
   PASSWORD INPUT WRAPPER
   ========================================================== */

#loginform .wp-pwd {

    position: relative !important;

    width: 100% !important;
}


/* ==========================================================
   PASSWORD INPUT
   ========================================================== */

#loginform #password_protected_pass {

    width: 100% !important;

    height: 50px !important;

    margin: 0 !important;

    padding: 0 50px 0 15px !important;

    box-sizing: border-box !important;

    border: 1px solid
        var(
            --e-global-color-secondary,
            #cccccc
        ) !important;

    border-radius: 2px !important;

    background: #ffffff !important;

    color:
        var(
            --e-global-color-text,
            #333333
        ) !important;

    font-family:
        var(
            --e-global-typography-text-font-family,
            sans-serif
        ) !important;

    font-size: 15px !important;

    outline: none !important;

    box-shadow: none !important;

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


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

#loginform #password_protected_pass:focus {

    border-color:
        var(
            --e-global-color-primary,
            #B89B62
        ) !important;

    box-shadow:
        0 0 0 2px
        rgba(184, 155, 98, 0.12) !important;
}


/* ==========================================================
   SHOW / HIDE PASSWORD BUTTON
   ========================================================== */

#loginform #pp-hide-show-password {

    position: absolute !important;

    top: 50% !important;
    right: 0 !important;

    width: 50px !important;
    height: 50px !important;

    margin: 0 !important;

    padding: 0 !important;

    transform: translateY(-50%) !important;

    border: none !important;

    background: transparent !important;

    color:
        var(
            --e-global-color-text,
            #555555
        ) !important;

    box-shadow: none !important;

    cursor: pointer !important;
}


/* ==========================================================
   REMEMBER ME – HIDDEN
   ========================================================== */

#loginform .forgetmenot {

    display: none !important;
}


/* ==========================================================
   SUBMIT BUTTON
   ========================================================== */

#loginform p.submit {

    margin: 18px 0 0 0 !important;

    padding: 0 !important;
}


/* ==========================================================
   LOGIN BUTTON
   Elementor Accent / Primary
   ========================================================== */

#loginform #wp-submit {

    width: 100% !important;

    height: 50px !important;

    margin: 0 !important;

    padding: 0 25px !important;

    border: 1px solid
        var(
            --e-global-color-primary,
            #B89B62
        ) !important;

    border-radius: 2px !important;

    background:
        var(
            --e-global-color-primary,
            #B89B62
        ) !important;

    color: #ffffff !important;

    font-family:
        var(
            --e-global-typography-accent-font-family,
            sans-serif
        ) !important;

    font-size:
        var(
            --e-global-typography-accent-font-size,
            14px
        ) !important;

    font-weight:
        var(
            --e-global-typography-accent-font-weight,
            500
        ) !important;

    line-height: 1 !important;

    letter-spacing: 0.08em !important;

    text-transform: uppercase !important;

    cursor: pointer !important;

    box-shadow: none !important;

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


/* ==========================================================
   BUTTON HOVER
   ========================================================== */

#loginform #wp-submit:hover {

    background:
        var(
            --e-global-color-secondary,
            #9f844f
        ) !important;

    border-color:
        var(
            --e-global-color-secondary,
            #9f844f
        ) !important;

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


/* ==========================================================
   TEXT BELOW
   ========================================================== */

#loginform .password-protected-text-below {

    display: block !important;

    margin: 25px 0 0 0 !important;

    text-align: center !important;

    color:
        var(
            --e-global-color-text,
            #555555
        ) !important;

    font-family:
        var(
            --e-global-typography-text-font-family,
            sans-serif
        ) !important;

    font-size:
        var(
            --e-global-typography-text-font-size,
            14px
        ) !important;

    font-weight:
        var(
            --e-global-typography-text-font-weight,
            400
        ) !important;

    line-height:
        var(
            --e-global-typography-text-line-height,
            1.6
        ) !important;
}


/* ==========================================================
   REMOVE UNNECESSARY ELEMENTS
   ========================================================== */

#loginform br {
    display: none;
}


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

@media (max-width: 767px) {

    body.login-password-protected,
    body.password-protected {

        background-attachment: scroll !important;

        background-position: center center !important;
    }


    #login {

        max-width: 400px !important;

        padding: 20px 15px !important;
    }


    #login::before {

        width: 145px;
        height: 100px;

        margin-bottom: 15px;
    }


    #loginform {

        padding: 30px 25px !important;
    }


    #loginform .password-protected-text-above {

        font-size: 24px !important;

        margin-bottom: 24px !important;
    }
}


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

@media (max-width: 480px) {

    #login {

        padding: 15px 12px !important;
    }


    #login::before {

        width: 125px;
        height: 90px;
    }


    #loginform {

        padding: 25px 20px !important;
    }


    #loginform .password-protected-text-above {

        font-size: 22px !important;
    }


    #loginform #password_protected_pass,
    #loginform #wp-submit {

        height: 48px !important;
    }
}