/* ════════════════════════════════════════════════════════════════════════
 * delivery_v2.css — страница «Доставка и оплата» (.dlv-*)
 * Порт design_handoff_delivery/Delivery.section.css на боевые токены.
 * Грузится ТОЛЬКО на module=dostavka, ПОСЛЕ generic_v2.css (см. css_incs.html).
 *
 * Токены берутся из глобального :root (styles.css / iter-04-homepage.css):
 *   --c-blue #0E94C8, --c-blue-light #EBF7FA, --c-orange, --c-text/-2/-3,
 *   --c-bg, --c-bg-soft, --c-border, --ff-display Bitter, --ff-body Onest,
 *   --fs-* --sp-* --r-* --sh-* --dur-* --ease-out.
 * --c-success на generic-странице неконсистентен/может не грузиться →
 *   объявляем локально на scope .dlv-main (приём generic_v2.css c --c-border-soft).
 *
 * Источник правды: skills/playwright-tester + 6 reference-скриншотов хэндофа.
 * ════════════════════════════════════════════════════════════════════════ */

.dlv-main {
  /* «Бесплатно» green — каноническое значение дизайн-токена хэндофа */
  --c-success: #1F8A5B;
  min-width: 0; display: flex; flex-direction: column; gap: var(--sp-7);
}
.dlv-main > h1 { margin: 0; }
/* p./h2. префиксы: бьём prose-правила generic_v2.css (.v2-page p/h2 = 0,1,1) */
/* margin-top подобран так, чтобы строка lede легла на горизонтальную линию
   пункта «Все (N)» левого меню (H1 уже на линии «Взрослые матрасы»). Owner 2026-06-30. */
p.dlv-lede { margin: calc(var(--sp-7) * -1 - 4px) 0 0; color: var(--c-text-2); max-width: none; }

.dlv-block { display: flex; flex-direction: column; gap: var(--sp-4); }
.dlv-block > h2 { margin: 0; }
p.dlv-block__sub { margin: -4px 0 0; color: var(--c-text-2); }

/* ── Базовый .v2-select (в бою объявлен только scoped к .fm-card) ── */
.dlv-main .v2-select {
  width: 100%; height: 44px; padding: 0 40px 0 14px;
  border: 1px solid var(--c-border); border-radius: var(--r-input, 8px);
  background-color: var(--c-bg);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%235F6B7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center;
  appearance: none; -webkit-appearance: none;
  font: 400 var(--fs-sm)/1 var(--ff-body); color: var(--c-text); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}
.dlv-main .v2-select:hover { border-color: var(--c-text-2); }
.dlv-main .v2-select:focus { outline: 2px solid var(--c-blue); outline-offset: -1px; border-color: var(--c-blue); }

/* ── Region / manufacturer selectors ── */
.dlv-selectors {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
.dlv-field { display: flex; flex-direction: column; gap: 6px; }
.dlv-field > label {
  font: 600 var(--fs-sm)/1.2 var(--ff-body); color: var(--c-text-2);
}
.dlv-field .v2-select { width: 100%; }

/* ── Variant A: promise strip ── */
.dlv-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.dlv-promise {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.dlv-promise:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.dlv-promise__icon {
  width: 48px; height: 48px; flex: none; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-blue-light); color: var(--c-blue);
}
.dlv-promise__t { font: 700 var(--fs-h3)/1.2 var(--ff-display); color: var(--c-text); }
.dlv-promise__s { font: 400 var(--fs-sm)/1.45 var(--ff-body); color: var(--c-text-2); }
/* Accented (free delivery) tile */
.dlv-promise--accent {
  background: var(--c-blue); border-color: var(--c-blue);
}
.dlv-promise--accent .dlv-promise__icon { background: rgba(255,255,255,.18); color: #fff; }
.dlv-promise--accent .dlv-promise__t { color: #fff; }
.dlv-promise--accent .dlv-promise__s { color: rgba(255,255,255,.82); }
.dlv-promise--accent:hover { box-shadow: var(--sh-lg, var(--sh-md)); }
.dlv-promise--orange { background: var(--c-orange); border-color: var(--c-orange); }
.dlv-promise--orange .dlv-promise__icon { background: rgba(255,255,255,.20); color: #fff; }
.dlv-promise--orange .dlv-promise__t { color: #fff; }
.dlv-promise--orange .dlv-promise__s { color: rgba(255,255,255,.86); }

/* ── Variant B: hero split ──
   Owner 2026-06-30: колонки 1fr 1fr (было 1.35fr 1fr) + тот же gap 16px, что и
   у .dlv-cards-2 / .dlv-pickup → вертикальный раздел hero (панель|aside) ложится
   на ту же 50%-рейку, что и карточки стоимости ниже. */
.dlv-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: stretch; }
.dlv-hero__main {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--c-blue); color: #fff;
  border-radius: var(--r-card);
}
.dlv-hero__main.is-orange { background: var(--c-orange); }
.dlv-hero__badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16);
  font: 600 var(--fs-xs)/1 var(--ff-body); letter-spacing: .02em;
}
.dlv-hero__icon { width: 56px; height: 56px; color: #fff; }
h2.dlv-hero__title { margin: 0; font: 800 var(--fs-h1)/1.05 var(--ff-display); color: #fff; letter-spacing: var(--ls-h1); }
p.dlv-hero__lede { margin: 0; color: rgba(255,255,255,.86); max-width: 38ch; }
.dlv-hero__points { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; }
.dlv-hero__point { display: flex; align-items: center; gap: 10px; font: 500 var(--fs-sm)/1.3 var(--ff-body); }
.dlv-hero__point svg { width: 18px; height: 18px; flex: none; color: #fff; opacity: .9; }
.dlv-hero__aside {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
.dlv-hero__aside h3 { margin: 0; font: 700 var(--fs-h4)/1.2 var(--ff-display); }

/* ── Cost cards ── */
.dlv-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.dlv-cost {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--sp-5);
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
.dlv-cost__label { display: flex; align-items: center; gap: 10px; color: var(--c-text-2); font: 600 var(--fs-sm)/1.2 var(--ff-body); }
.dlv-cost__label svg { width: 20px; height: 20px; flex: none; }
.dlv-cost__value { font: 800 var(--fs-h3)/1.1 var(--ff-display); color: var(--c-text); }
.dlv-cost__value.is-free { color: var(--c-success); }
.dlv-cost__note { color: var(--c-text-2); font-size: var(--fs-sm); }
.dlv-cost--free { border-color: color-mix(in srgb, var(--c-success) 40%, var(--c-border)); background: color-mix(in srgb, var(--c-success) 6%, var(--c-bg)); }

/* ── Payment methods ── */
.dlv-pay { display: flex; flex-direction: column; gap: var(--sp-2); }
.dlv-pay__row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.dlv-pay__icon {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-blue-light); color: var(--c-blue);
}
.dlv-pay__icon svg { width: 22px; height: 22px; }
.dlv-pay__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dlv-pay__t { font: 600 var(--fs-body)/1.2 var(--ff-body); color: var(--c-text); }
.dlv-pay__s { font: 400 var(--fs-sm)/1.3 var(--ff-body); color: var(--c-text-2); }
.dlv-pay__row--kaspi .dlv-pay__icon { background: rgba(241,70,53,.12); color: #F14635; }
.dlv-pay__tag {
  margin-left: auto; flex: none;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: #F14635; color: #fff; font: 700 var(--fs-xs)/1 var(--ff-body);
}

/* ── Pickup ── */
.dlv-pickup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); padding: var(--sp-5); background: var(--c-bg-soft); border-radius: var(--r-card); }
.dlv-pickup__col { display: flex; flex-direction: column; gap: var(--sp-3); }
.dlv-fact { display: flex; gap: 12px; align-items: flex-start; }
.dlv-fact__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dlv-fact__icon { width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-blue); }
.dlv-fact__icon svg { width: 20px; height: 20px; }
.dlv-fact__k { display: block; font: 400 var(--fs-xs)/1.2 var(--ff-body); color: var(--c-text-3); text-transform: uppercase; letter-spacing: .04em; }
.dlv-fact__v { display: block; font: 600 var(--fs-body)/1.3 var(--ff-body); color: var(--c-text); }
p.dlv-pickup__note { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }

/* ── Pickup addresses ── */
.dlv-addr { display: flex; flex-direction: column; }
.dlv-addr__row { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); }
.dlv-addr__row:last-child { border-bottom: 0; }
.dlv-addr__brand { font: 700 var(--fs-h4)/1.2 var(--ff-display); color: var(--c-text); min-width: 90px; }
.dlv-addr__where { color: var(--c-text-2); }

/* ── Map (реальный Яндекс-embed в .dlv-map__embed) ── */
.dlv-map {
  position: relative; height: 380px; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--c-border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-blue) 8%, var(--c-bg-soft)), var(--c-bg-soft));
}
.dlv-map__embed { position: absolute; inset: 0; width: 100%; height: 100%; }
.dlv-map__embed > * { width: 100% !important; height: 100% !important; }
.dlv-map__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .5;
}
.dlv-map__pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.dlv-map__pin-dot { width: 44px; height: 44px; border-radius: 50% 50% 50% 0; background: var(--c-blue); transform: rotate(-45deg); box-shadow: var(--sh-md); display: flex; align-items: center; justify-content: center; }
.dlv-map__pin-dot svg { transform: rotate(45deg); color: #fff; width: 22px; height: 22px; }
.dlv-map__pin-label { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-pill); padding: 4px 12px; font: 600 var(--fs-sm)/1 var(--ff-body); box-shadow: var(--sh-sm); }
.dlv-map__hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-text-2);
  font-size: var(--fs-sm); box-shadow: var(--sh-sm); white-space: nowrap;
}
.dlv-map__hint svg { width: 16px; height: 16px; }

@media (max-width: 990px) {
  .dlv-strip { grid-template-columns: repeat(2, 1fr); }
  .dlv-hero, .dlv-cards-2, .dlv-pickup, .dlv-selectors { grid-template-columns: 1fr; }
}