/* py-forms.css — вид гостевых форм poweryogarus.ru (поручение владельца 24.09.2026: «вёрстка чуть не очень,
   улучшить визуально, особенно где поля авторизоваться»).
   Подключается в header.php ПОСЛЕДНИМ стилем (после app.min.css, intlTelInput.css и py-mobile.css), для всех ширин.
   Правила действуют только внутри четырёх форм (доказательство «вне форм на ПК — ни пикселя» — notes.md):
     form.account-login          — «Войти на сайт…» внизу окна выбора подписки (data-popup="login");
     form.woocommerce-form-login — вход на /my-account/;
     form.registerform           — окно «Регистрация» (только гость: body:not(.logged-in));
     form#resetpassform          — «Восстановление пароля»: окно losstpassword и /my-account/lost-password/.
   Плюс два места рядом с формами (§10, §11): ошибка WooCommerce над формой входа на страницах кабинета гостя (появляется только после
   неудачного входа) и заголовок окна входа на экранах уже 360px (на ПК не действует).
   Только вид: имена/id полей, классы, тексты, порядок в разметке и поведение не меняются (JS main.js и WooCommerce те же).
   Цвета сайта: синий кнопок #495A80, синий заголовков #5779AB, оранжевый #DC995E, линия поля rgba(41,45,50,.8). */

/* ============ 1. Поля: как у регистрации (линия снизу), 16px (iPhone не увеличивает страницу), высота 44px ============ */
form.account-login input#log,
form.account-login input#pwd,
form.woocommerce-form-login input.input-text,
body:not(.logged-in) form.registerform input.form__input-text,
body:not(.logged-in) form.registerform input[name="user_code"],
form#resetpassform input.form__input-text {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 44px;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 9px;
  border: 0;
  border-bottom: 1px solid rgba(41, 45, 50, .8);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000;
  transition: border-color .15s, box-shadow .15s;
}
/* слева у телефона — флаг страны (intlTelInput держит свой отступ 52px), поэтому бока задаём только прочим полям */
form.account-login input#log,
form.account-login input#pwd,
form.woocommerce-form-login input.input-text,
body:not(.logged-in) form.registerform input.form__input-text:not([type="tel"]),
body:not(.logged-in) form.registerform input[name="user_code"],
form#resetpassform input.form__input-text:not([type="tel"]) {
  padding-left: 0;
  padding-right: 0;
}
/* наведение и фокус: линия темнее / синяя двойной толщины (без сдвига вёрстки) */
form.account-login input#log:hover,
form.account-login input#pwd:hover,
form.woocommerce-form-login input.input-text:hover,
body:not(.logged-in) form.registerform input.form__input-text:hover,
body:not(.logged-in) form.registerform input[name="user_code"]:hover,
form#resetpassform input.form__input-text:hover {
  border-bottom-color: #292D32;
}
form.account-login input#log:focus,
form.account-login input#pwd:focus,
form.woocommerce-form-login input.input-text:focus,
body:not(.logged-in) form.registerform input.form__input-text:focus,
body:not(.logged-in) form.registerform input[name="user_code"]:focus,
form#resetpassform input.form__input-text:focus {
  border-bottom-color: #495A80;
  box-shadow: 0 1px 0 0 #495A80;
}
/* ошибка: обязательное поле пустое после попытки входа (браузер сам не отправит форму) */
form.account-login input#log:user-invalid,
form.account-login input#pwd:user-invalid,
form.woocommerce-form-login input.input-text:user-invalid {
  border-bottom-color: #D0453A;
  box-shadow: 0 1px 0 0 #D0453A;
}
/* подсказка в поле — серая, того же шрифта */
form.account-login input#log::placeholder,
form.account-login input#pwd::placeholder,
form.woocommerce-form-login input.input-text::placeholder,
body:not(.logged-in) form.registerform input.form__input-text::placeholder,
body:not(.logged-in) form.registerform input[name="user_code"]::placeholder,
form#resetpassform input.form__input-text::placeholder {
  font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #8E9396;
  opacity: 1;
}
/* автозаполнение Chrome/Safari: без голубой/жёлтой заливки (фон формы виден — на /my-account/ это фото), текст чёрный.
   Браузер красит фон автозаполнения через background-color — задерживаем эту смену «навсегда». */
form.account-login input#log:-webkit-autofill,
form.account-login input#pwd:-webkit-autofill,
form.woocommerce-form-login input.input-text:-webkit-autofill,
body:not(.logged-in) form.registerform input.form__input-text:-webkit-autofill,
form#resetpassform input.form__input-text:-webkit-autofill {
  -webkit-text-fill-color: #000;
  caret-color: #000;
  transition: background-color 600000s 0s, color 600000s 0s, border-color .15s, box-shadow .15s;
}

/* ============ 2. Подписи над полями (видимые), звёздочка обязательного поля ============ */
form.account-login .al-field > label,
form.woocommerce-form-login .form__label,
form#resetpassform .form__label {
  display: block;
  margin: 0;
  font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #292D32;
  text-transform: none;
  cursor: pointer;
}
form.account-login .al-field > label .required,
form.woocommerce-form-login .form__label .required {
  color: #DC995E;
  margin-left: 2px;
}

/* ============ 3. Галочки «Запомнить меня» — как у регистрации (синий квадрат, белая галочка) ============ */
form.account-login label[for="rememberme"] {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #292D32;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
form.account-login .manage input#rememberme {
  -webkit-appearance: none;
  appearance: none;
  position: static;
  top: auto;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin: 0 12px 0 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #5779AB;
  cursor: pointer;
}
form.account-login .manage input#rememberme:checked {
  background: #5779AB url("../images/dest/check.svg") 50% 50% / 13px 13px no-repeat;
}
form.account-login .manage input#rememberme:focus-visible {
  outline: 2px solid #DC995E;
  outline-offset: 2px;
}
form.woocommerce-form-login .checkbox .checkbox__text {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #292D32;
  padding-left: 29px;
}
form.woocommerce-form-login .checkbox input:focus-visible + .checkbox__text::before,
body:not(.logged-in) form.registerform .checkbox input:focus-visible + .checkbox__text::before {
  outline: 2px solid #DC995E;
  outline-offset: 2px;
}

/* ============ 4. Кнопки — основная кнопка сайта (синяя, 44px, скругление 8px) ============
   Жирность всех кнопок форм одна — 500, как у всех синих кнопок сайта («Отправить», «Сбросить пароль», «Получить код по СМС»);
   600 у сайта только у оранжевых/белых призывов («Попробовать бесплатно», «Оформить подписку»). */
form.account-login .manage button[type="submit"],
form.woocommerce-form-login .woocommerce-form-login__submit,
body:not(.logged-in) form.registerform #wp-submit {
  display: inline-block;
  float: none;
  box-sizing: border-box;
  width: auto;
  min-width: 165px;
  height: 44px;
  margin: 0;
  padding: 0 32px;
  border: 0;
  border-radius: 8px;
  background: #495A80;
  color: #fff;
  font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s, opacity .15s;
}
form.account-login .manage button[type="submit"]:hover,
form.woocommerce-form-login .woocommerce-form-login__submit:hover,
body:not(.logged-in) form.registerform #wp-submit:not(:disabled):hover {
  background: #3A4868;
}
form.account-login .manage button[type="submit"]:focus-visible,
form.woocommerce-form-login .woocommerce-form-login__submit:focus-visible,
body:not(.logged-in) form.registerform #wp-submit:focus-visible,
form#resetpassform .send-code:focus-visible {
  outline: 2px solid #DC995E;
  outline-offset: 2px;
}
/* «Зарегистрироваться» до подтверждения кода из СМС заблокирована (так задумано, поведение прежнее) —
   видно, что это та же кнопка, но пока неактивная */
body:not(.logged-in) form.registerform #wp-submit:disabled,
body:not(.logged-in) form.registerform #wp-submit:disabled:hover {
  background: #495A80;
  opacity: .4;
  cursor: not-allowed;
}
body:not(.logged-in) form.registerform .send-code,
form#resetpassform .send-code {
  font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
  font-size: 16px;
  font-weight: 500;
}
/* «Получить код по СМС» в восстановлении пароля — та же синяя кнопка, 44px */
form#resetpassform .send-code {
  box-sizing: border-box;
  height: 44px;
  margin: 22px 0 0;
  border-radius: 8px;
  line-height: 22px;
}

/* ============ 5. Вход в окне выбора подписки: отдельный блок под тарифами ============ */
form.account-login {
  clear: both;
  margin: 32px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid #E1E4EA;
}
form.account-login > p:first-child {
  /* margin-top: 20px задан в разметке */
  margin-bottom: 20px;
  font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: #5779AB;
}
form.account-login .account-login__block {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
form.account-login .al-field {
  flex: 1 1 0;
  min-width: 0;
}
form.account-login .al-field:first-child {
  margin-right: 20px;
}
form.account-login .account-login__item.manage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-top: 26px;
}
form.account-login .account-login__link {
  margin-top: 16px;
}
form.account-login .account-login__link a {
  font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #DC995E;
  text-decoration: none;
}
form.account-login .account-login__link a:hover,
form.account-login .account-login__link a:focus-visible {
  color: #495A80;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Ответ сервера («Неправильный логин или пароль!» — main.js:532 кладёт его в .login-result) — показывается сразу под полями,
   над «Запомнить меня / Войти», в виде ошибки. В разметке .login-result — последний, поэтому форма — колонка, а место задаёт order
   (порядок в разметке и для читалок экрана прежний). Пустой блок места не занимает. */
form.account-login {
  display: flex;
  flex-direction: column;
}
form.account-login .login-result {
  order: 1;
}
form.account-login .account-login__item.manage {
  order: 2;
}
form.account-login .account-login__link {
  order: 3;
}
form.account-login .login-result:not(:empty) {
  margin-top: 18px;
}
form.account-login .login-result > * {
  box-sizing: border-box;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #F0C9C5;
  border-left: 3px solid #D0453A;
  border-radius: 8px;
  background: #fff;
  color: #D0453A;
  font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* ============ 6. Вход на /my-account/: отступ от заголовка «Войти», кнопка и «Запомнить меня» в одну строку ============ */
form.woocommerce-form-login {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 28px;
  align-items: center;
  margin-top: 26px;
}
form.woocommerce-form-login > * {
  grid-column: 1 / -1;
  min-width: 0;
}
form.woocommerce-form-login > .woocommerce-form-row {
  margin: 0 0 22px;
}
form.woocommerce-form-login > .form-row:not(.woocommerce-form-row) {
  grid-column: 1;
  margin: 8px 0 0;
}
form.woocommerce-form-login > .form__item:not(.form-row) {
  grid-column: 2;
  margin: 8px 0 0;
}
form.woocommerce-form-login > .lost_password {
  margin-top: 22px;
}
/* На ПК блок формы занимает РОВНО ту же высоту, что и раньше (280,8125px — замер Chrome, одинаков на 1126–1920):
   фон-фото страницы (background-size: cover у .content-area) и подвал не сдвигаются и не масштабируются ни на пиксель.
   Содержимое формы — 264,4px (поля, кнопка и подписи заданы в px, от шрифта не зависят), запас есть.
   Только страница кабинета (body.woocommerce-account): форма входа WooCommerce в других местах (например, на оформлении заказа) — без высоты. */
@media screen and (min-width: 1126px) {
  body.woocommerce-account form.woocommerce-form-login {
    box-sizing: border-box;
    height: 280.8125px;
    margin-top: 0;
    padding-top: 16px;
    align-content: start;
  }
}
form.woocommerce-form-login .lost_password .btn-link:hover,
form.woocommerce-form-login .lost_password .btn-link:focus-visible {
  color: #495A80;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* «Показать пароль» (WooCommerce 11): была пустая серая «таблетка» под полем → значок-глаз внутри поля.
   Кнопка та же (WooCommerce сам переключает тип поля и класс display-password). */
form.woocommerce-form-login .password-input {
  display: block;
  position: relative;
}
form.woocommerce-form-login .password-input input.input-text {
  padding-right: 46px;
}
form.woocommerce-form-login .password-input .show-password-input {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 43px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495A80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") 50% 50% / 22px 22px no-repeat;
  font-size: 0;
  line-height: 0;
  color: transparent;
  box-shadow: none;
  cursor: pointer;
  opacity: .75;
}
form.woocommerce-form-login .password-input .show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495A80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.4 10.4 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.1M6.6 6.6C3.9 8.4 2 12 2 12s3.6 7 10 7c1.8 0 3.4-.5 4.8-1.3'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}
form.woocommerce-form-login .password-input .show-password-input:hover {
  opacity: 1;
}
form.woocommerce-form-login .password-input .show-password-input:focus-visible {
  opacity: 1;
  outline: 2px solid #DC995E;
  outline-offset: -2px;
}
form.woocommerce-form-login .password-input .show-password-input::after,
form.woocommerce-form-login .password-input .show-password-input::before {
  display: none;
}

/* ============ 7. Регистрация (гость): поле кода из СМС — как соседние поля ============ */
body:not(.logged-in) form.registerform input[name="user_code"] {
  margin-top: 12px;
  margin-bottom: 0;
}
body:not(.logged-in) form.registerform #wp-submit {
  min-width: 215px;
}

/* ============ 8. Восстановление пароля: подпись видна, без пустых строк <br> ============ */
form#resetpassform br {
  display: none;
}
/* отступ подписи «Ваш телефон» от «Забыли пароль?» над формой */
form#resetpassform .form__label {
  margin-top: 14px;
}
form#resetpassform input[name="user_code"] {
  margin-top: 18px;
}
/* ответ сервера о коде (свой вид задан в разметке — functions.php:2806, красная полоса слева) — отступ от поля кода */
form#resetpassform .resetpass-result:not(:empty) {
  margin-top: 12px;
}
/* Страница /my-account/lost-password/ (не окно): «Получить код по СМС» и поле кода — в одну строку (шаг 2 рядом с шагом 1).
   На ПК (≥1126px) форма занимает РОВНО ту же высоту, что и раньше (158,4063px — замер Chrome, одинаков на 1126–1920) и тот же отступ
   после неё (30px): фото-фон страницы (background-size: cover у .content-area), «или» и форма сброса по почте ниже не сдвигаются
   ни на пиксель. Содержимое — 136px (подпись 14+18, телефон 44, строка 16+44). Если сервер ответит ошибкой кода (.resetpass-result),
   форма вырастет, как росла и раньше. */
@media screen and (min-width: 741px) {
  .woocommerce > .form-forgot > form#resetpassform > p.woocommerce-form-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: end;
  }
  .woocommerce > .form-forgot > form#resetpassform > p.woocommerce-form-row > .form__label,
  .woocommerce > .form-forgot > form#resetpassform > p.woocommerce-form-row > .iti {
    grid-column: 1 / -1;
  }
  .woocommerce > .form-forgot > form#resetpassform > p.woocommerce-form-row > .send-code {
    grid-column: 1;
    margin-top: 16px;
  }
  .woocommerce > .form-forgot > form#resetpassform > p.woocommerce-form-row > input[name="user_code"] {
    grid-column: 2;
    margin-top: 16px;
  }
}
@media screen and (min-width: 1126px) {
  .woocommerce > .form-forgot > form#resetpassform {
    box-sizing: border-box;
    min-height: 158.4063px;
    margin-bottom: 30px;
  }
  .woocommerce > .form-forgot > form#resetpassform > p.woocommerce-form-row {
    margin-bottom: 0;
  }
}

/* ============ 9. Телефон: одна колонка, кнопки во всю ширину ============ */
@media screen and (max-width: 740px) {
  form.account-login {
    margin-top: 26px;
  }
  form.account-login > p:first-child {
    font-size: 16px;
    margin-bottom: 16px;
  }
  form.account-login .account-login__block {
    display: block;
  }
  form.account-login .al-field:first-child {
    margin: 0 0 16px;
  }
  form.account-login .account-login__item.manage {
    margin-top: 20px;
  }
  form.account-login .manage button[type="submit"],
  form.woocommerce-form-login .woocommerce-form-login__submit,
  body:not(.logged-in) form.registerform #wp-submit,
  form#resetpassform .send-code {
    width: 100%;
    min-width: 0;
  }
  form.woocommerce-form-login {
    grid-template-columns: 1fr;
  }
  form.woocommerce-form-login > .form-row:not(.woocommerce-form-row),
  form.woocommerce-form-login > .form__item:not(.form-row) {
    grid-column: 1;
  }
  form.woocommerce-form-login > .form__item:not(.form-row) {
    margin-top: 18px;
  }
  /* регистрация на телефоне — поля пониже (38px), чтобы окно с кнопкой помещалось в экран 360×640 без прокрутки (вместе с py-mobile.css) */
  body:not(.logged-in) form.registerform input.form__input-text,
  body:not(.logged-in) form.registerform input[name="user_code"] {
    height: 38px;
    padding-top: 7px;
    padding-bottom: 6px;
  }
}

/* ============ 10. Ошибка WooCommerce над формой входа (кабинет гостя: /my-account/, /my-account/lost-password/) ============
   Появляется только после неудачного входа/сброса (шаблон The7 notices/error.php). Было: белая полоса во всю ширину, красный #FF0000 20px,
   вплотную к заголовку «Войти». Стало: как ошибка в окне входа — ширина формы, 14px, красная полоса слева, отступ до заголовка. */
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error {
  box-sizing: border-box;
  max-width: 460px;
  margin: 0 0 20px !important; /* WPBakery: #content .wpb_text_column :last-child{margin-bottom:0} перебивает без !important */
  padding: 12px 16px;
  border: 1px solid #F0C9C5;
  border-left: 3px solid #D0453A;
  border-radius: 8px;
  background: #fff;
  color: #D0453A;
  font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error ul,
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
  font: inherit;
  color: inherit;
}
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error li + li {
  margin-top: 6px;
}
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error strong {
  font-weight: 600;
}
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error a {
  color: #495A80;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ 11. Окно входа на экранах уже 360px: длинное слово заголовка («ЗАРЕГИСТРИРОВАНЫ», 25px) вылезало за окно на 18px ============
   20px — как у мобильной вёрстки (py-mobile.css M-08), с ней ничего не меняется; на ПК и планшете правило не действует. */
@media screen and (max-width: 359px) {
  .modal[data-popup="login"] .modal__title {
    font-size: 20px;
  }
}