/* ============================================================
   Стили блока «Доставка» (универсальный)
   Используется inline на странице торта и на delivery/index.html.
   и встроенным в адаптивные страницы тортов (site/cakes/).
   ============================================================ */

/* Шрифты, цвета и пропорции — те же что в калькуляторе:
   var(--display)=ALS Beast (заголовки), var(--text)=Golos Text (мелочь),
   --pink — лейблы, --red — крупные значения.
   Размеры подобраны под высоту .total-meta / .total-value в style.css. */

/* блок растягивается на высоту колонки и прижимает
   «итоговую стоимость» к низу — чтобы рядом с калькулятором (в десктопе)
   она оказывалась примерно на одной горизонтали с «стоимостью торта». */
.dlv-frame{
  max-width:520px;margin:0 auto;padding:14px 16px 18px;
  display:flex;flex-direction:column;gap:10px;align-items:stretch;
  background:var(--bg);
  min-height:100%;
}
/* всё что после .dlv-zones — «бюджетный» блок: лейблы, цены, CTA.
   Прижимаем его к низу через margin-top:auto на .dlv-cost. */
.dlv-frame .dlv-cost{margin-top:auto}

/* «Мы бережно доставляем…» — обычный мелкий красный текст (Golos) */
.dlv-title{
  margin:0;
  font-family:var(--text);font-weight:400;
  font-size:12px;line-height:1.4;letter-spacing:.2px;
  text-align:center;color:var(--red);
}

.dlv-map{
  width:100%;
  aspect-ratio: 360 / 280;
  background:#dcdcdc;border-radius:8px;overflow:hidden;
}
.dlv-map iframe{display:block;width:100%;height:100%;border:0}

/* «выберите зону» — Beast, белый жирный */
.dlv-zone-label{
  margin:4px 0 0;text-align:center;
  font-family:var(--display);font-weight:900;
  color:#fff;font-size:28px;line-height:1;text-transform:lowercase;
}
.dlv-zone-label::first-letter{text-transform:uppercase}

/* шесть зон в один ряд — компактнее, чтобы блок не разъезжался по высоте */
.dlv-zones{
  /* display:grid;grid-template-columns:repeat(6, minmax(0,1fr)); */
  display: flex;
  gap:8px;justify-content:center;align-items:center;
  margin:0 auto;width:100%;max-width:300px;
}
.dlv-zone{
  aspect-ratio:1/1;
  /* width:100%; */
  width: 43px;
  border-radius:50%;
  border:0;outline:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;color:#fff;font-size:16px;
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow:0 0 0 0 transparent;
}
.dlv-zone:hover{transform:scale(1.06)}
.dlv-zone.is-active{box-shadow:0 0 0 2px #fff, 0 0 0 4px currentColor}
.dlv-zone[disabled]{opacity:.35;cursor:not-allowed}
.dlv-zone[disabled]:hover{transform:none}

/* пастельные тона: те же оттенки, но мягче — кружки выглядят бережнее */
.dlv-z-orange{background:#F5C58A;color:#E89A2E}
.dlv-z-green {background:#A8D8B0;color:#3FA94E}
.dlv-z-purple{background:#C8AEE3;color:#9558C9}
.dlv-z-brown {background:#D8C2A8;color:#A98968}
.dlv-z-blue  {background:#A8CFE5;color:#3A9DD8}
.dlv-z-red   {background:#EFA6AA;color:#D2363C}

/* «стоимость доставки» — лейбл Beast pink 20px (как .total-meta),
   значение Beast red 60px (как .total-value на мобиле). */
.dlv-cost{margin-top:6px;text-align:center;display:flex;flex-direction:column;gap:2px;align-items:center}
.dlv-cost .lbl{
  font-family:var(--display);font-weight:900;color:#fff;
  font-size:20px;line-height:1;letter-spacing:.2px;text-transform:lowercase;
}
.dlv-cost .lbl::first-letter{text-transform:uppercase}
.dlv-cost .val{
  font-family:var(--display);font-weight:900;color:var(--red);
  font-size:60px;line-height:1;letter-spacing:-1px;white-space:nowrap;
}

/* «итоговая стоимость» — лейбл такой же, но крупная цифра 76 с искрами,
   1-в-1 как .total-wrap в калькуляторе. */
.dlv-total{text-align:center;margin-top:4px;display:flex;flex-direction:column;gap:4px;align-items:center}
.dlv-total .lbl{
  font-family:var(--display);font-weight:900;color:var(--pink);
  font-size:20px;line-height:1;letter-spacing:.2px;text-transform:lowercase;
}
.dlv-total .lbl::first-letter{text-transform:uppercase}
.dlv-total .val-row{display:flex;align-items:center;justify-content:center;gap:14px}
.dlv-total .sparkle{width:22px;height:22px;color:var(--red);display:inline-block;flex-shrink:0}
.dlv-total .sparkle svg{width:100%;height:100%;fill:currentColor;display:block}
.dlv-total .val{
  font-family:var(--display);font-weight:900;
  color:var(--red);font-size:76px;line-height:1;letter-spacing:-1px;white-space:nowrap;
}

/* «продолжить заказ с администратором» — такой же стиль как .next-btn,
   только текст в две строки. */
.dlv-cta{
  background:transparent;border:0;
  font-family:var(--display);font-weight:900;
  color:var(--pink);font-size:24px;line-height:1.1;
  text-transform:lowercase;text-align:center;
  padding:6px 8px 0;letter-spacing:.2px;
  transition:opacity .15s ease, color .15s ease;
  cursor:url('../assets/cursor.svg') 8 8, pointer;
}
.dlv-cta::first-letter{text-transform:uppercase}
.dlv-cta:hover{color:var(--rose)}
.dlv-cta[disabled]{opacity:.45;cursor:not-allowed}

.dlv-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:#0e0e0e;color:#fff;border-radius:8px;
  padding:10px 16px;font-family:var(--text);font-size:13px;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
  max-width:90vw;text-align:center;z-index:9999;
}
.dlv-toast.show{opacity:1}

@media (max-width:420px){
  .dlv-zone-label{font-size:24px}
  .dlv-zones{gap:8px;max-width:280px}
  .dlv-zone{font-size:14px}
  .dlv-cost .val{font-size:48px}
  .dlv-total .val{font-size:60px}
  .dlv-cta{font-size:20px}
}