/* -----------------------------------------------------------
   0. CUSTOM FONT
   Path is relative to THIS file's location:
   themes/wedding/assets/css/login.css -> ../fonts/le-jour-script.otf
----------------------------------------------------------- */
@font-face {
    font-family: 'Le Jour Script';
    src: url('../fonts/le-jour-script.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* -----------------------------------------------------------
   1. CANVAS, BACKGROUND & UNIVERSAL FONTS
----------------------------------------------------------- */
html,
body.login,
body.login.password-protected {
    background-color: #8C9e82 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    font-family: 'Montserrat';
}

#login {
    padding: 0;
    margin: auto;
    width: 320px;
}

.login form,
.login label,
.login input {
    font-family: 'Montserrat';
}

/* -----------------------------------------------------------
   2. LOGO CUSTOMIZATION
   The background-image rule itself is added dynamically via
   wp_add_inline_style() in functions.php, since the logo URL
   is a PHP value from the Customizer. This selector's other
   properties (sizing, spacing) live here as the static part.
----------------------------------------------------------- */
body.login div#login h1 a {
    background-size: contain !important;
    background-position: center !important;
    width: 100% !important;
    height: 120px;
    margin: 0 auto 15px auto !important;
}

/* -----------------------------------------------------------
   3. FORM CARD & PASSWORD STRUCTURAL FIXES
----------------------------------------------------------- */
.login form {
    background: #ffffff !important;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    border: none !important;
    padding: 30px !important;
}

.login .wp-pwd {
    position: relative !important;
    margin-bottom: 16px !important;
}

.login label {
    color: #6b7a4b !important;
    font-size: 14px;
}

.login input[type="password"],
.login input[type="text"] {
    border: 1px solid #6b7a4b !important;
    border-radius: 8px !important;
    padding: 8px 45px 8px 12px !important;
    margin-top: 5px;
    height: 40px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* -----------------------------------------------------------
   4. EYE ICON TOGGLE RE-COLOR & POSITION FIX
----------------------------------------------------------- */
.login .wp-pwd button.wp-hide-pw {
    position: absolute !important;
    top: 5px !important;
    right: 8px !important;
    height: 38px !important;
    min-height: 38px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 8px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.login .wp-pwd button.wp-hide-pw .dashicons {
    color: #6b7a4b !important;
    transition: color 0.2s ease;
}

.login .wp-pwd button.wp-hide-pw:hover .dashicons {
    color: #8C9e82 !important;
}

/* -----------------------------------------------------------
   5. PRIMARY LOGIN BUTTON
----------------------------------------------------------- */
.login .button-primary {
    background: #6b7a4b !important;
    border-color: #6b7a4b !important;
    color: #e2e1df !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    float: none !important;
    width: 100% !important;
    margin-top: 15px !important;
    padding: 6px 0 !important;
    height: auto !important;
    font-size: 15px !important;
    transition: background 0.2s ease-in-out;
}

.login .button-primary:hover,
.login .button-primary:focus {
    background: #8C9e82 !important;
    border-color: #8C9e82 !important;
}

/* -----------------------------------------------------------
   6. CUSTOM GREEN FOCUS BORDERS & CHECKBOXES
----------------------------------------------------------- */
.login input[type="password"]:focus,
.login input[type="text"]:focus {
    border-color: #6b7a4b !important;
    box-shadow: 0 0 0 1px #6b7a4b !important;
    outline: none !important;
}

.login input[type="checkbox"]:checked {
    background: #6b7a4b !important;
    border-color: #6b7a4b !important;
}

.login input[type="checkbox"]:focus {
    border-color: #6b7a4b !important;
    box-shadow: 0 0 0 1px #6b7a4b !important;
    outline: none !important;
}