/* ══════════════════════════════════════════════════════════════════
   БЛОК «ПОШЛИНА ПО ВЕСУ ИЛИ ПО ЦЕНЕ?»

   Подключается только страницами категорий с полем duty_check
   в data.php — сейчас это одна страница, /catalog/odezhda/.
   Разметку печатает templates/duty-check.php, счёт ведёт
   js/duty-check.js.

   Палитра — токены из css/av-tokens.css, которые страница категории
   и так подключает: свой синий в прототипе (#4C3DF7) рядом с кнопками
   страницы (--av-brand) читался бы как второй акцент.

   Гарнитуру блок не объявляет. В прототипе стояла Manrope — это
   подбор дизайнера по скриншоту, на сайте такого шрифта нет,
   и объявление молча увело бы блок в системный. Montserrat
   приходит наследованием из header.php; полям формы она достаётся
   через font: inherit — элементы формы шрифт не наследуют.

   Классы компонентов продублированы — .dc__lead.dc__lead и так
   далее. Блок живёт внутри колонки разбора, а там .cc__text p
   и .cc__text a весят 0-1-1 и перебивают одиночный класс: абзацы
   получали бы кегль колонки, а текст кнопки — цвет ссылки.
   ══════════════════════════════════════════════════════════════════ */

.dc {
  container-type: inline-size;
  color: var(--av-ink-900);
  margin: 0;
  padding: 0;

  /* Локальные значения: в av-tokens таких нет, а заводить их там
     ради одного блока значило бы расширить общую палитру. */
  --dc-field: #DCDFE5;
  --dc-field-hover: #C9CED8;
  --dc-err: #B42318;
  --dc-err-line: #D23A2E;
  --dc-err-ring: #FCE9E7;
}
.dc * { box-sizing: border-box; }

/* Кегль и насыщенность заголовка держит .cc__h2--sec страницы:
   у блока свой h2, и звучать он должен как соседние разделы
   разбора, а не как отдельная врезка. Своих правил шрифта
   у .dc__title поэтому нет. */
.dc__title { text-wrap: balance; }

.dc__lead.dc__lead {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--av-ink-700);
  max-width: 62ch;
  text-wrap: pretty;
}

.dc__card {
  margin: 20px 0 0;
  background: #fff;
  border: 1px solid var(--av-line-200);
  border-radius: 22px;
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 8px;
}

.dc__form { padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 16px; }
.dc__field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.dc__label { font-size: 14px; font-weight: 600; color: var(--av-ink-400); }

.dc__input,
.dc__select {
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--dc-field);
  background: #fff;
  color: var(--av-ink-900);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.dc__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236A7383' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  text-overflow: ellipsis;
}
.dc__input:hover,
.dc__select:hover { border-color: var(--dc-field-hover); }
.dc__input:focus,
.dc__select:focus { border-color: var(--av-brand); box-shadow: 0 0 0 3px var(--av-brand-050); }
.dc__input[aria-invalid="true"] { border-color: var(--dc-err-line); }
.dc__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--dc-err-ring); }

.dc__rate { font-size: 13px; color: var(--av-ink-300); font-variant-numeric: tabular-nums; }
.dc__err { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--dc-err); }
.dc__err:empty { display: none; }

.dc__result {
  background: var(--av-brand-050);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.dc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--av-ink-400);
  font-variant-numeric: tabular-nums;
}
.dc__meta b { color: var(--av-ink-900); font-weight: 700; }

.dc__verdict.dc__verdict {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--av-ink-900);
  text-wrap: balance;
}
.dc__verdict em { font-style: normal; color: var(--av-brand-text); }

.dc__rows { display: flex; flex-direction: column; gap: 6px; }
.dc__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 15px;
  color: var(--av-ink-300);
}
.dc__row-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--dc-field-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.dc__row-label { flex: 1 1 auto; min-width: 0; }
.dc__row-val { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc__row--on { background: #fff; border-color: var(--av-brand-100); color: var(--av-ink-900); }
.dc__row--on .dc__row-mark { background: var(--av-brand); border-color: var(--av-brand); }
.dc__row--on .dc__row-val { font-weight: 800; }

.dc__note.dc__note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--av-ink-600); text-wrap: pretty; }
.dc__share.dc__share { margin: 0; font-size: 14px; line-height: 1.5; color: var(--av-ink-600); }
.dc__share b { font-weight: 800; color: var(--av-ink-900); }

.dc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.dc__cta.dc__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--av-brand);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s;
}
.dc__cta.dc__cta:hover { background: var(--av-brand-dark); color: #fff; text-decoration: none; }
.dc__example.dc__example { font-size: 14px; font-weight: 700; color: var(--av-brand-text); text-decoration: none; }
.dc__example.dc__example:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--av-brand-dark); }

.dc__empty.dc__empty {
  margin: auto 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--av-ink-300);
  text-align: center;
  padding: 24px 8px;
}
.dc__fine.dc__fine {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--av-ink-300);
  max-width: 80ch;
  text-wrap: pretty;
}

.dc [hidden] { display: none !important; }
.dc .dc__nw { white-space: nowrap; }

/* Контейнерный запрос, а не медиа: блок стоит в колонке разбора,
   и она сужается раньше окна — на 1024 колонка уже узкая, а окно
   ещё широкое. */
@container (max-width: 620px) {
  .dc__card { grid-template-columns: minmax(0, 1fr); }
  .dc__form { padding: 14px 10px 6px; }
  .dc__result { padding: 18px 16px; }
  .dc__verdict.dc__verdict { font-size: 20px; }
  .dc__row { padding: 10px 12px; font-size: 14px; }
  .dc__cta.dc__cta { flex: 1 1 100%; }
}