/* === Import Plus Jakarta Sans === */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* Accent colours */
:root{
  --accent: #9B6BBD;       /* Amethyst */
  --accent-deep: #6A4C93;  /* Deep Violet */

  /* Message tints */
  --err: #DC5A5A;
  --ok:  #3BB273;
  --info:#6A8BD1;
}

/* === Background + alignment === */
body.login{
  display:flex;
  justify-content:flex-end;          /* right align */
  align-items:center;
  min-height:100vh;
  padding-right:5vw;
  background:url('https://barah.me/wp-content/uploads/2025/09/login-image.jpg') no-repeat center center fixed;
  background-size:cover;
  font-family:'Plus Jakarta Sans',sans-serif!important;
}

/* Hide WordPress logo */
body.login h1.wp-login-logo,
body.login h1 a{display:none!important}

/* Login box container */
body.login #login{
  width:340px;
  max-width:92vw;
  margin-right:0;
  text-align:left;
  font-family:'Plus Jakarta Sans',sans-serif!important;
}

/* === Animated, glassmorphic form panels (login / lost password / register) === */
@keyframes loginFloatIn{
  0%{opacity:0;transform:translateY(12px) scale(.985)}
  60%{opacity:1;transform:translateY(0) scale(1.003)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

body.login #loginform,
body.login #lostpasswordform,
body.login #registerform{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:42px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  padding:2rem;
  margin:0;
  float:none!important;
  position:static!important;
  animation:loginFloatIn .6s cubic-bezier(.2,.7,.2,1) both;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  body.login #loginform,
  body.login #lostpasswordform,
  body.login #registerform{animation:none}
}

/* Labels */
body.login label{
  font-weight:600;
  font-size:14px;
  color:#fff;
  display:block;
  margin-bottom:.4rem;
}

/* Inputs (all forms) */
body.login #loginform input.input,
body.login #lostpasswordform input.input,
body.login #registerform input.input{
  width:100%;
  padding:.65rem .75rem;
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;
  font-size:14px;
  background:rgba(255,255,255,.2);
  color:#fff;
  outline:none;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body.login input.input::placeholder{color:rgba(255,255,255,.7)}
body.login #loginform input.input:focus,
body.login #lostpasswordform input.input:focus,
body.login #registerform input.input:focus{
  border-color:color-mix(in srgb,var(--accent) 90%,white 10%);
  background:rgba(255,255,255,.3);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);
}

/* === Remember Me (inline + compact spacing) === */
body.login .forgetmenot{
  display:flex!important;
  align-items:center;
  gap:.5rem;
  margin:0 0 .8rem!important;      /* space before button */
}
body.login #rememberme{margin:0}
body.login .forgetmenot label{
  margin:0;
  color:#fff;
  font-weight:500;
}

/* === Submit buttons (glassy, semi-transparent Amethyst) === */
body.login #loginform #wp-submit,
body.login #lostpasswordform #wp-submit,
body.login #registerform #wp-submit{
  width:100%;
  padding:.65rem .95rem;
  border-radius:44px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(155,107,189,.75);         /* Amethyst, semi-transparent */
  color:#fff;
  font-weight:600;
  font-size:14px;
  letter-spacing:.25px;
  cursor:pointer;
  position:relative;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,0,0,.3);
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
}
body.login #loginform #wp-submit::before,
body.login #lostpasswordform #wp-submit::before,
body.login #registerform #wp-submit::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.1) 40%,rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;
  pointer-events:none;
}
body.login #loginform #wp-submit:hover,
body.login #lostpasswordform #wp-submit:hover,
body.login #registerform #wp-submit:hover{
  background:rgba(155,107,189,.9);
  box-shadow:0 12px 26px rgba(0,0,0,.35);
  transform:translateY(-1px);
}
body.login #loginform #wp-submit:active,
body.login #lostpasswordform #wp-submit:active,
body.login #registerform #wp-submit:active{
  transform:translateY(0)
}

/* === Pop-in animation for messages === */
@keyframes msgPopIn{
  0%{opacity:0;transform:translateY(8px) scale(.96);filter:blur(2px) saturate(.85)}
  60%{opacity:1;transform:translateY(-2px) scale(1.02);filter:blur(0) saturate(1)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

body.login #login_error,
body.login .message,
body.login .notice,
body.login .updated{
  margin:0 0 12px;
  padding:12px 14px;
  border-radius:16px;
  font-size:13px;
  line-height:1.45;
  color:#fff !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  animation:msgPopIn .55s cubic-bezier(.22,.8,.2,1) both;
  will-change:transform,opacity,filter;
}

/* Error tint */
body.login #login_error{
  background:color-mix(in srgb,var(--err) 35%,rgba(255,255,255,.12));
  border-color:color-mix(in srgb,var(--err) 45%,rgba(255,255,255,.25));
}

/* Info/default tint (e.g. Registration confirmation) */
body.login .message{
  background:color-mix(in srgb,var(--info) 32%,rgba(255,255,255,.12));
  border-color:color-mix(in srgb,var(--info) 45%,rgba(255,255,255,.25));
  color:#fff !important;
}

/* Success variants */
body.login .message.updated,
body.login .updated,
body.login .notice-success{
  background:color-mix(in srgb,var(--ok) 32%,rgba(255,255,255,.12));
  border-color:color-mix(in srgb,var(--ok) 45%,rgba(255,255,255,.25));
  color:#fff !important;
}

/* Links inside messages */
body.login #login_error a,
body.login .message a,
body.login .notice a,
body.login .updated a{
  color:#fff !important;
  text-decoration:underline;
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  body.login #login_error,
  body.login .message,
  body.login .notice,
  body.login .updated{animation:none}
}

/* Registration form note text */
body.login #registerform p{
  color:#fff !important;
  font-weight:500;
  margin-top:-4px;
}

/* === Links beneath the form (Register, Lost PW, etc.) === */
body.login #nav,
body.login #backtoblog{
  margin-top:1rem;
  font-size:13px;
  text-align:center;
}

body.login #nav a,
body.login #backtoblog a{
  color:#fff;                  /* default white */
  text-decoration:none;        /* no underline */
  font-weight:500;
  transition:color .2s ease;
}

body.login #nav a:hover,
body.login #backtoblog a:hover{
  color:var(--accent);         /* Amethyst hover */
  text-decoration:none!important;
}

/* Password toggle eye icon */
body.login .wp-hide-pw .dashicons{color:rgba(255,255,255,.9)}

/* Language switcher */
body.login .language-switcher{text-align:center}