/*
 * Примитивы дизайн-системы: общие для витрины и админки.
 * Компоненты — по секции Figma «02 · Components & states» (171:209);
 * соответствие «компонент Figma → класс» — docs/design/README.md.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--text-body);
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
h1 { font: var(--text-heading-l); }
h2 { font: var(--text-heading-m); }
h3 { font: var(--text-title); }

a { color: var(--color-brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

.muted { color: var(--color-text-secondary); }
.small { font: var(--text-caption); }
.nowrap { white-space: nowrap; }

/* Скрыто визуально, но доступно экранному диктору */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Button (225:451) ─────────────────────────────────────────────────────
   Primary: brand, 52 px, radius 12. Disabled: subtle + secondary text. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 52px; width: 100%; padding: 0 var(--space-20);
  border: 0; border-radius: var(--radius-12);
  background: var(--color-brand-primary); color: var(--color-text-on-brand);
  font: var(--text-button); text-align: center; cursor: pointer;
}
.btn:hover { background: var(--color-brand-primary-hover); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.btn[disabled], .btn.is-disabled {
  background: var(--color-bg-subtle); color: var(--color-text-secondary); cursor: not-allowed;
}
.btn.inline { width: auto; }

/* Вторичная — белая с обводкой: «Корзина», «Написать», «Закрыть» */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: 0 var(--space-20);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-10);
  background: var(--color-bg-base); color: var(--color-text-primary);
  font: var(--text-label); cursor: pointer;
}
.btn-outline:hover { border-color: var(--color-border-active); text-decoration: none; }
.btn-outline.danger { color: var(--color-status-error); border-color: var(--color-status-error); }

.btn-link {
  background: none; border: 0; padding: 0; color: var(--color-brand-primary);
  font: inherit; cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

/* ── Note: подсказка или статус в плашке ───────────────────────────────── */
.note {
  padding: var(--space-10) var(--space-16); border-radius: var(--radius-10);
  font: var(--text-caption); background: var(--color-bg-subtle);
}
.note.ok { color: var(--color-status-success); }
.note.err { color: var(--color-status-error); background: var(--color-status-error-subtle); }
.note.info { border: 1px solid var(--color-border-active); color: var(--color-text-primary); }
.note.warn { color: var(--color-status-warning); background: var(--color-status-warning-subtle); }

/* ── Input Field (225:475): постоянная подпись, поле 48 px, ошибка под ним ── */
.field { display: flex; flex-direction: column; gap: var(--space-6); }
.field-label { font: var(--text-body-s); color: var(--color-text-secondary); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 0 var(--space-14);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-10);
  background: var(--color-bg-base); color: var(--color-text-primary);
  font: var(--text-body);
}
.field textarea { padding: var(--space-12) var(--space-14); min-height: 72px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-secondary); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--color-border-active);
}
.field-error { font: var(--text-caption); color: var(--color-status-error); }
.field.has-error .field-label { color: var(--color-status-error); }
.field.has-error input, .field.has-error textarea { border-color: var(--color-status-error); }

/* ── Checkbox (225:459): зона нажатия 44 × 44, видимый квадрат 24 ──────── */
.check { display: flex; align-items: flex-start; gap: var(--space-6); font: var(--text-caption); }
.check input {
  appearance: none; flex: none; width: 24px; height: 24px; margin: 10px;
  border: 1.5px solid var(--color-border-default); border-radius: 6px;
  background: var(--color-bg-base); cursor: pointer;
}
.check input:checked {
  background: var(--color-brand-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  border-color: var(--color-brand-primary);
}
.check input:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.check span { padding-top: 13px; }
.check.has-error input { border-color: var(--color-status-error); }

/* ── Choice (225:482): способ получения ─────────────────────────────────── */
.choice {
  display: flex; align-items: flex-start; gap: var(--space-10);
  padding: var(--space-10) var(--space-16); min-height: var(--tap-min);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-12);
  background: var(--color-bg-base); cursor: pointer;
}
.choice input { margin: 5px 0 0; accent-color: var(--color-brand-primary); flex: none; }
.choice:has(input:checked) { border-color: var(--color-border-active); background: var(--color-brand-subtle); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.choice-title { display: block; font: var(--text-body-strong); }
.choice-hint { display: block; font: var(--text-caption); color: var(--color-text-secondary); }

/* ── Estimate (225:483): состав цены, итог визуально главный ───────────── */
.estimate {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-18, 18px) var(--space-20);
  border-radius: var(--radius-14); background: var(--color-bg-subtle);
}
.estimate .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-8); }
.estimate .row > span:first-child { font: var(--text-body-s); color: var(--color-text-secondary); }
.estimate .row > span:last-child { font: var(--text-body-strong); white-space: nowrap; }
.estimate .row.main > span:first-child { color: var(--color-text-primary); }
.estimate .row.total {
  align-items: center; padding-top: var(--space-12); margin-top: var(--space-4);
  border-top: 1px solid var(--color-border-default);
}
.estimate .row.total > span:first-child { font: var(--text-body-strong); color: var(--color-text-primary); }
.estimate .row.total > span:last-child { font: var(--text-metric); color: var(--color-brand-primary); }
.estimate .hint { font: var(--text-caption-s); color: var(--color-text-secondary); }