@font-face {
  font-family: 'TheSans';
  src: url('../fonts/TheSansC5-5_Plain.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSans';
  src: url('../fonts/TheSansC5-7_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body.login {
  --xsuite-login-blue: #1E5DEB;
  --xsuite-login-dark: #1d1c43;
  --xsuite-login-white: #ffffff;
  --xsuite-login-line: rgba(255, 255, 255, 0.18);
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(8, 34, 154, 0.32), rgba(30, 93, 235, 0.16)),
    linear-gradient(180deg, rgba(29, 28, 67, 0.58), rgba(29, 28, 67, 0.28)),
    url('../img/login-bg.jpg') center center / cover no-repeat fixed !important;
  color: var(--xsuite-login-white);
  font-family: 'TheSans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.login::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 6, 28, 0.72) 0%, rgba(5, 6, 28, 0.34) 46%, rgba(5, 6, 28, 0.06) 100%),
    linear-gradient(180deg, rgba(5, 6, 28, 0.18) 0%, rgba(5, 6, 28, 0.42) 100%);
  z-index: 0;
}

body.login #login {
  position: relative;
  z-index: 1;
  width: min(368px, calc(100vw - 40px));
  min-height: calc(100vh - 32px);
  padding: clamp(96px, 13vh, 152px) 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.login #login h1 {
  width: 100%;
  margin: 0 0 42px;
}

body.login #login h1 a {
  display: block;
  width: 224px;
  height: 74px;
  margin: 0 auto;
  background-image: url('../img/xsuite_logo_white_rgb.png') !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-indent: -9999px;
  outline: none;
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.34));
}

body.login #loginform {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

body.login:has(:is(#login > a, #login > div:not(.message):not(#login_error) a, #loginform > p a, #loginform > div a, #loginform .button:not(#wp-submit), #loginform button:not(#wp-submit), #loginform [role='button'])) #loginform :is(.user-pass-wrap, .forgetmenot, .submit, .wp-pwd, label, input[type='text'], input[type='password'], input[type='checkbox'], input[type='submit']) {
  display: none !important;
}

body.login #loginform > p {
  margin: 0;
}

body.login #login > a,
body.login #login > div:not(.message):not(#login_error) a,
body.login #loginform > p a,
body.login #loginform > div a,
body.login #loginform .button:not(#wp-submit),
body.login #loginform button:not(#wp-submit),
body.login #loginform [role='button'] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 96px;
  padding: 22px 28px;
  color: var(--xsuite-login-white) !important;
  background: var(--xsuite-login-blue) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(30, 93, 235, 0.34);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none !important;
  text-shadow: none !important;
  transition:
    transform 160ms cubic-bezier(.2,.6,.2,1),
    box-shadow 160ms cubic-bezier(.2,.6,.2,1),
    background-color 160ms cubic-bezier(.2,.6,.2,1);
}

body.login #login > a:hover,
body.login #login > div:not(.message):not(#login_error) a:hover,
body.login #loginform > p a:hover,
body.login #loginform > div a:hover,
body.login #loginform .button:not(#wp-submit):hover,
body.login #loginform button:not(#wp-submit):hover,
body.login #loginform [role='button']:hover {
  background: #1451E1 !important;
  box-shadow: 0 34px 82px rgba(30, 93, 235, 0.42);
  transform: translateY(-2px);
}

body.login #login > a:focus-visible,
body.login #login > div:not(.message):not(#login_error) a:focus-visible,
body.login #loginform > p a:focus-visible,
body.login #loginform > div a:focus-visible,
body.login #loginform .button:not(#wp-submit):focus-visible,
body.login #loginform button:not(#wp-submit):focus-visible,
body.login #loginform [role='button']:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.32), 0 34px 82px rgba(30, 93, 235, 0.42);
}

body.login #nav,
body.login #backtoblog,
body.login .privacy-policy-page-link,
body.login .language-switcher {
  display: none !important;
}

body.login .message,
body.login #login_error {
  width: 100%;
  margin: 0 0 18px;
  padding: 14px 16px;
  color: var(--xsuite-login-white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--xsuite-login-line);
  border-left: 3px solid var(--xsuite-login-blue);
  border-radius: 8px;
  box-shadow: none;
  backdrop-filter: blur(16px);
}

body.login .message a,
body.login #login_error a {
  color: var(--xsuite-login-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.login.interim-login {
  min-height: auto;
}

@media (max-width: 640px) {
  body.login {
    background-position: 58% center !important;
  }

  body.login #login {
    min-height: calc(100vh - 24px);
    padding-top: 88px;
  }

  body.login #login h1 {
    margin-bottom: 34px;
  }

  body.login #login h1 a {
    width: 188px;
    height: 62px;
  }

  body.login #login > a,
  body.login #login > div:not(.message):not(#login_error) a,
  body.login #loginform > p a,
  body.login #loginform > div a,
  body.login #loginform .button:not(#wp-submit),
  body.login #loginform button:not(#wp-submit),
  body.login #loginform [role='button'] {
    min-height: 82px;
    padding: 18px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.login *,
  body.login *::before,
  body.login *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}