/* ============================================================================
   V4 BOOKING MODAL SKIN (#modalBooking → .t4-bmodal)

   Loaded on V4 pages whose tour cards open the site-wide booking modal
   (catalog + book-now). The form INTERNALS (fields, steps, extras, checkout)
   are styled by tour-v4.css via the `.t4-widget__stage` container that
   booking-modal-v4.js wraps the AJAX-injected form in — this file only
   styles the modal SHELL (desktop centered card / mobile bottom sheet),
   the header bar, the time-slot list and the buggy dropdown, none of which
   exist inside the tour-page widget flow.

   Air-datepicker inside the modal is reskinned by the same rules as the
   widget's calendar panel — see the `.t4-bmodal` scope added to the
   `.t4-widget--cal-only` calendar rules in tour-v4.css.
   ==========================================================================*/

/* ---- Shell: desktop centered card (compact — widget-style single column,
        approved mockup modal-widget-style.html) ---- */
body.t4-page .t4-bmodal {
	width: min(620px, 96vw);
	max-width: 96vw;
	padding: 0;
	background: var(--t4-bg);
	border-radius: var(--t4-r-lg);
	border-top: 3px solid var(--t4-red);
	box-shadow: var(--t4-sh-lg);
	overflow: hidden;
}
body.t4-page .fancybox-slide--html .t4-bmodal {
	/* !important: Fancybox shows inline content by setting an INLINE
	   `display:inline-block` style on it — without the override the column
	   flex never applies, the stage is never height-constrained, and tall
	   content (e.g. expanded experience packages) just clips at the viewport
	   edge instead of scrolling inside the stage. Scoped to the open state
	   only, so Fancybox's inline `display:none` on close still works. */
	display: flex !important;
	flex-direction: column;
	max-height: min(88vh, 920px);
}
/* Fancybox centers slide content via an inline-block + vertical-align hack
   (::before spacer) — a flex modal falls out of that. Center the slide itself
   with flex instead, for this modal only. */
body.t4-page .fancybox-slide--html:has(.t4-bmodal) {
	display: flex;
	align-items: center;
	justify-content: center;
}
body.t4-page .fancybox-slide--html:has(.t4-bmodal)::before { display: none; }

/* ---- Header bar ---- */
body.t4-page .t4-bmodal__head {
	flex: 0 0 auto;
	padding: 18px 24px 14px;
	border-bottom: 1px solid var(--t4-line);
	background: var(--t4-bg);
}
body.t4-page .t4-bmodal__head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding-right: 40px; /* room for the absolute close button */
}
body.t4-page .t4-bmodal__hprice {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h4);
	line-height: 1;
	color: var(--t4-ink);
	white-space: nowrap;
	text-align: right;
	/* The "/ BUGGY" small hangs below out-of-flow (absolute) so flex-end aligns the
	   PRICE VALUE with the tour title line, not the caption (user 2026-07-15). */
	position: relative;
	/* Match the title's line-box: 26px * 1.05 ≈ 27px vs value 22px — nudge so baselines meet */
	padding-bottom: 2px;
}
body.t4-page .t4-bmodal__hprice[hidden] { display: none; }
body.t4-page .t4-bmodal__hprice small {
	display: block;
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: 2px;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.12em;
	color: var(--t4-muted);
}
body.t4-page .t4-bmodal__kick {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--t4-red);
	margin-bottom: 2px;
}
body.t4-page .t4-bmodal__title {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h3);
	line-height: 1.05;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	color: var(--t4-ink);
}
body.t4-page .t4-bmodal__title:empty::before {
	content: '···';
	color: var(--t4-muted);
}
body.t4-page .t4-bmodal__grab { display: none; }

/* ---- Close button (existing .js-modal-close markup, restyled) ---- */
body.t4-page .t4-bmodal .modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--t4-bg-1);
	border: 1px solid var(--t4-line);
	border-radius: 50%;
	cursor: pointer;
	transition: background .2s var(--t4-ease), color .2s var(--t4-ease), transform .15s var(--t4-ease);
	color: var(--t4-ink);
}
body.t4-page .t4-bmodal .modal__close:hover { background: var(--t4-red); color: #fff; border-color: var(--t4-red); }
body.t4-page .t4-bmodal .modal__close:active { transform: scale(0.92); }
body.t4-page .t4-bmodal .modal__close-icon {
	width: 14px;
	height: 14px;
	fill: currentColor;
	stroke: currentColor;
}

/* ---- Stage (form host) — overrides the widget's own stage spacing ---- */
body.t4-page .t4-bmodal .t4-bmodal__stage {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 22px 28px 30px;
	/* Same hidden-scrollbar pattern as the tour widget stage */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
body.t4-page .t4-bmodal .t4-bmodal__stage::-webkit-scrollbar { display: none; }

/* ---- Preloader while the form AJAX-loads ---- */
body.t4-page .t4-bmodal:not(.t4-bmodal--ready) .modal__preloader { display: block; }
body.t4-page .t4-bmodal.t4-bmodal--ready .modal__preloader { display: none; }

/* ============================================================================
   PHASES (classes set by booking-modal-v4.js)
   --pick    : widget UI (date strip / slots / stepper / total / Continue)
   --cal     : full-month AirDatepicker (the form's own calendar, reskinned by
               the `.t4-bmodal` scope added to tour-v4.css's calendar rules)
   --details : the booking form step 1+ (calendar column hidden)
   ==========================================================================*/

body.t4-page .t4-bmodal .t4-bmodal__stage { position: relative; }

/* Widget UI + back pill + recap visibility is driven inline by JS (.toggle/
   [hidden]) — only the formhost needs CSS state. In pick phase the form must
   stay rendered (AirDatepicker init, booking.js lookups) but out of sight —
   same off-screen technique as .t4-formhost on tour pages. */
body.t4-page .t4-bmodal--pick .t4-bmodal__formhost {
	position: absolute;
	left: -200vw;
	top: 0;
	width: 560px;
	max-width: 560px;
	pointer-events: none;
	opacity: 0;
}

/* Details phase — EXACT mirror of the tour-page widget's booking mode
   (.t4-widget--booking rules, tour-v4.css ~2559): step-1 shows ONLY the
   contact fields + the form's own footer (Total + Next). Same elements
   hidden, same button labels — the modal must not diverge from the
   tour-page form. */
body.t4-page .t4-bmodal--details .t4-bmodal__formhost .booking-step[data-id="step-1"] .booking-step__column:first-child,
body.t4-page .t4-bmodal--details .t4-bmodal__formhost .booking-step[data-id="step-1"] .booking-step__header,
body.t4-page .t4-bmodal--details .t4-bmodal__formhost .booking-step[data-id="step-1"] .booking-step__fields--tight,
body.t4-page .t4-bmodal--details .t4-bmodal__formhost .booking-step[data-id="step-1"] .booking-step__extra,
body.t4-page .t4-bmodal--details .t4-bmodal__formhost .booking-step[data-id="step-1"] .booking-step__extra-hint,
body.t4-page .t4-bmodal--details .t4-bmodal__formhost .booking-step[data-id="step-1"] .calendar-container,
body.t4-page .t4-bmodal--details .t4-bmodal__formhost .booking-step[data-id="step-1"] .variants,
body.t4-page .t4-bmodal--details .t4-bmodal__formhost .booking-step[data-id="step-1"] .js-buggy_types,
body.t4-page .t4-bmodal--details .t4-bmodal__formhost .booking-step[data-id="step-1"] .field:has(.js-number_of_buggies_list) {
	display: none !important;
}

/* Cal phase: show ONLY the calendar — mirror of the .t4-widget--cal-only
   structure rules in tour-v4.css. */
body.t4-page .t4-bmodal--cal .t4-bmodal__formhost .booking-step__column:nth-child(2),
body.t4-page .t4-bmodal--cal .t4-bmodal__formhost .booking-step:not([data-id="step-1"]),
body.t4-page .t4-bmodal--cal .t4-bmodal__formhost .booking-step__footer,
body.t4-page .t4-bmodal--cal .t4-bmodal__formhost .booking-step__header,
body.t4-page .t4-bmodal--cal .t4-bmodal__formhost .variants {
	display: none !important;
}

/* Back pill sits above the form/calendar (same .t4-widget__back pill as the
   tour widget — "Back to dates" on step 1, "Back" deeper) */
body.t4-page .t4-bmodal__back { margin-bottom: 14px; }
body.t4-page .t4-bmodal__back[hidden] { display: none; }

/* ---- Time-slot list (.variants — native form markup; the tour widget mirrors
        these into its own .t4-slot cards, the modal shows them directly) ---- */
body.t4-page .t4-bmodal .t4-widget__stage .variants {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-top: 14px;
}
body.t4-page .t4-bmodal .t4-widget__stage .variants > * {
	margin-bottom: 0 !important; /* legacy .variants > *:not(:last-child) gap */
	min-width: 0; /* grid items default to min-width:auto — nowrap labels would blow the tracks out of the column */
}
body.t4-page .t4-bmodal .t4-widget__stage .variants > p {
	grid-column: 1 / -1;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small) !important;
	color: var(--t4-body) !important;
}
body.t4-page .t4-bmodal .t4-widget__stage .variant__text {
	padding: 11px 10px;
	border: 1.5px solid var(--t4-line-2);
	border-radius: var(--t4-r-md);
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	line-height: 1.35;
	color: var(--t4-ink-2);
	text-align: center;
	white-space: normal; /* legacy nowrap+ellipsis would truncate "(N buggies available)" */
	transition: all .18s var(--t4-ease);
}
body.t4-page .t4-bmodal .t4-widget__stage .variant:hover .variant__text { border-color: var(--t4-ink); }
body.t4-page .t4-bmodal .t4-widget__stage .variant__input:checked + .variant__text {
	background: var(--t4-red);
	border-color: var(--t4-red);
	color: #fff;
	box-shadow: var(--t4-sh-red);
}
body.t4-page .t4-bmodal .t4-widget__stage .variant__input[disabled] + .variant__text { opacity: .35; }

/* ---- Buggy-count custom dropdown panel (.field__list — hidden in the tour
        widget, visible here) ---- */
body.t4-page .t4-bmodal .t4-widget__stage .field__list {
	border-radius: var(--t4-r-md);
	border: 1px solid var(--t4-line);
	box-shadow: var(--t4-sh-md);
	background: var(--t4-bg);
	overflow: hidden;
}
body.t4-page .t4-bmodal .t4-widget__stage .field__list-items li {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-ink-2);
	padding: 10px 14px;
	cursor: pointer;
	transition: background .15s var(--t4-ease);
}
body.t4-page .t4-bmodal .t4-widget__stage .field__list-items li:hover {
	background: var(--t4-red-tint);
	color: var(--t4-ink);
}

/* ---- "What is private tour / refund guarantee?" hint links ---- */
body.t4-page .t4-bmodal .t4-widget__stage .booking-step__extra-hint {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	color: var(--t4-muted);
	text-decoration: underline;
}
body.t4-page .t4-bmodal .t4-widget__stage .booking-step__extra-hint:hover { color: var(--t4-red); }

/* ============================================================================
   MOBILE — bottom sheet (67% of traffic books from a phone)
   ==========================================================================*/
@media (max-width: 768px) {
	/* Kill fancybox's slide padding just for this modal so the sheet can hug
	   the viewport edges. */
	body.t4-page .fancybox-slide--html:has(.t4-bmodal) { padding: 0; }

	body.t4-page .fancybox-slide--html .t4-bmodal {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		max-width: 100%;
		max-height: calc(100dvh - 20px);
		margin: 0;
		border-radius: 20px 20px 0 0;
		border-top-width: 0;
		animation: t4-bmodal-up .32s var(--t4-ease-drawer);
	}
	@keyframes t4-bmodal-up {
		from { transform: translateY(48px); opacity: 0.5; }
		to   { transform: translateY(0);    opacity: 1; }
	}

	body.t4-page .t4-bmodal__head { padding: 6px 56px 12px 18px; }
	body.t4-page .t4-bmodal__grab {
		display: block;
		width: 42px;
		height: 4px;
		border-radius: 999px;
		background: var(--t4-line-2);
		margin: 6px auto 10px;
	}
	body.t4-page .t4-bmodal__title { font-size: 22px; }
	body.t4-page .t4-bmodal .modal__close { top: 16px; right: 12px; width: 32px; height: 32px; }

	body.t4-page .t4-bmodal .t4-bmodal__stage { padding: 16px 16px 32px; }

	/* iOS zooms the page when a focused input's font-size is under 16px —
	   never let that happen inside the sheet. */
	body.t4-page .t4-bmodal .t4-widget__stage .field__input,
	body.t4-page .t4-bmodal .t4-widget__stage .field__select,
	body.t4-page .t4-bmodal .t4-widget__stage .iti input {
		font-size: 16px !important;
	}

	body.t4-page .t4-bmodal .t4-widget__stage .variants { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	body.t4-page .fancybox-slide--html .t4-bmodal { animation: none; }
}

/* ---- The Click-to-Chat WhatsApp float (.ht-ctc plugin) sits above the
        Fancybox overlay and covers the sheet's controls on mobile — hide it
        while any Fancybox modal is open on these pages. Same for the timed
        "Half Price" promo popup (footer.php .promo-popup, z-index 99999):
        interrupting a visitor who is already mid-booking only loses the sale. ---- */
body.t4-page.fancybox-active .ht-ctc,
body.t4-page.compensate-for-scrollbar .ht-ctc,
body.t4-page.fancybox-active .promo-popup,
body.t4-page.compensate-for-scrollbar .promo-popup {
	display: none !important;
}

/* Promo strike in the modal header price (2026-07-15) — muted, above the current price */
.t4-bmodal__hprice-old {
	display: block;
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted, #737373);
	font-weight: 600;
	line-height: 1.1;
}