/* ============================================================
   Авторизация / Регистрация / Восстановление пароля — KSK Shop
   ============================================================ */
.auth-page {
    background-color: transparent;
    padding: clamp(20px, 2vw, 40px) 16px;
    min-height: 50vh;
}
.auth-card {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: clamp(16px, 1.25vw, 24px);
    box-shadow: 0 8px 40px rgba(26, 17, 16, 0.06);
    padding: clamp(20px, 1.8vw, 36px);
}
.auth-card--wide {
    max-width: 640px;
}
.auth-card__title {
    font-size: clamp(22px, 1.6vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 6px;
    color: #1A1110;
}
.auth-card__subtitle {
    font-size: clamp(14px, 0.9vw, 16px);
    color: rgba(26, 17, 16, 0.55);
    margin: 0 0 22px;
}

/* Табы */
.auth-tabs {
    display: flex;
    gap: 6px;
    background: #F3F4F6;
    border-radius: 100px;
    padding: 5px;
    margin-bottom: 24px;
}
.auth-tabs__item {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border-radius: 100px;
    font-size: clamp(13px, 0.85vw, 15px);
    font-weight: 600;
    color: rgba(26, 17, 16, 0.6);
    text-decoration: none;
    transition: background-color .2s, color .2s;
    white-space: nowrap;
}
.auth-tabs__item:hover {
    color: #1A1110;
}
.auth-tabs__item--active {
    background: #fff;
    color: #DA2438;
    box-shadow: 0 2px 8px rgba(26, 17, 16, 0.08);
}

/* Поля */
.auth-field {
    margin-bottom: 16px;
}
.auth-field__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1A1110;
    margin-bottom: 8px;
}
.auth-field__label .req {
    color: #DA2438;
}
.auth-field__control {
    position: relative;
}
.auth-input {
    width: 100%;
    height: 52px;
    background: #F3F4F6;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0 16px;
    font-size: 16px;
    color: #1A1110;
    outline: none;
    transition: border-color .2s, background-color .2s;
    box-sizing: border-box;
}
.auth-input:focus {
    border-color: #DA2438;
    background: #fff;
}
textarea.auth-input {
    height: auto;
    min-height: 96px;
    padding: 12px 16px;
    resize: vertical;
}
select.auth-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231A1110' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Кнопка-глаз для пароля */
.auth-input--password { padding-right: 48px; }
/* Скрыть встроенную иконку показа пароля в Edge/IE (дублирует нашу) */
.auth-input::-ms-reveal,
.auth-input::-ms-clear { display: none; width: 0; height: 0; }
.auth-eye {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    cursor: pointer;
    color: rgba(26, 17, 16, 0.45);
    background: none;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-eye:hover { color: #DA2438; }

/* Кнопка отправки */
.auth-btn {
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 12px;
    background: #DA2438;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s, transform .05s;
    margin-top: 6px;
}
.auth-btn:hover { background: #c01f31; }
.auth-btn:active { transform: translateY(1px); }

/* Вторичная «призрачная» кнопка (напр. «Выйти» на дозаполнении) */
.auth-btn--ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 12px;
    background: transparent;
    color: rgba(26, 17, 16, 0.55);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 10px;
    transition: background-color .15s, color .15s;
}
.auth-btn--ghost:hover { background: rgba(26, 17, 16, 0.05); color: #1A1110; }

/* Чекбокс «запомнить» */
.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(26, 17, 16, 0.7);
    cursor: pointer;
    margin-bottom: 16px;
    user-select: none;
}
.auth-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: #DA2438;
    cursor: pointer;
}

/* Ссылки */
.auth-links {
    margin-top: 18px;
    text-align: center;
    font-size: 14px;
    color: rgba(26, 17, 16, 0.6);
}
.auth-links a {
    color: #DA2438;
    text-decoration: none;
    font-weight: 600;
}
.auth-links a:hover { text-decoration: underline; }
.auth-links p { margin: 6px 0; }

/* Согласие */
.auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(26, 17, 16, 0.6);
    margin: 4px 0 18px;
}
.auth-consent input {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: #DA2438;
    flex-shrink: 0;
}
.auth-consent a { color: #DA2438; }

/* Сетка регистрации (2 колонки на десктопе) */
.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
.auth-grid .auth-field--full { grid-column: 1 / -1; }
@media (max-width: 575px) {
    .auth-grid { grid-template-columns: 1fr; }
}

/* Сообщения (ошибки/успех) — приводим штатные Bitrix-блоки в стиль */
.auth-card .errortext,
.auth-card .error-text {
    display: block;
    background: rgba(218, 36, 56, 0.08);
    color: #DA2438;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 18px;
}
.auth-card .notetext,
.auth-card .successtext {
    display: block;
    background: rgba(23, 195, 54, 0.1);
    color: #149c2b;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 18px;
}

/* Капча */
.auth-captcha img {
    border-radius: 12px;
    display: block;
    margin-bottom: 10px;
}

.auth-hint {
    font-size: 12px;
    color: rgba(26, 17, 16, 0.45);
    margin-top: 6px;
}

/* Плавный переход между формами (вход/регистрация/восстановление) */
@keyframes authSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.auth-anim {
    animation: authSlideIn .32s cubic-bezier(.22, .61, .36, 1);
}
/* Карточка мягко появляется при загрузке страницы */
.auth-card {
    animation: authSlideIn .4s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
    .auth-anim, .auth-card { animation: none; }
}

/* Переключаемые табы со скользящим индикатором (страница /login/) */
.auth-tabs--switch {
    position: relative;
}
.auth-tabs--switch .auth-tabs__pill {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 80px;
    height: calc(100% - 10px);
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(26, 17, 16, 0.08);
    transition: left .32s cubic-bezier(.22, .61, .36, 1), width .32s cubic-bezier(.22, .61, .36, 1);
    z-index: 0;
}
.auth-tabs--switch .auth-tabs__item {
    position: relative;
    z-index: 1;
    background: none !important;
    box-shadow: none !important;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

/* Панели форм: показываем активную с анимацией */
.auth-panel {
    display: none;
}
.auth-panel--active {
    display: block;
    animation: authSlideIn .32s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
    .auth-tabs--switch .auth-tabs__pill { transition: none; }
    .auth-panel--active { animation: none; }
}

/* Кнопки входа через соцсети */
.auth-social {
    margin-top: 24px;
}
.auth-social__divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: rgba(26, 17, 16, 0.4);
    font-size: 13px;
    margin-bottom: 16px;
}
.auth-social__divider::before,
.auth-social__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(26, 17, 16, 0.12);
}
.auth-social__divider span {
    padding: 0 12px;
}
.auth-social__btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.auth-social__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    transition: opacity .12s ease-out, transform .05s;
}
.auth-social__btn span { line-height: 1; }
.auth-social__btn:hover { opacity: .85; }
.auth-social__btn:active { transform: scale(.98); }
.auth-social__btn svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
}
.auth-social__btn span { padding: 0 40px; }
.auth-social__btn--vkontakte { background: #0077FF; }
.auth-social__btn--yandex { background: #000000; }
.auth-social__btn--yandexoauth { background: #000000; }
.auth-social__btn--google { background: #fff; color: #1A1110; border: 1px solid rgba(26, 17, 16, 0.18); }
.auth-social__btn--mailru, .auth-social__btn--mail { background: #005FF9; }
.auth-social__btn--odnoklassniki { background: #EE8208; }

/* Двухколоночная раскладка входа: слева форма, справа соцсети */
.auth-card--cols { max-width: 860px; }
.auth-cols {
    display: flex;
    gap: clamp(24px, 2.5vw, 44px);
    align-items: stretch;
}
.auth-col--main { flex: 1 1 56%; min-width: 0; }
.auth-col--side {
    flex: 1 1 44%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(26, 17, 16, 0.08);
    padding-left: clamp(24px, 2.5vw, 44px);
}
.auth-col--side .auth-social { margin-top: 0; }
.auth-side-note {
    font-size: 13px;
    color: rgba(26, 17, 16, 0.45);
    margin-top: 16px;
    text-align: center;
}

/* Скрыть заголовок страницы и хлебные крошки на /login/, отступ как в кабинете */
section.about:has(.auth-page) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}
section.about:has(.auth-page) h2.title-page,
section.about:has(.auth-page) .breadcrumbs {
    display: none !important;
}
/* Убираем боковой padding контейнера — отступ задаёт сам .auth-page */
section.about:has(.auth-page) .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

/* Соцсети показываем только на вкладке «Вход» */
.auth-card--cols.is-register .auth-col--side { display: none; }
.auth-card--cols.is-register .auth-col--main { flex-basis: 100%; }

/* Кнопка «Забыли пароль?» */
.auth-forgot {
    display: block;
    text-align: center;
    margin-top: 14px;
    padding: 12px;
    border-radius: 12px;
    background: #F3F4F6;
    color: #1A1110;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s;
}
.auth-forgot:hover { background: #e9eaec; }
@media (max-width: 767px) {
    .auth-cols { flex-direction: column; gap: 24px; }
    .auth-col--side {
        border-left: 0;
        border-top: 1px solid rgba(26, 17, 16, 0.08);
        padding-left: 0;
        padding-top: 24px;
    }
}