/* Стили личного кабинета покупателя (shop/account/**).
   Отдельный файл, а не style.css: страницы кабинета до 2026-08-01 вообще
   нельзя было открыть (см. TZ.md, п. 4.1–4.4), их вёрстка — нетронутый
   legacy. Всё строится на токенах из tokens.css.

   Разметку полей форм регистрации/профиля/восстановления (.rline/.rfield/
   .btnsubmit) стилизует style.css — блок .reg_form_style/.chengeprofile_form_style/
   .forgotpass_form_style (не трогать, чужая зона). Здесь — то, чего в style.css
   не было вообще: обёртки страниц, хаб кабинета, таблица заказов и форма
   resetpassword.html (она не попадает ни под один из трёх *_form_style). */

/* ================== Общий контейнер страницы кабинета ==================
   Тот же рецепт, что у .contact в style.css: max-width 1200 + паддинги на
   токенах. Не переиспользуем сам класс .contact — он смыслово про страницу
   контактов, а это чужая зона правок. */

.account-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-6) var(--space-5) var(--space-8);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-ink);
}

.account-page h1 {
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 var(--space-5);
	padding: 0;
	color: var(--color-ink);
}

.account-page h2 {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	margin: var(--space-7) 0 var(--space-4);
	padding: 0;
	color: var(--color-ink);
}

/* .breadcrumbs сам по себе уже центрирует себя на max-width:1200 (см.
   style.css) — внутри .account-page обнуляем этот второй слой паддинга. */
.account-page > .breadcrumbs {
	margin: 0 0 var(--space-5);
	padding: 0;
	max-width: none;
}

.account-intro {
	max-width: 65ch;
	margin: 0 0 var(--space-6);
	color: var(--color-ink-soft);
}

/* ---------- Детали заказа - всплывающее окно (myorders/detail.php) ----------
   Раньше detail.php был отдельной страницей на голом <table border=0>/
   class="header"/"styles" (ни один из классов не описан в CSS) без
   .account-page/breadcrumbs/<h1> - и без экранирования вывода вообще
   (см. assets/js/order-detail.js - открывает как модалку через jQuery UI
   dialog, тот же приём, что у корзины, .cart-dialog в cart.css). */
.order-detail-dialog-chrome.ui-widget-content {
	/* Тот же баг, что у .cart-dialog (cart.css): без явного background
	   побеждает серый фон темы vendor/ui-lightness. Белый, как у попапа
	   входа (panel-login.css .loginfild). */
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 8px 24px rgba(23, 20, 18, 0.16);
}

/* Позиционирование - тем же приёмом, что попап входа (panel-login.css
   .loginfild: position:fixed + top/left 50% + transform), а не расчётом
   jQuery UI (position: {my:"center", at:"center"}) - тот на практике съезжал
   (жалоба пользователя 2026-08-08: "окно расположено где-то внизу не по
   середине"). !important - иначе проигрывает inline-стилю top/left,
   который jQuery UI сам проставляет на элемент при открытии диалога. */
.order-detail-dialog-chrome {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	margin: 0 !important;
	transform: translate(-50%, -50%);
	max-height: calc(100vh - 2 * var(--space-5));
	overflow-y: auto;
}

.order-detail-dialog-chrome .ui-dialog-titlebar {
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	background: var(--color-brand-red);
}

.order-detail-dialog-chrome .ui-dialog-title {
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.order-detail-dialog-chrome .ui-dialog-titlebar-close {
	border: 0;
	background: transparent;
	border-radius: var(--radius-sm);
}

.order-detail-dialog-chrome .ui-dialog-titlebar-close:hover,
.order-detail-dialog-chrome .ui-dialog-titlebar-close:focus {
	background: var(--color-brand-red-dark);
	border: 0;
}

.order-detail-dialog-chrome .ui-dialog-content {
	padding: var(--space-4);
}

.order-detail-list {
	margin: 0;
}

.order-detail-row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 14px;
}

.order-detail-row:last-child {
	border-bottom: none;
}

.order-detail-row dt {
	color: var(--color-ink-soft);
}

.order-detail-row dd {
	margin: 0;
	color: var(--color-ink);
	word-break: break-word;
}

.order-detail-badge {
	display: inline-block;
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
}

.order-detail-badge-error {
	background: rgba(192, 57, 43, 0.12);
	color: var(--color-error);
}

.order-detail-loading,
.order-detail-error {
	margin: 0;
	padding: var(--space-4);
	font-size: 14px;
	color: var(--color-ink-soft);
	text-align: center;
}

.order-detail-error {
	color: var(--color-error);
}

/* ---------- Подтверждение удаления заказа (myorders/delete_order.php) ----------
   Раньше <center>/<font class="standard"> без .account-page/.breadcrumbs/<h1> -
   страница выпадала из общей оболочки кабинета. */
.account-confirm {
	max-width: 420px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	box-sizing: border-box;
}

.account-confirm-text {
	margin: 0 0 var(--space-5);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-ink);
}

.account-confirm-actions {
	display: flex;
	gap: var(--space-3);
}

.account-confirm-btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	box-sizing: border-box;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.account-confirm-btn-danger {
	background: var(--color-error);
	border-color: var(--color-error);
	color: #FFFFFF;
}

.account-confirm-btn-danger:hover {
	background: #8E2A20;
	border-color: #8E2A20;
}

.account-confirm-btn-secondary {
	background: var(--color-bg);
	border-color: var(--color-border);
	color: var(--color-ink);
}

.account-confirm-btn-secondary:hover {
	border-color: var(--color-ink-soft);
}

/* Узкие страницы-формы (регистрация, профиль, восстановление пароля) - тот же
   приём, что .prose в style.css у /news/ и подобных: хлебные крошки, заголовок
   и форма вместе в одной центрированной колонке, а не заголовок по левому
   краю на всю ширину .account-page (1200px) с формой отдельно по центру под
   ним - на широком экране это выглядело как два разных блока. Не применяется
   к orders.html/detail.php - там таблица должна занимать всю ширину. */
.account-page-narrow {
	max-width: 560px;
	margin: 0 auto;
}

.account-page-narrow > .breadcrumbs {
	margin: 0 0 var(--space-5);
	padding: 0;
	max-width: none;
}

/* Ссылка «Запросить ссылку заново» / «Перейти в каталог» и т.п. — общий для
   кабинета стиль текстовой ссылки-акцента. Используется в resetpassword.html;
   класс .standard также встречается в shop/account/myorders/detail.php и
   delete_order.php (не в области этой правки, но эти страницы тоже
   подключают account.css через shop/header.inc, так что заодно получают
   стиль бесплатно). */
.standard {
	color: var(--color-brand-red);
	font-weight: 600;
	text-decoration: none;
}

.standard:hover,
.standard:focus-visible {
	color: var(--color-brand-red-dark);
	text-decoration: underline;
}

/* ================== account.html: хаб «Личный кабинет» ================== */

.account-hub {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-5);
}

.account-hub-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-5);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.account-hub-card:hover {
	border-color: var(--color-brand-red);
	box-shadow: 0 4px 16px rgba(23, 20, 18, 0.08);
}

.account-hub-card:focus-visible {
	border-color: var(--color-brand-red);
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.account-hub-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--color-bg-alt);
	color: var(--color-brand-red);
}

.account-hub-icon svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.account-hub-title {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--color-ink);
}

.account-hub-desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-ink-soft);
}

/* ================== myorders/orders.html: таблица заказов ================== */

.orders-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.orders-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 14px;
}

.orders-table th {
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg-alt);
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-ink-soft);
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid var(--color-border);
}

.orders-table td {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-ink);
	vertical-align: top;
}

.orders-table tbody tr:last-child td {
	border-bottom: none;
}

.orders-table tbody tr:hover {
	background: var(--color-bg-alt);
}

.orders-cell-products {
	min-width: 240px;
	/* orders.products - одна позиция на строку, разделены "\n" (см.
	   shop/check.php) - без white-space это просто пробел, а перенос строк
	   в ячейке был случайным, по ширине колонки, а не по позициям. */
	white-space: pre-line;
}

.orders-cell-actions {
	display: flex;
	flex-direction: column;
	/* Было align-items:flex-start - и форма повтора заказа, и .orders-links-row
	   сжимались каждая по своему контенту (shrink-to-fit), поэтому width:100%
	   на кнопке повтора заказа резолвился в ширину ЕЁ ТЕКСТА, а не колонки -
	   короткая пара "Подробно"/"Удалить" под ней оставалась заметно уже,
	   с пустым местом сбоку (жалоба пользователя 2026-08-08). stretch отдаёт
	   обоим детям одну и ту же ширину колонки. */
	align-items: stretch;
	gap: var(--space-2);
	min-width: 200px;
}

.orders-reorder-form {
	margin: 0;
}

/* Группирует "Подробно"/"Удалить" в одну строку под кнопкой повтора заказа,
   тем же визуальным языком (компактные кнопки с рамкой, а не голые ссылки) -
   раньше все три действия были вперемешку и вразнобой: ссылка, кнопка с
   рамкой, ссылка, с неровным весом и лишней высотой строки. Ширина - как у
   кнопки повтора заказа сверху (flex:1 1 0 на дочерних .orders-action-btn),
   а не произвольная по тексту. */
.orders-links-row {
	display: flex;
	align-items: stretch;
	gap: var(--space-2);
}

/* Не .orders-link: тот же класс используется в колонке "Счёт" на номер
   счёта - там обычная текстовая ссылка, здесь - компактная кнопка. */
.orders-action-btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: var(--space-1) var(--space-2);
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--color-ink);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	white-space: nowrap;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.orders-action-btn:hover,
.orders-action-btn:focus-visible {
	border-color: var(--color-brand-red);
	color: var(--color-brand-red);
}

.orders-action-btn-danger {
	color: var(--color-error);
}

.orders-action-btn-danger:hover,
.orders-action-btn-danger:focus-visible {
	border-color: var(--color-error);
	color: var(--color-error);
}

.orders-status {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.orders-status-ok {
	background: rgba(31, 143, 82, 0.12);
	color: var(--color-success);
}

.orders-status-pending {
	background: rgba(192, 57, 43, 0.12);
	color: var(--color-error);
}

.orders-link {
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-brand-red);
	text-decoration: none;
}

.orders-link:hover,
.orders-link:focus-visible {
	color: var(--color-brand-red-dark);
	text-decoration: underline;
}

.orders-link-danger:hover,
.orders-link-danger:focus-visible {
	color: var(--color-error);
}

/* Кнопка «Новый заказ на основе текущего» — родом из старого
   .btnsubmit_customer_orders, класс на JS не завязан (проверено grep -a),
   но переименовывать незачем — оставлен, чтобы диффа было меньше.
   Размер/шрифт - те же, что у .orders-action-btn (Подробно/Удалить) ниже:
   раньше эта кнопка была заметно крупнее двух остальных - "одна огромная,
   остальные маленькие" смотрелось как три разных элемента интерфейса,
   а не набор из трёх равнозначных действий с одной карточкой заказа. */
.btnsubmit_customer_orders {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 32px;
	padding: var(--space-1) var(--space-2);
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-brand-red);
	text-align: center;
	/* Было: белый фон на белой карточке заказа + тонкая серая рамка -
	   читалось не как кнопка, а как пустой блок/плейсхолдер. */
	background: var(--color-bg-alt);
	border: 1px solid var(--color-brand-red);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btnsubmit_customer_orders:hover,
.btnsubmit_customer_orders:focus-visible {
	background: var(--color-brand-red);
	color: #fff;
}

.btnsubmit_customer_orders:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

/* Мобильная раскладка таблицы заказов: горизонтальный скролл на узких
   экранах читается плохо (много колонок), поэтому ниже 640px таблица
   становится списком карточек — подпись колонки берётся из data-label
   (UX-гайдлайн: "Use horizontal scroll OR card layout" для таблиц). */
@media (max-width: 640px) {
	.orders-table-wrap {
		border: none;
		overflow-x: visible;
	}

	.orders-table {
		min-width: 0;
	}

	.orders-table thead {
		display: none;
	}

	.orders-table,
	.orders-table tbody,
	.orders-table tr,
	.orders-table td {
		display: block;
		width: 100%;
	}

	.orders-table tr {
		margin-bottom: var(--space-4);
		padding: var(--space-3);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
	}

	.orders-table tr:last-child {
		margin-bottom: 0;
	}

	.orders-table td {
		padding: var(--space-2) 0;
		border-bottom: 1px dashed var(--color-border);
	}

	.orders-table td:last-child {
		border-bottom: none;
	}

	.orders-table td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-family: var(--font-heading);
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: var(--color-ink-soft);
	}

	.orders-cell-actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
}

/* ================== Обёртки форм, которых не было в style.css ==================
   .reg_form_box там уже есть (width:100%; max-width:560px; margin:0 auto;
   font-size:16px; font-weight:400). .chengeprofile_form_box и
   .forgotpass_form_box — нет, добавляем тем же рецептом, для единообразия
   ширины формы профиля и восстановления пароля с формой регистрации. */
.chengeprofile_form_box,
.forgotpass_form_box {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	font-size: 16px;
	font-weight: 400;
}

/* #chengeprofile_org (profile.html/change-profile.php) пихает три пары
   label+input (название/ИНН/КПП) в один <p class="rline">, а не в свой
   .rline на каждую, как везде на форме - обычный margin-bottom:24px у
   .rline тут только один, на весь блок, а между полями ВНУТРИ него зазора
   не было вообще (у input margin:0, см. style.css) - три поля слипались
   встык (жалоба заказчицы 2026-08-15: "отступы"). Тот же var(--space-5),
   что и между .rline снаружи. */
#chengeprofile_org label:not(:first-child) {
	margin-top: var(--space-5);
}

/* ================== resetpassword.html: форма смены пароля ==================
   Единственная форма кабинета, не подходящая ни под один из трёх
   *_form_style блоков в style.css — рецепт .rline/.rfield/.btnsubmit
   повторяет их (та же тройка токенов), но со своим селектором. */

.resetpass_form {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.resetpass_form .rline {
	margin: 0 0 var(--space-5);
	position: relative;
}

.resetpass_form label {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-ink);
}

.resetpass_form .rfield {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: var(--space-3);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-ink);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	outline: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.resetpass_form .rfield:focus {
	border-color: var(--color-brand-red);
	box-shadow: 0 0 0 3px rgba(207, 24, 24, 0.15);
}

.resetpass_form .rfield:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.resetpass_form .btnsubmit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	min-height: 44px;
	padding: var(--space-3) var(--space-5);
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-align: center;
	background: var(--color-brand-red);
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.resetpass_form .btnsubmit:hover {
	background: var(--color-brand-red-dark);
}

.resetpass_form .btnsubmit:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

/* .reginform уже описан в style.css (сообщения при регистрации/восстановлении
   пароля: text-align center, font-size 18, line-height 25). .reginform-error
   там не описан вообще — используется только в resetpassword.html. */
.reginform-error {
	color: var(--color-error);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.account-hub-card,
	.btnsubmit_customer_orders,
	.orders-link,
	.standard,
	.resetpass_form .rfield,
	.resetpass_form .btnsubmit {
		transition: none;
	}
}