/* =====================================================================
   Личный кабинет покупателя (tshop_2 / versions v2):
   вход, регистрация, восстановление доступа, профиль, история заказов.

   Всё scoped под .lk. Токены — как у оформления заказа (checkout2.css).
   Поля оставлены в обёртке .form-field: общий обработчик .site-ajax-form (main.js)
   ищет её, чтобы вывести .form-field__error и повесить .form-control--error на инпут.
   main.css рисует .form-field > label абсолютной «плавающей» меткой, а ошибку —
   абсолютной плашкой: ниже это сбрасывается.
   ===================================================================== */

.lk {
	--lk-accent:     var(--color-maintheme, #2563eb);
	--lk-accent-050: color-mix(in srgb, var(--lk-accent) 7%, #fff);
	--lk-accent-150: color-mix(in srgb, var(--lk-accent) 20%, #fff);
	--lk-accent-ink: #fff;
	--lk-surface:    #fff;
	--lk-surface-2:  #f7f8fa;
	--lk-border:     #e6e8ec;
	--lk-border-2:   #d4d8df;
	--lk-text:       #14171f;
	--lk-muted:      #5f6673;
	--lk-faint:      #8b93a1;
	--lk-success:    #15803d;
	--lk-success-bg: #ecfdf3;
	--lk-warn:       #b45309;
	--lk-warn-bg:    #fffbeb;
	--lk-danger:     #c81e1e;
	--lk-danger-bg:  #fef2f2;
	--lk-radius:     16px;
	--lk-radius-sm:  10px;
	--lk-shadow:     0 1px 2px rgba(16,24,40,.04), 0 2px 10px rgba(16,24,40,.05);
	--lk-ring:       0 0 0 3px color-mix(in srgb, var(--lk-accent) 22%, transparent);

	color: var(--lk-text);
	font-size: 15px;
	line-height: 1.5;
	padding: 32px 0 56px;
}
.lk *, .lk *::before, .lk *::after { box-sizing: border-box; }
.lk h1, .lk h2, .lk h3, .lk p { margin: 0; }
.lk a { color: var(--lk-accent); text-decoration: none; }
.lk a:hover { text-decoration: underline; }
.lk [hidden] { display: none !important; }

/* ---------- кнопки ---------- */
.lk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 12px 22px;
	border: 1px solid transparent; border-radius: 12px;
	font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2;
	cursor: pointer; text-decoration: none !important; white-space: nowrap;
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.lk-btn:focus-visible { outline: none; box-shadow: var(--lk-ring); }
.lk-btn--primary { background: var(--lk-accent); color: var(--lk-accent-ink); }
.lk-btn--primary:hover { background: var(--color-mainthemeHover, color-mix(in srgb, var(--lk-accent) 88%, #000)); }
.lk-btn--secondary { background: var(--lk-surface); color: var(--lk-text); border-color: var(--lk-border-2); }
.lk-btn--secondary:hover { border-color: var(--lk-faint); }
.lk-btn--danger { background: var(--lk-surface); color: var(--lk-danger); border-color: color-mix(in srgb, var(--lk-danger) 45%, #fff); }
.lk-btn--danger:hover { background: var(--lk-danger-bg); }
.lk-btn--danger-solid { background: var(--lk-danger); color: #fff; }
.lk-btn--ghost { background: transparent; color: var(--lk-muted); border-color: transparent; }
.lk-btn--ghost:hover { color: var(--lk-text); background: var(--lk-surface-2); }
.lk-btn--block { width: 100%; }
.lk-btn--sm { min-height: 40px; padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.lk-btn[disabled] { opacity: .6; cursor: default; }

/* ---------- поля ---------- */
.lk .form-field.lk-field { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.lk .lk-label,
.lk .form-field.lk-field > label.lk-label {
	position: static; padding: 0; border: 0; transform: none; pointer-events: auto; opacity: 1; background: none;
	font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--lk-text);
}
.lk-req { color: var(--lk-danger); margin-left: 2px; }
.lk-opt { color: var(--lk-faint); font-weight: 400; }
.lk-input-wrap { position: relative; }
.lk-input {
	display: block; width: 100%; min-height: 48px; margin: 0;
	padding: 12px 14px;
	background: var(--lk-surface); color: var(--lk-text);
	border: 1px solid var(--lk-border-2); border-radius: 12px;
	font: inherit; font-size: 16px; /* 16px — без автозума на iOS */
	transition: border-color .15s, box-shadow .15s;
}
.lk-input::placeholder { color: var(--lk-faint); opacity: 1; }
.lk-input:hover { border-color: var(--lk-faint); }
.lk-input:focus { outline: none; border-color: var(--lk-accent); box-shadow: var(--lk-ring); }
.lk-input-wrap .lk-input { padding-right: 48px; }
.lk-input-action {
	position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
	width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px;
	background: transparent; color: var(--lk-faint); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.lk-input-action:hover { color: var(--lk-text); background: var(--lk-surface-2); }
.lk-input-action:focus-visible { outline: none; box-shadow: var(--lk-ring); }
.lk-hint { font-size: 13px; color: var(--lk-muted); }

/* ошибка от общего обработчика форм — в потоке, под полем */
.lk .form-control--error,
.lk .lk-input.form-control--error { border-color: var(--lk-danger) !important; box-shadow: none; }
.lk .form-control--error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lk-danger) 18%, transparent) !important; }
/* порядок в поле: метка → инпут → ошибка → подсказка (ошибку main.js добавляет в конец) */
.lk .form-field.lk-field > .lk-input,
.lk .form-field.lk-field > .lk-input-wrap,
.lk .form-field.lk-field > .lk-check { order: 1; }
.lk .form-field.lk-field > .lk-hint { order: 3; }
.lk .form-field__error {
	position: static; display: block; order: 2;
	margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
	color: var(--lk-danger); font-size: 13px; line-height: 1.35; font-weight: 400;
}
.lk .form-field__error::before { content: none; }
/* общие ошибки формы (ключи auth/general без своего поля) */
.lk .form-field.lk-form-error { display: block; }
.lk .form-field.lk-form-error .form-field__error {
	padding: 10px 12px; border-radius: 10px; background: var(--lk-danger-bg); border: 1px solid color-mix(in srgb, var(--lk-danger) 25%, #fff);
}

/* чекбокс согласия */
.lk .form-field.lk-check-field { gap: 4px; }
.lk-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--lk-muted); line-height: 1.45; }
/* main.css: .form-field > label — абсолютная «плавающая» метка; для чекбокса сбрасываем */
.lk .form-field > label.lk-check { position: static; padding: 0; border: 0; transform: none; pointer-events: auto; opacity: 1; background: none; }
.lk-check input {
	flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lk-accent); cursor: pointer;
	position: static; appearance: auto; -webkit-appearance: checkbox;
}

/* сетки полей */
.lk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
.lk-grid--1 { grid-template-columns: minmax(0, 1fr); }
.lk-grid .lk-span-2 { grid-column: 1 / -1; }

/* сегмент «частное лицо / организация» */
.lk-seg {
	display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--lk-surface-2); border: 1px solid var(--lk-border);
}
.lk-seg__opt { position: relative; margin: 0; cursor: pointer; }
.lk-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.lk-seg__opt span {
	display: inline-flex; align-items: center; min-height: 38px; padding: 8px 16px; border-radius: 9px;
	font-size: 14px; font-weight: 500; color: var(--lk-muted); transition: background-color .15s, color .15s;
}
.lk-seg__opt input:checked + span { background: var(--lk-surface); color: var(--lk-text); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.lk-seg__opt input:focus-visible + span { box-shadow: var(--lk-ring); }

/* раскрывающаяся необязательная группа */
.lk-more { border: 1px dashed var(--lk-border-2); border-radius: 12px; }
.lk-more > summary {
	list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 500; font-size: 14px; color: var(--lk-text);
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.lk-more > summary::-webkit-details-marker { display: none; }
.lk-more > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--lk-faint); border-bottom: 2px solid var(--lk-faint); transform: rotate(45deg); transition: transform .15s; flex: none; margin-top: -4px; }
.lk-more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.lk-more__hint { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--lk-faint); }
.lk-more__body { padding: 4px 14px 16px; }

/* ---------- карточки и секции ---------- */
.lk-card {
	background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius);
	box-shadow: var(--lk-shadow); padding: 24px;
}
.lk-section + .lk-section { margin-top: 16px; }
.lk-section__head { margin-bottom: 18px; }
.lk-section__title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.lk-section__sub { font-size: 14px; color: var(--lk-muted); margin-top: 4px; }
.lk-stack { display: flex; flex-direction: column; gap: 16px; }

/* ---------- экраны входа/регистрации/восстановления ---------- */
.lk-auth { display: flex; justify-content: center; }
.lk-auth__card { width: 100%; max-width: 440px; }
.lk-auth__card--wide { max-width: 680px; }
.lk-auth__head { margin-bottom: 22px; }
.lk-auth__title { font-size: 26px; font-weight: 700; line-height: 1.2; }
.lk-auth__sub { color: var(--lk-muted); margin-top: 6px; }
.lk-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lk-auth__footer { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--lk-border); text-align: center; color: var(--lk-muted); font-size: 14px; }
.lk-auth__footer a { font-weight: 600; }
.lk-auth .lk-btn--primary { margin-top: 4px; }
.lk-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.lk-fieldset__legend { padding: 0; margin-bottom: 12px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--lk-faint); }
.lk-divider { height: 1px; background: var(--lk-border); margin: 4px 0; }

/* в модальном окне (вход/восстановление открываются в модалке) — без внешних отступов и рамки */
.tingle-modal .lk { padding: 0; }
.tingle-modal .lk .container { padding: 0; max-width: none; }
.tingle-modal .lk-auth__card.lk-card { border: 0; box-shadow: none; padding: 4px; }
.tingle-modal .lk-auth__title { font-size: 22px; }

/* ---------- раскладка кабинета: меню + контент ---------- */
.lk-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.lk-nav { position: sticky; top: 20px; }
.lk-nav__user { display: flex; align-items: center; gap: 12px; padding: 4px 4px 18px; border-bottom: 1px solid var(--lk-border); margin-bottom: 10px; }
.lk-avatar {
	flex: none; width: 44px; height: 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--lk-accent-150); color: color-mix(in srgb, var(--lk-accent) 80%, #000); font-weight: 700; font-size: 16px;
}
.lk-nav__name { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.lk-nav__email { font-size: 13px; color: var(--lk-muted); overflow-wrap: anywhere; }
.lk-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lk-nav__link {
	display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 10px;
	color: var(--lk-text) !important; text-decoration: none !important; font-weight: 500; border: 0; background: none; width: 100%; font: inherit; cursor: pointer; text-align: left;
}
.lk-nav__link svg { flex: none; color: var(--lk-faint); }
.lk-nav__link:hover { background: var(--lk-surface-2); }
.lk-nav__link.is-active { background: var(--lk-accent-050); color: var(--lk-accent) !important; font-weight: 600; }
.lk-nav__link.is-active svg { color: var(--lk-accent); }
.lk-nav__count { margin-left: auto; min-width: 24px; padding: 1px 8px; border-radius: 12px; background: var(--lk-surface-2); color: var(--lk-muted); font-size: 12px; font-weight: 600; text-align: center; }
.lk-nav__sep { height: 1px; background: var(--lk-border); margin: 8px 0; }
.lk-nav__logout { color: var(--lk-muted) !important; }
.lk-nav form { margin: 0; }

.lk-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.lk-page-title { font-size: 28px; font-weight: 700; line-height: 1.2; }
.lk-page-sub { color: var(--lk-muted); margin-top: 4px; }

/* панель сохранения профиля */
.lk-savebar {
	position: sticky; bottom: 16px; z-index: 20; margin-top: 16px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	padding: 12px 16px; border-radius: 14px; background: var(--lk-text); color: #fff;
	box-shadow: 0 10px 30px rgba(16,24,40,.25);
}
.lk-savebar__text { font-size: 14px; }
.lk-savebar__actions { display: flex; gap: 8px; }
.lk-savebar .lk-btn--ghost { color: #d0d5dd; }
.lk-savebar .lk-btn--ghost:hover { color: #fff; background: rgba(255,255,255,.08); }

/* строка «параметр — действие» (безопасность) */
.lk-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lk-row__title { font-weight: 500; }
.lk-row__sub { font-size: 14px; color: var(--lk-muted); }

/* ---------- история заказов ---------- */
.lk-orders { display: flex; flex-direction: column; gap: 12px; }
.lk-order { background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius); box-shadow: var(--lk-shadow); overflow: hidden; }
.lk-order > summary {
	list-style: none; cursor: pointer; padding: 18px 20px;
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
}
.lk-order > summary::-webkit-details-marker { display: none; }
.lk-order > summary:focus-visible { outline: none; box-shadow: inset var(--lk-ring); }
.lk-order__title { font-weight: 600; font-size: 16px; }
.lk-order__date { font-size: 13px; color: var(--lk-muted); margin-top: 2px; }
.lk-order__total { font-weight: 600; white-space: nowrap; }
.lk-order__chev { width: 10px; height: 10px; border-right: 2px solid var(--lk-faint); border-bottom: 2px solid var(--lk-faint); transform: rotate(45deg); transition: transform .15s; margin: -4px 4px 0; }
.lk-order[open] > summary .lk-order__chev { transform: rotate(-135deg); margin-top: 4px; }
.lk-order__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lk-order__body { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--lk-border); padding-top: 18px; }

.lk-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 13px; font-weight: 500; background: var(--lk-surface-2); color: var(--lk-muted); white-space: nowrap; }
.lk-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.lk-badge--success { background: var(--lk-success-bg); color: var(--lk-success); }
.lk-badge--warn { background: var(--lk-warn-bg); color: var(--lk-warn); }
.lk-badge--danger { background: var(--lk-danger-bg); color: var(--lk-danger); }
.lk-badge--info { background: var(--lk-accent-050); color: var(--lk-accent); }

.lk-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lk-meta__item { padding: 12px 14px; border-radius: 12px; background: var(--lk-surface-2); }
.lk-meta__label { font-size: 12px; color: var(--lk-faint); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.lk-meta__value { margin-top: 2px; font-weight: 500; overflow-wrap: anywhere; }

.lk-delivery { border: 1px solid var(--lk-border); border-radius: 12px; padding: 16px; }
.lk-delivery__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 600; }
.lk-ozon-mark { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #005bff; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.lk-delivery__rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 14px; }
.lk-delivery__rows dt { color: var(--lk-muted); }
.lk-delivery__rows dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.lk-delivery__state { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; background: var(--lk-surface-2); color: var(--lk-text); }
.lk-delivery__state--success { background: var(--lk-success-bg); color: var(--lk-success); }
.lk-delivery__state--danger { background: var(--lk-danger-bg); color: var(--lk-danger); }
.lk-delivery__state--warn { background: var(--lk-warn-bg); color: var(--lk-warn); }
.lk-cancel { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lk-cancel select { min-height: 44px; flex: 1 1 260px; padding: 8px 12px; border: 1px solid var(--lk-border-2); border-radius: 10px; background: #fff; font: inherit; font-size: 15px; }
.lk-cancel__msg { width: 100%; font-size: 13px; }
.lk-cancel__msg--error { color: var(--lk-danger); }

.lk-items { display: flex; flex-direction: column; }
.lk-items__title { font-weight: 600; margin-bottom: 4px; }
.lk-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--lk-border); }
.lk-item:last-child { border-bottom: 0; }
.lk-item__img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--lk-surface-2); border: 1px solid var(--lk-border); }
.lk-item__name { font-weight: 500; line-height: 1.35; }
.lk-item__sub { font-size: 13px; color: var(--lk-muted); margin-top: 2px; }
.lk-item__sum { font-weight: 600; white-space: nowrap; text-align: right; }
.lk-items__total { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font-weight: 600; }

.lk-empty { text-align: center; padding: 48px 24px; }
.lk-empty__icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--lk-accent-050); color: var(--lk-accent); display: flex; align-items: center; justify-content: center; }
.lk-empty__title { font-size: 18px; font-weight: 600; }
.lk-empty__text { color: var(--lk-muted); margin: 6px 0 18px; }

/* ---------- адаптив ---------- */
@media (max-width: 960px) {
	.lk-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.lk-nav { position: static; }
	.lk-nav.lk-card { padding: 6px; }
	.lk-nav__user { display: none; }
	.lk-nav__list { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
	.lk-nav__list::-webkit-scrollbar { display: none; }
	.lk-nav__list li { flex: none; }
	.lk-nav__sep { display: none; }
	.lk-nav__link { min-height: 40px; padding: 8px 14px; white-space: nowrap; }
	.lk-nav__count { margin-left: 4px; }
}
@media (max-width: 640px) {
	.lk { padding: 16px 0 40px; font-size: 15px; }
	.lk-card { padding: 18px 16px; border-radius: 14px; }
	.lk-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.lk-page-title { font-size: 24px; }
	.lk-auth__title { font-size: 23px; }
	.lk-seg { display: flex; }
	.lk-seg__opt { flex: 1; }
	.lk-seg__opt span { justify-content: center; width: 100%; }
	/* сводка заказа — компактным списком «название — значение» */
	.lk-meta { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 2px 14px; border-radius: 12px; background: var(--lk-surface-2); }
	.lk-meta__item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--lk-border); }
	.lk-meta__item:last-child { border-bottom: 0; }
	.lk-meta__label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--lk-muted); flex: none; }
	.lk-meta__value { margin: 0; text-align: right; }
	.lk-order > summary { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; row-gap: 6px; }
	.lk-order > summary .lk-order__total { grid-column: 1; grid-row: 2; }
	.lk-order > summary .lk-order__chev { grid-column: 2; grid-row: 1 / span 2; }
	.lk-order__body { padding: 16px; }
	.lk-delivery__rows { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.lk-delivery__rows dd { margin-bottom: 8px; }
	.lk-cancel .lk-btn, .lk-cancel select { width: 100%; flex-basis: 100%; }
	.lk-savebar { bottom: 8px; }
	.lk-savebar__actions { width: 100%; }
	.lk-savebar__actions .lk-btn { flex: 1; }
	.lk-row .lk-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.lk * { transition: none !important; }
}