/* =========================================================
   ANDREA & KEVIN
   Password Protected 2.8.4
   Theme: Neve
   ========================================================= */


/* ---------------------------------------------------------
   1. GESAMTE SEITE – HINTERGRUNDBILD
   --------------------------------------------------------- */

html,
body {
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    background:
        linear-gradient(
            rgba(0, 0, 0, 0.30),
            rgba(0, 0, 0, 0.30)
        ),
        url("https://andrea-kevin.com/wp-content/uploads/2026/08/2026_Engagement.jpg")
        center center / cover no-repeat fixed !important;

    background-color: #222 !important;
}


/* ---------------------------------------------------------
   2. LOGIN-BEREICH
   --------------------------------------------------------- */

#login {
    width: 420px !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 auto !important;
    padding: 40px 0 !important;
}


/* ---------------------------------------------------------
   3. EIGENES LOGO
   --------------------------------------------------------- */

/* WordPress-Logo entfernen */

#password-protected-logo {
    display: block !important;

    width: 180px !important;
    height: 180px !important;
    min-height: 180px !important;

    margin: 0 auto 25px auto !important;
    padding: 0 !important;

    background: none !important;
    background-image: none !important;

    text-align: center !important;
}


/* Eigenes Logo einsetzen */

#password-protected-logo a {
    display: block !important;

    width: 180px !important;
    height: 180px !important;

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

    background-image: url("https://andrea-kevin.com/wp-content/uploads/2026/08/Logo-2.png") !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    background-color: transparent !important;

    /* WordPress-Text verstecken */
    text-indent: -9999px !important;
    overflow: hidden !important;

    text-decoration: none !important;
}


/* ---------------------------------------------------------
   4. WELCOME TEXT
   --------------------------------------------------------- */

.password-protected-text-above {
    width: 100% !important;

    margin: 0 0 25px 0 !important;

    color: #c8a96b !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 30px !important;
    font-weight: 400 !important;

    line-height: 1.3 !important;
    text-align: center !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.35) !important;
}


/* ---------------------------------------------------------
   5. LOGIN-FORMULAR
   --------------------------------------------------------- */

#loginform {
    box-sizing: border-box !important;

    width: 100% !important;

    margin: 0 auto !important;
    padding: 35px !important;

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

    border: 1px solid rgba(255, 255, 255, 0.8) !important;

    border-radius: 18px !important;

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


/* ---------------------------------------------------------
   6. "PASSWORD" ERSETZEN
   --------------------------------------------------------- */

#loginform .user-pass-wrap > label {
    display: block !important;

    margin: 0 0 8px 0 !important;

    font-size: 0 !important;

    color: #333333 !important;
}


/* Neuer Text */

#loginform .user-pass-wrap > label::after {
    content: "Please enter the wedding date! DD.MM.YYYY" !important;

    display: block !important;

    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    line-height: 1.4 !important;

    color: #333333 !important;

    margin: 0 !important;
}


/* ---------------------------------------------------------
   7. PASSWORTFELD
   --------------------------------------------------------- */

#password_protected_pass {
    box-sizing: border-box !important;

    width: 100% !important;
    height: 52px !important;

    padding: 0 50px 0 16px !important;

    background: #ffffff !important;

    border: 1px solid #d6d0c5 !important;
    border-radius: 10px !important;

    color: #333333 !important;

    font-family: Arial, sans-serif !important;
    font-size: 16px !important;

    outline: none !important;

    box-shadow: none !important;
}


/* Fokus */

#password_protected_pass:focus {
    border-color: #c8a96b !important;

    box-shadow:
        0 0 0 2px rgba(200, 169, 107, 0.18) !important;
}


/* ---------------------------------------------------------
   8. PASSWORT SICHTBARKEIT
   --------------------------------------------------------- */

#pp-hide-show-password {
    top: 50% !important;
    right: 8px !important;

    transform: translateY(-50%) !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    color: #777777 !important;
}


/* ---------------------------------------------------------
   9. REMEMBER ME AUSBLENDEN
   --------------------------------------------------------- */

#loginform .forgetmenot {
    display: none !important;
}


/* ---------------------------------------------------------
   10. LOGIN BUTTON
   --------------------------------------------------------- */

#loginform .submit {
    margin: 22px 0 0 0 !important;
    padding: 0 !important;
}


#wp-submit {
    width: 100% !important;
    height: 52px !important;

    padding: 0 20px !important;

    background: #c8a96b !important;
    background-color: #c8a96b !important;

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

    color: #ffffff !important;

    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;

    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;

    cursor: pointer !important;

    box-shadow: none !important;

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


/* Button Hover */

#wp-submit:hover {
    background: #b89455 !important;
    background-color: #b89455 !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15) !important;
}


/* ---------------------------------------------------------
   11. TEXT UNTERHALB DES FORMULARS
   --------------------------------------------------------- */

/* Alten Hinweis ausblenden */

.password-protected-text-below {
    display: none !important;
}


/* ---------------------------------------------------------
   12. WORDPRESS STANDARD ELEMENTE AUSBLENDEN
   --------------------------------------------------------- */

#login #nav,
#login #backtoblog {
    display: none !important;
}


/* WordPress Standard-Hintergrund/Elemente */

.login h1 {
    background: none !important;
}


/* ---------------------------------------------------------
   13. MOBILE
   --------------------------------------------------------- */

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

    body {
        background-attachment: scroll !important;
    }

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

        padding: 25px 0 !important;
    }


    /* Logo */

    #password-protected-logo {
        width: 140px !important;
        height: 140px !important;
        min-height: 140px !important;

        margin-bottom: 20px !important;
    }

    #password-protected-logo a {
        width: 140px !important;
        height: 140px !important;
    }


    /* Welcome */

    .password-protected-text-above {
        font-size: 25px !important;

        margin-bottom: 20px !important;
    }


    /* Formular */

    #loginform {
        padding: 25px 20px !important;

        border-radius: 15px !important;
    }


    /* Input & Button */

    #password_protected_pass,
    #wp-submit {
        height: 50px !important;
    }
}