@font-face {
  font-family: "Cairo";
  src: url("../fonts/Cairo-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

html,
body.login,
body.login * { box-sizing: border-box; font-family: "Cairo", Tahoma, Arial, sans-serif; }

body.login {
  min-height: 100vh;
  color: #10223f;
  background: radial-gradient(circle at 15% 12%, rgba(124,58,237,.16), transparent 28%), linear-gradient(145deg, #edf4ff, #faf8ff);
}

.login #login { width: min(430px, calc(100% - 32px)); margin: 0 auto !important; padding: 34px 0 24px; }
.login h1 { margin: 0 0 22px; }
.login h1 a {
  display: block;
  width: min(300px, 82vw);
  height: 118px;
  margin: 0 auto;
  background-image: url("../images/ostadi-logo-calligraphy-v3.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-indent: -9999px;
}
.login h1 a::before { display: none; }

.login form,
.login .message,
.login .notice,
.login .success {
  border: 1px solid #d5e1f0;
  border-radius: 22px;
  box-shadow: 0 22px 55px rgba(30,64,175,.11);
}
.login form { margin-top: 0; padding: 28px 30px 26px; background: rgba(255,255,255,.96); }
.login .message,
.login .notice,
.login .success { margin-bottom: 18px; padding: 14px 18px; background: #fff; }
.login #login_error { border-inline-start: 4px solid #dc2626; }
.login label { display: block; margin-bottom: 8px; color: #263955; font-size: 15px; font-weight: 800; }
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  width: 100%;
  min-height: 52px;
  margin: 0 0 18px;
  padding: 8px 13px;
  color: #10223f;
  background: #fff;
  border: 1px solid #c8d6e8;
  border-radius: 12px;
  font-size: 17px;
  box-shadow: none;
}
.login form .input { display: block; margin-top: 8px; }
.login .user-pass-wrap { position: relative; }
.login .wp-pwd { position: relative; margin-top: 8px; }
.login .wp-pwd .input { margin-top: 0; }
.login .user-pass-wrap .input { padding-inline-end: 48px; }
.login .button.wp-hide-pw { position: absolute; z-index: 2; top: 4px; right: auto; left: 3px; width: 44px; min-width: 44px; min-height: 44px; padding: 0; color: #426189; background: transparent; border: 0; }
.login input:focus { border-color: #7047f5; box-shadow: 0 0 0 3px rgba(112,71,245,.14); outline: 0; }
.login .forgetmenot { float: none !important; margin: 0 0 16px; }
.login .forgetmenot label { display: inline-flex; margin: 0; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.login .forgetmenot input { width: 19px; height: 19px; margin: 0; }
.login .submit { clear: both; margin: 0; }
.wp-core-ui .button-primary {
  float: none;
  width: 100%;
  min-height: 48px;
  padding-inline: 20px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7047f5);
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(49,75,220,.2);
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus { color: #fff; background: linear-gradient(135deg, #1d4ed8, #6334e9); }
.login .orc-google-login-wrap { margin-top: 17px; }
.login .orc-google-button { min-height: 50px; border-radius: 12px; font-size: 14px; }
.login #nav,
.login #backtoblog { margin: 18px 0 0; padding: 0; text-align: center; }
.login #backtoblog { margin-top: 10px; }
.login #backtoblog a,
.login #nav a { color: #334e73; font-weight: 800; }
.login #backtoblog a:hover,
.login #nav a:hover { color: #6d28d9; }
.login .privacy-policy-page-link { margin: 16px 0 0; }
.login .language-switcher { padding-top: 18px; }

@media (max-width: 480px) {
  .login #login { width: min(100% - 24px, 410px); padding-top: 20px; }
  .login h1 { margin-bottom: 12px; }
  .login h1 a { width: 230px; height: 88px; }
  .login form { padding: 23px 20px 21px; border-radius: 18px; }
}