/* Общие элементы интерфейса: панели, формы, кнопки, таблицы, метки.
   Используются и на витрине (кабинет продавца), и в админке — поэтому лежат
   отдельно и подключаются обоими разделами. Цвета берутся только из токенов. */

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

/* Поля формы */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.field .hint, .hint {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
select, textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
textarea { min-height: 160px; resize: vertical; }
.field--inline { display: flex; align-items: center; gap: var(--space-2); }
.field--inline label { margin: 0; font-weight: 400; }
.field--inline input { width: auto; }

.row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.row > * { flex: 1 1 220px; }
.actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-4); }
.actions form { margin: 0; }

/* Кнопки */
.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--color-brand-dark); color: var(--color-text-inverse); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--color-brand); }
.btn--ghost:hover { background: var(--color-brand-light); color: var(--color-brand); }
.btn--danger { background: transparent; border-color: var(--color-danger); color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger); color: var(--color-text-inverse); }

/* Таблицы */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
tr:last-child td { border-bottom: none; }
.summary th { text-transform: none; letter-spacing: 0; width: 200px; }
.row-actions form { margin: 0; }

/* Метки состояния */
.badge {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}
.badge--ok { background: #e3f1e8; color: var(--color-success); }
.badge--off { background: #f1e3e2; color: var(--color-danger); }
.badge--warn { background: #f7ecd9; color: var(--color-warning); }

.error {
  background: #f7e4e2;
  color: var(--color-danger);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

/* Счётчики */
.stat-row { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.stat { min-width: 160px; }
.stat__value { font-size: var(--text-2xl); font-weight: 700; }
.stat__label { color: var(--color-text-muted); font-size: var(--text-xs); }

.muted { color: var(--color-text-muted); }

/* Кабинет продавца */
.cabinet { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); }
.cabinet__nav { display: flex; flex-direction: column; gap: var(--space-2); }
.cabinet__nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.cabinet__nav a:hover { background: var(--color-brand-light); text-decoration: none; }
/* Открытый раздел. Отличается от наведения не только фоном: наведение живёт
   доли секунды, а «вы здесь» человек читает боковым зрением — поэтому полоса
   слева и полужирное начертание. */
.cabinet__nav a.is-current {
  background: var(--color-brand-light);
  border-color: var(--color-brand);
  border-left: 3px solid var(--color-brand);
  color: var(--color-brand-dark);
  font-weight: 600;
}

/* Страницы-формы: вход, регистрация, анкета продавца */
.form-page { max-width: 460px; }
.form-page--wide { max-width: 720px; }

/* Фотографии товара */
.photo-grid { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.photo { margin: 0; text-align: center; }
.photo img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-sm); display: block; margin-bottom: var(--space-2); }

@media (max-width: 720px) {
  .cabinet { grid-template-columns: 1fr; }
  .cabinet__nav { flex-direction: row; flex-wrap: wrap; }
}

/* Диалог подтверждения опасных действий */
.dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  max-width: 480px;
  width: calc(100% - var(--space-6));
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}
.dialog::backdrop { background: rgba(36, 33, 30, 0.45); }
.dialog h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.dialog p { margin: 0 0 var(--space-4); }
.dialog .actions { margin-top: var(--space-4); }

/* Лента уведомлений */
.notification { margin-bottom: var(--space-3); }
.notification--unread { border-left: 3px solid var(--color-brand); }
.notification__title { margin: 0 0 var(--space-1); font-weight: 600; }
.notification__title a { color: var(--color-text); }
.notification p:last-child { margin-bottom: 0; }

/* Действие, оформленное как ссылка: выход, переход по уведомлению.
   Это формы, а не ссылки — они меняют данные, а такое делается только POST. */
.inline-form { display: inline; margin: 0; }
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.link-button:hover { text-decoration: underline; }
.notification__title .link-button { color: var(--color-text); font-weight: 600; }

/* ─── Заказы ─────────────────────────────────────────────────────────────── */

/* Заголовок карточки заказа: номер слева, состояние справа. */
.order-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.order-head h1, .order-head h2 { margin: 0; }

/* Состояние заказа. Цветом выделены только два края пути: то, что требует
   действия, и то, что закончилось плохо. Остальное — спокойный серый, иначе
   список заказов превращается в светофор. */
.status {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.status--paid { background: var(--color-brand-light); color: var(--color-brand); }
.status--completed { background: #e7f3ec; color: var(--color-success); }
.status--cancelled, .status--refunded { background: var(--color-surface-muted); color: var(--color-danger); }

/* Выбор одного из вариантов: адрес доставки, способ отправки. */
.choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  cursor: pointer;
}
.choice:hover { border-color: var(--color-accent); }
.choice input { margin-top: 3px; }
.choice .hint { margin: var(--space-1) 0 0; }

.checkbox { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }

/* Несколько коротких полей в ряд: цена, срок, порог бесплатной доставки. */
.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.notice--ok { background: #e7f3ec; }
.notice--error { background: var(--color-brand-light); }
.notice ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }

/* История переходов заказа. */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid var(--color-border);
}
.timeline .hint { margin: 0; }

.refund-form summary { cursor: pointer; font-weight: 600; padding: var(--space-2) 0; }
.refund-form .field--inline { display: flex; align-items: center; gap: var(--space-3); }
.refund-form .field--inline input { width: 80px; }

/* Активный фильтр в списке заказов. */
.filters a { color: var(--color-text-muted); font-size: var(--text-sm); }
.filters a.is-active { color: var(--color-brand); font-weight: 600; }

/* Упаковочный лист: печатается и кладётся в посылку. */
.packing { max-width: 70ch; }
@media print {
  .site-header, .site-footer, .cabinet__nav { display: none; }
  .packing { max-width: none; }
}

/* Текст, который написал человек: описание товара, мастерской, отзыв.
   Выводится всегда экранированным — разметка в нём не работает, — но
   переносы строк сохраняются, иначе абзацы продавца слипаются в кашу. */
.user-text { white-space: pre-line; }

/* Переписка по заказу: реплики сторон различаются отступом и цветом канта,
   чтобы разговор читался с одного взгляда. */
.chat { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.chat__item {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border-left: 3px solid var(--color-border);
  background: var(--color-surface-alt, #faf6f1);
  border-radius: 8px;
}
.chat__item--seller { border-left-color: var(--color-brand); }
.chat__item--admin { border-left-color: var(--color-accent, #b8860b); }
.chat__head { display: flex; gap: var(--space-2); align-items: baseline; margin-bottom: 4px; }
.chat__text { white-space: pre-wrap; }

/* Предпросмотр адреса: он и есть то, что напечатают на посылке, поэтому
   выглядит как готовая строка, а не как подпись к полю. */
.address-preview {
  display: block;
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-alt, #faf6f1);
}

/* ─── Отзывы (блок 7) ────────────────────────────────────────────────────────
   Классы общие для витрины, кабинетов и админки: отзыв показывается во всех
   трёх местах, а стили админки живут отдельно от стилей сайта.

   Оценка — звёздочками и числом сразу: звёздочки на телефоне различаются
   плохо, а «4,5» читается одинаково везде. */
.rating { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rating__stars { color: var(--color-warning); letter-spacing: 1px; }
.rating__value { font-weight: 600; }

.review { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.review:last-child { border-bottom: 0; }
.review__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.review__author { font-weight: 600; }
.review__text { margin: var(--space-2) 0; }
/* Пометку «товар возвращён» ставит система: отзыв о вещи, которую вернули,
   читается иначе, и это должно быть видно без чтения текста. */
.review__flag {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: var(--text-xs);
}
.review__answer {
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-2);
}

/* Многострочное значение — реквизиты для перевода: сохраняем переносы строк
   ровно так, как их ввёл администратор. */
.settings-text {
  white-space: pre-wrap;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted, var(--color-surface));
}

/* Варианты одного изделия: разные карточки, связанные мастером в группу. */
.product-group { margin: var(--space-3) 0; }
.product-group__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.product-group__list li { margin-bottom: 4px; }
.product-group__current { font-weight: 600; }

/* Плитка с автозапуском: плеер встаёт на место обложки, размеры те же —
   страница не прыгает в момент, когда видео появляется. */
.product__video { position: relative; }
.product__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
  /* Плеер в выдаче не ловит нажатия: плитка целиком — ссылка на товар. */
  pointer-events: none;
}
.product__video-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Статистика: рост и падение видно цветом, а не только знаком. */
.stat__up { color: var(--color-success, #2e7d32); }
.stat__down { color: var(--color-danger, #c62828); }
.stats-table td:first-child { width: 40%; }

/* Обложка витрины: широкая полоса над шапкой мастерской. */
.master-cover {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.master-cover--preview { max-width: 420px; }

/* Перестановка фотографий: плитка «поднимается» под курсором. */
.photo[draggable="true"] { cursor: grab; }
.photo.is-dragging { opacity: .5; }
.photo__badge {
  font-size: .8em;
  color: var(--color-text-muted, #666);
}
.photo__moves { display: flex; gap: var(--space-2); }