/* =============================================================================
   bm-sell.css — доповнення шару «ГРАФА» для сторінки продавця /{lang}/sell.
   Підключається ПІСЛЯ /css/bm-landing.css і живе тільки всередині .bm-scope.
   Власних кольорів, радіусів і тіней немає: усі значення — var(--bm-*)
   з bm-landing.css (DESIGN.md, напрямок «ГРАФА»).
   ========================================================================== */

/* --- графа-визначення: довге значення ліворуч, підпис стоїть колонкою ------
   Кроки, вимоги до продавця і рядки ліквідації несуть речення, а не цифру.
   Праве вирівнювання з bm-landing.css там рвало б рядок. */
.bm-scope .bm-sell-def .bm-graf {
  grid-template-columns: minmax(110px, 30%) 1fr;
}
.bm-scope .bm-sell-def .bm-graf__v {
  text-align: left;
  font-weight: 400;
}

/* --- дзеркальний спліт 5/7 -------------------------------------------------
   Секції-переліки (кроки, вимоги, ліквідація) несуть текст у списку граф.
   Широка колонка віддається списку, заголовок і примітка стоять у вузькій —
   асиметрія лишається тією самою, порожнеча з лівого боку зникає. */
.bm-scope .bm-sell-split-r {
  grid-template-columns: 5fr 7fr;
}

/* --- два поля в рядок усередині форми ------------------------------------- */
.bm-scope .bm-sell-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

/* --- чекбокс пріоритетного показу ----------------------------------------- */
.bm-scope .bm-sell-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 16px;
  padding: 10px 11px;
  border: 1px solid var(--bm-rule);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}
.bm-scope .bm-sell-check input {
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--bm-live);
}

/* --- помилки валідації: стан кольором, без пігулок і тіней ----------------- */
.bm-scope .bm-sell-msg {
  border-left: 2px solid var(--bm-rule-2);
  padding: 2px 0 2px 14px;
  margin: 0 0 18px;
}
.bm-scope .bm-sell-msg--flag { border-left-color: var(--bm-flag); }
.bm-scope .bm-sell-msg__t {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bm-flag);
  margin: 0 0 6px;
}
.bm-scope .bm-sell-msg ul { margin: 0; padding-left: 18px; font-size: 14px; }

/* --- екран подяки: та сама плита форми, підсумковий рядок згори ------------ */
.bm-scope .bm-sell-done { border-top-width: 2px; }
.bm-scope .bm-sell-done .bm-form__title { color: var(--bm-live); }

/* --- службовий текст на чорнильній смузі ----------------------------------
   bm-landing.css освітлює на темному тлі .bm-lede і .bm-graf__k, дрібна
   примітка лишилася темною: 2.13:1 у гейті. Піднімаємо разом із класом
   .bm-sell-quiet, щоб правило було одне. */
.bm-scope .bm-sec--ink .bm-note,
.bm-scope .bm-sec--ink .bm-sell-quiet { color: rgba(242, 244, 243, .70); }

/* --- обведена кнопка на чорнильній смузі -----------------------------------
   .bm-scope a.bm-btn--ghost (0,2,1) перебиває .bm-sec--ink .bm-btn--ghost
   (0,2,0) і фарбує напис чорнилом по чорнилу — 1:1. Повертаємо аркушевий
   колір із тією ж вагою селектора. */
.bm-scope .bm-sec--ink a.bm-btn--ghost {
  color: var(--bm-sheet);
  border-color: var(--bm-sheet);
  border-bottom-color: var(--bm-sheet);
}
.bm-scope .bm-sec--ink a.bm-btn--ghost:hover,
.bm-scope .bm-sec--ink a.bm-btn--ghost:focus {
  background: var(--bm-sheet);
  color: var(--bm-ink);
}

/* --- телефон ------------------------------------------------------------- */
@media (max-width: 991px) {
  .bm-scope .bm-sell-split-r { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .bm-scope .bm-sell-cols { grid-template-columns: 1fr; }
  .bm-scope .bm-sell-def .bm-graf { grid-template-columns: 1fr; gap: 4px; }
  .bm-scope .bm-sell-def .bm-graf__v { font-size: 15px; }
}