/* ============================================================================
   Калькулятор доставки ФФ → СЦ маркетплейса.
   Шаговый выбор через модалки: склад загрузки → маркетплейс → склад → объём.
   ========================================================================== */
.dlv__hero { padding: 52px 0 30px;
  background: radial-gradient(900px 300px at 10% -20%, #e8eeff 0%, transparent 62%), var(--canvas);
  border-bottom: 1px solid var(--border); }
.dlv__hero h1 { margin-top: 6px; max-width: 20ch; }
.dlv__lead { font-size: var(--t-sub); color: var(--ink-graphite); max-width: 62ch; margin-top: 14px; }

.dlv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .dlv__grid { grid-template-columns: 1fr; } }
.dlv__pick { display: grid; grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto auto; align-items: center; column-gap: 12px;
  background: var(--surface); box-shadow: var(--ring); border: 0; border-radius: var(--radius);
  padding: 16px 20px; cursor: pointer; text-align: left; width: 100%; }
.dlv__pick:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.dlv__pick svg { width: 20px; height: 20px; color: var(--ink-whisper);
  grid-column: 2; grid-row: 1 / span 2; }
.dlv__picklabel { grid-column: 1; grid-row: 1; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-whisper); }
.dlv__pickval { grid-column: 1; grid-row: 2; font-size: var(--t-body); font-weight: 700;
  color: var(--ink-whisper); margin-top: 4px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlv__pickval.is-set { color: var(--ink); }

.dlv__date { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); box-shadow: var(--ring); border-radius: var(--radius);
  padding: 16px 20px; margin-top: 16px; }
.dlv__date[hidden] { display: none; }

.dlv__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-top: 22px; }
.dlv__card { background: var(--surface); box-shadow: var(--ring); border: 0;
  border-radius: var(--radius); padding: 22px 16px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dlv__card:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.dlv__card[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: #fff7f5; }
.dlv__ico { width: 56px; height: 46px; color: var(--ink); }
.dlv__cardt { font-weight: 700; font-size: var(--t-body-sm); }
.dlv__cardn { font-size: 12px; color: var(--ink-graphite); }

.dlv__result { margin-top: 26px; }
.dlv__result[hidden] { display: none; }
.dlv__price { color: var(--state-live); font-family: var(--font-mono); font-size: var(--t-sub); }

/* --------------------------------------------------------------- модалки */
.mdl { position: fixed; inset: 0; z-index: 1000; background: rgba(20,20,20,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.mdl[hidden] { display: none; }
.mdl__box { background: var(--surface); border-radius: 16px; width: 560px; max-width: 100%;
  max-height: 84vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.mdl__box--sm { width: 380px; }
.mdl__head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--border-soft); }
.mdl__head b { font-size: var(--t-h-sm); display: block; }
.mdl__step { font-size: 12px; color: var(--ink-graphite); display: block; margin-bottom: 4px; }
.mdl__x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--ink-whisper); padding: 0 4px; }
.mdl__x:hover { color: var(--ink); }
.mdl__body { padding: 16px 22px 22px; overflow-y: auto; }
.mdl__list { display: flex; flex-direction: column; gap: 8px; }
.mdl__row { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: var(--surface-sunk); border: 0; border-radius: 12px; padding: 14px 16px; cursor: pointer; }
.mdl__row:hover { box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface); }
.mdl__row b { display: block; font-size: var(--t-body-sm); }
.mdl__row small { display: block; font-size: 12px; color: var(--ink-graphite); margin-top: 2px; }
.mdl__tag { color: var(--ink-whisper) !important; text-transform: uppercase;
  font-size: 10px !important; letter-spacing: .06em; font-weight: 700; }
.mdl__pin { color: var(--ink); flex: none; margin-top: 2px; }
.mdl__logo { width: 38px; height: 38px; border-radius: 50%; background: var(--surface);
  box-shadow: var(--ring); display: grid; place-items: center; font-weight: 800;
  font-size: 12px; flex: none; }
.mdl__back { background: none; border: 0; cursor: pointer; color: var(--ink-graphite);
  font-size: var(--t-body-sm); font-weight: 600; padding: 0 0 12px; }
.mdl__back:hover { color: var(--ink); }

.qty { display: flex; align-items: center; justify-content: center; gap: 14px; }
.qty__b { width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--surface-sunk); font-size: 22px; line-height: 1; }
.qty__b:hover { background: #e6e6e6; }
.qty__v { width: 92px; height: 44px; text-align: center; font-size: var(--t-h-sm);
  font-weight: 700; border: 1px solid var(--border); border-radius: 12px; }
.qty__price { font-size: 26px; font-weight: 800; color: var(--state-live);
  font-family: var(--font-mono); margin-top: 16px; }