/* 
 * Maison RITI - Luxury Admin Login (Split Screen Overhaul)
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');

html, body.login {
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', sans-serif !important;
    background: #F7F3EB !important;
}

/* 
 * The Left Side: Edge-to-Edge Hero Image (Fixed Background)
 */
body.login::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; /* Full Screen */
    height: 100vh !important;
    background-image: url('../images/home-hero.webp') !important;
    background-size: cover !important;
    background-position: center 70% !important; /* Moved image slightly up */
    background-repeat: no-repeat !important;
    transform: scaleX(-1) !important; /* Mirror image so girl faces right */
    z-index: 1 !important;
}

/* Seamless blend gradient overlaid on the image */
body.login::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; /* Full Screen */
    height: 100vh !important;
    /* Fades from clear (0-40%) to solid Ivory (65-100%) */
    background: linear-gradient(to right, rgba(247, 243, 235, 0) 0%, rgba(247, 243, 235, 0) 40%, rgba(247, 243, 235, 1) 65%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* 
 * The Right Side: Form Panel container (In normal flow)
 */
#login {
    position: relative !important;
    width: 40vw !important; /* Right 40% */
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 40px 8% !important;
    margin: 0 0 0 60vw !important; /* Push it 60vw to the right */
    background: transparent !important; /* Let gradient handle the color */
    box-sizing: border-box !important;
    z-index: 10 !important;
    box-shadow: none !important; /* No shadow */
}

/* Hide the unnecessary WordPress .clear div and ensure language switcher doesn't break layout */
body.login .clear {
    display: none !important;
}
.language-switcher {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 100 !important;
}

/* Logo - Much bigger, no weird filters */
.login h1 {
    width: 100% !important;
    margin: 0 0 50px 0 !important;
}
.login h1 a {
    background-image: url('../images/logo.webp') !important;
    background-size: contain !important;
    background-position: center !important;
    width: 100% !important;
    height: 120px !important; /* Much larger */
    margin: 0 !important;
    filter: none !important; /* Keep original dark logo color */
}
.login h1 a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* The Form itself - Minimalist */
.login form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Labels */
.login label {
    color: #5c5040 !important; /* Deep neutral */
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
}

/* Error and Success Messages */
.login #login_error,
.login .message {
    background: transparent !important;
    border: 1px solid #c8c0b4 !important; /* Subtle beige border */
    box-shadow: none !important;
    color: #5c5040 !important; /* Deep neutral */
    border-radius: 0 !important;
    padding: 15px 20px !important;
    font-size: 0.9rem !important;
    margin-bottom: 25px !important;
}
.login #login_error {
    border-color: #A25F4B !important; /* Rust for errors */
}

/* Inputs - Luxury Underline Style */
.login input[type="text"],
.login input[type="password"] {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #c8c0b4 !important; /* Subtle line */
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    font-size: 1rem !important;
    color: #5c5040 !important;
    margin-bottom: 25px !important;
    transition: all 0.3s ease !important;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-bottom: 1px solid #9d8db3 !important; /* Signature Lavender/Gold */
    box-shadow: none !important;
    outline: none !important;
}

/* Password Visibility Toggle (The Eye Icon) */
.login .wp-hide-pw {
    color: #c8c0b4 !important; /* Subtle beige */
}
.login .wp-hide-pw:hover,
.login .wp-hide-pw:focus {
    color: #9d8db3 !important; /* Signature Lavender/Gold on hover */
}
.login .dashicons-visibility,
.login .dashicons-hidden {
    color: inherit !important;
}

/* Fix browser autofill background color */
.login input:-webkit-autofill,
.login input:-webkit-autofill:hover, 
.login input:-webkit-autofill:focus, 
.login input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #F7F3EB inset !important;
    -webkit-text-fill-color: #5c5040 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Checkbox */
.login .forgetmenot {
    float: left !important;
    margin-top: 15px !important;
}
.login input[type="checkbox"] {
    border: 1px solid #9d8db3 !important; 
    border-radius: 0 !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.login input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: none !important;
}
.login input[type="checkbox"]:checked {
    background-color: #9d8db3 !important; 
    border-color: #9d8db3 !important;
    outline: none !important;
    box-shadow: none !important;
}
.login input[type="checkbox"]:checked::before {
    content: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") !important;
    margin: -3px 0 0 -4px !important;
}

/* Log In Button - Sleek */
.login .submit {
    float: right !important;
    margin-top: 10px !important;
}
.login .button-primary {
    background: #9d8db3 !important; /* Signature Gold / Lavender */
    border: 1px solid #9d8db3 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    padding: 12px 35px !important;
    height: auto !important;
    border-radius: 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

.login .button-primary:hover {
    background: transparent !important; 
    color: #9d8db3 !important;
}

/* Links */
.login #nav,
.login #backtoblog {
    text-align: center !important;
    padding: 0 !important;
    margin-top: 30px !important;
    width: 100% !important;
}

.login #nav a,
.login #backtoblog a {
    color: #5c5040 !important; 
    font-size: 12px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    text-shadow: none !important;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: #9d8db3 !important;
}

/* Responsive */
@media (max-width: 900px) {
    body.login::before,
    body.login::after {
        display: none !important; /* Hide image and gradient on mobile */
    }
    #login {
        width: 100vw !important;
        margin: 0 !important;
        padding: 40px 5% !important;
        box-shadow: none !important;
        background: #F7F3EB !important; /* Solid fallback for mobile */
    }
}