/* ===========================================================================
   Commander Payments — wp-login.php.

   No theme CSS loads here, so every colour is literal. Split screen: the
   night panel with a lit C18 on the left, the form on white on the right —
   white because the partner lockup above the form is the black Verifone
   logotype, per Verifone's guidance.
   =========================================================================== */

html,body.login{height:auto;min-height:100%}
body.login{
  margin:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,1fr);
  min-height:100vh;background:#fff;color:#2D4250;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------------------------------------------------------- night panel */
.cmdr-login-art{
  position:relative;isolation:isolate;overflow:hidden;grid-row:1 / span 3;
  display:flex;align-items:center;
  background:#04131C;color:#B7CDD8;
  padding:56px clamp(32px, 5vw, 80px);
}
.cmdr-login-art::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(circle at 1px 1px,rgba(120,205,240,.18) 1px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 40%,#000 15%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 70% 40%,#000 15%,transparent 75%);
}
.cmdr-login-art::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(55% 55% at 80% 70%,rgba(8,132,171,.55),transparent 70%),
    radial-gradient(40% 50% at 0% 0%,rgba(60,203,244,.16),transparent 70%);
}
.cmdr-login-art-in{position:relative;width:100%;max-width:640px}
.cmdr-login-k{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#56BEDF;
}
.cmdr-login-k::before{content:"";width:8px;height:8px;border-radius:50%;background:#56BEDF;box-shadow:0 0 0 4px rgba(86,190,223,.2)}
.cmdr-login-h{
  margin:18px 0 14px;font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;font-weight:800;
  font-size:clamp(34px, 3.6vw, 58px);line-height:1.02;letter-spacing:-.04em;color:#fff;max-width:13ch;
}
.cmdr-login-p{margin:0;font-size:16px;line-height:1.6;max-width:44ch}
.cmdr-login-c18{
  display:block;width:min(420px, 80%);height:auto;margin:40px 0 0 auto;
  filter:drop-shadow(0 40px 50px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(143,230,255,.7)) drop-shadow(0 0 26px rgba(60,203,244,.25));
}

/* --------------------------------------------------------------- the form */
#login{
  grid-column:2;align-self:center;justify-self:center;
  width:min(400px, calc(100% - 48px));padding:48px 0 24px;margin:0;
}
.login h1{margin:0 0 30px}
/* The lockup: Verifone | rule | partner logo, as three background layers. */
.login h1 a{
  width:320px;height:70px;margin:0;
  background-repeat:no-repeat;
  background-size:118px auto,1.5px 64px,150px auto;
  background-position:0 50%,142px 50%,100% 50%;
  text-indent:-9999px;overflow:hidden;outline-offset:6px;
}
.login form{
  margin:0;padding:0;border:0;box-shadow:none;background:transparent;overflow:visible;
}
.login label{font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:14px;color:#0A1A24}
.login form .input,.login input[type="text"],.login input[type="password"],.login input[type="email"]{
  min-height:52px;margin:6px 0 18px;padding:10px 14px;border-radius:12px;
  border:1.5px solid #DCE6EC;background:#F3F7FA;color:#0A1A24;font-size:16px;box-shadow:none;
}
.login form .input:focus,.login input:focus{border-color:#077DA3;background:#fff;box-shadow:0 0 0 1px #077DA3;outline:2px solid transparent}
.login .button.wp-hide-pw{height:52px;margin-top:6px;color:#53697A}
.login .button.wp-hide-pw:focus{border-color:#077DA3;box-shadow:0 0 0 1px #077DA3}
.login .forgetmenot{margin-top:6px}
.login .forgetmenot label{font-family:inherit;font-weight:500;color:#53697A}
.login input[type="checkbox"]:checked::before{filter:hue-rotate(160deg)}
.login .button-primary,.wp-core-ui .button-primary.button-large{
  min-height:50px;padding:0 26px;border-radius:999px;border:0;
  background:#077DA3;color:#fff;font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:15px;
  box-shadow:0 12px 30px -12px rgba(8,132,171,.85);text-shadow:none;
  transition:background-color .2s,transform .2s;
}
.login .button-primary:hover,.login .button-primary:focus{background:#066E90;color:#fff;transform:translateY(-1px)}
.login .button-primary:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px #077DA3}
.login .submit{margin-top:6px}
.login #nav,.login #backtoblog{margin:22px 0 0;padding:0;font-size:14px}
.login #nav a,.login #backtoblog a{color:#055B77;text-decoration:none;font-weight:600}
.login #nav a:hover,.login #backtoblog a:hover{color:#077DA3;text-decoration:underline}
.login .message,.login .notice,.login .success,.login #login_error{
  border:0;border-left:4px solid #077DA3;border-radius:10px;background:#EAF6FB;color:#055B77;box-shadow:none;margin:0 0 20px;padding:12px 14px;
}
.login #login_error{border-left-color:#E5484D;background:#FDEDEE;color:#9E2227}
.login #login_error a{color:#9E2227}
.cmdr-login-tagline{
  grid-column:2;justify-self:center;width:min(400px, calc(100% - 48px));margin:0 0 32px;
  font-size:14px;color:#53697A;
}
.cmdr-login-tagline a{color:#055B77;font-weight:700;text-decoration:none}
.cmdr-login-tagline a:hover{text-decoration:underline}
.login .language-switcher{grid-column:2;justify-self:center;margin-bottom:24px}
.login .privacy-policy-page-link{grid-column:2}

@media (max-width:860px){
  body.login{grid-template-columns:minmax(0,1fr)}
  .cmdr-login-art{grid-row:auto;padding:36px 24px 28px}
  .cmdr-login-h{font-size:32px}
  .cmdr-login-c18{display:none}
  #login,.cmdr-login-tagline,.login .language-switcher{grid-column:1}
  #login{padding-top:32px}
}
@media (max-width:400px){
  .login h1 a{width:268px;background-size:98px auto,1.5px 54px,130px auto;background-position:0 50%,118px 50%,100% 50%}
}