/**
 * Запись на приём: кнопка со стрелкой, окно с виджетом YCLIENTS
 * или формой заявки, кнопка WhatsApp.
 *
 * Токены — из main.css (таск 01), своих не заводим.
 * Правило G24: всё сразу в двух форматах, на 360px ничего не вылезает.
 */

/* --- Кнопки ------------------------------------------------------------- */

.tz-btn__arrow {
	margin-inline-start: 4px; /* тот же отступ, что у таска 04 в home.css */
	display: inline-block;
	line-height: 1;
	transition: transform 0.15s ease;
}

.tz-btn:hover .tz-btn__arrow { transform: translateX(3px); }

.tz-btn--whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px; /* палец, а не мышь */
}

.tz-btn__icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* --- Окно записи -------------------------------------------------------- */

.tz-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--tz-space-5, 24px);
}

/* С JS окно открывает скрипт; без JS — переход по якорю. */
.tz-modal.is-open,
.tz-modal:target {
	display: flex;
}

.tz-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 1, 24, 0.55);
	display: block;
}

.tz-modal__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(720px, 100%);
	max-height: min(88vh, 900px);
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--tz-color-bg, #fff);
	border-radius: var(--tz-radius-lg, 24px);
	box-shadow: 0 24px 64px rgba(0, 1, 24, 0.28);
}

.tz-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tz-space-4, 16px);
	padding: var(--tz-space-5, 24px) var(--tz-space-5, 24px) var(--tz-space-3, 12px);
}

.tz-modal__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	color: var(--tz-color-ink, #2f4c54);
}

.tz-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: var(--tz-radius-pill, 999px);
	color: var(--tz-color-ink, #2f4c54);
	background: var(--tz-color-surface, #f6f6fb);
	text-decoration: none;
}

.tz-modal__close:hover { background: var(--tz-color-tint, #e8edfb); }
.tz-modal__close .tz-icon { width: 20px; height: 20px; }

.tz-modal__body {
	padding: 0 var(--tz-space-5, 24px) var(--tz-space-5, 24px);
	min-width: 0;
}

.tz-booking__frame {
	display: block;
	width: 100%;
	max-width: 100%;
	height: min(70vh, 640px);
	border: 0;
	border-radius: var(--tz-radius-md, 16px);
	background: var(--tz-color-surface, #f6f6fb);
}

.tz-modal__note,
.tz-modal__aside {
	margin: var(--tz-space-4, 16px) 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tz-color-muted, #92a1a7);
	overflow-wrap: anywhere;
}

.tz-modal__note a,
.tz-modal__phone { color: var(--tz-color-primary, #816cd7); }

.tz-modal__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tz-space-3, 12px);
	color: var(--tz-color-ink, #2f4c54);
}

/* Форма таска 09 внутри окна: без своей карточки и своих отступов. */
.tz-form-wrap--modal {
	padding: 0;
	margin: 0;
	background: transparent;
	box-shadow: none;
}

/* Пока окно открыто, страница под ним не прокручивается. */
body.tz-modal-open { overflow: hidden; }

/* --- Телефон ------------------------------------------------------------ */

@media (max-width: 600px) {
	.tz-modal { padding: 0; align-items: flex-end; }

	.tz-modal__dialog {
		width: 100%;
		max-height: 92vh;
		border-radius: var(--tz-radius-lg, 24px) var(--tz-radius-lg, 24px) 0 0;
	}

	.tz-modal__head { padding: var(--tz-space-4, 16px) var(--tz-space-4, 16px) var(--tz-space-2, 8px); }
	.tz-modal__title { font-size: 19px; }
	.tz-modal__body { padding: 0 var(--tz-space-4, 16px) var(--tz-space-5, 24px); }
	.tz-booking__frame { height: 68vh; }
}

@media (prefers-reduced-motion: reduce) {
	.tz-btn:hover .tz-btn__arrow { transform: none; }
}