/*
 * Экраны снаружи кабинета: вход, регистрация, восстановление пароля,
 * подтверждение адреса. Оформление взято из вёрстки `login.html` и
 * `register.html`.
 *
 * ЗДЕСЬ ТОЛЬКО ТО, ЧЕГО НА САЙТЕ ЕЩЁ НЕТ. Поля ввода, кнопки, галочки,
 * хлебные крошки и подпись поля уже описаны в `main.min.css` ровно так же,
 * как в вёрстке, — вёрстку рисовали по живому сайту. Повторять их значило бы
 * завести вторую копию, которая однажды разойдётся с первой.
 *
 * Поля рисует сама Joomla своим макетом `joomla.form.renderfield`: обёртка
 * `.control-group`, подпись в `.control-label`, поле в `.controls`. Мы
 * добавляем к обёртке класс `input-block` при выводе, поэтому внешний вид
 * поля берётся из общесайтовых правил, а здесь описано только то, что
 * относится к странице. Свой макет полей не заводим: `renderField()` вешает
 * на обёртку `data-showon`, и подмена макета отняла бы у формы ветвление.
 *
 * Всё ограничено `.account-page`. Классы вроде `.control-group` в остальном
 * шаблоне не описаны вовсе, и описывать их глобально нельзя: те же обёртки
 * рисуются в чекауте и в формах заявок.
 */

.account-page { padding: 40px 0 80px; }

.account-page h1 {
    font-size: 36px;
    font-weight: 700;
    color: #318959;
    margin: 0 0 8px;
    line-height: 1.1;
}

.account-page .account-subtitle {
    font-size: 15px;
    color: #636367;
    margin: 0 0 32px;
}

/* Узкая колонка — для входа и коротких форм; регистрация шире. */
.account-card { max-width: 480px; }
.account-wide { max-width: 740px; }

/* --- поля ---------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Требования к паролю: что сошлось, чего не хватает.

   Список заменил строку «Minimum Requirements — Characters: 12, Symbols: 1,
   Upper Case: 1» и длинную фразу «паролю не хватает: …». Обе были правдивы и
   нечитаемы: человеку в момент набора нужно понять ОДНО — что доделать, — а
   не прочитать предложение.

   ТРИ СОСТОЯНИЯ, А НЕ ДВА. Пока поле пустое, пункт нейтрален: человек ещё не
   ошибся, он ещё не начал. Красным помечается только то, что он уже набрал и
   что не сошлось. Список, красный с самого начала, читается как обвинение.

   Значок ставим псевдоэлементом, а не символом в тексте: текст приходит из
   словаря, и значок в нём пришлось бы переводить.
   --------------------------------------------------------------------------- */
.account-page .account-pw-rules {
    order: 3;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.6;
    color: #636367;
}

.account-page .account-pw-rules li {
    position: relative;
    padding-left: 20px;
}

.account-page .account-pw-rules li::before {
    position: absolute;
    left: 0;
    content: "\2022";          /* точка: ещё ничего не набрано */
    color: #adb5bd;
}

.account-page .account-pw-rules li.is-met {
    color: #318959;
}

.account-page .account-pw-rules li.is-met::before {
    content: "\2713";          /* галочка */
    color: #318959;
}

.account-page .account-pw-rules li.is-missing {
    color: #d52b1e;
}

.account-page .account-pw-rules li.is-missing::before {
    content: "\2715";          /* косой крест */
    color: #d52b1e;
}

/* ---------------------------------------------------------------------------
   Принятое поле — зелёной рамкой.

   Класс `form-control-success` ставит ЯДРО (`validate.js`, markValid): поле
   прошло проверку. Красные правила лежат в `custom.css` общесайтово, а это —
   здесь, и разница не в аккуратности.

   ЯДРО СЧИТАЕТ ПРОШЕДШИМ ПРОВЕРКУ И ПУСТОЕ НЕОБЯЗАТЕЛЬНОЕ ПОЛЕ. Для «телефона»
   это правда — оно действительно в порядке, — но зелёная рамка говорит другое:
   «заполнено верно». Пустое поле, помеченное как верно заполненное, — это
   неправда на экране, и по ней человек решит, что что-то ввёл.

   Поэтому зелёный держится на том, что `heine-auth.js` снимает класс с пустых
   полей, а работает он только на страницах кабинета. Понадобится зелёный на
   витрине — переносить надо ОБЕ половины, иначе останется первая.
   --------------------------------------------------------------------------- */
.account-page .form-control-success { border-color: #318959; }

/* ЗАПАС СВЕРХУ ПРИ ПРОКРУТКЕ К ПОЛЮ. Шапка сайта прибита к верху экрана
   (`position: fixed`, 83px), а браузер, прокручивая к негодному полю, о ней не
   знает и ставит поле вплотную к верхней границе окна. Само поле при этом видно,
   а подпись и текст ошибки — то, ради чего он прокручивал, — оказываются ПОД
   шапкой. Ровно эту задачу решает `scroll-margin-top`: он действует и на
   прокрутку по фокусу, и на переход по якорю.

   150px = высота шапки плюс подпись с текстом ошибки над полем. */
.account-page .form-control,
.account-page .form-select,
.account-page input[type="checkbox"],
.account-page textarea,
.account-page select { scroll-margin-top: 150px; }

.account-page .control-group { margin-bottom: 20px; }
.account-page .control-label { display: block; }

/* Звёздочку обязательного поля Joomla печатает сама. */
.account-page .control-label .star { color: #d52b1e; font-size: 14px; }

.account-page .control-group small.form-text,
.account-page .account-hint {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: #636367;
    margin-top: 6px;
}

/* Две колонки: имя и фамилия, город и индекс. На узком экране в одну. */
.account-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

.account-group-title {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin: 32px 0 16px;
}

/* --- переключатель ветки регистрации ------------------------------------- */
/*
 * Это штатное поле-переключатель Joomla (макет `radio.buttons`), а не пара
 * кнопок с обработчиком, как было в вёрстке. Причина простая: показом полей
 * ветки управляет `showon`, а он слушает событие `change` НА РАДИОКНОПКЕ.
 * Кнопки из вёрстки пришлось бы дублировать скрытым полем и своим скриптом,
 * то есть держать вторую копию того, что ядро уже делает.
 */
.account-page .account-toggle { border: 0; padding: 0; margin: 0 0 32px; }

.account-page .account-toggle .btn-group {
    display: flex;
    /* Отступ слева даёт общесайтовое правило `.radio` — там он под кружок
       переключателя. Здесь кружка нет, кнопки рисуют себя сами. */
    padding: 0;
    margin: 0;
    border: 2px solid #318959;
    width: -webkit-fit-content;
    width: fit-content;
}

.account-page .account-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.account-page .account-toggle label {
    padding: 10px 28px;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
    color: #318959;
    background: #fff;
    cursor: pointer;
    margin: 0;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.account-page .account-toggle label:hover { background: #f0f8f4; }

.account-page .account-toggle input:checked + label {
    background: #318959;
    color: #fff;
    font-weight: 700;
}

/* Обводка при переходе клавиатурой: без неё поле неотличимо для того, кто
   не пользуется мышью, потому что сам переключатель спрятан. */
.account-page .account-toggle input:focus-visible + label { outline: 2px solid #062903; outline-offset: 2px; }

/* --- показать пароль ------------------------------------------------------ */
/*
 * Глазок НЕ свой. Штатное поле пароля само печатает кнопку
 * `.input-password-toggle` и само подключает скрипт `field.passwordview`
 * (`layouts/joomla/form/field/password.php`), а подписи «показать» и «скрыть»
 * уже переведены в ядре. Свой обработчик был бы третьей копией того же
 * поведения — в вёрстке он был четвёртой.
 *
 * Значок рисуем фоном, а не шрифтом: класс `icon-eye` живёт в
 * `media/system/css/joomla-fontawesome.css`, а на витрине подключён свой
 * набор значков, и этого файла там нет. Скрипт переключает `icon-eye` на
 * `icon-eye-slash`, поэтому описаны оба.
 */

.account-page .password-group .input-group { position: relative; display: block; }
.account-page .password-group input { padding-right: 48px; }

.account-page .input-password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.account-page .input-password-toggle .icon-eye,
.account-page .input-password-toggle .icon-eye-slash {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.account-page .input-password-toggle .icon-eye { background-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23636367%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%273%27/%3E%3C/svg%3E"); }
.account-page .input-password-toggle .icon-eye-slash { background-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23318959%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24%27/%3E%3Cline x1=%271%27 y1=%271%27 x2=%2723%27 y2=%2723%27/%3E%3C/svg%3E"); }

/*
 * Требования к паролю ядро печатает ПЕРЕД полем, а по вёрстке подсказка стоит
 * под ним. Меняем местами показом, а не своим макетом: макет пришлось бы
 * форкнуть целиком вместе с измерителем стойкости.
 */
.account-page .controls { display: flex; flex-direction: column; }
.account-page .controls > .small.text-muted { order: 2; font-size: 13px; color: #636367; margin-top: 6px; }

/* --- мелочи страницы ------------------------------------------------------ */

.account-forgot { text-align: right; margin: -12px 0 20px; }
.account-submit { margin-top: 8px; }

/* Второстепенный способ входа: ключ, единый вход. Обводкой, а не заливкой —
   основное действие на странице одно, и это кнопка «войти». */
.account-alt-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    padding: 12px 24px;
    color: #318959;
    background: #fff;
    border: 1px solid #318959;
    cursor: pointer;
    font-family: inherit;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.account-alt-btn:hover { background: #f0f8f4; }

/* Кнопка во всю ширину карточки. Класса `.primary-btn-full` на сайте не было —
   он появился в вёрстке кабинета. Стрелку убираем: она уместна у кнопки,
   которая ведёт дальше, а не у той, что отправляет форму. */
.account-page .primary-btn-full {
    display: block;
    width: 100%;
    padding-left: 32px;
}

.account-page .primary-btn-full::after { display: none; }

/* --- галочки -------------------------------------------------------------- */
/*
 * Поле-галочку ядро рисует так же, как всякое другое: подпись в
 * `.control-label`, само поле в `.controls`. Общесайтовое правило
 * `.input-block input` растягивает ЛЮБОЙ input на всю ширину и даёт ему
 * высоту 42 пикселя — галочка от этого выглядит пустым текстовым полем.
 * Поэтому строку разворачиваем: сначала квадратик, потом подпись.
 */
.account-page .control-group.account-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.account-page .control-group.account-check .controls { order: 0; flex: 0 0 auto; }
.account-page .control-group.account-check .control-label { order: 1; flex: 1 1 auto; }

.account-page .control-group.account-check input[type="checkbox"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 3px 0 0;
    padding: 0;
    /* Общий сброс шаблона гасит вид всех полей (`appearance: none`), и галочка
       превращается в пустое место. Возвращаем ей штатный вид: своя разметка
       квадратика тут не нужна, хватает `accent-color`. */
    -webkit-appearance: auto;
    appearance: auto;
    accent-color: #318959;
    cursor: pointer;
}

.account-page .control-group.account-check label {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    color: #636367;
    padding-bottom: 0;
    cursor: pointer;
}

.account-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    color: #636367;
    font-size: 14px;
}

.account-divider::before,
.account-divider::after { content: ""; flex: 1; height: 1px; background: #cecfd2; }

.account-bottom { margin-top: 20px; font-size: 15px; color: #636367; }
.account-bottom a { color: #318959; border-bottom: 1px dashed rgba(49, 137, 89, 0.4); }
.account-bottom a:hover { color: #307d53; }

.account-note {
    background: #f0f8f4;
    border-left: 3px solid #318959;
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.5;
    color: #404145;
}

.account-note a { color: #318959; border-bottom: 1px dashed rgba(49, 137, 89, 0.4); }

/* Согласия: подпись длинная, 18px из общих правил делают из неё простыню. */
.account-page .account-agreements a { color: #318959; border-bottom: 1px dashed rgba(49, 137, 89, 0.4); }

.account-agreements { margin-top: 28px; padding-top: 4px; }

/* Рамку и отступы вокруг набора полей рисует браузер сам. */
.account-page fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }


/* --- разделы формы ------------------------------------------------------- */
/*
 * Свёрнутые разделы — штатный <details>, а не своя механика: браузер умеет это
 * сам, с клавиатуры и для читалок экрана, и состояние ему держать не надо.
 * Стрелку-маркер убираем и рисуем свою, потому что штатная в разных браузерах
 * выглядит по-разному.
 */
.account-page .account-block {
    background: #fff;
}

.account-page .account-block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.account-page .account-block-title::-webkit-details-marker { display: none; }

.account-page .account-block-title::after {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23318959%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E");
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.account-page .account-block[open] > .account-block-title::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.account-page .account-block-title:hover { color: #318959; }
.account-page .account-block-body { padding: 4px 24px 8px; }
.account-page .account-block + .account-block { margin-top: 4px; }

/* --- повтор пароля -------------------------------------------------------- */

.account-page .control-group.account-mismatch input { border-color: #ce1720; }

.account-page .account-mismatch-note {
    order: 3;
    font-size: 14px;
    line-height: 1.2;
    color: #d52b1e;
    margin: 8px 0 0;
}

/* --- окно с правовым текстом ---------------------------------------------- */
/*
 * Согласие, под которым нельзя прочитать текст, — не согласие. Окно нужно,
 * чтобы человек не терял заполненную форму ради одной страницы.
 */
.account-legal-link { color: #318959; border-bottom: 1px dashed rgba(49, 137, 89, 0.4); }
.account-legal-link:hover { color: #307d53; }

/* ЗАМОК ПРОКРУТКИ — НА КОРНЕВОМ ЭЛЕМЕНТЕ. Правило на `body` тут стояло с самого
   начала и не делало ничего: прокручивается на этом сайте `<html>`, а у `<body>`
   `overflow: hidden` стоит и без всякого окна. Класс на `<html>` вешает
   `heine-auth.js`, он же компенсирует ширину полосы прокрутки. */
html.account-modal-on,
body.account-modal-on { overflow: hidden; }

/* Правило display перебивает встроенное [hidden]{display:none} браузера,
   поэтому прячем явно — иначе окно висит открытым с загрузки страницы. */
.account-modal[hidden] { display: none; }

.account-modal {
    position: fixed;
    inset: 0;
    /* Шапка сайта стоит на 9999, собственные окна сайта — на 50000. Берём то же
       число, а не «побольше»: третья шкала поверх двух существующих однажды
       разойдётся с ними молча. */
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.account-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 14, 14, 0.55);
}

.account-modal-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 760px;
    max-height: 86vh;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.account-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 8px;
}

.account-modal-head h2 { margin: 0; font-size: 22px; font-weight: 700; color: #000; }

/* Название документа приходит из подписи галочки, где оно стоит в середине
   фразы («I agree to the privacy policy») и потому со строчной. Заголовком та же
   строка выглядит опиской. Правим показ, а не строку: заводить второй перевод
   ради одной буквы — это второе место, где текст разойдётся. */
.account-modal-head h2::first-letter { text-transform: uppercase; }

.account-modal-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: #636367;
    cursor: pointer;
}

.account-modal-close:hover { color: #318959; }

.account-modal-body {
    overflow-y: auto;
    padding: 24px;
    font-size: 15px;
    line-height: 1.6;
    color: #404145;
}

.account-modal-body :first-child { margin-top: 0; }

.account-modal-foot {
    padding: 8px 24px 24px;
    font-size: 14px;
}

.account-modal-foot a { color: #318959; border-bottom: 1px dashed rgba(49, 137, 89, 0.4); }

@media only screen and (max-width: 768px) {
    .account-page { padding: 24px 0 48px; }
    .account-page h1 { font-size: 28px; }
    .account-row-2 { grid-template-columns: 1fr; gap: 0; }
    .account-page .account-block-title { padding: 16px; font-size: 16px; }
    .account-page .account-block-body { padding: 16px 16px 2px; }
    .account-modal { padding: 0; }
    .account-modal-box { max-height: 100vh; height: 100%; }
}