/**
 * Блок «Доставка в город»: фильтры, карта пунктов и итог выбора.
 *
 * Списка адресов нет — пункт выбирают на карте. На широком экране карта
 * слева во всю высоту, справа фильтры и итог (срок, дата, оплата выбранного
 * пункта). На телефоне всё друг под другом: фильтры, карта, итог.
 */

.city-delivery__body {
  display: grid;
  grid-template-areas:
    'filters'
    'map'
    'result';
  gap: var(--space-4);
}

.city-delivery__filters { grid-area: filters; }
.city-delivery__map { grid-area: map; }
.city-delivery__result { grid-area: result; }

@media (min-width: 1024px) {
  .city-delivery__body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'map filters'
      'map result';
    gap: var(--space-4) var(--space-6);
    min-height: 34rem;
  }

  .city-delivery__result { align-self: start; }
}

/* Карта: место под неё занято сразу, чтобы страница не прыгала при загрузке */
/* На телефоне карточку пункта Яндекс выводит панелью внизу самой карты,
   поэтому карта должна быть высокой: при 20rem кнопка «Выбрать» уезжала
   под край. 70% экрана, но не больше 32rem и не меньше 26rem. */
.city-delivery__map {
  position: relative;
  min-height: clamp(26rem, 70vh, 32rem);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
}

@media (min-width: 1024px) {
  .city-delivery__map { min-height: 0; }
}

.city-delivery__map-stub {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.city-delivery__map.is-ready .city-delivery__map-stub { display: none; }

.city-delivery__map-stub {
  flex-direction: column;
  gap: var(--space-3);
}

.city-delivery__map-stub p { margin: 0; }

.city-delivery__map-stub [hidden] { display: none; }


.city-delivery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.city-delivery__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.city-delivery__chip span { color: var(--color-text-faint); }

.city-delivery__chip:hover { border-color: var(--color-primary); }

.city-delivery__chip.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.city-delivery__chip.is-active span { color: var(--color-primary-dark); }


/* Итог выбора */

.city-delivery__result-hint {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.city-delivery__result-hint[hidden],
.city-delivery__result-card[hidden] { display: none; }

.city-delivery__result-hint-icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-primary);
}

.city-delivery__result-card {
  padding: var(--space-6);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
}

.city-delivery__result-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.city-delivery__result-head p { margin: 0; }

.city-delivery__result-icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary-dark);
}

.city-delivery__result-type {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
}

.city-delivery__result-address {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.city-delivery__result-meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.city-delivery__result-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .city-delivery__result-facts { grid-template-columns: repeat(4, 1fr); }
}

.city-delivery__result-facts > div {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.city-delivery__result-facts dt {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.city-delivery__result-facts dd {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.city-delivery__result-note {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.city-delivery__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Балун Яндекса: разметку рисуем мы, оформление — тоже */
.city-delivery__balloon {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 16rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}

.city-delivery__balloon-type {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--color-primary-dark);
}

.city-delivery__balloon-address {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.city-delivery__balloon-meta {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.city-delivery__balloon .btn { margin-top: var(--space-2); }


/* Внутри страницы доставки блок стоит без своего контейнера — отступы задаём сами */
.info-page .city-delivery {
  margin-block: var(--space-10);
}