/* Вход по номеру телефона (или e-mail) и паролю, восстановление пароля и регистрация со звонком (lib/phone_login): шаги
   content/users/phone/flow.php в выпадающей форме входа шапки (ПК ~280px и телефон), на страницах «Мои данные», «Авторизация»,
   «Регистрация», окно вошедшего (confirm_modal.php). Поля, кнопки, поле кода, ссылки - классы формы входа шапки из style.css
   (ui-input, dropdown__submit, auth-otp, auth-link, dropdown__error), здесь - только своё. Версия файла - по времени изменения
   (phone_login_asset_version), cache_version поднимать не нужно */

.ab-phone {
    width: 100%;
    min-width: 0;
}

.ab-phone__step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

.dropdown__menu--auth .ab-phone__step {
    gap: calc(.75rem + 4px);
}

.ab-phone__step[hidden],
.ab-phone [hidden],
.ab-phone-modal__foot[hidden] {
    display: none !important;
}

/* Заголовок шага: стрелка «назад» слева, название по центру */
.ab-phone__head {
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    align-items: center;
    gap: .5rem;
    min-height: 2rem;
}

.ab-phone__title {
    grid-column: 2;
    margin: 0;
    color: var(--white, #F8FAF9);
    font-size: var(--text-base, .875rem);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

.ab-phone__head:not(:has(.ab-phone__back)) .ab-phone__title {
    grid-column: 1 / -1;
}

.ab-phone__back {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #333;
    border-radius: .625rem;
    background: transparent;
    color: var(--white, #F8FAF9);
    cursor: pointer;
    transition: border-color .2s ease;
}

.ab-phone__back:hover,
.ab-phone__back:focus-visible {
    border-color: var(--white, #F8FAF9);
    outline: none;
}

.ab-phone__back svg {
    width: .875rem;
    height: .875rem;
    fill: currentColor;
    transform: rotate(180deg);
}

/* Короткие пояснения */
.ab-phone__lead,
.ab-phone__note,
.ab-phone__hint {
    margin: 0;
    color: var(--white, #F8FAF9);
    font-size: var(--text-sm, .75rem);
    line-height: 1.45;
}

.ab-phone__lead {
    margin-top: -.25rem;
    opacity: .6;
    text-align: center;
}

.ab-phone__note {
    opacity: .45;
    text-align: center;
}

.ab-phone__hint {
    margin-top: -.375rem;
    opacity: .45;
}

/* Подпись поля кода - по центру, как само поле */
.ab-phone .auth-otp__label {
    text-align: center;
}

/* «Звоним на +7 …», «+7 … подтверждён» */
.ab-phone__sent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .375rem;
    margin: -.25rem 0 0;
    color: var(--white, #F8FAF9);
    font-size: var(--text-sm, .75rem);
    line-height: 1.4;
    text-align: center;
}

.ab-phone__sent b {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ab-phone__sent--ok svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: #8BD48F;
    fill: currentColor;
}

/* Ссылки под формой входа: «Забыли пароль или нет пароля?» и «Регистрация» - по центру, в узком окне - одна под другой */
.ab-phone__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .375rem 1.25rem;
    margin-top: -.25rem;
}

.ab-phone__links .auth-link {
    white-space: nowrap;
}

/* Одна ссылка по центру («Уже есть учётная запись? Войти», «Не пришёл звонок?») */
.ab-phone__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 .375rem;
    margin: -.25rem 0 0;
    color: var(--white, #F8FAF9);
    font-size: var(--text-sm, .75rem);
    line-height: 1.4;
    text-align: center;
}

.ab-phone__alt-text {
    opacity: .5;
}

/* Поля: подпись прячется при фокусе (как у всех полей формы входа) - вместо неё подсказка (маска номера, пример имени) */
.ab-phone .ui-input__field:focus::placeholder {
    color: var(--white, #F8FAF9);
    opacity: .3;
}

/* Пароль: место под кнопку «показать» */
.ab-phone__pass .ui-input__field {
    padding-right: 3rem;
}

.ab-phone__eye {
    position: absolute;
    top: 50%;
    right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: .25rem;
    border: 0;
    background: none;
    color: var(--gray-text, #8a8a8a);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .2s ease;
}

.ab-phone__eye:hover,
.ab-phone__eye:focus-visible {
    color: var(--white, #F8FAF9);
    outline: none;
}

.ab-phone__eye svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

/* Логин для менеджера паролей рядом с новым паролем - не виден */
.ab-phone__username {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* Подсказка с кнопками: «Такого номера нет. Зарегистрироваться?», «Этот номер уже есть. Войти или восстановить пароль?» */
.ab-phone__notice {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: .75rem .875rem;
    border: 1px solid #333;
    border-radius: var(--radius-xl, .75rem);
    background: rgba(248, 250, 249, .03);
}

.ab-phone__notice-text {
    margin: 0;
    color: var(--white, #F8FAF9);
    font-size: var(--text-sm, .75rem);
    font-weight: 500;
    line-height: 1.4;
}

.ab-phone__notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ab-phone__notice-btn {
    flex: 1 1 auto;
    min-height: 2.25rem;
    padding: .375rem .75rem;
    border: 1px solid #333;
    border-radius: .625rem;
    background: transparent;
    color: var(--white, #F8FAF9);
    font-family: inherit;
    font-size: var(--text-sm, .75rem);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.ab-phone__notice-btn:hover,
.ab-phone__notice-btn:focus-visible {
    border-color: var(--white, #F8FAF9);
    outline: none;
}

.ab-phone__notice-btn--primary {
    border-color: var(--white, #F8FAF9);
    background: var(--white, #F8FAF9);
    color: var(--black, #1B1B1B);
}

.ab-phone__notice-btn--primary:hover {
    background: transparent;
    color: var(--white, #F8FAF9);
}

/* «Позвонить ещё раз» - приглушена, пока идёт отсчёт */
.ab-phone [data-ab-phone-resend][aria-disabled="true"] {
    cursor: default;
}

/* «Не пришёл звонок?»: «Позвонить ещё раз» / «Позвоните сами» - рядом, а в узком окне шапки - одна под другой (текст не переносится) */
.ab-phone__choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.75rem, 1fr));
    gap: .5rem;
}

.ab-phone__choice:has(.ab-phone__choice-btn[hidden]) {
    grid-template-columns: 1fr;
}

.ab-phone__choice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .5rem;
    border: 1px solid #333;
    border-radius: var(--radius-xl, .75rem);
    background: rgba(248, 250, 249, .03);
    color: var(--white, #F8FAF9);
    font-family: inherit;
    font-size: var(--text-sm, .75rem);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, opacity .2s ease;
}

.ab-phone__choice-btn:hover,
.ab-phone__choice-btn:focus-visible {
    border-color: var(--white, #F8FAF9);
    outline: none;
}

.ab-phone__choice-btn[aria-disabled="true"],
.ab-phone__choice-btn[aria-disabled="true"]:hover {
    border-color: #333;
    opacity: .5;
    cursor: default;
}

/* «Позвоните сами»: номер крупно в рамке, «Копировать» - внутри рамки справа (на узкой форме - только значок);
   на телефоне номер и кнопка «Позвонить» - ссылки tel:, «Копировать» не нужен */
.ab-phone__dial {
    container-type: inline-size;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 3.5rem;
    padding: .375rem .375rem .375rem .875rem;
    border: 1px solid #333;
    border-radius: var(--radius-xl, .75rem);
    background: var(--gray-darker, #262626);
}

.ab-phone__dial-number {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--white, #F8FAF9);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-decoration: none;
    user-select: all;
}

.ab-phone--lg .ab-phone__dial-number {
    font-size: 1.5rem;
}

.ab-phone__dial-number[href] {
    cursor: pointer;
    user-select: none;
}

.ab-phone__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: 0 .625rem;
    border: 1px solid #333;
    border-radius: .625rem;
    background: transparent;
    color: var(--white, #F8FAF9);
    font-family: inherit;
    font-size: var(--text-sm, .75rem);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease;
}

.ab-phone__copy:hover,
.ab-phone__copy:focus-visible {
    border-color: var(--white, #F8FAF9);
    outline: none;
}

.ab-phone__copy svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* Номер скопирован: значок - галочка */
.ab-phone__copy--done {
    border-color: rgba(139, 212, 143, .6);
    color: #8BD48F;
}

@container (max-width: 330px) {
    .ab-phone__copy {
        padding: 0;
    }

    .ab-phone__copy-text {
        display: none;
    }
}

.ab-phone-modal .ab-phone__dial,
.ab-phone-card .ab-phone__dial,
.dropdown__menu--full-width .ab-phone__dial {
    background: var(--black, #1B1B1B);
}

/* Номер больше не действует (время вышло) */
.ab-phone__dial--off .ab-phone__dial-number {
    opacity: .4;
}

.ab-phone__call {
    display: none !important;
    text-decoration: none;
}

.ab-phone--touch .ab-phone__call:not([hidden]) {
    display: inline-flex !important;
}

.ab-phone--touch .ab-phone__copy {
    display: none !important;
}

.ab-phone--touch .ab-phone__dial {
    padding-right: .875rem;
}

/* «Ждём ваш звонок… 2:41» */
.ab-phone__wait {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    margin: 0;
    color: var(--white, #F8FAF9);
    font-size: var(--text-sm, .75rem);
    line-height: 1.4;
}

.ab-phone__wait-left {
    opacity: .5;
    font-variant-numeric: tabular-nums;
}

.ab-phone__wait .btn-spinner {
    width: 12px;
    height: 12px;
    margin-right: 2px;
    opacity: .7;
}

.ab-phone__wait + .ab-phone__note {
    margin-top: -.5rem;
}

/* Выбор учётной записи */
.ab-phone__accounts {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ab-phone__account {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 3.5rem;
    padding: .75rem .875rem;
    border: 1px solid #333;
    border-radius: var(--radius-xl, .75rem);
    background: rgba(248, 250, 249, .03);
    color: var(--white, #F8FAF9);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease;
}

.ab-phone__account:hover,
.ab-phone__account:focus-visible {
    border-color: var(--white, #F8FAF9);
    outline: none;
}

.ab-phone__account--busy {
    cursor: progress;
    opacity: .7;
}

.ab-phone__account-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.ab-phone__account-name {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--text-sm, .75rem);
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ab-phone__account-meta {
    max-width: 100%;
    font-size: var(--text-xs, .625rem);
    line-height: 1.3;
    opacity: .5;
    overflow-wrap: anywhere;
}

.ab-phone__account-go {
    flex: 0 0 auto;
    font-size: var(--text-sm, .75rem);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(248, 250, 249, .3);
    text-underline-offset: 3px;
}

/* Готово: «Пароль сохранён» */
.ab-phone__done {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .875rem 1rem;
    border: 1px solid rgba(139, 212, 143, .35);
    border-radius: var(--radius-xl, .75rem);
    background: rgba(139, 212, 143, .08);
    color: var(--white, #F8FAF9);
    font-size: var(--text-base, .875rem);
    line-height: 1.4;
}

.ab-phone__done svg {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    color: #8BD48F;
    fill: currentColor;
}

.ab-phone__offer {
    display: flex;
    flex-direction: column;
    gap: inherit;
}

/* Галочка согласия - квадратная, как во входе по коду в шапке (modules/login/login_form_new.php, .dropdown__agree): там стили
   выводятся только вместе с формой гостя, поэтому повторены здесь */
.ab-phone__agree .agreement-label,
.ab-phone__agree .agreement-input:checked + .agreement-label {
    padding-left: 2rem;
    min-height: 1.25rem;
    font-size: var(--text-sm, .75rem);
    line-height: 1.5;
    color: var(--white, #F8FAF9);
}

.ab-phone__agree .agreement-text {
    padding-top: 0;
}

.ab-phone__agree .agreement-link {
    color: var(--white, #F8FAF9);
}

.ab-phone__agree .agreement-label::before {
    top: 0;
    width: 1.25rem;
    height: 1.25rem;
    transform: none;
    border: 1px solid #4a4a4a;
    border-radius: .375rem;
    background: var(--black, #1B1B1B);
}

.ab-phone__agree .agreement-label::after {
    top: .3rem;
    left: .4375rem;
    width: .375rem;
    height: .625rem;
    border: solid var(--black, #1B1B1B);
    border-width: 0 2px 2px 0;
    border-radius: 0;
    background: none;
    transform: rotate(45deg) scale(0);
}

.ab-phone__agree .agreement-input:checked + .agreement-label::before {
    border-color: var(--white, #F8FAF9);
    background: var(--white, #F8FAF9);
}

.ab-phone__agree .agreement-input:checked + .agreement-label::after {
    transform: rotate(45deg) scale(1);
}

.ab-phone__agree .agreement-input:focus-visible + .agreement-label::before {
    outline: 2px solid var(--white, #F8FAF9);
    outline-offset: 2px;
}

.ab-phone__agree--error .agreement-label::before {
    border-color: #ED3C38;
}

/* Кнопка «в работе» (как во входе по коду в шапке) */
.ab-phone .btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: ab-phone-spin .7s linear infinite;
}

@keyframes ab-phone-spin {
    to { transform: rotate(360deg); }
}

.ab-phone button[disabled] {
    opacity: .85;
    cursor: progress;
}

/* Поля и кнопки вне выпадающей формы шапки (окно, страница регистрации) - тех же размеров: 48px на ПК, 54px на телефоне */
.ab-phone--sm .ui-input,
.ab-phone--sm .ui-input__field,
.ab-phone--sm .dropdown__submit,
.ab-phone--sm .auth-otp__field {
    height: 48px;
    min-height: 48px;
    border-radius: calc(var(--radius-xl, .75rem) + 4px);
}

.ab-phone--sm .ui-input__field {
    font-size: calc(var(--text-sm, .75rem) + 1px);
    line-height: 1.2;
}

.ab-phone--sm .ui-input__label {
    font-size: calc(var(--text-base, .875rem) + 1px);
    line-height: 1.2;
}

.ab-phone .dropdown__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

/* Поле кода на тёмно-серой карточке (окно, страница регистрации) - фон темнее, как на страницах входа */
.ab-phone-modal .auth-otp__field,
.ab-phone-card .auth-otp__field {
    background: var(--black, #1B1B1B);
}

@media (max-width: 768px) {
    .ab-phone--sm .ui-input,
    .ab-phone--sm .ui-input__field,
    .ab-phone--sm .dropdown__submit,
    .ab-phone--sm .auth-otp__field {
        height: 54px;
        min-height: 54px;
    }
}

/* На страницах со своим заголовком («Авторизация», «Регистрация») первый шаг - без заголовка «Вход» / «Регистрация» */
.ab-login .ab-phone__step > .ab-phone__head:not(:has(.ab-phone__back)),
.auth-form .ab-phone__step > .ab-phone__head:not(:has(.ab-phone__back)),
.ab-phone-card .ab-phone__step > .ab-phone__head:not(:has(.ab-phone__back)),
.ab-phone-card [data-step="regform"] > .ab-phone__head {
    display: none;
}

/* Пока открыт не первый шаг (восстановление, регистрация, код) - «Войти через MAX» под формой не показываем: одно действие на экране */
.ab-phone-host--inner .ab-max,
.ab-phone-host--inner ~ .ab-max,
.ab-phone-host--inner .ab-phone-or,
.ab-phone-host--inner ~ .ab-phone-or,
.ab-phone-host--inner ~ .ab-phone-email-toggle {
    display: none !important;
}

/* Форма входа по коду на e-mail в шапке открыта - «Войти через MAX» под ней остаётся */
.dropdown__menu--auth .ab-max {
    margin-top: calc(.75rem + 4px);
}

/* Окно вошедшего: .modal сайта (как окно входа через MAX); на телефоне - лист снизу на всю ширину */
.ab-phone-modal .ab-phone-modal__content {
    max-width: 25rem;
    padding: 1.75rem 1.75rem 1.5rem;
}

.ab-phone-modal .ab-phone__head {
    margin: 0 1.25rem;
}

.ab-phone-modal .ab-phone__title {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
}

.ab-phone-modal__foot {
    margin: 1rem 0 0;
    text-align: center;
}

@media (max-width: 767px) {
    .ab-phone-modal {
        align-items: flex-end;
        padding: 0;
    }

    .ab-phone-modal .ab-phone-modal__content {
        max-width: none;
        max-height: 92vh;
        padding: 1.5rem 1rem 1.25rem;
        border-radius: 1.25rem 1.25rem 0 0;
    }
}

/* Страница «Регистрация»: карточка входа / регистрации по номеру телефона (content/users/regform.php) */
.ab-phone-card {
    max-width: 26rem;
    margin: 0 auto;
}

/* Страница «Регистрация» - поля прямо на фоне страницы (auth_pages.css, .ab-auth--page): рамка, как у полей формы по e-mail */
.ab-auth--page .ab-phone .ui-input {
    border: 1px solid #333;
    background: var(--black, #1B1B1B);
    transition: border-color .2s ease;
}

.ab-auth--page .ab-phone .ui-input:focus-within {
    border-color: var(--white, #F8FAF9);
    transform: none;
    box-shadow: none;
}

.ab-auth--page .ab-phone .ui-input__field {
    height: 100%;
    min-height: 0;
}

/* «или» - как разделитель у кнопки входа через MAX (max-login.css, .ab-max__or) */
.ab-phone-or {
    display: flex;
    align-items: center;
    gap: var(--space-3, .75rem);
    max-width: 26rem;
    margin: var(--space-6, 1.5rem) auto var(--space-4, 1rem);
    color: var(--gray-medium, #ACACAC);
    font-size: var(--text-sm, .75rem);
    line-height: 1;
}

.ab-phone-or::before,
.ab-phone-or::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: rgba(248, 250, 249, .12);
}

.ab-max.ab-max--bare {
    max-width: 26rem;
    margin: 0 auto var(--space-3, .75rem);
}

.ab-phone-email-toggle {
    display: flex;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    opacity: .8;
}

.ab-phone-email-toggle:hover,
.ab-phone-email-toggle:focus-visible {
    opacity: 1;
}

.ab-phone-email-toggle[hidden] {
    display: none;
}

.ab-phone-email-toggle ~ #regform {
    margin-top: var(--space-6, 1.5rem);
}

/* Страница «Авторизация» (modules/login/login_form_page.php): форма входа крупнее */
.auth-form .ab-phone {
    max-width: 30rem;
}

.auth-form .ab-phone--lg .ab-phone__step {
    gap: 1.25rem;
}

.auth-form .ab-phone--lg .ab-phone__title {
    font-size: var(--text-lg, 1.125rem);
}

.auth-form .ab-phone--lg .ab-phone__note,
.auth-form .ab-phone--lg .ab-phone__lead,
.auth-form .ab-phone--lg .ab-phone__alt,
.auth-form .ab-phone--lg .ab-phone__links .auth-link {
    font-size: var(--text-base, .875rem);
}