/*
 * Client Portal auth/register templates
 * Shared styles for login, forgot password, reset password and invite registration pages.
 */

.cp-auth-page {
    --cp-auth-focus-color: #df304d;
    --cp-auth-focus-ring: rgba(223, 48, 77, .13);
    min-height: calc(100vh - 390px);
    padding: 1.4rem 15px 1.2rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    overflow: visible;
  }

  .cp-auth-shell {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .cp-auth-card,
  .cp-auth-card::before,
  .cp-auth-card::after {
    box-sizing: border-box;
  }

  .cp-auth-card::before,
  .cp-auth-card::after {
    content: none;
    display: none;
  }

  .cp-auth-card {
    display: block;
    margin: 0;
    padding: 0;
    border: 1px solid #e7eaee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(20, 24, 32, 0.055);
  }

  .cp-auth-card-body {
    padding: .95rem 1rem 1.05rem;
  }

  @media (min-width: 768px) {
    .cp-auth-card-body {
      padding: 1.1rem 1.55rem 1.2rem;
    }
  }

  .cp-auth-title {
    margin: 0 0 .45rem;
    color: #17202a;
    font-size: 1.45rem;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.03em;
  }

  .cp-auth-subtitle {
    margin: .45rem 0 .85rem;
    color: #657182;
    font-size: .98rem;
    line-height: 1.55;
  }

  .cp-auth-form {
    margin: 0;
  }

  .cp-auth-field {
    margin-bottom: .85rem;
  }

  .cp-auth-label {
    display: block;
    margin-bottom: .42rem;
    color: #17202a;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.25;
  }

  .cp-auth-input {
    display: block;
    width: 100%;
    height: 42px;
    padding: .65rem .9rem;
    border: 1px solid #d9dfe6;
    border-radius: 10px;
    background: #fff;
    color: #17202a;
    font-size: .98rem;
    line-height: 1.2;
    outline: 0;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  }

  .cp-auth-input::placeholder {
    color: #8a94a3;
  }

  .cp-auth-input:hover {
    border-color: #d82f49;
  }

  .cp-auth-input:focus,
  .cp-auth-input.cp-has-value:focus,
  .cp-auth-input:not(:placeholder-shown):focus {
    border-color: #d82f49;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(216, 47, 73, .12);
    outline: 0;
  }

  .cp-auth-input.cp-has-value,
  .cp-auth-input:not(:placeholder-shown) {
    border-color: #dde3ea;
    background: #fff;
    box-shadow: none;
  }

  .cp-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .25rem 0 .85rem;
    color: #657182;
    font-size: .92rem;
  }

  .cp-auth-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
  }

  .cp-auth-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #d82f49;
  }

  .cp-auth-link,
  .cp-auth-footer a.cp-auth-link {
    color: #b62557;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 0;
  }

  .cp-auth-link:hover,
  .cp-auth-link:focus,
  .cp-auth-footer a.cp-auth-link:hover,
  .cp-auth-footer a.cp-auth-link:focus {
    color: #a81f48;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-bottom: 0;
  }

.cp-auth-link-button {
  border: 0;
  background: transparent;
  padding: 0;
  color: #b62557;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

  .cp-auth-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: .85rem 0 0;
    gap: .75rem;
    flex-wrap: wrap;
  }

  .cp-auth-actions .cp-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    max-width: max-content;
    min-height: 38px;
    padding: .5rem 1.05rem;
    margin: 0 auto;
    border: 1px solid #dc3545;
    border-radius: 4px;
    background: #dc3545;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    overflow: visible;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out;
  }

  .cp-auth-actions .cp-auth-btn::after {
    content: none;
    display: none;
  }

  .cp-auth-actions .cp-auth-btn:hover,
  .cp-auth-actions .cp-auth-btn:focus {
    transform: none;
    filter: none;
    border-color: #bd2130;
    background: #c82333;
    color: #fff;
    box-shadow: none;
    outline: 0;
  }

  .cp-auth-actions .cp-auth-btn:active {
    transform: none;
    border-color: #bd2130;
    background: #bd2130;
    box-shadow: none;
  }

  .cp-auth-footer {
    margin: .8rem 0 0;
    color: #657182;
    font-size: .92rem;
    line-height: 1.5;
    text-align: center;
  }

  .cp-auth-status {
    padding: 1rem;
    border: 1px solid #e7eaee;
    border-radius: 14px;
    background: #f8fafc;
    color: #17202a;
    text-align: center;
  }

  @media (max-width: 767px) {
    .cp-auth-page {
      min-height: auto;
      padding: 1.2rem 12px 1.4rem;
    }
  }

.cp-register-page {
    min-height: calc(100vh - 390px);
    padding: 1.4rem 15px 2.2rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    overflow: visible;
  }

  .cp-register-shell {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }


  .cp-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  @media (max-width: 767px) {
    .cp-register-page {
      min-height: auto;
      padding: 1.2rem 12px 1.4rem;
    }
  }

/* --------------------------------------------------------------------------
 * Профессиональная страница входа Jeyber
 * Применяется только к login.html.twig и не меняет регистрацию/восстановление.
 * -------------------------------------------------------------------------- */

.cp-auth-page--login {
  min-height: calc(100vh - 250px);
  padding: 1.6rem 18px 2rem;
  align-items: center;
  background: #fff;
}

.cp-auth-shell--login {
  max-width: 820px;
}

.cp-login-layout {
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .92fr);
  min-height: 450px;
  border: 1px solid rgba(47, 86, 123, .2);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(21, 31, 43, .1);
  overflow: hidden;
}

.cp-login-hero {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  padding: 1.8rem 2rem;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(16, 35, 57, .14), rgba(16, 35, 57, 0) 54%),
    linear-gradient(145deg, #b62543 0%, #dc3545 54%, #9f2140 100%);
  isolation: isolate;
  overflow: hidden;
}

.cp-login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom right, #000, transparent 78%);
}

.cp-login-hero::after {
  content: "";
  position: absolute;
  right: -185px;
  bottom: -235px;
  width: 520px;
  height: 520px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(26, 55, 83, .28);
  border: 1px solid rgba(255, 255, 255, .16);
}

.cp-login-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 390px;
  margin: auto;
}

.cp-login-hero-copy {
  max-width: 390px;
  margin: 0 0 1.15rem;
}

.cp-login-hero-title {
  max-width: 390px;
  margin: 0 0 1.15rem;
  color: #fff;
  font-size: clamp(1.62rem, 2vw, 1.95rem);
  line-height: 1.13;
  font-weight: 800;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.cp-login-hero-text {
  max-width: 390px;
  margin: 0;
  color: rgba(255, 255, 255, .94);
  font-size: .94rem;
  line-height: 1.58;
  font-weight: 400;
  text-wrap: pretty;
}

.cp-login-benefits {
  display: grid;
  width: 100%;
  max-width: 390px;
  gap: .72rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-login-benefits li {
  display: flex;
  align-items: center;
  gap: .72rem;
  color: #fff;
  font-size: .88rem;
  line-height: 1.4;
  font-weight: 400;
}

.cp-login-benefits i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .82rem;
}

.cp-login-orb {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.cp-login-orb--one {
  top: -74px;
  right: -48px;
  width: 205px;
  height: 205px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
}

.cp-login-orb--two {
  top: 120px;
  right: 54px;
  width: 88px;
  height: 88px;
  background: rgba(31, 64, 93, .28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.cp-login-orb--three {
  left: -86px;
  bottom: -108px;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .13);
}

.cp-auth-card--login {
  display: flex;
  align-items: stretch;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.cp-auth-card-body--login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 1.75rem 1.9rem;
}

.cp-login-form-header {
  display: flex;
  align-items: center;
  gap: .62rem;
  margin-bottom: .35rem;
}

.cp-login-form-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff0f3;
  color: #c92f45;
  font-size: .84rem;
}

.cp-login-form-kicker {
  display: block;
  margin-bottom: .16rem;
  color: #7a8491;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cp-auth-card--login .cp-auth-title {
  margin: 0;
  color: #17202a;
  font-size: 1.62rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.cp-auth-card--login .cp-auth-subtitle {
  margin: .6rem 0 1.3rem;
  color: #536273;
  font-size: .94rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.cp-auth-form--login .cp-auth-field {
  margin-bottom: 1rem;
}

.cp-auth-form--login .cp-auth-label {
  margin-bottom: .48rem;
  color: #202b36;
  font-size: .91rem;
  font-weight: 700;
}

.cp-auth-control {
  position: relative;
}

.cp-auth-control-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  z-index: 2;
  width: 18px;
  color: #8994a1;
  font-size: .9rem;
  text-align: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.cp-auth-input.cp-auth-input--with-icon {
  height: 46px;
  padding: .68rem .9rem .68rem 2.75rem;
  border-color: #dce2e8;
  border-radius: 11px;
  background: #fbfcfd;
  color: #1f2933;
  font-size: .97rem;
}

.cp-auth-input.cp-auth-input--with-icon::placeholder {
  color: #9aa4af;
  opacity: 1;
}

.cp-auth-input.cp-auth-input--with-icon:hover {
  border-color: #c7cfd8;
  background: #fff;
}

.cp-auth-input.cp-auth-input--with-icon:focus {
  border-color: #d82f49;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(216, 47, 73, .11);
}

/* На странице входа используется встроенный браузерный переключатель
   видимости пароля — так же, как в форме регистрации. */

.cp-auth-row--login {
  margin: .15rem 0 .9rem;
  color: #536273;
  font-size: .9rem;
  line-height: 1.4;
}

.cp-auth-row--login .cp-auth-check {
  color: #66717f;
}

.cp-auth-row--login .cp-auth-check input {
  width: 17px;
  height: 17px;
}

.cp-auth-actions--login {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0;
}

.cp-auth-actions--login .cp-auth-btn {
  width: 172px;
  max-width: 172px;
  min-height: 38px;
  height: 38px;
  margin: 0 auto;
  padding: .42rem .82rem;
  gap: .48rem;
  border: 1px solid #d82f49;
  border-radius: 9px;
  background: #d82f49;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 7px 16px rgba(216, 47, 73, .18);
  transform: none;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cp-auth-actions--login .cp-auth-btn:hover,
.cp-auth-actions--login .cp-auth-btn:focus {
  border-color: #bd2740;
  background: #c92f45;
  box-shadow: 0 9px 18px rgba(201, 47, 69, .21);
  transform: none;
}

.cp-auth-actions--login .cp-auth-btn:active {
  transform: none;
}

.cp-login-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1rem 0 0;
  color: #a0a8b1;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cp-login-divider::before,
.cp-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e9ee;
}


.cp-auth-status--login {
  padding: 2rem 1.25rem;
  border: 0;
  background: transparent;
}

.cp-auth-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: #eaf8f0;
  color: #238352;
  font-size: 1.15rem;
}

@media (max-width: 991px) {
  .cp-auth-page--login {
    padding: 1.6rem 14px 2rem;
  }

  .cp-login-layout {
    grid-template-columns: minmax(0, .92fr) minmax(330px, 1.08fr);
    min-height: 450px;
  }

  .cp-login-hero {
    padding: 1.85rem 1.75rem;
  }

  .cp-login-benefits li:nth-child(2) {
    display: none;
  }

  .cp-auth-card-body--login {
    padding: 1.8rem 1.75rem;
  }
}

@media (max-width: 767px) {
  .cp-auth-page--login {
    min-height: auto;
    padding: 1.15rem 12px 1.5rem;
    align-items: flex-start;
  }

  .cp-login-layout {
    display: block;
    min-height: 0;
    border-radius: 17px;
  }

  .cp-login-hero {
    min-height: 180px;
    padding: 1.45rem 1.35rem 1.55rem;
  }

  .cp-login-hero-copy {
    max-width: 100%;
    margin: 0 0 1.15rem;
  }

  .cp-login-hero-title {
    max-width: 100%;
    font-size: 1.58rem;
  }

  .cp-login-hero-text {
    font-size: .92rem;
    line-height: 1.58;
  }

  .cp-login-benefits {
    display: none;
  }

  .cp-login-orb--one {
    top: -100px;
    right: -75px;
  }

  .cp-login-orb--two {
    top: 85px;
    right: 42px;
    width: 62px;
    height: 62px;
  }

  .cp-auth-card-body--login {
    padding: 1.75rem 1.35rem 1.55rem;
  }

  .cp-auth-card--login .cp-auth-title {
    font-size: 1.58rem;
  }

  .cp-auth-card--login .cp-auth-subtitle {
    margin: .65rem 0 1.3rem;
  }
}

@media (max-width: 420px) {
  .cp-login-hero {
    min-height: 165px;
  }

  .cp-login-hero-text {
    display: none;
  }

  .cp-auth-card-body--login {
    padding: 1.55rem 1rem 1.35rem;
  }

  .cp-auth-row--login {
    align-items: flex-start;
    gap: .65rem;
  }

  .cp-auth-row--login .cp-auth-link {
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
 * Одноколоночная страница регистрации Jeyber
 * Поля расположены вертикально, визуальное поведение совпадает со входом.
 * -------------------------------------------------------------------------- */

.cp-register-page--single {
  min-height: calc(100vh - 250px);
  padding: 1.6rem 16px 2rem;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
}

.cp-register-shell--single {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
}

:is(.cp-auth-card--register-single, .cp-auth-card--recovery, .cp-auth-card--reset) {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(47, 86, 123, .2);
  border-top: 4px solid #d82f49;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(21, 31, 43, .1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:is(.cp-auth-card-body--register, .cp-auth-card-body--recovery, .cp-auth-card-body--reset) {
  width: 100%;
  padding: 1.55rem 1.75rem 1.45rem;
}

:is(.cp-register-form-header, .cp-recovery-form-header, .cp-reset-form-header) {
  margin-bottom: .25rem;
}

:is(.cp-auth-card--register-single, .cp-auth-card--recovery, .cp-auth-card--reset) .cp-auth-title {
  margin: 0;
  color: #17202a;
  font-size: 1.62rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.028em;
  text-wrap: balance;
}

:is(.cp-auth-card--register-single, .cp-auth-card--recovery, .cp-auth-card--reset) .cp-auth-subtitle {
  margin: .58rem 0 1.15rem;
  color: #536273;
  font-size: .94rem;
  line-height: 1.55;
  text-wrap: pretty;
}

:is(.cp-auth-form--register, .cp-auth-form--recovery, .cp-auth-form--reset) .cp-auth-field {
  margin-bottom: .9rem;
}

:is(.cp-auth-form--register, .cp-auth-form--recovery, .cp-auth-form--reset) .cp-auth-label {
  margin-bottom: .46rem;
  color: #202b36;
  font-size: .91rem;
  font-weight: 700;
}

:is(.cp-auth-form--register, .cp-auth-form--recovery, .cp-auth-form--reset) .cp-auth-input.cp-auth-input--with-icon {
  height: 46px;
  padding: .68rem 2.7rem .68rem 2.75rem;
  border-color: #dce2e8;
  border-radius: 11px;
  background: #fbfcfd;
  color: #1f2933;
  font-size: .97rem;
  box-shadow: none;
}

:is(.cp-auth-form--register, .cp-auth-form--recovery, .cp-auth-form--reset) .cp-auth-input.cp-auth-input--with-icon:hover {
  border-color: #c7cfd8;
  background: #fff;
  box-shadow: none;
}

.cp-auth-actions--register {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: .1rem;
}

.cp-auth-actions--register.cp-auth-actions--paused {
  margin-top: 1.5rem;
}

.cp-auth-actions--register .cp-auth-btn {
  width: 204px;
  max-width: 204px;
  min-height: 38px;
  height: 38px;
  margin: 0 auto;
  padding: .42rem .82rem;
  gap: .48rem;
  border: 1px solid #d82f49;
  border-radius: 9px;
  background: #d82f49;
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 7px 16px rgba(216, 47, 73, .18);
  transform: none;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cp-auth-actions--register .cp-auth-btn:hover,
.cp-auth-actions--register .cp-auth-btn:focus {
  border-color: #bd2740;
  background: #c92f45;
  box-shadow: 0 9px 18px rgba(201, 47, 69, .21);
  transform: none;
}

.cp-auth-actions--register .cp-auth-btn:active {
  transform: none;
}

:is(.cp-auth-footer--login, .cp-auth-footer--register, .cp-auth-footer--recovery, .cp-auth-footer--reset) {
  margin-top: .8rem;
  color: #586778;
  font-size: .92rem;
  line-height: 1.5;
}

@media (max-width: 575px) {
  .cp-register-page--single {
    min-height: auto;
    padding: 1.05rem 12px 1.5rem;
  }

  .cp-auth-card--register-single {
    border-radius: 16px;
  }

  .cp-auth-card-body--register {
    padding: 1.35rem 1.1rem 1.2rem;
  }

  .cp-auth-card--register-single .cp-auth-title {
    font-size: 1.48rem;
  }

  .cp-auth-card--register-single .cp-auth-subtitle {
    margin-bottom: 1rem;
    font-size: .91rem;
  }
}

/* --------------------------------------------------------------------------
 * Карточки восстановления и сброса пароля
 * Общая геометрия объединена; уникальные элементы сброса описаны отдельно.
 * -------------------------------------------------------------------------- */

.cp-auth-page.cp-auth-page--recovery,
.cp-auth-page.cp-auth-page--reset {
  min-height: calc(100vh - var(--jeyber-header-height, 70px) - var(--jeyber-footer-height, 66px));
  padding: 2rem 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.cp-auth-shell.cp-auth-shell--recovery,
.cp-auth-shell.cp-auth-shell--reset {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  transform: translateY(-24px);
}






.cp-auth-card--reset .cp-auth-reset-user {
  margin-top: .58rem;
  margin-bottom: 1.15rem;
}

.cp-auth-card--reset .cp-auth-reset-user strong {
  color: #536273;
  font-weight: 800;
}





.cp-auth-form--recovery .cp-auth-input.cp-auth-input--with-icon:focus,
.cp-auth-form--reset .cp-auth-input.cp-auth-input--with-icon:focus {
  border-color: #d82f49;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(216, 47, 73, .11);
  outline: 0;
}

.cp-auth-page--recovery .cp-auth-actions.cp-auth-actions--recovery,
.cp-auth-page--reset .cp-auth-actions.cp-auth-actions--reset {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: .15rem 0 0;
}

.cp-auth-actions--recovery .cp-auth-btn,
.cp-auth-actions--reset .cp-auth-btn {
  min-height: 38px;
  height: 38px;
  margin-inline: auto;
  padding: .42rem .82rem;
  gap: .48rem;
  border-radius: 9px;
  font-size: .92rem;
  line-height: 1;
  box-shadow: 0 7px 16px rgba(216, 47, 73, .18);
  transform: none;
}

.cp-auth-actions--recovery .cp-auth-btn {
  width: 186px;
  max-width: 186px;
}

.cp-auth-actions--reset .cp-auth-btn {
  width: 188px;
  max-width: 188px;
}

.cp-auth-actions--recovery .cp-auth-btn:hover,
.cp-auth-actions--recovery .cp-auth-btn:focus,
.cp-auth-actions--reset .cp-auth-btn:hover,
.cp-auth-actions--reset .cp-auth-btn:focus {
  box-shadow: 0 9px 18px rgba(201, 47, 69, .21);
  transform: none;
}


@media (max-width: 575px) {
  .cp-auth-card.cp-auth-card--recovery,
  .cp-auth-card.cp-auth-card--reset {
    border-radius: 16px;
  }

  .cp-auth-card-body.cp-auth-card-body--recovery,
  .cp-auth-card-body.cp-auth-card-body--reset {
    padding: 1.35rem 1.1rem 1.2rem;
  }

  .cp-auth-card--recovery .cp-auth-title,
  .cp-auth-card--reset .cp-auth-title {
    font-size: 1.48rem;
  }

  .cp-auth-card--recovery .cp-auth-subtitle,
  .cp-auth-card--reset .cp-auth-subtitle:not(.cp-auth-reset-user) {
    margin-bottom: 1rem;
    font-size: .91rem;
  }

  .cp-auth-card--reset .cp-auth-reset-user {
    font-size: .91rem;
  }
}

/* Единое поведение основных кнопок: текст и кнопка остаются на месте,
   при наведении плавно смещается только стрелка. */
.cp-auth-page .cp-auth-btn > .fa-arrow-right,
.cp-register-page .cp-auth-btn > .fa-arrow-right {
  font-size: .82rem;
}

.cp-auth-btn > span,
.cp-auth-btn > .fa-arrow-right {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.cp-auth-btn > .fa-arrow-right {
  position: relative;
  top: 1px;
  transform: translateX(0);
  transition: transform .18s ease;
}

.cp-auth-actions--login .cp-auth-btn:hover > .fa-arrow-right,
.cp-auth-actions--login .cp-auth-btn:focus > .fa-arrow-right,
.cp-auth-actions--register .cp-auth-btn:hover > .fa-arrow-right,
.cp-auth-actions--register .cp-auth-btn:focus > .fa-arrow-right,
.cp-auth-actions--recovery .cp-auth-btn:hover > .fa-arrow-right,
.cp-auth-actions--recovery .cp-auth-btn:focus > .fa-arrow-right,
.cp-auth-actions--reset .cp-auth-btn:hover > .fa-arrow-right,
.cp-auth-actions--reset .cp-auth-btn:focus > .fa-arrow-right {
  transform: translateX(4px);
}

.cp-auth-actions--login .cp-auth-btn:active > .fa-arrow-right,
.cp-auth-actions--register .cp-auth-btn:active > .fa-arrow-right,
.cp-auth-actions--recovery .cp-auth-btn:active > .fa-arrow-right,
.cp-auth-actions--reset .cp-auth-btn:active > .fa-arrow-right {
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
 * Общие улучшения форм авторизации: уведомления, подсказки и отправка.
 * -------------------------------------------------------------------------- */

.cp-auth-messages {
  display: grid;
  gap: .6rem;
  margin: 0 0 1rem;
}

.cp-auth-message {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) 2rem;
  align-items: start;
  gap: .7rem;
  padding: .78rem .62rem .78rem .9rem;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: .9rem;
  line-height: 1.45;
  transition: opacity .18s ease, transform .18s ease, max-height .2s ease, margin .2s ease, padding .2s ease;
}

.cp-auth-message-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  min-height: 1.25rem;
  margin-top: .05rem;
}

.cp-auth-message-text {
  min-width: 0;
  align-self: center;
  padding-top: .02rem;
}

.cp-auth-message--error {
  border-color: rgba(207, 46, 79, .24);
  background: rgba(207, 46, 79, .08);
  color: #9f2342;
}

.cp-auth-message--warning {
  border-color: rgba(174, 112, 0, .24);
  background: rgba(255, 184, 0, .1);
  color: #7c5300;
}

.cp-auth-message--success {
  border-color: rgba(31, 138, 91, .24);
  background: rgba(31, 138, 91, .08);
  color: #176b48;
}

.cp-auth-message--info {
  border-color: rgba(47, 86, 123, .2);
  background: rgba(47, 86, 123, .07);
  color: #2f567b;
}

.cp-auth-help,
.cp-auth-inline-status,
.cp-auth-caps {
  margin: .42rem 0 0;
  font-size: .82rem;
  line-height: 1.4;
}

.cp-auth-help {
  color: #6c7887;
}

.cp-auth-inline-status {
  min-height: 1.15em;
  color: #6c7887;
}

.cp-auth-inline-status.cp-is-success {
  color: #1f7a52;
}

.cp-auth-inline-status.cp-is-error {
  color: #b62547;
}

.cp-auth-caps:not([hidden]) {
  display: flex;
  align-items: center;
  gap: .42rem;
  color: #8a5a00;
}

.cp-password-rules {
  margin: .5rem 0 0;
  color: #6b7786;
  font-size: .8rem;
  line-height: 1.4;
}

.cp-password-rules-title {
  display: block;
  margin-bottom: .28rem;
  font-weight: 600;
}

.cp-password-rules ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .18rem .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-password-rules li {
  position: relative;
  padding-left: 1rem;
}

.cp-password-rules li::before {
  content: "•";
  position: absolute;
  left: .15rem;
  color: #a7b0ba;
  font-weight: 800;
}

.cp-password-rules li.cp-is-met {
  color: #1f7a52;
}

.cp-password-rules li.cp-is-met::before {
  content: "✓";
  left: 0;
  color: #1f8a5b;
}

.cp-auth-input[aria-invalid="true"] {
  border-color: #cf2e4f;
  box-shadow: 0 0 0 3px rgba(207, 46, 79, .09);
}

.cp-auth-btn.cp-is-loading,
.cp-auth-btn.cp-is-loading:hover,
.cp-auth-btn.cp-is-loading:focus,
.cp-auth-btn.cp-is-loading:active {
  pointer-events: none;
  cursor: wait;
  opacity: .92;
  transform: none;
}

.cp-auth-btn.cp-is-loading::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cp-auth-spin .72s linear infinite;
}

.cp-auth-btn.cp-is-loading > .fa-arrow-right {
  display: none;
}

@keyframes cp-auth-spin {
  to { transform: rotate(360deg); }
}

.cp-auth-link:focus-visible,
.cp-auth-link-button:focus-visible,
.cp-auth-btn:focus-visible,
.cp-auth-input:focus-visible {
  outline: 3px solid rgba(216, 47, 73, .24);
  outline-offset: 2px;
}

@media (max-width: 575px) {
  .cp-password-rules ul {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
 * Переключатель видимости пароля
 * -------------------------------------------------------------------------- */

/* Один и тот же вид активного поля во входе, регистрации и восстановлении. */
.cp-auth-form--recovery .cp-auth-input:focus,
.cp-auth-form--recovery .cp-auth-input:focus-visible,
.cp-auth-form--reset .cp-auth-input:focus,
.cp-auth-form--reset .cp-auth-input:focus-visible,
.cp-auth-input[aria-invalid="true"]:focus,
.cp-auth-input[aria-invalid="true"]:focus-visible {
  border: 1px solid var(--cp-auth-focus-color);
  background: #fff;
  box-shadow: 0 0 0 3px var(--cp-auth-focus-ring);
  outline: 0;
  outline-offset: 0;
}

.cp-auth-form--recovery .cp-auth-input:hover,
.cp-auth-form--reset .cp-auth-input:hover {
  border-color: #bcc7d1;
  background: #fff;
  box-shadow: none;
}

/* Кнопка показа и скрытия пароля. */
.cp-auth-control--password .cp-auth-input {
  padding-right: 3.35rem;
}

.cp-auth-password-toggle {
  position: absolute;
  top: 0;
  right: .55rem;
  bottom: 0;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: auto 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #778592;
  font-size: .94rem;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  outline: 0;
  box-shadow: none;
  transform: none;
  transition: color .16s ease;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  will-change: auto;
}

.cp-auth-password-toggle i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1em;
  line-height: 1;
  text-align: center;
  transform: none;
  transition: none;
}

/* Поведение синхронизировано с переключателем пароля Client Portal:
   системная focus-рамка подавляется во всех состояниях кнопки. */
.cp-auth-password-toggle:hover,
.cp-auth-password-toggle:focus,
.cp-auth-password-toggle:active,
.cp-auth-password-toggle:focus-visible {
  border: 0;
  background: transparent;
  color: #c52b45;
  opacity: 1;
  outline: 0;
  box-shadow: none;
  transform: none;
}

/* На сенсорных устройствах нет постоянного hover-состояния и анимации слоя:
   цвет меняется только на время фактического нажатия. */
@media (hover: none), (pointer: coarse) {
  .cp-auth-password-toggle {
    transition: none;
  }

  .cp-auth-password-toggle:hover,
  .cp-auth-password-toggle:focus {
    color: #778592;
  }

  .cp-auth-password-toggle:active {
    color: #c52b45;
  }
}

@media (max-width: 390px) {
  .cp-auth-actions--login .cp-auth-btn,
  .cp-auth-actions--register .cp-auth-btn,
  .cp-auth-actions--recovery .cp-auth-btn,
  .cp-auth-actions--reset .cp-auth-btn {
    width: min(100%, 220px);
    max-width: 220px;
    min-height: 40px;
    height: 40px;
  }
}

/* --------------------------------------------------------------------------
 * Уведомления авторизации
 * -------------------------------------------------------------------------- */

.cp-auth-message.is-leaving {
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
}

.cp-auth-message-close {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: currentColor;
  font-size: .78rem;
  line-height: 1;
  cursor: pointer;
  opacity: .62;
  transition: opacity .16s ease, background-color .16s ease, transform .16s ease;
}

.cp-auth-message-close:hover,
.cp-auth-message-close:focus-visible {
  background: rgba(255, 255, 255, .58);
  opacity: 1;
  transform: translateY(-1px);
}

.cp-auth-message-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* Промоблок входа центрируется как единая композиция, а не прижимается вниз. */
@media (max-width: 767px) {
  .cp-login-hero-content {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
 * Registration form states
 * Стабильный фон и рамка полей во всех состояниях, без конфликтов со
 * старыми :invalid / :placeholder-shown правилами.
 * -------------------------------------------------------------------------- */

.cp-auth-card--register-single .cp-auth-form--register .cp-auth-control {
  position: relative;
  isolation: isolate;
}

.cp-auth-card--register-single .cp-auth-form--register .cp-auth-control .cp-auth-input,
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-control .cp-auth-input.cp-has-value,
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-control .cp-auth-input:not(:placeholder-shown),
.cp-auth-card--register-single .cp-auth-form--register:not(.cp-form-validated) .cp-auth-control .cp-auth-input:invalid {
  width: 100%;
  height: 46px;
  border: 1px solid #d6dee6;
  border-radius: 11px;
  background-color: #fbfcfd;
  background-image: none;
  color: #1f2933;
  box-shadow: none;
  opacity: 1;
  -webkit-text-fill-color: #1f2933;
}

.cp-auth-card--register-single .cp-auth-form--register.cp-form-validated .cp-auth-control .cp-auth-input:invalid:not(:focus) {
  border-color: #d82f49;
  background-color: #fffafb;
  box-shadow: 0 0 0 3px rgba(216, 47, 73, .08);
}

/* Сохраняем рамку и фон при автозаполнении браузером. */
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-input:-webkit-autofill,
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-input:-webkit-autofill:hover {
  border: 1px solid #d6dee6;
  -webkit-text-fill-color: #1f2933;
  -webkit-box-shadow: 0 0 0 1000px #fbfcfd inset;
  caret-color: #1f2933;
}

/* --------------------------------------------------------------------------
 * Login and registration field states
 * Состояния приведены к форме восстановления доступа:
 * наведение — спокойная серая рамка, фокус/ввод — красная рамка и свечение.
 * -------------------------------------------------------------------------- */

/* Наведение не должно перекрывать красное состояние активного поля. */
.cp-auth-card--login .cp-auth-form--login .cp-auth-control .cp-auth-input:hover:not(:focus):not(:focus-visible),
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-control .cp-auth-input:hover:not(:focus):not(:focus-visible),
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-control .cp-auth-input.cp-has-value:hover:not(:focus):not(:focus-visible),
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-control .cp-auth-input:not(:placeholder-shown):hover:not(:focus):not(:focus-visible) {
  border-color: #b9c5cf;
  background-color: #fff;
  box-shadow: none;
  outline: 0;
  opacity: 1;
}

/* Во время ввода обе формы используют тот же акцент, что восстановление доступа. */
.cp-auth-card--login .cp-auth-form--login .cp-auth-control .cp-auth-input:focus,
.cp-auth-card--login .cp-auth-form--login .cp-auth-control .cp-auth-input:focus-visible,
.cp-auth-card--login .cp-auth-form--login .cp-auth-control .cp-auth-input.cp-has-value:focus,
.cp-auth-card--login .cp-auth-form--login .cp-auth-control .cp-auth-input:not(:placeholder-shown):focus,
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-control .cp-auth-input:focus,
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-control .cp-auth-input:focus-visible,
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-control .cp-auth-input.cp-has-value:focus,
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-control .cp-auth-input:not(:placeholder-shown):focus,
.cp-auth-card--register-single .cp-auth-form--register:not(.cp-form-validated) .cp-auth-control .cp-auth-input:invalid:focus,
.cp-auth-card--register-single .cp-auth-form--register:not(.cp-form-validated) .cp-auth-control .cp-auth-input:invalid:focus-visible {
  border: 1px solid var(--cp-auth-focus-color, #df304d);
  background-color: #fff;
  box-shadow: 0 0 0 3px var(--cp-auth-focus-ring, rgba(223, 48, 77, .13));
  outline: 0;
  outline-offset: 0;
  opacity: 1;
}

/* Автозаполнение сохраняет те же состояния и не меняет фон формы. */
.cp-auth-card--login .cp-auth-form--login .cp-auth-input:-webkit-autofill:hover:not(:focus),
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-input:-webkit-autofill:hover:not(:focus) {
  border-color: #b9c5cf;
  -webkit-text-fill-color: #1f2933;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

.cp-auth-card--login .cp-auth-form--login .cp-auth-input:-webkit-autofill:focus,
.cp-auth-card--register-single .cp-auth-form--register .cp-auth-input:-webkit-autofill:focus {
  border-color: var(--cp-auth-focus-color, #df304d);
  -webkit-text-fill-color: #1f2933;
  -webkit-box-shadow:
    0 0 0 1000px #fff inset,
    0 0 0 3px var(--cp-auth-focus-ring, rgba(223, 48, 77, .13));
  caret-color: #1f2933;
}

/* --------------------------------------------------------------------------
 * Authentication text rhythm
 * Одинаковая высота нижних ссылок и более выраженный интервал в промоблоке.
 * -------------------------------------------------------------------------- */

.cp-auth-footer--register .cp-auth-link,
.cp-auth-footer--recovery .cp-auth-link,
.cp-auth-footer--reset .cp-auth-link {
  line-height: inherit;
}

/* --------------------------------------------------------------------------
 * Login promo heading position
 * Заголовок визуально поднят относительно описания без смещения остального
 * содержимого промоблока.
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .cp-login-hero-title {
    transform: translateY(-14px);
    margin-bottom: 1.35rem;
  }
}

/* --------------------------------------------------------------------------
 * Recovery and reset vertical alignment
 * Короткие карточки центрируются в свободной области между шапкой и футером
 * с небольшим оптическим смещением вверх.
 * -------------------------------------------------------------------------- */

@supports (height: 100dvh) {
  .cp-auth-page.cp-auth-page--recovery,
  .cp-auth-page.cp-auth-page--reset {
    min-height: calc(100dvh - var(--jeyber-header-height, 70px) - var(--jeyber-footer-height, 66px));
  }
}

/* На низком горизонтальном экране карточки начинаются сверху, чтобы содержимое
   никогда не уходило за верхнюю границу доступной области. */
@media (min-width: 576px) and (max-height: 620px) {
  .cp-auth-page.cp-auth-page--recovery,
  .cp-auth-page.cp-auth-page--reset {
    min-height: auto;
    padding-top: 2rem;
    align-items: flex-start;
  }

  .cp-auth-shell.cp-auth-shell--recovery,
  .cp-auth-shell.cp-auth-shell--reset {
    transform: none;
  }
}

@media (max-width: 575px) {
  .cp-auth-page.cp-auth-page--recovery,
  .cp-auth-page.cp-auth-page--reset {
    min-height: auto;
    padding: 1.8rem 12px 1.5rem;
    align-items: flex-start;
  }

  .cp-auth-shell.cp-auth-shell--recovery,
  .cp-auth-shell.cp-auth-shell--reset {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
 * Recovery and reset layout correction
 * Центрирование выполняется внутри фактической свободной области main,
 * поэтому короткая страница больше не создаёт лишний вертикальный скролл.
 * -------------------------------------------------------------------------- */

@media (min-width: 576px) and (min-height: 621px) {
  body.is-short-auth-page .jeyber-site-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.is-short-auth-page .cp-auth-page.cp-auth-page--recovery,
  body.is-short-auth-page .cp-auth-page.cp-auth-page--reset {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    padding: 2rem 16px;
    align-items: center;
  }

  body.is-short-auth-page .cp-auth-shell.cp-auth-shell--recovery,
  body.is-short-auth-page .cp-auth-shell.cp-auth-shell--reset {
    transform: translateY(-24px);
  }
}

/* --------------------------------------------------------------------------
 * Login vertical alignment
 * Карточка входа центрируется в фактической свободной области между шапкой
 * и футером с небольшим оптическим смещением вверх.
 * -------------------------------------------------------------------------- */

@media (min-width: 768px) and (min-height: 680px) {
  body.is-login-auth-page .jeyber-site-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.is-login-auth-page .cp-auth-page.cp-auth-page--login {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    padding: 2rem 18px;
    align-items: center;
  }

  body.is-login-auth-page .cp-auth-shell.cp-auth-shell--login {
    transform: translateY(-14px);
  }
}

/* На мобильных и низких горизонтальных экранах форма остаётся сверху,
   чтобы карточка никогда не обрезалась и не создавала лишнюю прокрутку. */
@media (max-width: 767px), (max-height: 679px) {
  body.is-login-auth-page .cp-auth-page.cp-auth-page--login {
    min-height: auto;
    align-items: flex-start;
  }

  body.is-login-auth-page .cp-auth-shell.cp-auth-shell--login {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
 * Registration vertical alignment
 * Высокая карточка регистрации центрируется только тогда, когда свободной
 * высоты достаточно. На мобильных и невысоких экранах остаётся сверху.
 * -------------------------------------------------------------------------- */

@media (min-width: 768px) and (min-height: 860px) {
  body.is-register-auth-page .jeyber-site-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.is-register-auth-page .cp-register-page.cp-register-page--single {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    padding: 1.25rem 16px;
    align-items: center;
  }

  body.is-register-auth-page .cp-register-shell.cp-register-shell--single {
    transform: translateY(-10px);
  }
}

/* Если экран невысокий или узкий, карточка начинается сверху и никогда не
   провоцирует обрезание содержимого либо лишнюю прокрутку из-за центрирования. */
@media (max-width: 767px), (max-height: 859px) {
  body.is-register-auth-page .cp-register-page.cp-register-page--single {
    min-height: auto;
    align-items: flex-start;
  }

  body.is-register-auth-page .cp-register-shell.cp-register-shell--single {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
 * Фон страниц авторизации
 * Страницы входа, регистрации и восстановления используют светлый фон
 * главной страницы, сохраняя полностью читаемые непрозрачные карточки.
 * -------------------------------------------------------------------------- */

body.is-auth-page .jeyber-site-main {
  position: relative;
  isolation: isolate;
  background-color: #fffafb;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .52) 0%, rgba(255, 253, 254, .64) 54%, rgba(255, 249, 251, .78) 100%),
    url("../images/security-network-background.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Внутренние обёртки больше не перекрывают общий фирменный фон белой заливкой. */
body.is-auth-page .cp-auth-page,
body.is-auth-page .cp-register-page,
body.is-auth-page .cp-auth-page--login,
body.is-auth-page .cp-register-page--single,
body.is-auth-page .cp-auth-page--recovery,
body.is-auth-page .cp-auth-page--reset {
  background: transparent;
}

/* Карточки остаются светлыми и непрозрачными: фон поддерживает композицию,
   но не просвечивает через поля и текст. */
body.is-auth-page .cp-login-layout,
body.is-auth-page .cp-auth-card--register-single,
body.is-auth-page .cp-auth-card--recovery,
body.is-auth-page .cp-auth-card--reset {
  box-shadow:
    0 22px 58px rgba(31, 48, 66, .15),
    0 4px 14px rgba(31, 48, 66, .07);
}

body.is-auth-page .cp-auth-card--register-single,
body.is-auth-page .cp-auth-card--recovery,
body.is-auth-page .cp-auth-card--reset,
body.is-auth-page .cp-auth-card--login {
  background-color: #fff;
}

/* На телефоне фон фокусируется на центральном защитном знаке и получает
   чуть более плотный белый слой, чтобы карточки не терялись. */
@media (max-width: 767px) {
  body.is-auth-page .jeyber-site-main {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .64) 0%, rgba(255, 253, 254, .72) 58%, rgba(255, 249, 251, .84) 100%),
      url("../images/security-network-background.webp");
    background-position: 50% center;
  }
}

@media (prefers-reduced-data: reduce) {
  body.is-auth-page .jeyber-site-main {
    background-image: linear-gradient(180deg, #fff 0%, #fffafb 100%);
  }
}

/* --------------------------------------------------------------------------
 * Компактный мобильный промоблок входа
 * Красный промоблок на телефонах и узких горизонтальных экранах формирует
 * высоту по фактическому тексту. Заголовок и описание больше не центрируются
 * внутри прежней минимальной высоты, поэтому под ними не остаётся пустой зоны.
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.is-login-auth-page .cp-login-hero {
    min-height: 0;
    padding: 1.3rem 1.35rem 1.15rem;
    align-items: flex-start;
  }

  body.is-login-auth-page .cp-login-hero-content {
    justify-content: flex-start;
    max-width: 100%;
    margin: 0;
  }

  body.is-login-auth-page .cp-login-hero-copy {
    max-width: 100%;
    margin: 0;
  }

  body.is-login-auth-page .cp-login-hero-title {
    max-width: 100%;
    margin: 0 0 .65rem;
  }

  body.is-login-auth-page .cp-login-hero-text {
    margin: 0;
  }
}

/* На самых узких экранах описание уже скрывается существующим правилом.
   Здесь убирается оставшийся отступ, предназначенный для этого описания. */
@media (max-width: 420px) {
  body.is-login-auth-page .cp-login-hero {
    padding: 1.25rem 1.15rem 1rem;
  }

  body.is-login-auth-page .cp-login-hero-title {
    margin-bottom: 0;
  }
}

/* В альбомной ориентации дополнительно экономится вертикальное пространство,
   при этом описание остаётся видимым на экранах шире 420 px. */
@media (max-width: 767px) and (orientation: landscape) {
  body.is-login-auth-page .cp-login-hero {
    padding-top: 1.15rem;
    padding-bottom: 1.05rem;
  }
}