/* delivery.css — «Доставка и оплата» (logic/NEW_MAP_4.md §8 B1–B5), build P6 023, 01.10.2026.
   Language of the approved home page (base.css tokens and components, no new colours).
   8.B1 tabs = R35 P10 drawn cards on a desktop, R61 ribbon of pills on a phone · panels — the client's numbers verbatim ·
   the zone map is a picture in the client's design we do not have: a frame without zones · 8.B5 payment on the R35 P2 dome. */

.dl-head h1 em { font-style: normal; color: var(--clay); }

/* ---------- 8.B1 · tabs ---------- */
.dl-ways { padding-bottom: clamp(18px, 1.6vw, 32px); }
.dl-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 24px); }
.dl-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; overflow: hidden;
  min-height: clamp(196px, 14.6vw, 320px); padding: clamp(18px, 1.6vw, 32px); border-radius: 28px; background: var(--white);
  border: 1.5px solid var(--line); transition: transform .3s var(--ease); }
.dl-tab:hover { transform: translateY(-3px); border-color: var(--ink); }
.dl-tab:active { transform: scale(.98); }
.dl-tab__t { font-family: var(--f-acc); font-weight: 700; font-size: clamp(22px, 1.2vw + 6px, 38px); line-height: 1.08; max-width: 10ch; }
.dl-tab__k { margin-top: auto; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); max-width: 54%; line-height: 1.3; }
.dl-tab__dr { position: absolute; right: clamp(10px, 1vw, 22px); bottom: clamp(10px, 1vw, 20px); width: clamp(78px, 6.6vw, 160px); height: auto;
  mix-blend-mode: multiply; opacity: .85; transition: transform .45s var(--ease); }
.dl-tab:hover .dl-tab__dr { transform: translate(-3px, -3px) rotate(-3deg); }
.dl-tab[aria-selected="true"] { background: var(--sun); border-color: var(--sun); box-shadow: inset 0 -3px 0 rgba(45, 41, 38, .12); }
.dl-tab[aria-selected="true"] .dl-tab__k { color: var(--ink); }
.dl-tab::after { content: ""; position: absolute; top: clamp(14px, 1.2vw, 24px); right: clamp(14px, 1.2vw, 24px); width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--white); }
.dl-tab[aria-selected="true"]::after { border-color: var(--ink); background: var(--ink)
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffdd2d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12.5 4 4L18 8'/></svg>") center / 18px no-repeat; }

/* ---------- panels (8.B2–8.B4) ---------- */
.dl-panels.sec { padding-top: clamp(10px, 1vw, 24px); padding-bottom: clamp(24px, 2.4vw, 56px); }
.dl-panel { display: grid; gap: clamp(12px, 1.2vw, 24px); align-items: stretch; }
.dl-panel[hidden] { display: none; }
.dl-panel:focus-visible { outline-offset: 6px; border-radius: 30px; }
.dl-panel--three { grid-template-columns: 1.08fr 1fr .92fr; }
.dl-panel--two { grid-template-columns: 1.25fr 1fr; }
.dl-panel--pick { grid-template-columns: .9fr 1.1fr; }
.dl-panel--pvz { grid-template-columns: 1.35fr .9fr; }
.dl-card { position: relative; display: flex; flex-direction: column; gap: clamp(14px, 1.2vw, 22px); padding: clamp(22px, 2.2vw, 48px); border-radius: 30px;
  background: var(--white); border: 1px solid #efe5d6; min-width: 0; }
.dl-card--sun { background: var(--sun); border-color: var(--sun); }
.dl-card--ink { background: var(--ink); color: var(--white); border-color: var(--ink); }
.dl-h { font-family: var(--f-acc); font-weight: 700; font-size: clamp(24px, 1.3vw + 7px, 46px); line-height: 1.1; max-width: 18ch; }
.dl-h3 { font-family: var(--f-acc); font-weight: 700; font-size: var(--fs-h3); line-height: 1.15; }
.dl-zones { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl-zones li { padding: 14px 18px; border-radius: var(--r-plate); background: rgba(255, 255, 255, .62); font-weight: 600; line-height: 1.35; }
.dl-zones li.is-first { background: var(--white); font-weight: 700; font-size: calc(var(--fs-body) * 1.1); padding: 18px 20px; }
.dl-card:not(.dl-card--sun) .dl-zones li { background: var(--cream); }
.dl-zones--dark li { background: rgba(255, 255, 255, .08) !important; }
.dl-zones--dark li.is-first { background: var(--sun) !important; color: var(--ink); }
.dl-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dl-slots li { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--cream); font-weight: 600; white-space: nowrap; }
.dl-slots li:last-child { background: var(--butter); border-color: var(--sun); }
.dl-when { font-weight: 600; padding: 16px 18px; border-radius: var(--r-plate); background: var(--butter); }
.dl-note { color: var(--ink-2); font-size: var(--fs-small); }
.dl-map { position: relative; margin: 0; min-height: clamp(260px, 20vw, 420px); border-radius: 30px; background-color: var(--sand);
  border: 2px dashed rgba(45, 41, 38, .2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
  padding: 24px; }
.dl-map__pin { width: 64px; height: 64px; border-radius: 50%; background: var(--white); display: grid; place-items: center; color: var(--clay);
  box-shadow: 0 10px 24px -14px rgba(45, 41, 38, .45); }
.dl-map__pin .ico { width: 30px; height: 30px; }
.dl-map figcaption { font-family: var(--f-acc); font-weight: 700; font-size: var(--fs-h3); }
.dl-addr { font-weight: 600; font-size: calc(var(--fs-body) * 1.08); max-width: 34ch; }
.dl-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dl-hours li { padding-left: 18px; position: relative; }
.dl-hours li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.dl-card .btn { align-self: flex-start; margin-top: auto; }
.dl-scheme { margin: 0; display: grid; gap: 12px; align-content: start; padding: clamp(18px, 1.6vw, 30px); border-radius: 30px; background: var(--white);
  border: 1px solid #efe5d6; }
.dl-scheme img { width: 100%; height: auto; border-radius: var(--r-plate); border: 1px solid var(--line); }
.dl-lead { font-size: calc(var(--fs-body) * 1.04); max-width: 64ch; }
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl-list li { position: relative; padding: 0 0 0 36px; line-height: 1.45; }
.dl-list li::before { content: ""; position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%; background: var(--sun)
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2926' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m6.5 12.5 3.8 3.8L17.5 9'/></svg>") center / 16px no-repeat; }
.dl-qa { padding: 16px 18px; border-radius: var(--r-plate); background: var(--cream); display: grid; gap: 6px; }
.dl-qa p { color: var(--ink-2); font-size: var(--fs-small); }
.dl-contact { font-weight: 600; }
.nw { white-space: nowrap; }
.dl-contact a { border-bottom: 2px solid rgba(255, 221, 45, .55); }
.dl-contact a:hover { border-color: var(--sun); }
.dl-card--ink .btn { margin-top: auto; }
.dl-card__dr { position: absolute; right: clamp(16px, 1.8vw, 40px); bottom: clamp(16px, 1.8vw, 36px); width: clamp(96px, 8vw, 190px); height: auto;
  mix-blend-mode: multiply; opacity: .85; pointer-events: none; }
.dl-card--ink .dl-card__dr { mix-blend-mode: normal; filter: invert(1) brightness(1.8); opacity: .8; }

/* ---------- 8.B5 · payment on the sand dome ---------- */
.dl-pay { background: var(--sand); margin-top: clamp(110px, 11vw, 240px); }
.dome.sec { padding-top: clamp(8px, 1vw, 24px); }
.dl-pay__lead { max-width: 34ch; font-weight: 500; text-align: right; }
.dl-pay__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1.05fr; grid-template-rows: auto auto;
  gap: clamp(12px, 1.2vw, 24px); }
.dl-pay__i { display: flex; align-items: center; gap: 16px; min-height: clamp(96px, 7vw, 150px); padding: clamp(18px, 1.6vw, 32px); border-radius: var(--r-card);
  background: var(--white); font-weight: 600; font-size: calc(var(--fs-body) * 1.06); line-height: 1.3; }
.dl-pay__i i { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; }
.dl-pay__i--ink { grid-column: 3; grid-row: 1 / span 2; background: var(--ink); color: var(--white); flex-direction: column; align-items: flex-start;
  justify-content: space-between; gap: 18px; }
.dl-pay__i--ink b { font-family: var(--f-acc); font-size: clamp(22px, 1vw + 9px, 36px); line-height: 1.16; max-width: 20ch; }
.dl-pay__tag { display: inline-flex; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); font-size: var(--fs-small); }
.dl-pay__i--ink .link-arrow { border-color: var(--sun); }
.dl-pay__warn { display: flex; align-items: center; gap: 12px; margin-top: clamp(18px, 1.6vw, 30px); color: var(--clay); font-weight: 600; }
.dl-pay__warn .ico { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--white); }

/* ---------- 1100 → 768 ---------- */
@media (max-width: 1100px) and (min-width: 768px) {
  .dl-tabs { grid-template-columns: 1fr 1fr; }
  .dl-panel--three { grid-template-columns: 1fr 1fr; }
  .dl-panel--three .dl-map { grid-column: 1 / -1; min-height: 220px; }
  .dl-panel--pvz, .dl-panel--pick { grid-template-columns: 1fr; }
}

/* ---------- phone: R61 — tabs as a ribbon of pills, cards one under another, full-width buttons ---------- */
@media (max-width: 767px) {
  .dl-head h1 { margin-top: 0; }
  .dl-ways { padding-block: 4px 8px; }
  .dl-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .dl-tabs::-webkit-scrollbar { display: none; }
  .dl-tab { flex: none; min-height: 46px; padding: 0 18px; border-radius: var(--r-pill); flex-direction: row; align-items: center; }
  .dl-tab__t { font-family: var(--f-txt); font-size: 15px; font-weight: 600; max-width: none; white-space: nowrap; }
  .dl-tab__k, .dl-tab__dr, .dl-tab::after, .dl-card__dr { display: none; }
  .dl-tab:hover { transform: none; }
  .dl-panels.sec { padding-top: 10px; }
  .dl-panel--three, .dl-panel--two, .dl-panel--pick, .dl-panel--pvz { grid-template-columns: 1fr; gap: 10px; }
  .dl-card, .dl-scheme { border-radius: 22px; padding: 20px 16px; }
  .dl-h { font-size: 24px; }
  .dl-zones li.is-first { font-size: 17px; }
  .dl-map { min-height: 180px; border-radius: 22px; }
  .dl-card .btn { width: 100%; align-self: stretch; }
  .dl-slots li { min-height: 42px; padding: 0 14px; }
  .dl-pay__lead { text-align: left; }
  .dl-pay__grid { grid-template-columns: 1fr; }
  .dl-pay__i { min-height: 0; padding: 16px; font-size: 16px; }
  .dl-pay__i i { width: 40px; height: 40px; }
  .dl-pay__i--ink { grid-column: auto; grid-row: auto; padding: 20px 16px; }
  .dl-pay__i--ink b { font-size: 21px; }
  .dl-pay__warn { align-items: flex-start; }
}