/* Калькулятор доставки и сборки DigiMarket — стили модуля.
   Все классы с префиксом dmc-, чтобы не пересекаться с Journal 3. */

/* Кнопка на карточке — ВТОРИЧНАЯ: главная кнопка страницы это «В корзину», и перебивать
   её заливкой нельзя. Поэтому белый фон с фирменной рамкой, а не сплошной цвет. */
.dmc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: #fff; color: #146678; border: 2px solid #146678; border-radius: 8px;
  padding: 11px 18px; font-size: 15px; font-weight: 600; line-height: 1.2;
  transition: background .15s, color .15s;
}
.dmc-btn:hover, .dmc-btn:focus { background: #146678; color: #fff; }
.dmc-btn svg { width: 18px; height: 18px; flex: none; }

/* Подпись под кнопкой: обещание цены даём сразу, не дожидаясь, пока клиент откроет расчёт */
.dmc-hint {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.35; color: #5D6760; max-width: 460px;
}
[dir="rtl"] .dmc-hint, html[dir="rtl"] .dmc-hint { text-align: right; }

@media (max-width: 767px) {
  .dmc-wrap { width: 100%; }
  .dmc-btn { width: 100%; padding: 13px 14px; }
}

.dmc-scrim {
  position: fixed; inset: 0; z-index: 9999; background: rgba(12, 20, 16, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
/* Скрытый элемент обязан быть скрытым: у строк-тумблеров стоит display:flex, и он
   перебивает атрибут hidden — так на карточках вылезала чужая галочка. */
[hidden] { display: none !important; }
.dmc-scrim[hidden] { display: none !important; }
.dmc-modal {
  background: #fff; color: #141814; border-radius: 14px; width: 100%; max-width: 540px;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 48px rgba(20, 32, 26, .28);
  font: 400 15px/1.55 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.dmc-modal * { box-sizing: border-box; }
.dmc-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #DAE1D8; }
.dmc-head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 700; }
.dmc-x { background: none; border: 0; font-size: 24px; line-height: 1; color: #5D6760; cursor: pointer; padding: 2px 6px; }
.dmc-body { padding: 16px 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }

.dmc-item { display: flex; gap: 12px; align-items: center; }
.dmc-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.dmc-item .dmc-nm { font-weight: 600; font-size: 14.5px; }
.dmc-item .dmc-meta { font-size: 12.5px; color: #5D6760; }

.dmc-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.dmc-field > label { font-size: 13px; color: #5D6760; }
.dmc-field .dmc-sub { font-size: 12.5px; color: #5D6760; }
.dmc-modal input[type="text"] {
  width: 100%; padding: 11px 12px; border: 1px solid #DAE1D8; border-radius: 9px;
  font: inherit; color: #141814; background: #fff;
}
.dmc-ac {
  position: absolute; z-index: 5; top: 100%; inset-inline: 0; margin-top: 4px; background: #fff;
  border: 1px solid #DAE1D8; border-radius: 10px; max-height: 210px; overflow-y: auto; padding: 4px;
  box-shadow: 0 10px 26px rgba(20, 32, 26, .16);
}
.dmc-ac[hidden] { display: none !important; }
.dmc-ac button {
  display: block; width: 100%; text-align: start; background: none; border: 0; color: #141814;
  padding: 9px 10px; border-radius: 7px; cursor: pointer; font: inherit;
}
.dmc-ac button:hover, .dmc-ac button.dmc-on { background: #E3EFE9; }

.dmc-conds { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.dmc-step { display: inline-flex; align-items: center; border: 1px solid #DAE1D8; border-radius: 9px; overflow: hidden; }
.dmc-step button { width: 40px; height: 42px; border: 0; background: #fff; color: #141814; font-size: 18px; cursor: pointer; }
.dmc-step output { width: 48px; text-align: center; font-weight: 600; }
.dmc-toggles { display: flex; flex-direction: column; gap: 9px; }
.dmc-tg { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; margin: 0; font-weight: 400; }
.dmc-tg input { position: absolute; opacity: 0; width: 0; height: 0; }
.dmc-track { width: 42px; height: 24px; border-radius: 999px; background: #DAE1D8; position: relative; flex: none; transition: background .16s; }
.dmc-track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .16s; }
.dmc-tg input:checked + .dmc-track { background: #1F5D4C; }
.dmc-tg input:checked + .dmc-track::after { transform: translateX(18px); }
[dir="rtl"] .dmc-tg input:checked + .dmc-track::after { transform: translateX(-18px); }
.dmc-tg input:disabled + .dmc-track { opacity: .5; }

.dmc-quote { background: #EBF0EA; border-radius: 11px; padding: 15px; }
.dmc-quote.dmc-empty { text-align: center; color: #5D6760; font-size: 14px; padding: 20px 15px; }
.dmc-sum { display: flex; align-items: baseline; gap: 8px; }
.dmc-sum b { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.dmc-sum span { color: #5D6760; font-size: 15px; }
.dmc-cap { font-size: 13px; color: #5D6760; margin-top: 3px; }
.dmc-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; }
.dmc-line { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.dmc-line .dmc-lead { flex: 1; border-bottom: 1px dotted #C9D3C7; transform: translateY(-3px); }
.dmc-line .dmc-val { font-weight: 600; }
.dmc-line.dmc-zero { color: #5D6760; }
.dmc-line.dmc-zero .dmc-val { font-weight: 400; }
.dmc-note { font-size: 12.5px; color: #5D6760; line-height: 1.5; margin: 12px 0 0; }

.dmc-rules { border: 1px solid #DAE1D8; border-radius: 10px; }
.dmc-rules summary { padding: 12px 15px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.dmc-rules summary::-webkit-details-marker { display: none; }
.dmc-rules .dmc-rbody { padding: 0 15px 13px; font-size: 13px; color: #5D6760; line-height: 1.6; }
.dmc-rules .dmc-rbody b { color: #141814; }

@media (max-width: 480px) {
  .dmc-modal { max-height: 94vh; }
  .dmc-sum b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .dmc-track, .dmc-track::after { transition: none; } }