/* Shared glass surface for the site gate and native WordPress login. */
body.login:is(.login-password-protected,.mj-login-screen) {
    --mj-gate-ink: #182530;
    --mj-gate-red: #e60023;
    margin: 0;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    color: var(--mj-gate-ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: #dce1e7;
    isolation: isolate;
    overflow-x: hidden;
    overflow-x: clip;
}
body.login:is(.login-password-protected,.mj-login-screen)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background: linear-gradient(90deg,rgba(28,37,49,.17),rgba(241,244,248,.26) 35%,rgba(241,244,248,.26) 65%,rgba(28,37,49,.28)), url("gate-showroom-clear.png") center / cover no-repeat;
}
body.login:is(.login-password-protected,.mj-login-screen)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(155deg,transparent 66%,rgba(230,0,35,.14) 66.15%,rgba(230,0,35,.72) 80%,rgba(92,0,18,.64) 93%), linear-gradient(24deg,rgba(242,246,250,.5),transparent 45%);
}
body.login:is(.login-password-protected,.mj-login-screen) #password-protected-background { display: none; }
body.login:is(.login-password-protected,.mj-login-screen) #login {
    position: relative;
    width: min(470px,100%);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body.login:is(.login-password-protected,.mj-login-screen) #login h1 {
    margin: 0 0 30px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
body.login:is(.login-password-protected,.mj-login-screen) #login h1 a {
    display: block;
    position: relative;
    width: 100%;
    height: 138px;
    margin: 0;
    background: url("gate-logo-dark.png") center / contain no-repeat;
    mix-blend-mode: normal;
    transition: none;
}
body.login:is(.login-password-protected,.mj-login-screen) #loginform {
    position: relative !important;
    left: 0 !important;
    margin: 0;
    padding: 36px 38px;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 26px;
    background: linear-gradient(135deg,rgba(255,255,255,.92),rgba(246,248,251,.79));
    box-shadow: 0 24px 70px rgba(26,34,47,.18), inset 0 1px 0 #fff;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: visible;
    box-sizing: border-box;
    animation: mj-gate-arrive .5s cubic-bezier(.2,.7,.3,1) both;
}
body.login:is(.login-password-protected,.mj-login-screen) #loginform > p:empty { margin: 0; }
body.login:is(.login-password-protected,.mj-login-screen) #loginform > p:first-child { margin: 0; }
body.login:is(.login-password-protected,.mj-login-screen) #login label {
    color: #2b3948;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
}
body.login:is(.login-password-protected,.mj-login-screen) #login .wp-pwd { position: relative; margin-top: 8px; }
body.login:is(.login-password-protected,.mj-login-screen) #login input.input {
    display: block;
    width: 100%;
    min-height: 56px;
    margin: 0;
    border: 1px solid #9ca7b6;
    border-radius: 12px;
    padding: 12px 54px 12px 15px;
    color: #182530;
    background: rgba(255,255,255,.85);
    box-shadow: 0 2px 6px rgba(24,37,48,.025);
    font: 400 19px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
    box-sizing: border-box;
    transition: border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
body.login:is(.login-password-protected,.mj-login-screen) #login input.input:focus {
    outline: none;
    border-color: #c90020;
    box-shadow: 0 0 0 3px rgba(230,0,35,.13);
    background: #fff;
}
body.login:is(.login-password-protected,.mj-login-screen) #login .wp-pwd .button.wp-hide-pw {
    position: absolute;
    inset: 4px 4px auto auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: #49576a;
    background: transparent;
    box-shadow: none;
    transition: color .18s ease,background .18s ease;
}
body.login:is(.login-password-protected,.mj-login-screen) #login .wp-hide-pw:hover { color: #b3001b; background: #fff0f2; }
body.login:is(.login-password-protected,.mj-login-screen) #login .wp-hide-pw .dashicons { margin: 0; font-size: 23px; width: 23px; height: 23px; }
body.login:is(.login-password-protected,.mj-login-screen) #login .forgetmenot { float: none; margin: 20px 0 24px; }
body.login:is(.login-password-protected,.mj-login-screen) #login .forgetmenot label { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 400; cursor: pointer; }
body.login:is(.login-password-protected,.mj-login-screen) #login input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    box-sizing: border-box;
    padding: 0;
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin: 0 7px 0 0;
    border: 1px solid #8794a5;
    border-radius: 5px;
    background: #fff;
    box-shadow: none;
    cursor: pointer;
}
body.login:is(.login-password-protected,.mj-login-screen) #login input[type="checkbox"]:checked { border-color: #c80020; background: #c80020; }
body.login:is(.login-password-protected,.mj-login-screen) #login input[type="checkbox"]::before { content: none; }
body.login:is(.login-password-protected,.mj-login-screen) #login input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    background: #fff;
    filter: none;
    transform: none;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8 3 3 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8 3 3 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}
body.login:is(.login-password-protected,.mj-login-screen) #login p.submit { position: relative; margin: 24px 0 0; padding: 0; clear: both; }
body.login:is(.login-password-protected,.mj-login-screen) #login .forgetmenot + p.submit { margin-top: 0; }
body.login:is(.login-password-protected,.mj-login-screen) #login #wp-submit {
    display: block;
    float: none;
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin: 0;
    padding: 0 48px;
    border: 1px solid #f6af25;
    border-radius: 12px;
    color: #211c10;
    background: linear-gradient(120deg,#ffbc28,#f4a500);
    box-shadow: 0 9px 24px rgba(225,148,0,.22),inset 0 1px 0 rgba(255,255,255,.5);
    text-shadow: none;
    font: 700 17px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
    cursor: pointer;
    transition: background .2s ease,box-shadow .2s ease,border-color .2s ease;
    box-sizing: border-box;
}
body.login:is(.login-password-protected,.mj-login-screen) #login #wp-submit:hover { background: linear-gradient(120deg,#ffc83d,#ee9700); border-color: #e29700; box-shadow: 0 10px 28px rgba(191,122,0,.3); }
body.login:is(.login-password-protected,.mj-login-screen) #login #wp-submit:active { box-shadow: 0 3px 10px rgba(191,122,0,.18),inset 0 2px 4px rgba(90,55,0,.12); }
body.login:is(.login-password-protected,.mj-login-screen) #login :is(button,input,a):focus-visible { outline: 3px solid #a20c25; outline-offset: 3px; }
body.login:is(.login-password-protected,.mj-login-screen) #login input.input:focus-visible { outline: none; }
body.login:is(.login-password-protected,.mj-login-screen) .mj-gate-arrow { position: absolute; right: 22px; top: 0; height: 56px; display: flex; align-items: center; font: 400 25px/1 system-ui,sans-serif; color: #211c10; pointer-events: none; }
body.login:is(.login-password-protected,.mj-login-screen) #loginform[aria-busy="true"] #wp-submit { cursor: progress; color: #211c10 !important; text-shadow: none !important; }
body.login:is(.login-password-protected,.mj-login-screen) #loginform[aria-busy="true"] .mj-gate-arrow { color: transparent; }
body.login:is(.login-password-protected,.mj-login-screen) #loginform[aria-busy="true"] .mj-gate-arrow::after { content: ""; position: absolute; width: 18px; height: 18px; right: 0; border: 2px solid currentColor; border-color: rgba(33,28,16,.25); border-top-color: #211c10; border-radius: 50%; animation: mj-gate-spin .7s linear infinite; }
body.login:is(.login-password-protected,.mj-login-screen) #mj-gate-status { min-height: 20px; margin: 14px 0 0; padding: 0 10px; color: #243443; text-align: center; font-size: 13px; line-height: 1.6; }
body.login:is(.login-password-protected,.mj-login-screen) #login #login_error,body.login:is(.login-password-protected,.mj-login-screen) #login .message,body.login:is(.login-password-protected,.mj-login-screen) #login .notice { margin: 0 0 16px; font-size: 14px; line-height: 1.6; }
body.login:is(.login-password-protected,.mj-login-screen) .password-protected-text-above { margin-bottom: 16px; }
body.login:is(.login-password-protected,.mj-login-screen) .password-protected-text-below { display: block; margin-top: 16px; font-size: 13px; }
@keyframes mj-gate-spin { to { transform: rotate(360deg); } }
@keyframes mj-gate-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media(min-width:1100px) {
    body.login:is(.login-password-protected,.mj-login-screen) #login::before,body.login:is(.login-password-protected,.mj-login-screen) #login::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 20vw; height: 70vh; top: 12vh; border: 1px solid rgba(255,255,255,.65); background: linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.025)); border-radius: 48px; }
    body.login:is(.login-password-protected,.mj-login-screen) #login::before { left: 4vw; transform: skewY(12deg); }
    body.login:is(.login-password-protected,.mj-login-screen) #login::after { right: 4vw; transform: skewY(-12deg); }
}
@media(max-width:767px) {
    body.login:is(.login-password-protected,.mj-login-screen) { padding: 36px 20px; }
    body.login:is(.login-password-protected,.mj-login-screen)::before { background: linear-gradient(145deg,rgba(54,1,12,.8),rgba(16,23,33,.8) 38%,rgba(211,217,226,.88) 73%,rgba(233,237,243,.94)),url("gate-showroom-clear.png") 65% center / cover no-repeat; }
    body.login:is(.login-password-protected,.mj-login-screen)::after { background: linear-gradient(138deg,#f21b2d 0%,#a30014 14%,transparent 14.2%),linear-gradient(143deg,transparent 81%,rgba(246,1,34,.94) 81.2%,#6c0011 95%); }
    body.login:is(.login-password-protected,.mj-login-screen) #login { width: min(440px,100%); }
    body.login:is(.login-password-protected,.mj-login-screen) #login h1 { margin-bottom: 26px; }
    body.login:is(.login-password-protected,.mj-login-screen) #login h1 a { height: 105px; background-image: url("gate-logo-dark.png"); background-size: 100% auto; mix-blend-mode: normal; }
    /* Keep the high-resolution emblem unchanged; display its wordmark in white. */
    body.login:is(.login-password-protected,.mj-login-screen) #login h1 a::after { content: ""; position: absolute; inset: 0; background: inherit; clip-path: inset(0 0 0 25.5%); filter: brightness(0) invert(1); pointer-events: none; }
    body.login:is(.login-password-protected,.mj-login-screen) #loginform { padding: 29px 25px; border-radius: 23px; background: linear-gradient(135deg,rgba(255,247,248,.97),rgba(246,248,251,.94)); box-shadow: 0 20px 45px rgba(23,24,34,.24); }
    body.login:is(.login-password-protected,.mj-login-screen) #login #wp-submit { color: #fff; border-color: #ff5b67; background: linear-gradient(115deg,#ff303a,#e3001b 57%,#a00016); box-shadow: 0 9px 24px rgba(218,0,30,.22),inset 0 1px 0 rgba(255,255,255,.4); }
    body.login:is(.login-password-protected,.mj-login-screen) #login #wp-submit:hover { background: linear-gradient(115deg,#ed1c2e,#c0001a 57%,#850014); border-color: #bd001b; }
    body.login:is(.login-password-protected,.mj-login-screen) .mj-gate-arrow { color: #fff; }
    body.login:is(.login-password-protected,.mj-login-screen) #loginform[aria-busy="true"] .mj-gate-arrow::after { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
    body.login:is(.login-password-protected,.mj-login-screen) #loginform[aria-busy="true"] #wp-submit { color: #fff !important; }
    body.login:is(.login-password-protected,.mj-login-screen) #mj-gate-status { color: #1d2c3b; }
}
@media(max-width:374px) {
    body.login:is(.login-password-protected,.mj-login-screen) { padding: 24px 16px; }
    body.login:is(.login-password-protected,.mj-login-screen) #loginform { padding: 26px 20px; }
    body.login:is(.login-password-protected,.mj-login-screen) #login h1 a { height: 90px; }
}
@media(max-height:650px) and (min-width:768px) {
    body.login:is(.login-password-protected,.mj-login-screen) { padding-top: 24px; padding-bottom: 24px; }
    body.login:is(.login-password-protected,.mj-login-screen) #login h1 a { height: 90px; }
    body.login:is(.login-password-protected,.mj-login-screen) #login h1 { margin-bottom: 18px; }
    body.login:is(.login-password-protected,.mj-login-screen) #loginform { padding: 26px 34px; }
}
@media(prefers-reduced-motion:reduce) {
    body.login:is(.login-password-protected,.mj-login-screen) #login,body.login:is(.login-password-protected,.mj-login-screen) #login *,body.login:is(.login-password-protected,.mj-login-screen) #login *::after { animation: none !important; transition: none !important; }
}
