/* ==========================================================================
   AUTH — login drawer + registration page
   Follows site design system: no border-radius, Unbounded headers,
   Wix Madefor Display body, CSS vars from style.css
   ========================================================================== */

/* ===== TOP TABS ===== */
.auth-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--spacing-lg);
}

.auth-tab {
    padding: 12px var(--spacing-md);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--transition-default), border-color var(--transition-default);
    white-space: nowrap;
}
.auth-tab:hover { color: var(--color-text-primary); }
.auth-tab--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
/* Full-width content (no sidebar) */
.auth-layout--full {
    display: block;
}

/* ===== SECTION LABEL ===== */
.auth-section-label {
    font-family: var(--font-headers);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-md);
}
.auth-register-form > .auth-section-label:first-child {
    margin-top: 0;
}

/* ===== FORM GRID ===== */
.auth-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.auth-field--span2 {
    grid-column: 1 / -1;
}

/* ===== FIELD ===== */
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.auth-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ===== INPUT WRAP ===== */
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* ===== INPUT ===== */
.auth-input {
    width: 100%;
    height: 46px;
    border: var(--input-border-width) solid var(--color-border);
    padding: 0 14px;
    font-family: var(--font-body);
    font-size: var(--font-size-text-m);
    color: var(--color-text-primary);
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-default);
    /* inherit global border-radius: 0 */
}
.auth-input:focus {
    border-color: var(--color-accent);
}
.auth-input::placeholder {
    color: var(--color-placeholder);
    font-weight: 400;
}
.auth-input--disabled,
.auth-input[disabled] {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}
/* Password inputs get right padding for eye button */
.auth-input--password {
    padding-right: 46px;
}
/* Inputs with action button */
.auth-input-wrap--action .auth-input {
    padding-right: 118px;
}
/* Inputs with check icon */
.auth-input-wrap--check .auth-input {
    padding-right: 38px;
}

/* ===== EYE BUTTON =====
   Раньше размер и переключение (открытый/закрытый глаз) держались
   только на старом /assets — своих правил под .input__view-on/-off не
   было вообще, после снятия /assets иконки разъезжались во весь блок
   (наследовали общий img,svg{max-width:100%;height:auto} из
   common.css) и показывались обе сразу. */
.auth-eye-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 0;
    line-height: 1;
    transition: color var(--transition-default);
}
.auth-eye-btn:hover { color: var(--color-accent); }

.auth-eye-btn svg {
    width: 18px;
    height: 18px;
}

.input__view-on {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.is-view .input__view-off {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.is-view .input__view-on {
    opacity: 1;
    visibility: visible;
    position: static;
}

/* ===== INLINE ACTION BUTTON (Верификация) ===== */
.auth-input-action-btn {
    position: absolute;
    right: 6px;
    height: 34px;
    padding: 0 14px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-default);
}
.auth-input-action-btn:hover { background: var(--color-accent-hover); }

/* ===== CHECK ICON (INN) ===== */
.auth-input-check {
    position: absolute;
    right: 12px;
    display: none;
    align-items: center;
    pointer-events: none;
}
.auth-input-check.is-visible { display: flex; }

/* ===== CONSENTS ===== */
.auth-consents {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin: var(--spacing-sm) 0;
}

.auth-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1.5;
    user-select: none;
}
.auth-checkbox-label a {
    color: var(--color-accent);
    text-decoration: none;
}
.auth-checkbox-label a:hover { text-decoration: underline; }

.auth-checkbox {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* ===== ACTION BUTTONS ===== */
.auth-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: 4px;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--spacing-lg);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-default), color var(--transition-default);
    /* inherit border-radius: 0 */
}

.auth-btn--primary {
    background: var(--color-accent);
    color: #fff;
}
.auth-btn--primary:hover { background: var(--color-accent-hover); }

.auth-btn--ghost {
    background: none;
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
}
.auth-btn--ghost:hover {
    background: var(--color-accent-bg);
}

/* ===== REGISTER FORMS ===== */
.auth-register-form {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.auth-register-form--hidden {
    display: none;
}

/* ===== LOGIN DRAWER ===== */
.login-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
    visibility: hidden;
}
.login-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.login-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(9, 30, 66, 0.5);
    opacity: 0;
    transition: opacity 0.25s;
}
.login-drawer.is-open .login-drawer__overlay {
    opacity: 1;
}

.login-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    background: #fff;
    box-shadow: -2px 0 24px rgba(9, 30, 66, 0.12);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    box-sizing: border-box;
    overflow-y: auto;
}
.login-drawer.is-open .login-drawer__panel {
    transform: translateX(0);
}

.login-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.login-drawer__title {
    font-family: var(--font-headers);
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0;
}

.login-drawer__close {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 4px;
    line-height: 1;
    transition: color var(--transition-default);
}
.login-drawer__close:hover { color: var(--color-text-primary); }

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
}

.login-form__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.login-form__forgot {
    font-size: 14px;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}
.login-form__forgot:hover { text-decoration: underline; }

.login-form__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--spacing-xs);
}
.login-form__actions .auth-btn {
    width: 100%;
}

.login-form__test-links {
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-form__test-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    opacity: 0.6;
}

.login-form__test-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 6px 10px;
    background: var(--color-bg-secondary);
    transition: color var(--transition-default), background var(--transition-default);
}
.login-form__test-link:hover {
    color: var(--color-accent);
    background: var(--color-accent-bg);
}
.login-form__test-link svg { flex-shrink: 0; }

/* ===== MOBILE ===== */
@media (max-width: 767px) {

    /* Tabs scroll on small screens */
    .auth-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    /* Single column form */
    .auth-form-grid {
        grid-template-columns: 1fr;
    }
    .auth-field--span2 {
        grid-column: 1;
    }

    /* Verification button: full width below input */
    .auth-input-wrap--action {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .auth-input-wrap--action .auth-input {
        padding-right: 14px;
    }
    .auth-input-action-btn {
        position: static;
        height: 44px;
        width: 100%;
        font-size: 14px;
    }

    /* Actions stacked */
    .auth-actions {
        flex-direction: column;
    }
    .auth-actions .auth-btn {
        width: 100%;
        text-align: center;
    }

    /* Login drawer full width on mobile */
    .login-drawer__panel {
        width: 100%;
        padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
    }
}

/* ==========================================================================
   ДОПОЛНЕНИЯ К МАКЕТУ — эпик 9
   Формы обслуживает старый слой /assets, поэтому к классам макета
   добавляются перебивки его правил и оформление узлов, которых в макете
   нет: поле города, служебная подсказка о шифровании пароля, сообщения
   об ошибках проверки. Снимаются вместе со слоем /assets.
   ========================================================================== */

/* Заголовок страницы — в общей стилистике сайта. */
.auth-page__title {
    font-family: var(--font-headers);
    font-size: var(--heading-page);
    font-weight: var(--heading-weight);
    line-height: var(--heading-page-lh);
    /* Отступ от хлебных крошек, как на остальных страницах (24px) —
       был не задан, заголовок лип прямо к крошкам. */
    color: var(--color-text-primary);
    margin: var(--spacing-md) 0;
}

@media (max-width: 600px) {
    .auth-page__title { font-size: var(--heading-page-mobile); }
}

/* Экран "вы авторизованы" (auth/index.php) — раньше был голым <p> без
   единого класса, единственная страница входа, которую не переносили
   в новый дизайн вообще. */
.auth-page__text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text-m);
    line-height: var(--line-height-text-m);
    margin-bottom: var(--spacing-md);
}

/* Активную вкладку движок /assets помечает классом is-active. */
.auth-tab.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.auth-tab span {
    font: inherit;
    color: inherit;
}

/* /assets красит кнопку запроса кода в цвет фона — подпись пропадает. */
.auth-input-action-btn.verification {
    color: #fff;
}

/* Поле города рисует компонент Битрикса: рамка у него на обёртке,
   а ввод лежит внутри — приводим обёртку к виду поля из макета. */
.auth-field--city .bx-ui-sls-input-block {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 46px;
    padding: 0 14px 0 36px;
    border: var(--input-border-width) solid var(--color-border);
    background: #fff;
    transition: border-color var(--transition-default);
}

.auth-field--city .bx-sls .dropdown-icon {
    left: 12px;
    margin: 0;
}

/* Ошибка города. Справочник рисует поле сам, обёртки .input__wrapper внутри
   нет - подпись кладём в саму ячейку, поэтому ячейке нужна точка отсчёта.
   Рамку красим у видимого блока: у самого ввода её нет. */
.auth-field--city {
    position: relative;
}

.auth-field--city:has(.just-validate-error-field) .bx-ui-sls-input-block {
    border-color: var(--color-error);
}

.auth-field--city .bx-ui-sls-container {
    width: 100%;
    height: 100%;
}

.auth-field--city .bx-ui-sls-fake,
.auth-field--city .bx-ui-sls-route {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-primary);
    background: transparent;
    outline: none;
}

.auth-field--city .dropdown-fade2white {
    display: none;
}

/* Служебная подсказка Битрикса про шифрование пароля. */
.auth-secure-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Сообщения проверки полей: движок кладёт их внутрь обёртки поля. */
.auth-input-wrap {
    padding-bottom: 0;
}

.auth-field .just-validate-error-label {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-error);
}

.auth-field .just-validate-error-field,
.auth-input.just-validate-error-field {
    border-color: var(--color-error);
}

.auth-form-grid {
    row-gap: var(--spacing-md);
}

/* Согласия: ошибка встаёт под строкой, а не поверх соседней. */
.auth-consents {
    position: relative;
}

.auth-checkbox-label {
    position: relative;
}

.auth-checkbox-label .just-validate-error-label {
    position: absolute;
    top: 100%;
    left: 26px;
    font-size: 12px;
    color: var(--color-error);
}

/* Ответ сервера о регистрации. */
.auth-alert {
    padding: 12px 16px;
    margin-bottom: var(--spacing-md);
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--color-border);
}

.auth-alert--ok {
    background: #f6ffed;
    border-color: #b7eb8f;
    color: #3a7a1e;
}

.auth-alert--error {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-text-primary);
}

/* Значок проверки ИНН: показывает и красит его обработчик /assets.

   Раньше здесь не было вертикальной привязки: при position: absolute без
   top браузер оставляет элемент там, где он стоял бы в потоке, — то есть
   сразу под полем. Значок из-за этого висел под рамкой, а не внутри неё.
   Прижимаем к середине поля. */
.auth-input-wrap--check .input__decor {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.auth-input-wrap--check .input__decor svg {
    width: 16px;
    height: 16px;
}

/* Шторка входа лежит в модалке старого слоя (.modal--right), своей
   «шапки» у неё нет — заголовок и отступы задаём по месту. */
.login-form .login-drawer__title {
    margin-bottom: var(--spacing-md);
}

.login-form__forgot {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    cursor: pointer;
}

.login-form__description {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0;
}

.auth-captcha {
    display: block;
    margin-bottom: 8px;
}

/* Пояснение под полем — например требования к паролю на странице его
   смены (их отдаёт групповая политика Битрикса). */
.auth-hint {
    margin-top: 6px;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

/* Вкладки лежат на движке .tag из /assets, а он считает размеры от ширины
   экрана: на планшете подпись вырастала до 38 пикселей. Возвращаем макет. */
.auth-tabs .auth-tab,
.auth-tabs .auth-tab span {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.auth-tabs .auth-tab span {
    display: inline;
    padding: 0;
    margin: 0;
    background: none;
    color: inherit;
}

.auth-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
}

@media (max-width: 600px) {
    .auth-tabs .auth-tab {
        padding: 10px var(--spacing-sm);
    }
}

/* Активная вкладка от /assets приходит залитой плашкой — в макете это
   подчёркивание. Заодно убираем вертикальную полосу прокрутки, которую
   лента получает из-за собственной высоты плашек. */
.auth-tabs {
    overflow-y: hidden;
}

.auth-tabs .auth-tab,
.auth-tabs .auth-tab.is-active {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
}

.auth-tabs .auth-tab.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Отдельная страница входа и восстановления пароля: макета для них нет —
   в нём это шторка. Даём форме ту же ширину, что у шторки, иначе поля
   растягиваются на всю страницу. */
.auth-page .login-form {
    max-width: 420px;
}

/* --- Подтверждение почты при регистрации ---
   Тот же вид, что в оформлении заказа (.checkout-confirm в style.css
   компонента sale.order.ajax): акцентная полоса слева и светлая подложка,
   когда от клиента ждут действия; спокойная белая, когда всё готово.
   Различаются заливкой, а не цветом рамки, — чтобы «готово» не тянуло
   на себя внимание. */
.auth-confirm {
    margin-top: 8px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-left: 3px solid var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-text-primary);
    font-size: var(--font-size-text-s);
    line-height: 1.5;
}

.auth-confirm--ok {
    background: var(--color-white);
    color: var(--color-text-secondary);
}

.auth-confirm--ok b { color: var(--color-accent); }

.auth-confirm--warn {
    border-left-color: var(--color-error);
    background: var(--color-error-bg);
}

.auth-confirm--warn b { color: var(--color-error); }

/* Ссылка внутри плашки — как .checkout-confirm__btn: не кнопка, а
   подчёркнутое действие в строке текста. */
.auth-confirm__btn {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.auth-confirm__btn:hover { color: var(--color-accent-hover); }

/* Поле ИНН на регистрации юрлица размечено как .auth-field.input — лишний
   класс достался от старого движка. Из-за него на подпись ложится правило
   .input label из modals.css (16px), и «ИНН» выглядит крупнее соседних
   подписей. Специфичности .auth-label не хватает, поэтому уточняем
   селектор родителем. */
.auth-field .auth-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* --- Подсказки ФИО ---
   Тот же вид, что в оформлении заказа (.checkout-suggest): список под полем,
   белый, с тенью, вариант подсвечивается акцентом. */
.auth-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-top: none;
    background: var(--color-white);
    box-shadow: 0 6px 16px rgba(9, 30, 66, .12);
}

.auth-suggest__item {
    display: block;
    width: 100%;
    padding: 10px 13px;
    border: none;
    background: none;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.auth-suggest__item:hover,
.auth-suggest__item:focus {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}