/* Account entry pages only. OJS workflow pages retain their existing styles. */
body:has(.page_login, .page_register, .page_lost_password) {
  --spc-ink: #173c39;
  --spc-green: #176259;
  --spc-line: #d7e3dc;
  background: #fbfcf9 !important;
  color: #304b46 !important;
  font: 16px/1.6 "Segoe UI", Arial, sans-serif !important;
}
body:has(.page_login, .page_register, .page_lost_password) #header {
  background: #fbfcf9 !important;
  border-bottom: 1px solid var(--spc-line);
  box-shadow: none !important;
}
body:has(.page_login, .page_register, .page_lost_password) #header .container-fluid { background: #fbfcf9 !important; }
body:has(.page_login, .page_register, .page_lost_password) #header .sitename,
body:has(.page_login, .page_register, .page_lost_password) #header a { color: var(--spc-ink) !important; }
body:has(.page_login, .page_register, .page_lost_password) #header #navigationUser > li > a {
  background: #eef4ef !important;
  border: 1px solid var(--spc-line) !important;
  border-radius: 999px !important;
  color: var(--spc-ink) !important;
}
body:has(.page_login, .page_register, .page_lost_password) #spc-main {
  display: block;
  width: min(100% - 40px, 920px);
  margin: 0 auto;
  padding: 122px 0 64px;
  min-height: 60vh;
}
body:has(.page_login, .page_register, .page_lost_password) .page_login,
body:has(.page_login, .page_register, .page_lost_password) .page_register,
body:has(.page_login, .page_register, .page_lost_password) .page_lost_password {
  width: 100%;
  max-width: none;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body:has(.page_login, .page_register, .page_lost_password) .page-title {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}
body:has(.page_login, .page_register, .page_lost_password) .page-title .breadcrumbs { color: #536b65; }
body:has(.page_login, .page_register, .page_lost_password) .page-title .breadcrumbs a { color: var(--spc-green) !important; }
body:has(.page_login, .page_register, .page_lost_password) .page h1 {
  color: var(--spc-ink) !important;
  font: 400 clamp(34px, 4vw, 52px)/1.16 Georgia, "Times New Roman", serif !important;
  letter-spacing: -.025em;
  margin: 0 0 12px !important;
}
body:has(.page_login, .page_register, .page_lost_password) .page > p { color: #465e5a !important; margin: 0 0 14px; }
body:has(.page_login, .page_register, .page_lost_password) .cmp_form {
  width: min(100%, 620px);
  margin: 28px 0 0;
  padding: clamp(22px, 4vw, 38px);
  background: #fff;
  border: 1px solid var(--spc-line);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(23, 60, 57, .045);
}
body:has(.page_login, .page_register, .page_lost_password) .cmp_form fieldset { min-width: 0; }
body:has(.page_login, .page_register, .page_lost_password) .cmp_form .fields > div:not(.recaptcha),
body:has(.page_login, .page_register, .page_lost_password) .cmp_form .fields > fieldset { margin-bottom: 17px; }
body:has(.page_login, .page_register, .page_lost_password) .cmp_form label { color: var(--spc-ink) !important; font-weight: 600; }
body:has(.page_login, .page_register, .page_lost_password) .cmp_form label .label { display: block; margin-bottom: 7px; }
body:has(.page_login, .page_register, .page_lost_password) .cmp_form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea:not(.g-recaptcha-response)) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #7a9088 !important;
  border-radius: 9px;
  background: #fff !important;
  color: var(--spc-ink) !important;
  font: 16px/1.4 "Segoe UI", Arial, sans-serif;
}
body:has(.page_login, .page_register, .page_lost_password) .cmp_form .password-wrapper { display: flex; width: 100%; }
body:has(.page_login, .page_register, .page_lost_password) .cmp_form .password-wrapper input { border-radius: 9px 0 0 9px !important; }
body:has(.page_login, .page_register, .page_lost_password) .cmp_form .toggle-password {
  position: static !important;
  flex: 0 0 48px;
  min-height: 46px;
  border: 1px solid #7a9088 !important;
  border-left: 0 !important;
  border-radius: 0 9px 9px 0 !important;
  background: #eef4ef !important;
  color: var(--spc-ink) !important;
}
body:has(.page_login, .page_register, .page_lost_password) .cmp_form a { color: var(--spc-green) !important; text-decoration: underline !important; text-underline-offset: 3px; }
body:has(.page_login, .page_register, .page_lost_password) .cmp_form .remember label,
body:has(.page_login, .page_register, .page_lost_password) .cmp_form .checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
body:has(.page_login, .page_register, .page_lost_password) .cmp_form .remember .label,
body:has(.page_login, .page_register, .page_lost_password) .cmp_form .checkbox .label { display: inline; margin: 0; }
body:has(.page_login, .page_register, .page_lost_password) .cmp_form .buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
body:has(.page_login, .page_register, .page_lost_password) .cmp_form button.submit,
body:has(.page_login, .page_register, .page_lost_password) .cmp_form button[type="submit"] {
  position: static !important;
  min-height: 46px;
  padding: 10px 24px !important;
  border: 1px solid var(--spc-green) !important;
  border-radius: 9px !important;
  background: var(--spc-green) !important;
  color: #fff !important;
  font: 700 16px/1.3 "Segoe UI", Arial, sans-serif !important;
  box-shadow: none !important;
}
body:has(.page_login, .page_register, .page_lost_password) .cmp_form button[type="submit"]:hover { background: #0f4a43 !important; }
body:has(.page_login, .page_register, .page_lost_password) :is(a,button,input,select,textarea):focus-visible {
  outline: 3px solid #b08d4f !important;
  outline-offset: 3px;
}
body:has(.page_login, .page_register, .page_lost_password) #footer { background: #eef4ef !important; color: #304b46 !important; border-top: 1px solid var(--spc-line); }
body:has(.page_login, .page_register, .page_lost_password) #footer :is(h4,.sitename) { color: var(--spc-ink) !important; }
body:has(.page_login, .page_register, .page_lost_password) #footer a { color: var(--spc-green) !important; }
.spc-skip-link {
  position: fixed;
  z-index: 20000;
  top: -80px;
  left: 16px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #173c39;
  color: #fff !important;
  text-decoration: none;
}
.spc-skip-link:focus { top: 12px; }
@media (max-width: 640px) {
  body:has(.page_login, .page_register, .page_lost_password) #spc-main { width: min(100% - 28px, 620px); padding-top: 104px; }
  body:has(.page_login, .page_register, .page_lost_password) .cmp_form { padding: 22px 18px; }
  body:has(.page_login, .page_register, .page_lost_password) #header .sitename { font-size: 15px !important; line-height: 1.2 !important; }
  body:has(.page_login, .page_register, .page_lost_password) #header .logo img { width: 45px !important; height: 54px !important; object-fit: contain; }
  body:has(.page_login, .page_register, .page_lost_password) #header .pkp_navigation_user_wrapper { width: auto !important; left: auto !important; right: 6px !important; }
}


/* Layout correction for the actual OJS page container. */
body:has(> .page_login, > .page_register, > .page_lost_password) > .page{box-sizing:border-box!important;width:min(100% - 36px,760px)!important;max-width:none!important;margin:0 auto!important;padding:122px 0 68px!important;min-height:65vh!important;}
body:has(> .page_login, > .page_register, > .page_lost_password) > .page .cmp_form{box-sizing:border-box!important;width:min(100%,620px)!important;max-width:none!important;margin:26px 0 0!important;}
@media(max-width:640px){body:has(> .page_login, > .page_register, > .page_lost_password) > .page{width:calc(100% - 28px)!important;padding-top:104px!important;}}

/* Registration and password-reset pages are nested inside a section. */
body:has(.page_register) .page.page_register,body:has(.page_lost_password) .page.page_lost_password{box-sizing:border-box!important;width:min(100% - 36px,760px)!important;max-width:none!important;margin:0 auto!important;padding:28px 0 68px!important;min-height:55vh!important;}
@media(max-width:640px){body:has(.page_register) .page.page_register,body:has(.page_lost_password) .page.page_lost_password{width:calc(100% - 28px)!important;}}

/* Compact account header on phones. */
@media(max-width:640px){
body:has(.page_login,.page_register,.page_lost_password) #header{height:56px!important;min-height:56px!important;padding:0!important;}
body:has(.page_login,.page_register,.page_lost_password) #header>.container-fluid{height:56px!important;min-height:56px!important;padding:0 14px!important;}
body:has(.page_login,.page_register,.page_lost_password) #header .logo img{width:40px!important;height:40px!important;object-fit:contain!important;}
body:has(.page_login,.page_register,.page_lost_password) #navigationUserWrapper{position:absolute!important;right:62px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;width:auto!important;}
body:has(.page_login,.page_register,.page_lost_password) #navigationUser{display:flex!important;align-items:center!important;gap:6px!important;margin:0!important;padding:0!important;}
body:has(.page_login,.page_register,.page_lost_password) #navigationUser>li>a{padding:4px 7px!important;font-size:12px!important;line-height:1.3!important;white-space:nowrap!important;}
}