/* [TB-LK] Служебные стили внедрения: иконка аккаунта в шапке, всплывашка входа,
   блок ошибок и отступы страниц ЛК. Цвета и компоненты — из макета (lk.css). */

/* Иконка аккаунта в шапке — в ряд к поиску и корзине */
.tb-auth-icon {
    display: flex;
    align-items: center;
    height: 100%;
}

/* размер берём как у корзины темы (22px), иначе иконка выглядит мельче соседних */
.tb-auth-icon__link {
    padding: 0 12px;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.tb-auth-icon__link i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* на мобилке иконка живёт между бургером и логотипом — там тесно,
   поэтому без боковых паддингов и без отступа темы */
@media (max-width: 900px) {
    .l-header .tb-auth-icon {
        margin-left: 0;
    }

    .l-header .tb-auth-icon__link {
        padding: 0;
    }
}

.tb-auth-icon__link:hover {
    color: var(--color-header-middle-text-hover, #CA8C8C);
}

/* Тема (us-core) навешивает инпутам line-height:42px и inset-тень — гасим,
   чтобы поля выглядели как в вёрстке фронтендера */
.tb-lk-page .form__item input,
.tb-lk-page .form__item textarea {
    height: auto;
    line-height: 1.4;
    box-shadow: none;
}

.tb-lk-page .form-item__input::placeholder,
.tb-lk-page .form-item__textarea::placeholder {
    color: #999 !important;
    opacity: 1;
}

/* Тема перебивает кнопки (цвет #323232, radius 4.8px, padding 8px 45px, вес 700) —
   возвращаем пилюли макета, как у .button в default.css вёрстки */
.tb-lk-page .button {
    color: var(--color-accent) !important;
    background: none;
    border: 1px solid var(--color-accent);
    border-radius: 50px !important;
    padding: 15px 35px !important;
    font-weight: 400 !important;
    font-size: var(--font-size-default) !important;
    line-height: 1 !important;
    text-transform: none;
    letter-spacing: normal;
}

.tb-lk-page .registration__button,
.tb-lk-page .button.tb-auth-popup__button {
    padding: 10px 24px !important;
    font-size: 16px !important;
}

.tb-lk-page .order__total .button {
    padding: 7px 18px !important;
    font-size: 12px !important;
}

/* в состоянии загрузки текст прячется под спиннер — правило должно бить
   принудительные цвета кнопок выше */
.tb-lk-page .button.button_loading,
.tb-lk-page .button.button_fill.button_loading {
    color: transparent !important;
}

.tb-lk-page .button:hover {
    background: var(--button-fill);
    color: var(--color-white) !important;
}

.tb-lk-page .button.button_fill {
    border: none;
    color: var(--color-white) !important;
    background: var(--button-fill);
}

.tb-lk-page .button.button_fill.button_white {
    background: var(--color-white);
    color: var(--color-accent) !important;
}

.tb-lk-page .button.button_fill.button_white:hover {
    background: var(--color-accent);
    color: var(--color-white) !important;
}

/* Заголовки как в default.css вёрстки */
.tb-lk-page h1 {
    font-size: var(--font-size-h1);
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

.tb-lk-page h2 {
    font-size: var(--font-size-h2);
    margin-bottom: 40px;
}

.tb-lk-page h3 {
    font-size: var(--font-size-h3);
    margin-bottom: 30px;
}

/* Контент ЛК идёт по контейнеру вёрстки (.container: 1400 + 20 паддинга) вместо
   1100px темы. Шапка и подвал остаются штатными, как на остальном сайте. */
.tb-lk-body .l-main .l-section-h {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.tb-lk-body .l-main .l-section {
    padding-left: 0;
    padding-right: 0;
}

.tb-lk-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px;
}

.tb-lk-page .registration {
    margin-top: 25px;
}

.tb-lk-page .personal-account {
    margin-top: 100px;
}

/* Мобильная шапка темы фиксированная (114px) и не отжимает контент — добавляем свой отступ */
@media (max-width: 1024px) {
    .tb-lk-page .registration {
        margin-top: 70px;
    }

    .tb-lk-page .personal-account {
        margin-top: 150px;
    }
}

/* Ошибки под формами */
.tb-lk-page .registration__error {
    margin-top: 20px;
    font-size: 14px;
    color: var(--color-accent);
}

.tb-lk-page .registration__error.registration__error_center {
    text-align: center;
}

/* Всплывашка входа (Group 152): дропдаун под иконкой аккаунта */
/* выше всплывающего меню Popup Maker (у него z-index 1000000),
   иначе форма входа открывается под меню */
.tb-auth-popup {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    margin: 0;
    padding: 0;
    max-width: none;
}

.tb-auth-popup[hidden] {
    display: none;
}

.tb-auth-popup__overlay {
    position: absolute;
    inset: 0;
}

/* Мобильный вариант: вход открывается из пункта меню, привязываться не к чему —
   окно по центру экрана, без стрелки, с затемнением. */
.tb-auth-popup.tb-auth-popup_center {
    display: grid;
    place-items: center;
    padding: 20px;
}

.tb-auth-popup_center .tb-auth-popup__overlay {
    background: rgba(0, 0, 0, 0.45);
}

.tb-auth-popup_center .tb-auth-popup__box {
    position: relative;
    top: auto;
    right: auto;
}

.tb-auth-popup_center .tb-auth-popup__box::before,
.tb-auth-popup_center .tb-auth-popup__box::after {
    display: none;
}

/* Иконка аккаунта в шапке всплывающего меню — слева от поиска, размер как у корзины.
   Позиция абсолютная: в потоке колонка узкая и иконка сжималась, наезжая на поиск
   (он в этом блоке тоже позиционирован абсолютно). */
.tb-auth-mmhi {
    position: absolute;
    top: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--color-accent, #9B2A2A);
}

.tb-auth-mmhi:hover {
    color: var(--color-accent, #9B2A2A);
    opacity: 0.7;
}

.tb-auth-popup__box {
    gap: 15px;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 16px;
    width: 350px;
    max-width: calc(100vw - 20px);
    padding: 25px;
    border-radius: 16px;
    background: var(--color-white);
    border: 1px solid var(--color-accent);
}

/* Хвостик к иконке: два треугольника — нижний цвета рамки, верхний цвета фона
   на 1px ниже, так стрелка выглядит продолжением обводки, а не отдельной фигурой.
   Горизонтальная позиция приходит из JS: стрелка целится в центр иконки. */
.tb-auth-popup__box::before,
.tb-auth-popup__box::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.tb-auth-popup__box::before {
    top: -10px;
    right: var(--tb-arrow-right, 30px);
    border-bottom: 10px solid var(--color-accent);
}

.tb-auth-popup__box::after {
    top: -9px;
    right: calc(var(--tb-arrow-right, 30px) + 1px);
    border-left-width: 9px;
    border-right-width: 9px;
    border-bottom: 9px solid var(--color-white);
}

.tb-auth-popup h3.title.tb-auth-popup__title {
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 0px;
}

.tb-auth-popup__form {
    gap: 15px;
    display: flex;
    flex-direction: column;
}

.tb-auth-popup__forgot {
    align-self: end;
    margin-top: -5px;
    font-size: 12px;
    color: var(--color-accent);
    text-decoration: underline;
}

.tb-auth-popup__error {
    font-size: 14px;
    color: var(--color-accent);
}

.tb-auth-popup .button.tb-auth-popup__button {
    width: 100%;
    padding: 10px 24px;
    font-size: 16px;
}

.tb-auth-popup__or {
    gap: 15px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
}

.tb-auth-popup__or::before,
.tb-auth-popup__or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.tb-auth-popup__reg {
    font-size: 14px;
    text-align: center;
}

.tb-auth-popup__reg-link {
    color: var(--color-accent);
    text-decoration: underline;
}

/* дев-подсказка с кодом регистрации (виден только под ?is_lk_dev=1) */
.tb-lk-page .registration__dev-code {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-accent);
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--color-accent-light);
}

/* ==================== Адресная книга в кабинете ==================== */

.tb-lk-page .addresses__list {
    gap: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin-bottom: 20px;
}

.tb-lk-page .address {
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
}

.tb-lk-page .address__head {
    gap: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.tb-lk-page .address__title {
    font-size: 16px;
    font-weight: 500;
}

.tb-lk-page .address__badge {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    color: var(--color-accent);
    background: var(--color-accent-light);
}

.tb-lk-page .address__value {
    font-size: 14px;
    line-height: 1.4;
}

.tb-lk-page .address__flat {
    margin-top: 4px;
    font-size: 13px;
    color: #999;
}

.tb-lk-page .address__actions {
    gap: 14px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 14px;
}

.tb-lk-page .address__action {
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
}

.tb-lk-page .address__action:hover {
    text-decoration: none;
}

.tb-lk-page .address__action_danger {
    color: #999;
}

.tb-lk-page .addresses__empty {
    margin-bottom: 20px;
    font-size: 14px;
    color: #999;
}

/* сетка та же, что у личных данных (.profile-form__content): две колонки,
   широкие поля на всю ширину — иначе поля формы слипаются без отступов */
.tb-lk-page .addresses__form {
    gap: 15px 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid var(--color-accent);
    border-radius: 16px;
}

.tb-lk-page .addresses__form .form__item_large {
    grid-column: 1/3;
}

@media (max-width: 490px) {
    .tb-lk-page .addresses__form {
        grid-template-columns: 1fr;
    }

    .tb-lk-page .addresses__form .form__item_large {
        grid-column: 1/2;
    }
}

.tb-lk-page .addresses__form[hidden] {
    display: none;
}

/* подсказки «из прошлых заказов»: заполняют поля одним кликом */
.tb-lk-page .addresses__recent {
    grid-column: 1/3;
}

.tb-lk-page .addresses__recent[hidden] {
    display: none;
}

.tb-lk-page .addresses__recent-label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--font-size-label);
    color: #666;
}

.tb-lk-page .addresses__recent-list {
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
}

.tb-lk-page .addresses__recent-item {
    padding: 8px 14px;
    border: 1px dashed var(--color-border);
    border-radius: 20px;
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
    color: var(--color-default);
    background: none;
    cursor: pointer;
}

.tb-lk-page .addresses__recent-item:hover {
    border-style: solid;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.tb-lk-page .addresses__recent-item_loading {
    opacity: 0.5;
    pointer-events: none;
}

.tb-lk-page .addresses__recent-flat {
    display: block;
    font-size: 11px;
    color: #999;
}

@media (max-width: 490px) {
    .tb-lk-page .addresses__recent {
        grid-column: 1/2;
    }
}

.tb-lk-page .addresses__form-actions {
    gap: 15px;
    display: flex;
    flex-wrap: wrap;
    grid-column: 1/3;
    margin-top: 5px;
}

@media (max-width: 490px) {
    .tb-lk-page .addresses__form-actions {
        grid-column: 1/2;
    }
}

.tb-lk-page .addresses__add {
    margin-bottom: 20px;
}

/* подсказка под полем (правило про дату рождения) */
.tb-lk-page .form-item__hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: #999;
}

.tb-lk-page .form-item__input[readonly] {
    background: #f6f6f6;
    color: #777;
}

/* плашка результата сохранения вместо alert */
.tb-lk-page .profile-notice {
    padding: 12px 18px;
    margin-bottom: 20px;
    border-radius: 12px;
    font-size: 14px;
    color: var(--color-accent);
    background: var(--color-accent-light);
}

.tb-lk-page .profile-notice[hidden] {
    display: none;
}

.tb-lk-page .profile-notice_error {
    color: #fff;
    background: var(--color-accent);
}

/* ==================== Адреса на оформлении заказа ==================== */
/* Здесь нет обёртки .tb-lk-page — стили живут в разметке чекаута */

.tb-lk-picker {
    gap: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.tb-lk-picker[hidden] {
    display: none;
}

.tb-lk-picker__label {
    font-size: 13px;
    color: #777;
}

.tb-lk-picker__select {
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    background: #fff;
}

.tb-lk-save {
    gap: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 13px;
}

.tb-lk-save[hidden] {
    display: none;
}

.tb-lk-save__link {
    color: #9B2A2A;
    text-decoration: underline;
}

.tb-lk-save__link:hover {
    text-decoration: none;
}

.tb-lk-save__form {
    gap: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.tb-lk-save__form[hidden] {
    display: none;
}

.tb-lk-save__input {
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
}

.tb-lk-save__button {
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    font: inherit;
    font-size: 14px;
    color: #fff;
    background: #9B2A2A;
    cursor: pointer;
}

.tb-lk-save__button:disabled {
    opacity: 0.6;
}

.tb-lk-save__msg_error {
    color: #9B2A2A;
}

/* [TEA-71] Подсказка в окне входа: человек пытался зарегистрироваться на уже
   заведённую почту, код ему больше не шлём — предлагаем войти. */
.tb-auth-popup__notice {
    margin: -6px 0 14px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--color-accent);
    background: var(--color-accent-light);
    border-radius: 10px;
}

/* [TEA-71] Заполнение шкалы уровней. В вёрстке ширина активной части была
   прибита к 70% — шкала показывала одно и то же независимо от оборота,
   и заказчик резонно спросил, почему «Гурман» не доходит до конца.
   Долю считает PHP и кладёт в переменную --tb-progress. */
.tb-lk-page .progress__bar::after {
    max-width: var(--tb-progress, 0%);
}

/* Шкала про оборот, а не про баллы — подпись снимает путаницу */
.tb-lk-page .progress__bar-note {
    grid-column: 1/3;
    margin-top: 55px;
    font-size: 13px;
    color: var(--color-text-light, #7a7a7a);
}

/* [TEA-71 14.09] Журнал бонусов на странице лояльности. Заказчик просил ссылку
   прямо на странице, без отдельного пункта меню — раскрывается на месте. */
.tb-lk-page .tb-bonus-log__link {
    display: inline-block;
    cursor: pointer;
    font-size: 15px;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    list-style: none;
}

.tb-lk-page .tb-bonus-log__link::-webkit-details-marker { display: none; }

.tb-lk-page .tb-bonus-log__table {
    width: 100%;
    margin-top: 14px;
    border-collapse: collapse;
    font-size: 15px;
}

.tb-lk-page .tb-bonus-log__table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.tb-lk-page .tb-bonus-log__date {
    width: 30%;
    color: var(--color-text-light, #7a7a7a);
    white-space: nowrap;
}

.tb-lk-page .tb-bonus-log__note {
    display: block;
    font-size: 13px;
    color: var(--color-text-light, #7a7a7a);
}

.tb-lk-page .tb-bonus-log__sum {
    width: 20%;
    text-align: right;
    white-space: nowrap;
    color: var(--color-accent);
}

.tb-lk-page .tb-bonus-log__sum_minus {
    color: var(--color-default);
}