/*
 * [zoomagazin] Попапы условий доставки и оплаты на карточке товара.
 *
 * Здесь только модалка и подсказка кликабельности. САМО СОДЕРЖИМОЕ рисует
 * zm-info-pages.css — тот же файл, что и на странице «Доставка і оплата»:
 * попап обязан выглядеть один в один со страницей, с которой взят кусок, и
 * при правке стилей страницы не разъезжаться с ней. Мод подключает оба файла.
 */

/* Кликабельность показываем пунктиром под названием, а не подчёркиванием
   ссылки: строка целиком — цель для пальца, но выглядеть должна как строка
   прайса, а не как ссылка посреди таблицы. */
.zm-delivery-clickable {
	cursor: pointer;
}

.product-delivery__item.zm-delivery-clickable .product-delivery__name a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed var(--up-color-link, #FA6F36);
}

.product-delivery__item.zm-delivery-clickable:hover .product-delivery__name a {
	color: var(--up-color-link, #FA6F36);
	border-bottom-color: currentColor;
}

.product-payment.zm-delivery-clickable .product-payment__title {
	display: inline-block;
	border-bottom: 1px dashed var(--up-color-link, #FA6F36);
}

.product-payment.zm-delivery-clickable:hover .product-payment__title {
	color: var(--up-color-link, #FA6F36);
	border-bottom-color: currentColor;
}

/* Карточка «Доставка по Дніпру» ростом почти в экран, поэтому скроллится тело
   модалки, а не страница под ней. */
.zm-delivery-modal .modal-body {
	max-height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.zm-delivery-modal .modal-title {
	font-size: 20px;
	font-weight: 700;
	padding-right: 30px;
}

/* На странице карточка сама себе рамка и тень. Внутри модалки рамка второй раз
   не нужна — её роль играет сама модалка. */
.zm-info--popup .zm-info__card,
.zm-info--popup .zm-info__section {
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.zm-info--popup > .zm-info__card:first-child > *:first-child,
.zm-info--popup > *:first-child {
	margin-top: 0;
}

@media (max-width: 767px) {
	/* ⚠️ 78vh было мало не по высоте, а по СВОБОДНОМУ МЕСТУ. Замерено на стенде
	   при 500×813: окно попапа выходило 500×728, то есть 90% экрана и вся его
	   ширина — тапать «мимо» становилось физически некуда, и pointer-events
	   ниже ничего не спасал. Теперь окно занимает примерно две трети высоты,
	   и сверху остаётся полоса под палец. */
	.zm-delivery-modal .modal-dialog {
		margin: 12px;
	}

	.zm-delivery-modal .modal-body {
		max-height: 58vh;
	}

	.zm-delivery-modal .modal-title {
		font-size: 17px;
	}
}

/* Тап мимо окна закрывает попап — на телефоне тоже.
 *
 * Bootstrap 3.4.1 закрывает модалку по клику, только если попали РОВНО в .modal
 * (`if (e.target !== e.currentTarget) return`). У темы диалог растянут на всю
 * высоту — `.modal-dialog-centered { min-height: calc(100% - 1rem) }`, — поэтому
 * на десктопе свободными остаются поля слева и справа от узкого окна, а на
 * телефоне окно во всю ширину и попасть в .modal физически некуда. Отсюда
 * жалоба «закрывается только крестиком».
 *
 * Диалог перестаёт ловить указатель, содержимое — ловит. Кнопка закрытия и
 * прокрутка тела внутри .modal-content, так что они не задеты.
 *
 * ⚠️ Только наши попапы. У чужих модалок темы (колбэк, быстрый просмотр) внутри
 * формы, и случайное закрытие тапом там — потерянный ввод, а не удобство.
 */
.zm-delivery-modal .modal-dialog {
	pointer-events: none;
}

.zm-delivery-modal .modal-content {
	pointer-events: auto;
}