/* ==========================================================
   Custom WordPress Login
   Part 1 - Layout
   ========================================================== */
:root{
    --primary:#c53b14;
    --secondary:#305066;
    --dark:rgb(43,43,41);
    --white:#ffffff;
    --offwhite:#f7f7f5;
    --radius:18px;
    --transition:.28s ease;
}
/* Reset */
html,
body.login{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:var(--dark);
    font-family:
        "Inter",
        "Segoe UI",
        sans-serif;
}
/* ==========================================================
Full Screen Layout
========================================================== */
body.login{
    display:flex;
    justify-content:flex-end;
    align-items:stretch;
}
/* Left Artwork */
body.login::before{
    content:"";
    position:fixed;
    left:0;
    top:0;
    width:60%;
    height:100vh;
    background:
        linear-gradient(
            145deg,
            rgba(48,80,102,.18),
            rgba(197,59,20,.10)
        ),
        url("../images/heritage-electric-grande-pistachio-hob.webp");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
/* Slight overlay */
body.login::after {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 60%;
    height: 100vh;
    z-index: 0;
    /* Overlay gradient + Wave SVG Data URI */
    background-image: 
        linear-gradient(
            135deg,
            rgba(43, 43, 41, .45),
            rgba(43, 43, 41, .15)
        ),
        url(../images/theme-login-background.jpg);
        /* url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1600 800'><rect fill='%23C53B14' width='1600' height='800'/><g fill-opacity='1'><path fill='%23cf1518' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/><path fill='%23d91647' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/><path fill='%23e3177b' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/><path fill='%23e81db1' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/><path fill='%23E927E2' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/><path fill='%23ad31e0' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/><path fill='%23763bd6' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/><path fill='%234c45cd' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/><path fill='%234e6ec4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/><path fill='%235893BB' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/></g></svg>"); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* ==========================================================
Login Wrapper
========================================================== */
#login{
    position:relative;
    margin:0;
    width:50%;
    min-width:460px;
    height:100vh;
    background:var(--offwhite);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:25px;
    padding-left: 100px;
    padding-right: 100px;
    box-sizing:border-box;
    z-index:50;
    box-shadow:
        -18px 0 60px rgba(0,0,0,.18);
}
/* ==========================================================
Branding
========================================================== */
.custom-login-branding{
    text-align:center;
    margin-bottom: 0;
}
.custom-brand-logo{
    display:block;
    width:50px;
    margin:auto auto 0;
}
.website-logo{
    display:block;
    width:150px;
    margin:auto;
}
/* ==========================================================
Remove WP Branding
========================================================== */
.login h1{
    font-size: 40px;
    font-weight: 200;
    margin-bottom: 2rem;
}
.wp-login-logo {
    display:none;
}
.login #backtoblog{
    margin-top:30px;
    text-align:center;
}
.login #nav{
    text-align:center;
    margin-top:30px;
}
/* ==========================================================
Login Card
========================================================== */
.login form{
    background:transparent;
    border:none;
}
/* ==========================================================
Typography
========================================================== */
.login label{
    display:block;
    margin-bottom:10px;
    font-size:14px;
    font-weight:600;
    color:var(--dark);
}
.login form p{
    margin-bottom:24px;
}
/* ==========================================================
Links
========================================================== */
.login a{
    color:var(--secondary);
    transition:var(--transition);
    text-decoration:none;
}
.login a:hover{
    color:var(--primary);
}
/* ==========================================================
Messages
========================================================== */
.message{
    border-left:5px solid var(--secondary);
    border-radius:10px;
    margin-bottom: 0;
}
.login .notice{
    border-left:5px solid var(--secondary);
    margin-bottom: 0;
}
.login .success{
    border-left:5px solid var(--primary);
}
.login .error{
    border-left:5px solid var(--primary);
}
/* ==========================================================
   Part 2 - Forms & Responsive
   ========================================================== */
/* -----------------------------
   Inputs
------------------------------ */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"]{
    width:100%;
    height:40px;
    padding:0 18px;
    border:2px solid #d7d7d4;
    border-radius:12px;
    background:#fff;
    color:var(--dark);
    font-size:15px;
    transition:all .25s ease;
    box-sizing:border-box;
    outline:none;
}
.login input:focus{
    border-color:var(--secondary);
    box-shadow:
        0 0 0 4px rgba(48,80,102,.15);
}
/* Placeholder */
.login input::placeholder{
    color:#888;
}
/* -----------------------------
   Checkbox
------------------------------ */
.login .forgetmenot{
    margin:20px 0 25px;
    float:none;
}
.login .forgetmenot label{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:500;
    cursor:pointer;
}
.login input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:var(--primary);
}
/* -----------------------------
   Button
------------------------------ */
.wp-core-ui .button-primary{
    width:100%;
    height:56px;
    background:var(--primary);
    border:none;
    border-radius:12px;
    color:#fff;
    font-size:16px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    cursor:pointer;
    transition:all .25s ease;
}
.wp-core-ui .button-primary:hover{
    background:#aa3212;
    transform:translateY(-2px);
}
.wp-core-ui .button-primary:active{
    transform:none;
}
/* -----------------------------
   Links
------------------------------ */
#nav,
#backtoblog{
    font-size:14px;
}
#nav a,
#backtoblog a{
    font-weight:600;
}
/* -----------------------------
   Password Visibility Button
------------------------------ */
.wp-pwd button{
    color:var(--secondary);
}
.wp-pwd button:hover{
    color:var(--primary);
}
/* -----------------------------
   Error Shake Removed
------------------------------ */
.login form.shake{
    animation:none;
}
/* -----------------------------
   Autofill
------------------------------ */
input:-webkit-autofill{
    -webkit-box-shadow:
        0 0 0 100px #fff inset;
    -webkit-text-fill-color:var(--dark);
}
/* -----------------------------
   Responsive
------------------------------ */
@media (max-width:1200px){
    body.login::before,
    body.login::after{
        width:50%;
    }
    #login{
        width:50%;
    }
}
@media (max-width:900px){
    html,
    body.login{
        overflow:auto;
    }
    body.login{
        display:block;
    }
    body.login::before{
        position:relative;
        display:block;
        width:100%;
        height:260px;
    }
    body.login::after{
        display:none;
    }
    #login{
        width:100%;
        min-width:0;
        height:auto;
        padding:50px 30px;
        box-shadow:none;
    }
    .custom-brand-logo{
        width:170px;
    }
    .website-logo{
        width:350px;
    }
}
@media (max-width:600px){
    #login{
        padding:35px 20px;
    }
    .login form{
        padding:30px 24px;
    }
    .custom-brand-logo{
        width:150px;
    }
    .website-logo{
        width:90px;
    }
    .wp-core-ui .button-primary{
        height:52px;
    }
}
/* -----------------------------
   Optional Decorative Accent
------------------------------ */
.login form{
    position:relative;
    overflow:hidden;
    margin: 0;
}
/* -----------------------------
   Footer Links
------------------------------ */
.language-switcher{
    display:none;
}
.login form{
    opacity:1;
    transform:translateY(24px);
    transition:.45s ease;
}
.login form.visible{
    opacity:1;
    transform:none;
}
#wp-submit.loading{
    opacity:.8;
    cursor:wait;
}
body.login-loaded{
    overflow:hidden;
}