/* =========================================================
   Variables
========================================================= */

:root {
    --whiteRGB: 255, 255, 255;
    --whiteHEX: #FFF;

    --blackRGB: 17, 17, 17;
    --blackHEX: #111;

    --pink: #ED0579D6;
    --purple: #4A0A26;
    --orange: #FC4D16;
    --blue:#36F;
    --beige:#F7EDE5;
}

/* =========================================================
   Base
========================================================= */

body {
    position: relative;
    overflow: hidden;
    background: transparent;
    background-image: none;
}

body.login {
    background: var(--purple) !important;
    background-image: unset !important;
    box-shadow: unset !important;
}

body.login .contact {
    display: none !important;
}

/* =========================================================
   Layout wrapper
========================================================= */

body .buro210-login-wrap {
    position: relative;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: hidden;
}

/* =========================================================
   Background blurs
========================================================= */

/* Pink blur */
.buro210-login-wrap::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    filter: blur(200px);
    background-color: var(--pink);
    pointer-events: none !important;
    z-index: -1;
}

/* Orange blur */
.buro210-login-wrap::after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -50px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    filter: blur(200px);
    background-color: var(--orange);
    pointer-events: none !important;
    z-index: 0;
}

/* =========================================================
   Card
========================================================= */

.buro210-login-wrap .inner-wrap {
    margin: auto;
    position: relative;
    z-index:99;
}

.buro210-login-wrap .inner-wrap #login {
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--whiteHEX);
    background: var(--whiteHEX);
    backdrop-filter: blur(10px);
    box-shadow: 5px 20px 75px 0px rgb(var(--blackRGB, 0 0 0) / 25%);
    box-sizing: border-box;
}

/* =========================================================
   Logo
========================================================= */

.buro210-login-wrap .inner-wrap #login h1 a {
    height: 40px;
}

#login h1 a {
    width: 100%;
    height: 72px;
    background-image: var(--buro210-login-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* =========================================================
   Notice message
========================================================= */

body.login .buro210-login-wrap .inner-wrap .notice {
    background-color: var(--beige);
    border: unset;
    border-radius: 10px;
    color: var(--blackHEX);
}


/* =========================================================
   Forms
========================================================= */

body.login .buro210-login-wrap .inner-wrap form#loginform,
body.login .buro210-login-wrap .inner-wrap form#lostpasswordform {
    margin: 40px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--blackHEX);
    font-family: unset !important;
}

body.login .buro210-login-wrap .inner-wrap form:hover label {
    color: unset !important;
}

.login label {
    font-family: unset !important;
    font-weight: 700 !important;
}

.inner-wrap form#loginform input:not([type='submit']):not([type='checkbox']),
.inner-wrap form#lostpasswordform input:not([type='submit']):not([type='checkbox'])  {
    margin-right: 0;
    font-size: 14px !important;
    color: var(--blackHEX) !important;

    background: transparent;

    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-color: var(--blackHEX);
    border-radius: 0 !important;
}

.inner-wrap form#loginform input:not([type='submit']):not([type='checkbox']):focus,
.inner-wrap form#lostpasswordform input:not([type='submit']):not([type='checkbox']):focus  {
    box-shadow: none;
    border-color: var(--pink);
}

.inner-wrap form#loginform .wp-pwd button.wp-hide-pw:focus {
    box-shadow: none;
    border: 0;
}

/* Password toggle */
.inner-wrap form#loginform .wp-pwd button.wp-hide-pw span:before {
    color: var(--purple);
}

.inner-wrap form#loginform .wp-pwd button.wp-hide-pw span.dashicons-hidden:before {
    color: var(--pink);
}

/* Remember me */
.inner-wrap form#loginform .forgetmenot label {
    font-weight: normal !important;
    font-family: unset !important;
}

.inner-wrap form#loginform .forgetmenot input[type='checkbox'] {
    border-color: var(--purple);
}

.inner-wrap form#loginform .forgetmenot input[type='checkbox']:focus {
    box-shadow: none;
}

.inner-wrap form#loginform .forgetmenot input[type='checkbox']:checked::before {
    content: '\f00c';
    font-family: 'FontAwesome';
    color: var(--pink) !important;

    width: auto;
    height: auto;
    margin: 6px 0 0 0;
}

/* Submit button */
/* Submit button (login + lostpassword) */
.inner-wrap form#loginform .submit input#wp-submit,
.inner-wrap form#lostpasswordform .submit input#wp-submit {
    border: 2px solid var(--blue);
    border-radius: 20px;
    background-color: var(--blue);
    transition: .3s ease-in-out;
}

.inner-wrap form#loginform .submit input#wp-submit:hover,
.inner-wrap form#lostpasswordform .submit input#wp-submit:hover {
    background-color: var(--whiteHEX);
    color: var(--blue);
}

/* WP default login form wrappers */
body.login #loginform,
body.login #lostpasswordform {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
}

/* 2FA form */
body.login .buro210-login-wrap .inner-wrap form[name='validate_2fa_form'] p:first-of-type {
    background-color: var(--beige);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px !important;
    color: var(--blackHEX);
    font-weight: normal !important;
}


/* =========================================================
   Back to blog / Nav
========================================================= */

.login #backtoblog,
.login #nav,
.login .backup-methods-wrap {
    padding: 0 !important;
    margin: 24px 0 0 !important;
    background: unset !important;
    box-shadow: unset !important;
    font-family: unset !important;
}
.login #backtoblog a,
.login #nav a,
.login .backup-methods-wrap .backup-methods a {
    color: var(--blackHEX) !important;
    font-family: unset !important;
}

.login #backtoblog a:hover,
.login #nav a:hover,
.login .backup-methods-wrap .backup-methods a:hover {
    color: var(--pink) !important;
    text-decoration: underline;
}

.login .privacy-policy-page-link {
    display: none;
}

/* =========================================================
   Language Switcher
========================================================= */
.login .buro210-login-wrap .inner-wrap .language-switcher {
    padding: unset;
    margin: 30px 0;
}
.inner-wrap .language-switcher form {
    padding: unset;
    margin: unset;
}
.inner-wrap .language-switcher form label span,
.inner-wrap .language-switcher form label span::before {
    color: var(--whiteHEX);
}

/* Dropdown */
.inner-wrap .language-switcher form select#language-switcher-locales:focus {
    box-shadow: unset;
    border-color: var(--pink);
}

/* Submit */
.inner-wrap .language-switcher form input.button {
    color: var(--whiteHEX);
    border: 2px solid var(--blue);
    border-radius: 20px;
    background-color: var(--blue);
    transition: .3s ease-in-out;
}

.inner-wrap .language-switcher form input.button:hover {
    background-color: var(--whiteHEX);
    color: var(--blue);
}


/* =========================================================
   Support button
========================================================= */

.buro210-login-support {
    margin-top: 30px;
    text-align: center;
}

.buro210-login-support a {
    display: inline-block;
    padding: 14px 24px;

    border-radius: 100px;
    border: 1px solid #fff;
    background: transparent;

    color: #FFF;
    font-family: "Host Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.buro210-login-support a:hover {
    background: #fff;
    color: #4A0A26;
}