/*
 * Окна «Регистрация», «Вход», «Восстановить пароль» (front/footer.blade.php, js/auth-forms.js).
 * Вход через Google и Facebook — сразу под заголовком; согласие на обработку данных — прямо над кнопкой;
 * на телефоне (до 1000 px) окно во весь экран, а согласие с кнопкой всегда видны внизу.
 * Старые правила main.css (.reg-in-popup, .close, .check) перекрываются через .vauth.
 */
html.vauth-open { overflow: hidden; }

.vauth .plenka { background-color: rgba(24, 28, 36, .45); }
.vauth .reg-in-popup { width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain; padding: 28px 32px 26px; border-radius: 18px; background: #fff; box-shadow: 0 24px 64px rgba(20, 30, 50, .24); }
.vauth .reg-in-popup h2 { margin: 0 48px 6px 0; font-size: 28px; line-height: 34px; font-weight: 900; color: #303030; }

/* «✕» — светлый круг */
.vauth .close { top: 18px; right: 18px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: #F0F2F4; -webkit-tap-highlight-color: transparent; }
.vauth .close svg { width: 14px; height: 14px; fill: #303030; }
.vauth .close:focus { outline: none; }
.vauth .close:focus-visible { box-shadow: 0 0 0 2px #303030; }

/* «Уже есть аккаунт? Войти» / «Нет аккаунта? Регистрация» — под заголовком */
.vauth-switch { margin: 0 0 18px; font-size: 15px; line-height: 21px; color: #6B7178; }
.vauth-switch a { color: #1C3697 !important; font-weight: 700; text-decoration: none; text-transform: none; }
/* «Регистрация» в окне входа — та же ссылка .reg-from-sign (по ней main.js переключает окно), без её старого вида */
.vauth-switch .reg-from-sign { display: inline; margin: 0; font-size: inherit; text-align: left; }

/* Google и Facebook — две кнопки в ряд */
.vauth-social { display: flex; gap: 10px; }
.vauth .vauth-social a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; width: auto; height: 48px; margin: 0;
    padding: 0 10px; border-radius: 12px; }
.vauth .vauth-social .reg-with-facebook { background: #1877F2; }
.vauth .vauth-social .reg-with-google { border: 1px solid #DADDE1; background: #fff; }
.vauth .vauth-social img { display: block; width: auto; height: 20px; }
/* «или» — линия с надписью посередине */
.vauth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #9A9A9A; font-size: 13px; line-height: 16px; text-transform: lowercase; }
.vauth-or::before,
.vauth-or::after { content: ''; flex: 1 1 auto; height: 1px; background: #E6E8EB; }

/* поля: 16 px (иначе iPhone приближает страницу), высота 48, скругление 12 */
.vauth .reg-in-popup input[type=text],
.vauth .reg-in-popup input[type=tel],
.vauth .reg-in-popup input[type=email],
.vauth .reg-in-popup input[type=password] { display: block; width: 100%; height: 48px; margin: 0 0 12px; padding: 0 14px; border: 1px solid #DADDE1;
    border-radius: 12px; background: #fff; color: #303030; font-size: 16px; line-height: 22px; box-shadow: none; -webkit-appearance: none; appearance: none; }
.vauth .reg-in-popup input::placeholder { color: #8A8F96; opacity: 1; }
.vauth .reg-in-popup input:focus { border-color: #FEDC29; box-shadow: 0 0 0 3px rgba(254, 220, 41, .35); outline: none; }
/* ошибка — под полем (saveForm ставит её сразу после поля) */
.vauth .reg-in-popup label.error { display: block; margin: -6px 2px 10px; transform: none; font-size: 13px !important; line-height: 17px; }
/* имя и фамилия — в одну строку */
.vauth-pair { display: flex; gap: 10px; }
.vauth-pair > div { flex: 1 1 0; min-width: 0; }
/* пароль — с «глазом» справа */
.vauth-pass { position: relative; }
.vauth .vauth-pass input { padding-right: 50px; }
.vauth-eye { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0;
    padding: 0; border: 0; background: none; color: #8A8F96; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vauth-eye .ui-ic { width: 20px; height: 20px; }
.vauth-eye .ui-ic-eye-off,
.vauth-eye.is-on .ui-ic-eye { display: none; }
.vauth-eye.is-on .ui-ic-eye-off { display: block; }
.vauth-eye:focus { outline: none; }
.vauth-eye:focus-visible { color: #303030; }

/* флажки «Запомнить» и согласие */
.vauth .check label { margin: 0; font-size: 14px; line-height: 20px; color: #4F4F4F; cursor: pointer; }
.vauth .check .checkbox { flex: 0 0 20px; min-width: 20px; max-width: 20px; height: 20px; margin: 0 10px 0 0; border-radius: 5px; }
.vauth-remember { margin: 2px 0 14px; }
.vauth .vauth-agree { margin: 0 0 14px; }
.vauth .vauth-agree label { align-items: flex-start; font-size: 13px; line-height: 18px; }
.vauth .vauth-agree label > span:last-child { min-width: 0; }
.vauth .vauth-agree a { color: #1C3697; text-decoration: underline; }
.vauth .aggreement-checkbox.error-input { box-shadow: 0 0 0 3px rgba(255, 55, 55, .2); }
/* «Запомнить» слева, «Забыли пароль?» справа */
.vauth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 16px; }
.vauth-forgot { color: #1C3697 !important; font-size: 14px; line-height: 20px; text-decoration: none !important; white-space: nowrap; }

.vauth .def-yellow-btn { height: 52px; padding: 0 16px; border-radius: 12px; color: #303030 !important; font-size: 16px; font-weight: 800; }
@media (hover: hover) {
    .vauth .def-yellow-btn:hover { background: #FFD600; }
    .vauth .vauth-social .reg-with-google:hover { background: #F7F8FA; }
    .vauth .vauth-social .reg-with-facebook:hover { background: #166FE0; }
    .vauth .close:hover { background: #E6E8EB; }
}

/* ── телефон: окно во весь экран; низ (согласие и кнопка) — сразу под полями, а если форма не помещается на экран
   (маленький телефон), прилипает к низу экрана с тенью (.is-long ставит auth-forms.js) ── */
@media (max-width: 1000px) {
    .vauth .reg-in-popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; height: auto; max-height: none;
        transform: none; padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 0; border-radius: 0; box-shadow: none; }
    .vauth .reg-in-popup h2 { font-size: 26px; line-height: 32px; }
    .vauth .close { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
    .vauth-foot { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 2; margin: 4px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: #fff; transition: box-shadow .2s ease; }
    .vauth .reg-in-popup.is-long .vauth-foot { box-shadow: 0 -6px 16px rgba(30, 40, 60, .08); }
    .vauth .vauth-agree { margin-bottom: 12px; }
}
@media (max-width: 360px) {
    .vauth-pair { display: block; }
}