@font-face {
  font-family: "TT Travels-500";
  src: url("../fonts/TTTravels-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

html {
  height: 100%;
}

body.login {
  background-image: url("../images/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

body.login #login {
  width: auto;
  padding: 0;
  text-align: center;
}

/* Site name as orange title instead of WP logo */
body.login #login h1 a {
  background-image: none !important;
  text-indent: 0 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  font-family: "TT Travels-500", sans-serif;
  font-size: 55px;
  color: #F59746;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 50px;
  overflow: visible;
}

/* Form boxes */
#loginform,
#lostpasswordform {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
}

/* Hide labels — we add placeholders via JS */
#loginform label,
#lostpasswordform label {
  display: none !important;
}

/* All text/password inputs */
#loginform .input,
#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"],
#lostpasswordform .input,
#lostpasswordform input[type="text"],
#lostpasswordform input[type="email"] {
  height: 55px !important;
  width: 328px !important;
  box-sizing: border-box !important;
  border: 1px solid black !important;
  border-radius: 8px !important;
  outline: none !important;
  padding: 0 20px !important;
  opacity: 0.4;
  color: black !important;
  font-family: "TT Travels-500", sans-serif !important;
  font-size: 14px !important;
  background: white !important;
  box-shadow: none !important;
  margin-top: 15px !important;
  display: block;
  margin: 0 auto;
}

#loginform .input:hover,
#loginform .input:focus,
#lostpasswordform .input:hover,
#lostpasswordform .input:focus {
  opacity: 1 !important;
  border-color: #F59746 !important;
  box-shadow: none !important;
}

/* Password wrapper — needs relative for the eye button */
.wp-pwd {
  position: relative;
  display: inline-block;
}

/* Eye toggle button */
.wp-hide-pw,
.wp-hide-pw:hover,
.wp-hide-pw:focus,
.wp-hide-pw:active {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  width: 20px !important;
  height: 20px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1 !important;
  color: transparent !important;
}

.wp-hide-pw .dashicons {
  color: #929292 !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 1 !important;
}

/* Submit button */
#wp-submit,
#submit {
  display: inline-block !important;
  background-color: #F59746 !important;
  border: none !important;
  border-radius: 46px !important;
  color: white !important;
  font-family: "TT Travels-500", sans-serif !important;
  font-size: 18px !important;
  padding: 12px 50px !important;
  cursor: pointer !important;
  width: auto !important;
  height: auto !important;
  text-shadow: none !important;
  box-shadow: none !important;
  margin: 30px auto 0 !important;
  float: none !important;
}

#wp-submit:hover,
#submit:hover {
  background-color: #d9832e !important;
  color: white !important;
}

.submit {
  text-align: center !important;
  padding: 0 !important;
}

/* Hide "remember me" */
.forgetmenot {
  display: none !important;
}

/* Logout / info message */
#login_message,
.message {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  color: #929292 !important;
  font-family: "TT Travels-500", sans-serif !important;
  font-size: 13px !important;
  text-align: center !important;
  padding: 0 0 15px !important;
  margin: 0 !important;
}

/* Error messages */
#login_error,
#login_error.notice,
#login_error.notice-error {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  color: #FF0000 !important;
  font-family: "TT Travels-500", sans-serif !important;
  font-size: 12px !important;
  font-weight: normal !important;
  text-align: center !important;
  padding: 0 0 10px !important;
  margin: 0 0 5px !important;
}

#login_error strong {
  font-weight: normal !important;
  color: #FF0000 !important;
}

#login_error a {
  display: none !important;
}

#login_error p {
  margin: 0 !important;
  color: #FF0000 !important;
}

/* "Lost password?" and "Back to site" */
#nav,
#backtoblog {
  text-align: center;
  margin-top: 15px;
}

#nav a,
#backtoblog a {
  color: #929292;
  font-family: "TT Travels-500", sans-serif;
  font-size: 12px;
  text-decoration: none;
}

#nav a:hover,
#backtoblog a:hover {
  color: #F59746;
  text-decoration: none;
}

#backtoblog,
#nav,
.language-switcher,
.login-language-switcher,
#language-switcher,
form#language-switcher {
  display: none !important;
}

/* 2FA: Resend Code button */
.two-factor-email-resend input[type="submit"] {
  display: inline-block !important;
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.4) !important;
  border-radius: 46px !important;
  color: rgba(0,0,0,0.5) !important;
  font-family: "TT Travels-500", sans-serif !important;
  font-size: 14px !important;
  padding: 8px 30px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  margin-top: 5px !important;
}

.two-factor-email-resend input[type="submit"]:hover {
  border-color: #F59746 !important;
  color: #F59746 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* "Having Problems?" block */
.backup-methods-wrap {
  text-align: center;
  margin-top: 20px;
}

.backup-methods-wrap p {
  font-family: "TT Travels-500", sans-serif !important;
  font-size: 13px !important;
  color: #929292 !important;
  margin: 0 0 6px !important;
}

.backup-methods-wrap ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.backup-methods-wrap ul li a {
  font-family: "TT Travels-500", sans-serif !important;
  font-size: 13px !important;
  color: #F59746 !important;
  text-decoration: none !important;
}

.backup-methods-wrap ul li a:hover {
  text-decoration: underline !important;
}

/* 2FA: Two Factor plugin */
input[name="two-factor-totp-authcode"],
#two-factor-totp-authcode {
  height: 55px !important;
  width: 328px !important;
  box-sizing: border-box !important;
  border: 1px solid black !important;
  border-radius: 8px !important;
  outline: none !important;
  padding: 0 20px !important;
  color: black !important;
  font-family: "TT Travels-500", sans-serif !important;
  font-size: 14px !important;
  background: white !important;
  box-shadow: none !important;
  margin: 15px auto 0 !important;
  display: block !important;
}

input[name="two-factor-totp-authcode"]:focus,
#two-factor-totp-authcode:focus {
  border-color: #F59746 !important;
  box-shadow: none !important;
}

/* 2FA description text */
.two-factor-prompt,
#loginform > p:not(.submit) {
  font-family: "TT Travels-500", sans-serif;
  color: #929292;
  font-size: 13px;
  text-align: center;
  margin-top: 15px;
}

@media (max-width: 767px) {
  body.login #login h1 a {
    font-size: 36px;
    margin-bottom: 30px;
  }

  #loginform .input,
  #loginform input[type="text"],
  #loginform input[type="password"],
  #loginform input[type="email"],
  #lostpasswordform .input,
  #lostpasswordform input[type="text"],
  #lostpasswordform input[type="email"],
  input[name="two-factor-totp-authcode"],
  #two-factor-totp-authcode {
    width: 280px !important;
    height: 50px !important;
  }
}