/* ============================================================
   PLD Literacy — Login Screen (Design System)
   ============================================================ */

body.logged-out.woocommerce-account {
  background-color: #eaf2f9;
  background-image:
    radial-gradient(1200px 500px at 110% -10%, rgba(0, 169, 233, 0.16), transparent 60%),
    radial-gradient(900px 460px at -10% 115%, rgba(57, 181, 74, 0.12), transparent 60%);
}

body.logged-out.woocommerce-account #main {
  padding-top: 0 !important;
  padding-bottom: 40px !important;
  background: transparent !important;
}

body.logged-out.woocommerce-account #main .loop-meta.jumbotron {
  display: none !important;
}

html body.woocommerce-account #main,
html body.woocommerce-account #content,
html body.woocommerce-account #post-7,
html body.woocommerce-account .entry-content,
html body.woocommerce-account .woocommerce,
html body.woocommerce-account #main .container,
html body.woocommerce-account #main div.container,
html body.woocommerce-account #main .loop-meta.jumbotron + div.container,
html
  body.my___account.woocommerce-account.woocommerce-page
  #main
  .loop-meta.jumbotron
  + div.container,
html body.my___account.woocommerce-account.woocommerce-page #main div.container,
html body.my___account.woocommerce-account.woocommerce-page #main #post-7,
html body.logged-out.woocommerce-account #main div.container,
html body.logged-out.woocommerce-account #main #post-7,
html body.logged-out.woocommerce-account #main .entry-content,
html body.logged-out.woocommerce-account #main .woocommerce {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-shadow: none !important;
  max-width: 100% !important;
}

.woocommerce-account div#customer_login,
.woocommerce-account #customer_login,
.pld-login-root div#customer_login,
.pld-login-root .card {
  padding: 0 !important;
  border: none !important;
  margin-bottom: 0 !important;
  background: #fff !important;
}

.pld-login-root {
  box-sizing: border-box;
  font-family:
    'Roboto PLD',
    Roboto,
    'Segoe UI',
    system-ui,
    -apple-system,
    sans-serif;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  padding: 24px 0 40px;
  margin: 0 auto;
}

.pld-login-root * {
  box-sizing: border-box;
}

.pld-login-root .woocommerce-notices-wrapper:empty {
  display: none;
}

.pld-login-root button {
  font-family: inherit;
}

.pld-login-root a {
  color: #009bd8;
  text-decoration: none;
}

.pld-login-root a:hover {
  text-decoration: underline;
}

.pld-login-root .pagehead {
  width: 100%;
  max-width: 980px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.pld-login-root .pagehead .hlogo {
  flex: none;
  display: inline-flex;
  text-decoration: none;
}

.pld-login-root .pagehead .hlogo img {
  height: 52px;
  width: auto;
  display: block;
  box-shadow: none !important;
}

.pld-login-root .pagehead .ht h1 {
  font-size: 26px;
  font-weight: 700;
  color: #005486;
  margin: 0 0 2px;
  font-family:
    'Segoe UI',
    system-ui,
    -apple-system,
    sans-serif;
  line-height: 1.2;
}

.pld-login-root .pagehead .crumbs {
  font-size: 13px;
  color: #7b8794;
  line-height: 1.4;
}

.pld-login-root .pagehead .crumbs a {
  color: #009bd8;
}

.pld-login-root .card {
  width: 100%;
  max-width: 980px;
  margin: 0 auto !important;
  background: #fff;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow:
    0 20px 45px -10px rgba(0, 40, 80, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.05);
  display: grid !important;
  grid-template-columns: 0.88fr 1fr;
  align-items: stretch !important;
  border: none;
}

.pld-login-root .brand {
  position: relative;
  color: #fff;
  padding: 40px 36px;
  background: linear-gradient(150deg, #0a73c4 0%, #009bd8 45%, #005486 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.pld-login-root .brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 420px at 88% 14%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(360px 360px at -10% 92%, rgba(0, 0, 0, 0.15), transparent 60%);
  pointer-events: none;
}

.pld-login-root .brand > * {
  position: relative;
  z-index: 1;
}

.pld-login-root .brand h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.22;
  margin: 0 0 12px;
  color: #fff;
  font-family:
    'Segoe UI',
    system-ui,
    -apple-system,
    sans-serif;
  max-width: 340px;
}

.pld-login-root .brand-copy-stage {
  position: relative;
  display: grid;
  grid-template-areas: 'brand-copy';
  align-items: start;
  margin-bottom: 28px;
}

.pld-login-root .brand-text-login,
.pld-login-root .brand-text-register {
  grid-area: brand-copy;
  transition:
    opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.pld-login-root .brand-text-login.copy-active,
.pld-login-root .brand-text-register.copy-active {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.pld-login-root .brand-text-login.copy-inactive-left {
  opacity: 0;
  transform: translateX(-24px);
  visibility: hidden;
  pointer-events: none;
}

.pld-login-root .brand-text-register.copy-inactive-right {
  opacity: 0;
  transform: translateX(24px);
  visibility: hidden;
  pointer-events: none;
}

.pld-login-root .brand p.lead {
  font-size: 14.5px;
  font-weight: 400 !important;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 340px;
}

.pld-login-root .brand .props {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pld-login-root .brand .props li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.42;
}

.pld-login-root .brand .tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}

.pld-login-root .panel,
.pld-login-root main.panel {
  padding: 36px 40px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  background-color: #fff !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.pld-login-root .tabs {
  position: relative;
  display: inline-flex;
  gap: 0;
  background: #f1f5f8;
  border-radius: 999px;
  padding: 4px;
  align-self: flex-start;
  margin-bottom: 22px;
  user-select: none;
  z-index: 1;
}

.pld-login-root .tab {
  position: relative;
  z-index: 2;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 8px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: #5c6b78;
  transition: color 0.22s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
}

.pld-login-root .tab.active {
  color: #005486;
  background: transparent !important;
  box-shadow: none !important;
}

.pld-login-root .tab:hover:not(.active) {
  color: #005486;
}

.pld-login-root .tabs .tab-glider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

.pld-login-root .tabs.register-active .tab-glider {
  transform: translateX(100%);
}

.pld-login-root .tabs.login-active .tab-glider {
  transform: translateX(0);
}

.pld-login-root .auth-steps-stage {
  position: relative;
  width: 100%;
}

.pld-login-root .auth-step {
  width: 100%;
  box-sizing: border-box;
}

.pld-login-root .auth-step .tabs {
  display: none !important;
}

/* Saving a new password swaps the form for the "Password updated" state. These
   out-rank the forced display: flex on auth forms below. */
.pld-login-root .step-reset-password.is-reset-done > .step-head,
.pld-login-root .step-reset-password.is-reset-done > .ajax-reset-message,
.pld-login-root .step-reset-password.is-reset-done > form {
  display: none !important;
}

.pld-login-root form,
.woocommerce .pld-login-root form,
.woocommerce-page .pld-login-root form,
.pld-login-root form.login,
.pld-login-root form.register,
.pld-login-root form.lost-password-form,
.pld-login-root form.reset-password-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

.pld-login-root .note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #eef6fc;
  border: 1px solid #cfe6f7;
  border-radius: 0 !important;
  padding: 11px 14px;
  font-size: 13px;
  color: #2c6e9e;
  line-height: 1.45;
  outline: none !important;
}

.pld-login-root .note:focus,
.pld-login-root .note:focus-visible,
.pld-login-root .note a:focus,
.pld-login-root .note a:focus-visible {
  outline: none !important;
}

.pld-login-root .note .ni {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #009bd8;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-top: 1px;
}

.woocommerce-account form#login-form .note a,
.pld-login-root .panel form#login-form .note a,
.pld-login-root .note a,
.pld-login-root .note a:visited,
.pld-login-root .note a:hover {
  color: #009bd8 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: inline !important;
  line-height: inherit !important;
  text-decoration: underline !important;
  margin-left: 2px !important;
}

.pld-login-root .note b {
  color: #1c5680;
}

.pld-login-root .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pld-login-root .field label {
  font-weight: 500;
  font-size: 13px;
  color: #5c595c;
  margin: 0;
}

.pld-login-root .field label .req {
  color: #dd1e25;
}

.pld-login-root .inp {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.pld-login-root .inp input {
  width: 100% !important;
  font-family: inherit;
  font-size: 14.5px;
  color: #1a1a1a;
  padding: 11px 44px 11px 14px !important;
  border: 1.5px solid #dce1e6;
  border-radius: 0 !important;
  background: #fff;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-sizing: border-box;
  height: 44px;
}

.pld-login-root .inp input::placeholder {
  color: #aab2bb;
}

.pld-login-root .inp input:focus {
  border-color: #009bd8;
  box-shadow: 0 0 0 3px rgba(0, 155, 216, 0.15);
}

.pld-login-root .inp input:-webkit-autofill,
.pld-login-root .inp input:-webkit-autofill:hover,
.pld-login-root .inp input:-webkit-autofill:focus,
.pld-login-root .inp input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #1a1a1a !important;
  transition: background-color 5000s ease-in-out 0s;
}

.pld-login-root .field.invalid .inp input,
.pld-login-root .field.invalid .inp select {
  border-color: #e02d2d;
  background: #fff8f8;
}

.pld-login-root .field.invalid .inp input:focus,
.pld-login-root .field.invalid .inp select:focus {
  border-color: #e02d2d;
  box-shadow: 0 0 0 3px rgba(224, 45, 45, 0.13);
}

.pld-login-root .field-err {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  color: #dd1e25;
  margin-top: 2px;
}

.pld-login-root .field-err svg {
  flex: none;
  display: inline-block;
}

.pld-login-root .inp input::-ms-reveal,
.pld-login-root .inp input::-ms-clear {
  display: none;
}

.pld-login-root .show-password-input,
.pld-login-root button.show-password-input,
.pld-login-root .woocommerce-password-strength,
.pld-login-root .woocommerce-password-hint {
  display: none !important;
}

.pld-login-root .ajax-login-message:empty,
.pld-login-root .ajax-register-message:empty,
.pld-login-root .ajax-reset-message:empty,
.pld-login-root .woocommerce-notices-wrapper:empty,
.pld-login-root .woocommerce-message:empty,
.pld-login-root .woocommerce-error:empty,
.pld-login-root .woocommerce-info:empty {
  display: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pld-login-root span.password-input {
  display: block !important;
  width: 100% !important;
  position: relative !important;
}

.pld-login-root .inp .eye {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  background: none !important;
  cursor: pointer !important;
  padding: 8px !important;
  color: #8a949e !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}

.pld-login-root .inp .eye svg,
.pld-login-root .inp .eye path,
.pld-login-root .inp .eye circle {
  pointer-events: none;
}

.pld-login-root .inp .eye .eye-open {
  display: none !important;
}

.pld-login-root .inp .eye .eye-slash {
  display: block !important;
}

.pld-login-root .inp .eye.is-open .eye-open {
  display: block !important;
}

.pld-login-root .inp .eye.is-open .eye-slash {
  display: none !important;
}

.pld-login-root .inp .eye:hover {
  color: #009bd8;
}

.pld-login-root .cf-turnstile {
  margin: 0 !important;
}

.pld-login-root .g-recaptcha,
.pld-login-root .grecaptcha-badge,
.pld-login-root form > br {
  display: none !important;
}

.pld-login-root .btn-primary,
.pld-login-root button.btn-primary,
.pld-login-root #sh-ajax-login-submit,
.pld-login-root #sh-ajax-2fa-submit,
.pld-login-root #sh-ajax-register-submit,
.pld-login-root #sh-ajax-save-password-submit,
.pld-login-root #sh-ajax-lost-password-submit {
  border: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  font-family: inherit !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 14.5px !important;
  color: #fff !important;
  background: #009bd8 !important;
  background-color: #009bd8 !important;
  box-shadow: 0 3px 0 #005486 !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  margin: 0 !important;
  transition:
    background 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.08s ease !important;
}

.pld-login-root .btn-primary:hover,
.pld-login-root button.btn-primary:hover,
.pld-login-root #sh-ajax-login-submit:hover,
.pld-login-root #sh-ajax-2fa-submit:hover {
  background: #136bb4 !important;
  background-color: #136bb4 !important;
  color: #fff !important;
}

.pld-login-root .btn-primary:active,
.pld-login-root button.btn-primary:active,
.pld-login-root #sh-ajax-login-submit:active,
.pld-login-root #sh-ajax-2fa-submit:active {
  transform: translateY(3px) !important;
  box-shadow: 0 0 0 #005486 !important;
}

.pld-login-root .row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -2px;
}

.pld-login-root .remember {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: #5c595c;
  margin: 0;
  user-select: none;
}

.pld-login-root .remember input {
  display: none;
}

.pld-login-root .remember .box {
  width: 17px;
  height: 17px;
  border-radius: 0;
  border: 1.5px solid #cfd6dd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.12s ease;
  background: #fff;
}

.pld-login-root .remember input:checked + .box {
  background: #009bd8;
  border-color: #009bd8;
  color: #fff;
}

.woocommerce-account form#login-form a.lost,
.pld-login-root form#login-form a.lost,
.pld-login-root .lost,
.pld-login-root a.lost {
  color: #dd1e25 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.woocommerce-account form#login-form a.lost:hover,
.pld-login-root form#login-form a.lost:hover,
.pld-login-root .lost:hover,
.pld-login-root a.lost:hover {
  color: #b7151b !important;
  text-decoration: underline !important;
}

.pld-login-root .divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 16px;
  color: #9aa3ab;
  font-size: 12.5px;
}

.pld-login-root .divider::before,
.pld-login-root .divider::after {
  content: '';
  height: 1px;
  background: #e4e8ec;
  flex: 1;
}

.pld-login-root .courses {
  border: 1px solid #e2e6ea;
  border-radius: 0 !important;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
}

.pld-login-root .courses .ic {
  width: 40px;
  height: 40px;
  border-radius: 0 !important;
  background: #edf8f0;
  color: #2f9e4a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.pld-login-root .courses .ct {
  flex: 1;
  min-width: 0;
}

.pld-login-root .courses .ct h4 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: #005486;
}

.pld-login-root .courses .ct p {
  margin: 0;
  font-size: 12.5px;
  color: #7b8794;
}

.pld-login-root .courses .go {
  margin-left: auto;
  flex: none;
  border: 1.5px solid #2f9e4a;
  color: #2f9e4a;
  background: #fff;
  border-radius: 0 !important;
  padding: 8px 14px;
  font-family: inherit;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.pld-login-root .courses .go:hover {
  background: #2f9e4a;
  color: #fff;
}

.pld-login-root .switch {
  text-align: center;
  margin-top: 20px;
  font-size: 13.5px;
  color: #5c595c;
}

.pld-login-root .switch a {
  color: #009bd8;
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}

.pld-login-root .switch a:hover {
  text-decoration: underline;
}

.pld-login-root .pagefoot {
  max-width: 980px;
  width: 100%;
  margin: 18px auto 0;
  text-align: center;
  font-size: 12px;
  color: #8a949e;
}

.pld-login-root .ajax-login-message,
.pld-login-root .ajax-register-message,
.pld-login-root .ajax-reset-message,
.pld-login-root .pld-notice-box {
  padding: 12px 14px;
  border-radius: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 18px !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pld-login-root .ajax-login-message.error,
.pld-login-root .ajax-register-message.error,
.pld-login-root .ajax-reset-message.error,
.pld-login-root .pld-notice-box.pld-notice-warning,
.pld-login-root .pld-notice-box.pld-notice-error {
  background: #fdf2f2 !important;
  border: 1px solid #fad2d2 !important;
  color: #9d1c20 !important;
}

.pld-login-root .ajax-login-message.error .err-icon,
.pld-login-root .ajax-register-message.error .err-icon,
.pld-login-root .ajax-reset-message.error .err-icon,
.pld-login-root .pld-notice-box .err-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dd1e25;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  margin-top: 1px;
}

.pld-login-root .ajax-login-message.success,
.pld-login-root .ajax-register-message.success,
.pld-login-root .ajax-reset-message.success {
  background: #edf8f0 !important;
  border: 1px solid #c3e6cb !important;
  color: #155724 !important;
}

.pld-login-root .ajax-login-message p,
.pld-login-root .ajax-register-message p,
.pld-login-root .ajax-reset-message p,
.pld-login-root .pld-notice-text p {
  margin: 0;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.pld-login-root .pld-notice-text {
  flex: 1;
}

.pld-login-root .pld-notice-text strong,
.pld-login-root .pld-notice-text b,
.pld-login-root .ajax-login-message strong,
.pld-login-root .ajax-register-message strong,
.pld-login-root .ajax-reset-message strong {
  font-weight: 700 !important;
}

.pld-login-root .auth-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.pld-login-root .btn-auth-action,
.pld-login-root a.btn-auth-action,
.pld-login-root button.btn-auth-action {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  margin: 0 !important;
  text-decoration: none !important;
}

.pld-login-root a.btn-secondary.btn-auth-action,
.pld-login-root button.btn-secondary.btn-auth-action {
  border: 1px solid #d5dfe6 !important;
  background: #f8fafc !important;
  color: #5c6b78 !important;
  box-shadow: none !important;
}

.pld-login-root a.btn-secondary.btn-auth-action:hover,
.pld-login-root button.btn-secondary.btn-auth-action:hover {
  background: #edf2f7 !important;
  color: #005486 !important;
  border-color: #cbd5e0 !important;
}

/* 2FA Step Components */
.pld-login-root .back-link {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  color: #5c6b78;
  font-weight: 600;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  transition: color 0.15s ease;
  width: 100%;
}

.pld-login-root .back-link:hover {
  color: #005486;
}

.pld-login-root .step-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.pld-login-root .otp-icon {
  width: 44px;
  height: 44px;
  border-radius: 0 !important;
  background: #eef6fc;
  color: #009bd8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.pld-login-root .step-head .stitle {
  font-size: 20px;
  font-weight: 700;
  color: #005486;
  margin: 0;
  font-family:
    'Segoe UI',
    system-ui,
    -apple-system,
    sans-serif;
  line-height: 1.25;
}

.pld-login-root .step-head .ssub {
  font-size: 13.5px;
  color: #5c6b78;
  line-height: 1.5;
  margin: 0;
}

.pld-login-root .step-head .ssub b {
  color: #1a1a1a;
  font-weight: 600;
}

.pld-login-root .otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.pld-login-root .otp input {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  border: 1.5px solid #dce1e6;
  border-radius: 0 !important;
  background: #fff;
  outline: none;
  padding: 0;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  height: auto;
}

.pld-login-root .otp input:focus {
  border-color: #009bd8;
  box-shadow: 0 0 0 3px rgba(0, 155, 216, 0.15);
}

.pld-login-root .otp input.filled {
  border-color: #009bd8;
  background: #f6fbfe;
}

.pld-login-root .otp.invalid input {
  border-color: #e02d2d;
  background: #fff8f8;
}

.pld-login-root .otp.invalid input:focus {
  box-shadow: 0 0 0 3px rgba(224, 45, 45, 0.13);
}

.pld-login-root .backup-wrap {
  margin-bottom: 8px;
}

.pld-login-root .backup-wrap .inp input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1a1a;
  padding: 12px 14px;
  border: 1.5px solid #dce1e6;
  border-radius: 0 !important;
  background: #fff;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-sizing: border-box;
  height: 46px;
}

.pld-login-root .backup-wrap .inp input:focus {
  border-color: #009bd8;
  box-shadow: 0 0 0 3px rgba(0, 155, 216, 0.15);
}

.pld-login-root .resend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: #5c595c;
  margin-top: 2px;
}

.pld-login-root .resend .muted {
  color: #8a949e;
}

.pld-login-root .authalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.pld-login-root .lost-backup-text {
  color: #5c6b78;
  font-size: 13.5px;
}

.pld-login-root .lost-backup-text a {
  color: #009bd8;
  font-weight: 600;
  text-decoration: none;
  margin-left: 2px;
}

.pld-login-root .lost-backup-text a:hover {
  text-decoration: underline;
}

.pld-login-root .linkbtn {
  border: 0;
  background: none;
  cursor: pointer;
  color: #009bd8;
  font-weight: 600;
  font-size: 13.5px;
  font-family: inherit;
  padding: 0;
  text-decoration: none;
}

.pld-login-root .linkbtn:hover {
  text-decoration: underline;
}

.pld-login-root .field-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 600px) {
  .pld-login-root .field-row-2 {
    grid-template-columns: 1fr;
  }
}

.pld-login-root .inp-select select {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a1a;
  padding: 11px 14px;
  border: 1.5px solid #dce1e6;
  border-radius: 0 !important;
  background-color: #fff;
  outline: none;
  height: 44px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.pld-login-root .inp-select select:focus {
  border-color: #009bd8;
  box-shadow: 0 0 0 3px rgba(0, 155, 216, 0.15);
}

.pld-login-root .custom-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #5c6b78;
  line-height: 1.45;
  cursor: pointer;
  user-select: none;
  margin: 2px 0 0;
}

.pld-login-root .custom-check input {
  display: none;
}

.pld-login-root .custom-check .box {
  width: 18px;
  height: 18px;
  border: 1.5px solid #c5d0da;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.12s ease;
  background: #fff;
  flex-shrink: 0;
  margin-top: 1px;
}

.pld-login-root .custom-check input:checked + .box {
  background: #009bd8;
  border-color: #009bd8;
  color: #fff;
}

.pld-login-root .custom-check a {
  color: #009bd8 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

.pld-login-root .otp-icon.icon-email-success {
  background: #edf8f0;
  border-color: #d3ebd8;
  color: #2f9e4a;
}

.pld-login-root .pass-criteria {
  list-style: none;
  padding: 0;
  /* margin: 6px 0 10px; */
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #7b8a95;
}

.pld-login-root .pass-criteria li {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.pld-login-root .pass-criteria li .bullet {
  font-weight: 700;
  font-size: 12px;
  color: #9aa3ab;
}

.pld-login-root .pass-criteria li.valid {
  color: #009bd8 !important;
  font-weight: 600 !important;
}

.pld-login-root .pass-criteria li.valid .bullet {
  color: #009bd8 !important;
}

.pld-login-root .pass-strength-wrap {
  display: none;
  align-items: center;
  gap: 12px;
  margin: 8px 0 6px;
}

.pld-login-root .pass-strength-wrap.active {
  display: flex !important;
}

.pld-login-root .reg-pass-criteria {
  display: none;
}

.pld-login-root .reg-pass-criteria.active {
  display: flex !important;
}

.pld-login-root .strength-bar {
  flex: 1 !important;
  height: 5px !important;
  background: #e5e9ec !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}

.pld-login-root .strength-bar-fill {
  height: 100% !important;
  width: 0%;
  display: block !important;
  transition:
    width 0.25s ease,
    background-color 0.25s ease !important;
}

.pld-login-root .strength-bar-fill.level-weak {
  background-color: #dd1e25 !important;
}

.pld-login-root .strength-bar-fill.level-fair {
  background-color: #e6a800 !important;
}

.pld-login-root .strength-bar-fill.level-good {
  background-color: #009bd8 !important;
}

.pld-login-root .strength-bar-fill.level-strong {
  background-color: #2f9e4a !important;
}

.pld-login-root .strength-text {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  min-width: 50px !important;
  text-align: right !important;
  display: inline-block !important;
}

.pld-login-root .strength-text.text-weak {
  color: #dd1e25 !important;
}

.pld-login-root .strength-text.text-fair {
  color: #e6a800 !important;
}

.pld-login-root .strength-text.text-good {
  color: #009bd8 !important;
}

.pld-login-root .strength-text.text-strong {
  color: #2f9e4a !important;
}

.pld-login-root .d-none {
  display: none !important;
}

@media (max-width: 1024px) {
  .pld-login-root .card {
    max-width: 720px;
  }

  .pld-login-root .brand {
    padding: 30px 24px;
  }

  .pld-login-root .panel {
    padding: 30px 28px;
  }
}

@media (max-width: 820px) {
  .pld-login-root .card {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .pld-login-root .brand {
    display: none;
  }

  .pld-login-root .panel {
    padding: 28px 20px;
  }

  .pld-login-root .pagehead {
    padding: 0 4px;
  }
}

.pld-login-root .btn-primary:disabled,
.pld-login-root .btn-primary.disabled,
.pld-login-root #sh-ajax-register-submit:disabled,
.pld-login-root #sh-ajax-register-submit.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pld-login-root .inp .email-status-icon {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  pointer-events: none;
}

.pld-login-root .inp .email-status-icon.is-valid {
  color: #28a745 !important;
}

.pld-login-root .inp .email-status-icon.is-invalid {
  color: #dd1e25 !important;
}

.pld-login-root .field-email.is-valid .inp input {
  border-color: #28a745 !important;
  padding-right: 36px !important;
}

.pld-login-root .field-email.is-valid .inp input:focus {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15) !important;
}

.pld-login-root .field-email.invalid .inp input {
  border-color: #dd1e25 !important;
  padding-right: 36px !important;
}

.pld-login-root .field-err.reg-email-err.is-valid {
  color: #28a745 !important;
}

.pld-login-root .field-err.reg-email-err.is-valid .icon-err {
  display: none !important;
}

.pld-login-root .field-err.reg-email-err.is-valid .icon-ok {
  display: inline-block !important;
}

.pld-login-root .field-err.reg-email-err.is-invalid {
  color: #dd1e25 !important;
}

.pld-login-root .field-err.reg-email-err.is-invalid .icon-err {
  display: inline-block !important;
}

.pld-login-root .field-err.reg-email-err.is-invalid .icon-ok {
  display: none !important;
}

.pld-login-root .custom-check.invalid .box {
  border-color: #dd1e25 !important;
}

.pld-login-root .field-err.terms-err {
  margin-top: 1px !important;
  margin-bottom: 2px !important;
}

.pld-login-root .inp select,
.pld-login-root .inp-select select {
  height: 44px !important;
  border: 1.5px solid #dce1e6 !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  color: #1a1a1a !important;
  padding: 0 36px 0 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
}

.pld-login-root .inp select:focus,
.pld-login-root .inp-select select:focus {
  border-color: #009bd8 !important;
  box-shadow: 0 0 0 3px rgba(0, 155, 216, 0.15) !important;
  outline: none !important;
}

.pld-login-root .field.invalid .inp select,
.pld-login-root .field.invalid .inp-select select {
  border-color: #e02d2d !important;
  background-color: #fff8f8 !important;
}

/* Select2 Customization for Registration Screen */
.pld-login-root .select2-container {
  width: 100% !important;
}

.pld-login-root .select2-container .select2-selection--single {
  height: 44px !important;
  border: 1.5px solid #dce1e6 !important;
  border-radius: 0 !important;
  background: #fff !important;
  outline: none !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.pld-login-root .select2-container .select2-selection--single .select2-selection__rendered {
  font-family: inherit !important;
  font-size: 14.5px !important;
  color: #1a1a1a !important;
  line-height: 40px !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
}

.pld-login-root .select2-container .select2-selection--single .select2-selection__placeholder {
  color: #aab2bb !important;
}

.pld-login-root .select2-container .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  right: 10px !important;
  top: 0 !important;
}

.pld-login-root .select2-container--open .select2-selection--single,
.pld-login-root .select2-container--focus .select2-selection--single {
  border-color: #009bd8 !important;
  box-shadow: 0 0 0 3px rgba(0, 155, 216, 0.15) !important;
}

.pld-login-root .field.invalid .select2-container .select2-selection--single {
  border-color: #e02d2d !important;
  background: #fff8f8 !important;
}

.pld-login-root .field.invalid .select2-container--open .select2-selection--single,
.pld-login-root .field.invalid .select2-container--focus .select2-selection--single {
  border-color: #e02d2d !important;
  box-shadow: 0 0 0 3px rgba(224, 45, 45, 0.13) !important;
}

.select2-dropdown.pld-select2-dropdown,
.select2-dropdown {
  border: 1.5px solid #009bd8 !important;
  border-radius: 0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
  font-family: inherit !important;
  z-index: 999999 !important;
}

.select2-results__option {
  font-size: 14px !important;
  padding: 9px 14px !important;
  color: #212529 !important;
  transition: background-color 0.1s ease !important;
}

.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #009bd8 !important;
  color: #fff !important;
}

.select2-results__option[aria-selected='true'] {
  background-color: #009bd8 !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Thin Scrollbar for Select2 options */
.select2-results__options {
  max-height: 220px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #009bd8 #f1f3f5 !important;
}

.select2-results__options::-webkit-scrollbar {
  width: 5px !important;
}

.select2-results__options::-webkit-scrollbar-track {
  background: #f1f3f5 !important;
}

.select2-results__options::-webkit-scrollbar-thumb {
  background: #009bd8 !important;
  border-radius: 3px !important;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #007bb0 !important;
}