/* JoyFuel presentation for native WordPress access and recovery flows. */
html:has(body.jf-prx-core) {
  background: #fbfaf7;
}

body.login.jf-prx-core {
  min-height: 100dvh;
  background: radial-gradient(circle at 12% 15%, rgba(238, 164, 96, .13), transparent 34%),
    radial-gradient(circle at 88% 90%, rgba(196, 0, 100, .07), transparent 32%), #fbfaf7;
  color: #17202a;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.jf-prx-core #login {
  width: min(100% - 32px, 520px);
  box-sizing: border-box;
  margin: clamp(28px, 7vh, 72px) auto 0;
  padding: 0 0 28px;
  overflow: hidden;
  border: 1px solid #e5e0e3;
  border-top: 6px solid #c40064;
  border-radius: 18px;
  background: #fffdfb;
  box-shadow: 0 24px 60px rgba(75, 48, 57, .08);
}

.jf-prx-core #login .wp-login-logo {
  margin: 0;
  padding: 35px clamp(24px, 7vw, 44px) 0;
  text-align: left;
}

.jf-prx-core #login .wp-login-logo a {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  color: #c40064;
  font: 700 27px/1 Georgia, "Times New Roman", serif;
  text-indent: 0;
  text-decoration: none;
}

.jf-prx-core #login .wp-login-logo a:hover {
  color: #a90056;
}

.jf-prx-core__intro {
  padding: 37px clamp(24px, 7vw, 44px) 0;
}

.jf-prx-core__eyebrow {
  margin: 0 0 10px !important;
  color: #a90056;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.jf-prx-core__intro h2 {
  margin: 0;
  color: #17202a;
  font: 400 clamp(30px, 6vw, 40px)/1.12 Georgia, "Times New Roman", serif;
  letter-spacing: -.025em;
}

.jf-prx-core__intro > p:not(.jf-prx-core__eyebrow) {
  margin: 15px 0 0;
  color: #5b6370;
  font-size: 15px;
  line-height: 1.65;
}

.jf-prx-core #login .jf-prx-core__next {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 20px;
  border-radius: 10px;
  background: #c40064;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.jf-prx-core #login .jf-prx-core__next:hover {
  background: #a90056;
  color: #fff;
}

.jf-prx-core #login form {
  margin: 0;
  padding: 30px clamp(24px, 7vw, 44px) 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.jf-prx-core #login form label {
  color: #17202a;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.jf-prx-core #login form .input,
.jf-prx-core #login form input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  margin-top: 9px;
  padding: 10px 14px;
  border: 1px solid #aeb5bf;
  border-radius: 10px;
  background: #fff;
  color: #17202a;
  font-size: 17px;
  box-shadow: none;
}

.jf-prx-core #login form .input:focus,
.jf-prx-core #login form input[type="text"]:focus {
  border-color: #c40064;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(196, 0, 100, .13);
}

.jf-prx-core #login form .user-pass-wrap {
  margin-top: 20px;
}

.jf-prx-core #login form .forgetmenot {
  float: none;
  margin: 20px 0 0;
}

.jf-prx-core #login form .forgetmenot label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.jf-prx-core #login form #rememberme {
  margin: 0;
  accent-color: #c40064;
}

.jf-prx-core #login form #reg_passmail {
  margin: 18px 0 0;
  color: #5b6370;
  font-size: 13px;
  line-height: 1.55;
}

.jf-prx-core #login .wp-pwd {
  position: relative;
}

.jf-prx-core #login .wp-pwd input {
  padding-right: 48px;
}

.jf-prx-core #login .wp-pwd .wp-hide-pw {
  top: 12px;
  right: 8px;
  border: 0;
  background: transparent;
  color: #a90056;
}

.jf-prx-core #login .wp-pwd .wp-hide-pw:hover {
  color: #17202a;
}

.jf-prx-core #login #pass-strength-result {
  margin-top: 12px;
  border-radius: 7px;
  font-size: 13px;
}

.jf-prx-core #login .description {
  margin: 15px 0 22px;
  color: #5b6370;
  font-size: 13px;
  line-height: 1.55;
}

.jf-prx-core #login .submit,
.jf-prx-core #login .reset-pass-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
}

.jf-prx-core #login .button-primary {
  float: none;
  order: -1;
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid #c40064;
  border-radius: 10px;
  background: #c40064;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-shadow: none;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.jf-prx-core #login .button-primary:hover {
  border-color: #a90056;
  background: #a90056;
  transform: translateY(-1px);
}

.jf-prx-core #login .button-primary:active {
  transform: translateY(0);
}

.jf-prx-core #login .wp-generate-pw {
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: #a90056;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}

.jf-prx-core #login .wp-generate-pw:hover {
  color: #17202a;
  background: transparent;
}

.jf-prx-core #login a {
  color: #a90056;
}

.jf-prx-core #login a:focus-visible,
.jf-prx-core #login button:focus-visible,
.jf-prx-core #login input:focus-visible {
  outline: 3px solid rgba(196, 0, 100, .35);
  outline-offset: 3px;
}

.jf-prx-core #login #nav {
  margin: 26px clamp(24px, 7vw, 44px) 0;
  padding: 20px 0 0;
  border-top: 1px solid #e5e0e3;
  color: #5b6370;
  font-size: 13px;
}

.jf-prx-core #login #backtoblog {
  margin: 13px clamp(24px, 7vw, 44px) 0;
  padding: 0;
  font-size: 13px;
}

.jf-prx-core #login .notice,
.jf-prx-core #login #login_error {
  margin: 22px clamp(24px, 7vw, 44px) 0;
  border-radius: 8px;
  box-shadow: none;
}

.jf-prx-core #login .notice.message {
  border-left-color: #c40064;
  background: #fff5f9;
  color: #17202a;
}

.jf-prx-core .language-switcher {
  width: min(100% - 32px, 520px);
  margin: 20px auto 30px;
  color: #5b6370;
}

.jf-prx-core .language-switcher form {
  padding: 0;
}

.jf-prx-core .language-switcher select {
  min-height: 42px;
  border: 1px solid #aeb5bf;
  border-radius: 8px;
  background-color: #fffdfb;
  color: #17202a;
  box-shadow: none;
}

.jf-prx-core .language-switcher .button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #c40064;
  border-radius: 8px;
  background: transparent;
  color: #a90056;
  font-weight: 700;
  box-shadow: none;
}

.jf-prx-core .language-switcher .button:hover {
  border-color: #a90056;
  background: #fff1f7;
  color: #a90056;
}

@media (max-width: 520px) {
  .jf-prx-core #login {
    margin-top: 16px;
    border-radius: 14px;
  }

  .jf-prx-core #login .submit .button-primary {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jf-prx-core #login .button-primary {
    transition: none;
  }
}