/*
  CProjects Login – Apple Light
  - Clean, readable, responsive
*/

body.cpn-login-theme{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at top, #FFFFFF 0, #F5F5F7 45%, #ECECEF 100%);
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 18px;
}

body.cpn-login-theme.cpn-login-has-bg{
  /* Split layout (left white panel + right image set via inline CSS) */
  background: #FFFFFF;
  padding: 0;
}
body.cpn-login-theme.cpn-login-has-bg:before{
  /* The right-side image is injected via inline CSS (no blur). */
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  background: #F5F5F7;
  pointer-events: none;
}

/* Center the login card inside the LEFT half (white area) */
body.cpn-login-theme.cpn-login-has-bg #login{
  transform: translateX(-25vw);
}

/* Subtle divider between white panel and image panel */
body.cpn-login-theme.cpn-login-has-bg:after{
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(0,0,0,0.06);
  pointer-events: none;
}

@media (max-width: 960px){
  body.cpn-login-theme.cpn-login-has-bg{
    padding: 6vh 18px;
  }
  body.cpn-login-theme.cpn-login-has-bg #login{
    transform: none;
  }
  body.cpn-login-theme.cpn-login-has-bg:after{display:none}
}

body.cpn-login-theme #login{
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 34px 30px 26px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(229,229,234,0.9);
  border-radius: 20px;
  /* Softer shadow for a more delicate/Apple feel */
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  position: relative;
  z-index: 1;
}

body.cpn-login-theme #login h1{margin:0 0 18px;text-align:center}
body.cpn-login-theme #login h1 a{
  width: 200px;
  height: 64px;
  margin: 0 auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

body.cpn-login-theme #loginform,
body.cpn-login-theme #lostpasswordform,
body.cpn-login-theme #registerform{
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

body.cpn-login-theme #loginform label,
body.cpn-login-theme #lostpasswordform label,
body.cpn-login-theme #registerform label{
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6E6E73;
  margin-bottom: 6px;
}

body.cpn-login-theme .input,
body.cpn-login-theme input[type="text"],
body.cpn-login-theme input[type="password"],
body.cpn-login-theme input[type="email"]{
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E5E5EA;
  color: #1D1D1F;
  padding: 11px 12px;
  font-size: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.cpn-login-theme .input:focus,
body.cpn-login-theme input[type="text"]:focus,
body.cpn-login-theme input[type="password"]:focus,
body.cpn-login-theme input[type="email"]:focus{
  border-color: rgba(0,113,227,0.65);
  box-shadow: 0 0 0 4px rgba(0,113,227,0.18);
  outline: none;
}

body.cpn-login-theme .forgetmenot{margin:14px 0 0}
body.cpn-login-theme .forgetmenot label{
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: #6E6E73;
}
body.cpn-login-theme input[type="checkbox"]{border-radius:6px;border-color:#C7C7CC}

body.cpn-login-theme .button-primary{
  width: 100%;
  margin-top: 16px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #0071E3, #2A7DE1);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  box-shadow: 0 14px 26px rgba(0,113,227,0.22);
  text-shadow: none;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
body.cpn-login-theme .button-primary:hover{transform:translateY(-1px);filter:brightness(1.02);box-shadow:0 16px 30px rgba(0,113,227,0.26)}
body.cpn-login-theme .button-primary:active{transform:translateY(0);box-shadow:0 10px 22px rgba(0,113,227,0.20)}

body.cpn-login-theme #nav,
body.cpn-login-theme #backtoblog{text-align:center;margin:14px 0 0}
body.cpn-login-theme #nav a,
body.cpn-login-theme #backtoblog a{color:#6E6E73;text-decoration:none;font-size:12px}
body.cpn-login-theme #nav a:hover,
body.cpn-login-theme #backtoblog a:hover{color:#1D1D1F}

body.cpn-login-theme .message,
body.cpn-login-theme #login_error{
  border-radius: 14px;
  border: 1px solid #E5E5EA;
  background: rgba(255,255,255,0.95);
  color: #1D1D1F;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

body.cpn-login-theme #language-switcher{margin-top:14px !important}
body.cpn-login-theme #language-switcher select{
  width: 100%;
  border-radius: 12px;
  border: 1px solid #E5E5EA;
  padding: 10px 12px;
  background: #FFFFFF;
}

@media (max-width: 480px){
  body.cpn-login-theme #login{padding:28px 18px 22px;border-radius:16px}
  body.cpn-login-theme #login h1 a{width:170px;height:56px}
}

@media (max-width: 960px){
  /* On small screens, use a single-column layout */
  body.cpn-login-theme.cpn-login-has-bg:before{left:0;opacity:.28}
  body.cpn-login-theme.cpn-login-has-bg:after{display:none}
  body.cpn-login-theme.cpn-login-has-bg #login{transform:none}
  body.cpn-login-theme.cpn-login-has-bg{padding:6vh 18px}
}