/**
 * Tour V4 — design tokens + components.
 * Loaded only on posts with ACF flag use_v4_design = true.
 * All classes scoped under .t4-page (body) or t4- prefix.
 *
 * Source: design_handoff_night_raid_light/styles.css (Claude Design)
 */

/* ====================== HEADER PHONE (v4-only) ======================
   Direct-dial phone number shown in the desktop header so users see the
   contact number at a glance, not a generic "Call now" CTA. Scoped to v4
   pages only — live header untouched. */
body.t4-page .header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	margin-right: 12px;
	border-radius: 999px;
	background: transparent;
	color: var(--t4-ink);
	text-decoration: none;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: background 200ms var(--t4-ease), color 200ms var(--t4-ease);
}
body.t4-page .header__phone:hover {
	background: rgba(255,40,0,0.08);
	color: var(--t4-red);
}
body.t4-page .header__phone:active { transform: scale(0.97); }
body.t4-page .header__phone-icon {
	width: 16px;
	height: 16px;
	fill: var(--t4-red);
	flex-shrink: 0;
}
body.t4-page .header__phone-text { line-height: 1; }
@media (max-width: 1100px) {
	body.t4-page .header__phone { padding: 6px 10px; font-size: 14px; }
}

/* ====================== TOKENS ====================== */
.t4-page {
	--t4-bg:        #ffffff;
	--t4-bg-1:      #faf6ef;
	--t4-bg-3:      #f5e8d4;
	--t4-line:      rgba(12,12,12,0.08);
	--t4-line-2:    rgba(12,12,12,0.16);
	--t4-ink:       #0c0c0c;
	--t4-ink-2:     #2a2a2a;
	--t4-body:      #555555;
	--t4-muted:     #737373; /* WCAG AA on white: 4.54:1 (was #999=2.85:1) */

	/* Custom easing curves — replaces bare `ease` for craft */
	--t4-ease:         cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quart — UI default */
	--t4-ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);  /* hero crossfades, slow transitions */
	--t4-ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);   /* drawers, mobar slide */
	--t4-sand:      #f5e8d4;
	--t4-sand-deep: #e8d5b0;

	--t4-red:       #FF2800;
	--t4-red-2:     #FF6647;
	--t4-red-dark:  #C8200A;
	--t4-red-glow:  rgba(255,40,0,0.28);
	--t4-red-tint:  rgba(255,40,0,0.06);
	--t4-card-dark: #0c0c0c;
	--t4-wa:        #25D366;
	--t4-gold:      #FFB400;
	--t4-green:     #16a34a;

	--t4-r-sm: 6px;
	--t4-r-md: 10px;
	--t4-r-lg: 16px;
	--t4-r-xl: 24px;

	--t4-sh-sm: 0 1px 2px rgba(12,12,12,0.06), 0 2px 8px rgba(12,12,12,0.04);
	--t4-sh-md: 0 4px 16px rgba(12,12,12,0.08), 0 8px 32px rgba(12,12,12,0.06);
	--t4-sh-lg: 0 12px 32px rgba(12,12,12,0.12), 0 24px 64px rgba(12,12,12,0.10);
	--t4-sh-red: 0 6px 18px rgba(255,40,0,0.28);

	/* 26.07: одна переменная вместо двух. --t4-display указывала на то же семейство, что
	   и --t4-sans (юзер выбрал PJS 14.07, Bebas убран), и только запутывала — 76 её
	   использований переведены на --t4-sans. Roboto из запасных убран: он больше не грузится. */
	--t4-sans:    'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
	--t4-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

	/* Три уровня ширины вместо россыпи точечных значений (26.07):
	   container — сетки в несколько колонок; content — то, что читают подряд
	   (аккордеоны, шаги, формы, FAQ); measure — абзацы, ~70 знаков в строке. */
	--t4-container: 1280px;
	--t4-content:    880px;
	--t4-measure:    640px;
	--t4-gutter:    32px;

	/* Вертикальный ритм секций (26.07): sec — обычная смысловая секция,
	   sec-sm — узкие служебные полосы (партнёры, доверие). Мобильные значения
	   остаются в своих медиа-запросах и этими переменными не управляются.
	   27.07 подрезаны 100/60 -> 72/44 по замеру против GetYourGuide: у них между
	   разделами 40-48px (максимум 80), у нас выходило 163-166px, потому что соседние
	   секции платят паддинг дважды. Полное схлопывание к их плотности не берём —
	   у нас 16px текст и крупные фото, часть воздуха работает на бренд. */
	--t4-sec:        72px;
	--t4-sec-sm:     44px;

	/* Внутренний ритм статьи (27.07). Замер показал, что после подрезки секций
	   основные пустоты дают уже не секции, а блоки внутри контента: 80px между
	   блоками и 40px под каждым заголовком. Держим их тоже токенами. */
	--t4-blk:        56px;   /* между смысловыми блоками статьи */
	--t4-blk-title:  24px;   /* под заголовком блока */

	/* Стык двух секций с ОДИНАКОВЫМ фоном (27.07). Обе платят свой паддинг, и
	   глаз видит сумму: 72+72 = 144px пустоты. Там, где фон меняется, эта сумма
	   оправдана — граница цвета проходит по её середине. Там, где фон один и тот
	   же, вторая секция берёт половину. Пары перечислены явно: они закреплены
	   порядком секций в шаблонах, а сравнить фоны средствами CSS нельзя. */
	--t4-sec-join:   36px;

	/* Типографическая шкала (26.07): 8 ступеней, шаг ~1.2, база 16px.
	   Нижняя граница 12px — мельче только декоративное. */
	--t4-fs-micro:   12px;  /* бейджи, подписи, юридическое */
	--t4-fs-small:   14px;  /* мета, характеристики */
	--t4-fs-body:    16px;  /* основной текст */
	--t4-fs-lg:      18px;  /* лиды, вводные абзацы */
	--t4-fs-h4:      22px;  /* заголовки карточек */
	--t4-fs-h3:      26px;  /* подзаголовки блоков */
	--t4-fs-h2:      32px;  /* заголовки секций */
	--t4-fs-h1:      42px;  /* заголовок страницы */
}

/* Мобильные значения тех же токенов (26.07). Боковое поле было 32px — на экране 390px
   это съедало пятую часть ширины; практика для телефона 16-20px. Ритм секций и крупные
   заголовки тоже мельче: 100px между секциями на телефоне читается как разрыв. */
@media (max-width: 900px) {
	.t4-page {
		--t4-gutter:  20px;
		/* 27.07: 64/40 -> 44/28. На телефоне разрывов >=40px было 20 штук против 5 у
		   GetYourGuide, максимум 122px против их 78. */
		--t4-sec:     44px;
		--t4-sec-sm:  28px;
		--t4-blk:        36px;
		--t4-blk-title:  18px;
		--t4-fs-h1:   32px;
		--t4-fs-h2:   26px;
		--t4-fs-h3:   22px;
	}
}

/* ====================== RESET inside v4 ====================== */
.t4-page .t4-main,
.t4-page .t4-main * {
	box-sizing: border-box;
}
.t4-page .t4-main {
	background: var(--t4-bg);
	color: var(--t4-ink);
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	line-height: 1.55;
}
.t4-page .t4-main a { color: inherit; }
/* Reset: zero-specificity via :where() so component classes (.t4-block__title, etc.) win without !important */
:where(.t4-page .t4-main h1),
:where(.t4-page .t4-main h2),
:where(.t4-page .t4-main h3) { margin: 0; font-weight: 400; }
:where(.t4-page .t4-main p) { margin: 0 0 1em; color: var(--t4-body); }
:where(.t4-page .t4-main ul),
:where(.t4-page .t4-main ol) { list-style: none; padding: 0; margin: 0; }

/* hide existing global header on v4 pages? — NO, keep navigation. Rating row lives inside hero. */

/* Print: strip the dark hero, sticky widget, mobar, and footer noise. Just give them the page content. */
@media print {
	body.t4-page .t4-hero__bg,
	body.t4-page .t4-hero__scrim,
	body.t4-page .t4-hero__nav,
	body.t4-page .t4-hero__thumbs,
	body.t4-page .t4-aside,
	body.t4-page .t4-mobar,
	body.t4-page .t4-foot,
	body.t4-page .header,
	body.t4-page .fixed-menu { display: none !important; }
	body.t4-page,
	body.t4-page .t4-main { background: #fff !important; color: #000 !important; }
	body.t4-page .t4-hero { min-height: 0; padding: 20px; color: #000 !important; }
	body.t4-page .t4-hero__title,
	body.t4-page .t4-hero__lede { color: #000 !important; text-shadow: none !important; }
	body.t4-page .t4-main2col__inner { grid-template-columns: 1fr; padding: 20px; }
	body.t4-page a { text-decoration: underline; color: #000 !important; }
}

/* WCAG 2.3.3 — honor users with vestibular disorders / motion sensitivity */
@media (prefers-reduced-motion: reduce) {
	body.t4-page *,
	body.t4-page *::before,
	body.t4-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.t4-pill__dot { animation: none !important; }
	.t4-rtcard:hover,
	.t4-trustbadge:hover,
	.t4-related__card:hover { transform: none !important; }
}

/* CRITICAL: position:sticky breaks if ANY ancestor has overflow:hidden.
   Existing #page (and possibly body / html) clip vertical scroll, so override on v4. */
html.t4-html-clip,
body.t4-page,
body.t4-page #page {
	overflow: visible !important;
	overflow-x: clip !important;
}
/* When mobile menu (.fixed-menu.active) is open — lock page scroll behind it.
   :has() bumps specificity above the global override above. */
body.t4-page:has(.fixed-menu.active) {
	overflow: hidden !important;
}
/* Fancybox (Terms & Conditions, "What is private tour?", etc.) locks background scroll by
   adding `.fancybox-active`/`.compensate-for-scrollbar` directly to <body> — see
   jquery.fancybox.min.js `n("body").addClass("fancybox-active")`. The global override above
   has `!important` and was silently defeating that lock on every V4 page: the site kept
   scrolling behind any open Fancybox modal. Same fix pattern as the mobile-menu rule above —
   two classes outrank the single-class global rule even without :has(). */
body.t4-page.fancybox-active,
body.t4-page.compensate-for-scrollbar {
	overflow: hidden !important;
}

/* ====================== HEADER V4 (light, premium) ====================== */
body.t4-page .header {
	background: rgba(255,255,255,0.92);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid rgba(12,12,12,0.06);
	padding: 12px 24px;
	transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
body.t4-page.t4-scrolled .header {
	background: rgba(255,255,255,0.98);
	box-shadow: 0 4px 20px rgba(12,12,12,0.06);
	border-bottom-color: rgba(12,12,12,0.1);
}

/* Use the real dark+red logo via CSS background (clean swap, no filter side-effects) */
body.t4-page .header__logo {
	display: inline-flex;
	align-items: center;
	height: 32px;
	width: 110px;
	background: url('../images/logo-dark.svg') no-repeat left center / contain;
}
body.t4-page .header__logo img { display: none; }

/* Menu items */
body.t4-page .menu__link {
	color: var(--t4-ink);
	font-family: var(--t4-sans);
	font-weight: 600;
	font-size: var(--t4-fs-small);
	letter-spacing: 0.02em;
	transition: color .15s ease;
}
body.t4-page .menu__link:hover { color: var(--t4-red); }
body.t4-page .menu__link-text { color: inherit; }
body.t4-page .menu__link-text::after { display: none !important; } /* drop the white-on-white hover underline */
body.t4-page .menu__link-dropdown { fill: currentColor; opacity: 0.6; }

/* Dropdown panel */
body.t4-page .menu__dropdown {
	background: #fff;
	border: 1px solid var(--t4-line);
	border-radius: 10px;
	box-shadow: var(--t4-sh-md);
	padding: 8px;
	margin-top: 8px;
}
body.t4-page .dropdown__link {
	color: var(--t4-ink);
	font-size: var(--t4-fs-small);
	padding: 8px 12px;
	border-radius: 6px;
	transition: background .15s ease, color .15s ease;
}
body.t4-page .dropdown__link:hover {
	background: var(--t4-bg-1);
	color: var(--t4-red);
}
body.t4-page .dropdown__link.active { color: var(--t4-red); }

/* Right side: WhatsApp + Call as matching round icon-buttons */
body.t4-page .header__btn-group {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
body.t4-page .header__messenger {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--t4-wa);
	color: #fff;
	transition: background .15s ease, transform .15s ease;
}
body.t4-page .header__messenger:hover { background: #1eb858; transform: translateY(-1px); }
body.t4-page .header__messenger-icon { width: 18px; height: 18px; fill: currentColor; }

body.t4-page .header__call {
	width: auto !important;
	height: 38px !important;
	padding: 0 14px !important;
	background: transparent !important;
	color: var(--t4-ink) !important;
	border: 1px solid var(--t4-line-2) !important;
	border-radius: 100px !important;
	font-size: var(--t4-fs-small) !important;
	font-weight: 600 !important;
	font-family: var(--t4-sans) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	transition: border-color .15s ease, color .15s ease, background .15s ease !important;
}
body.t4-page .header__call:hover {
	border-color: var(--t4-ink) !important;
	background: var(--t4-bg-1) !important;
}
body.t4-page .header__call .btn__icon {
	width: 14px;
	height: 14px;
	fill: var(--t4-red);
	color: var(--t4-red);
}

/* Outline, not solid red (homepage V2 etalon, 2026-07-07): each page keeps ONE
   loud red accent — the hero CTA; the header button steps back. Hover fills red. */
body.t4-page .header__right .btn:not(.header__call) {
	background: transparent !important;
	color: var(--t4-red) !important;
	border: 1.5px solid var(--t4-red) !important;
	padding: 10px 18px !important;
	border-radius: 8px !important;
	font-size: var(--t4-fs-small) !important;
	font-weight: 600 !important;
	font-family: var(--t4-sans) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	transition: background .15s ease, color .15s ease !important;
}
body.t4-page .header__right .btn:not(.header__call):hover {
	background: var(--t4-red) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* Language switcher */
body.t4-page .header__dropdown-link {
	color: var(--t4-ink);
	padding: 6px;
	border-radius: 6px;
	transition: background .15s ease;
}
body.t4-page .header__dropdown-link:hover { background: var(--t4-bg-1); }
body.t4-page .header__dropdown-link-dropdown { fill: currentColor; opacity: 0.6; }
body.t4-page .header__dropdown-list {
	background: #fff;
	border: 1px solid var(--t4-line);
	border-radius: 10px;
	box-shadow: var(--t4-sh-md);
}

/* Mobile burger — bare 3 bars (real spans since 2026-07-16, they morph into an X;
   base geometry/transition in style.css, here only V4 sizing + dark color). */
body.t4-page .header__menu-btn {
	width: 40px !important;
	height: 40px !important;
	border-radius: 10px !important;
	background: transparent !important;
	position: relative;
	transition: background-color .15s ease, transform .2s var(--t4-ease);
}
body.t4-page .header__menu-btn:active { background-color: rgba(12,12,12,0.06) !important; }
body.t4-page .header__menu-btn span {
	width: 20px;
	height: 2px;
	margin: -1px 0 0 -10px;
	background: #0c0c0c;
}
/* re-declare motion states: the sizing rule above out-specifies style.css's .active rules */
body.t4-page .header__menu-btn span:nth-child(1) { transform: translateY(-6.5px); }
body.t4-page .header__menu-btn span:nth-child(3) { transform: translateY(6.5px); }
body.t4-page .header__menu-btn.active span:nth-child(1) { transform: rotate(45deg); }
body.t4-page .header__menu-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
body.t4-page .header__menu-btn.active span:nth-child(3) { transform: rotate(-45deg); }

/* ====================== MOBILE DRAWER (slide-in from the right, modern) ======================
   .fixed-menu is now a fixed full-viewport SCRIM (dim backdrop) that just fades in/out.
   The actual sliding panel is the new .t4-drawer wrapper (added in footer.php, v4-only),
   inset below the fixed header via --t4-header-h (set live by measureHeaderHeight() in
   tour-v4.js). The scrim's z-index is kept BELOW the header's (10): the header creates
   its own stacking context, so as long as the scrim sits below it in that comparison,
   the ENTIRE header (including the burger→× button) always paints above the scrim —
   crisp, undimmed and clickable — with no need to fight it via nested z-index tricks. */
body.t4-page .fixed-menu {
	background: rgba(12,12,12,0.44);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 9;
	display: block;
	overflow: hidden !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity .32s var(--t4-ease), visibility 0s linear .32s;
}
body.t4-page .fixed-menu.active {
	opacity: 1;
	visibility: visible;
	transition: opacity .32s var(--t4-ease), visibility 0s linear 0s;
}

body.t4-page .t4-drawer {
	position: fixed;
	/* --t4-header-h is the live-measured height of .header itself (JS, resize-aware);
	   the +38px accounts for the Half Price promo banner permanently fixed above it
	   (see "HALF PRICE PROMO BANNER" below — it pushes .header down by that much on
	   every v4 page). Matches its 32px breakpoint further down.
	   HEIGHT uses --vh (set from window.innerHeight by script.js, kept live on resize)
	   instead of `bottom: 0`. On mobile Safari/Chrome, a `position: fixed` element's
	   `bottom: 0` resolves against the LAYOUT viewport, which stays tall even while the
	   address bar is on-screen shrinking the actual VISIBLE area — so the drawer's real
	   bottom (and the socials row inside it) could sit below what's actually visible,
	   looking like it's simply missing. --vh already tracks the true visible height. */
	top: calc(var(--t4-promo-h, 28px) + var(--t4-header-h, 64px));
	right: 0;
	height: calc(var(--vh, 1vh) * 100 - var(--t4-promo-h, 28px) - var(--t4-header-h, 64px));
	width: min(392px, 88vw);
	background: #fff;
	box-shadow: -20px 0 60px rgba(12,12,12,0.22);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(100%);
	transition: transform .4s var(--t4-ease-drawer);
	will-change: transform;
}
body.t4-page .fixed-menu.active .t4-drawer { transform: translateX(0); }
/* Phones: the drawer covers the WHOLE viewport width (no site strip at the left).
   Tablets and up keep the partial 392px panel with the dimmed page visible. */
@media (max-width: 640px) {
	body.t4-page .t4-drawer { width: 100%; }
}

/* flex: 0 0 auto (not 1 1 auto) — the box must size to its own content, never grow to
   swallow all remaining drawer space nor shrink below its content height. With grow/shrink
   enabled here, this box silently absorbed all leftover space regardless of how tightly the
   nav list itself was spaced, and a genuinely-too-tall list would have pushed past the
   drawer's edge into the quick-actions row instead of scrolling. .t4-drawer's own
   overflow-y:auto is what should handle "content taller than viewport" — as a scroll of the
   whole panel — not a squeeze of this one child. */
body.t4-page .fixed-menu__box { flex: 0 0 auto; padding: 2px 18px 0; }
/* Legacy "slide to subpage" header (back button + title) — unused in the accordion
   flow (tour-v4.js intercepts submenu clicks before it can activate) but left in the
   DOM; keep it hidden so no dead space appears. */
body.t4-page .fixed-menu__header { margin-bottom: 0; }
body.t4-page .fixed-menu__back {
	background: rgba(12,12,12,0.05);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
body.t4-page .fixed-menu__back-icon {
	width: 14px;
	height: 14px;
	fill: var(--t4-ink);
	transform: rotate(180deg);
}
body.t4-page .fixed-menu__title {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h4);
	color: var(--t4-ink);
	text-transform: uppercase;
}

/* CRITICAL: existing CSS positions list/sub-list absolute (top:50%) with opacity:0.
   Override fully — flow them inline as accordion. SCOPED to .fixed-menu.active so when
   menu is closed, parent's visibility:hidden cascades naturally and items don't block taps. */
body.t4-page .fixed-menu__list-container { padding: 0; height: auto; }
/* Pin padding to 0 UNCONDITIONALLY (not gated on .active) — same reasoning as the
   max-height pin below. Base (non-v4) CSS gives both lists ~0.8rem vertical padding;
   without this, that padding only becomes 0 once .active is added, and since both
   elements carry a blanket `transition: .3s` from the base stylesheet, that padding
   change animates — a 2nd, independent cause of the same "content settles in over the
   next few hundred ms" glitch, on top of the max-height one. */
body.t4-page .fixed-menu__list,
body.t4-page .fixed-menu__sub-list {
	padding: 0;
}
body.t4-page .fixed-menu.active .fixed-menu__list,
body.t4-page .fixed-menu.active .fixed-menu__sub-list {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: auto !important;
	width: 100% !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.t4-page .fixed-menu.active .fixed-menu__list { display: flex; flex-direction: column; }

body.t4-page .fixed-menu__list > .fixed-menu__list-item {
	padding: 0;
	width: 100%;
	border-bottom: 1px solid rgba(12,12,12,0.06);
}
body.t4-page .fixed-menu__list > .fixed-menu__list-item:last-child { border-bottom: none; }

body.t4-page .fixed-menu__list-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 5px 36px !important;
	color: var(--t4-ink) !important;
	font-family: var(--t4-sans) !important;
	font-size: var(--t4-fs-body) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	width: 100%;
	text-align: center;
	border-radius: 10px;
	transition: background .15s ease, color .15s ease;
	cursor: pointer;
	position: relative;
}
body.t4-page .fixed-menu__list-link:hover,
body.t4-page .fixed-menu__list-link:focus-visible {
	background: var(--t4-red-tint) !important;
	color: var(--t4-red) !important;
	outline: none;
}
body.t4-page .fixed-menu__list-link:active {
	background: var(--t4-red-tint) !important;
	transform: scale(0.98);
}
body.t4-page .fixed-menu__list-link > span { flex: 0 0 auto; }

/* Default leading icon (flag etc — appears BEFORE the span) */
body.t4-page .fixed-menu__list-link-icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
	color: var(--t4-muted);
	flex-shrink: 0;
}
/* Chevron arrow at end — simple muted arrow, ABSOLUTE right so text stays truly centered */
body.t4-page .fixed-menu__list-link > span + .fixed-menu__list-link-icon {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--t4-muted);
	opacity: 1;
	transition: transform .25s var(--t4-ease), color .15s ease;
}
body.t4-page .fixed-menu__list-link.is-open > span + .fixed-menu__list-link-icon {
	transform: translateY(-50%) rotate(90deg);
	color: var(--t4-red);
}

/* Hide the social-responsibility menu item entirely on v4 (Instagram stories link) */
body.t4-page .fixed-menu__list-item:has(.fixed-menu__list-link-icon--responsibility) {
	display: none !important;
}

/* Accordion sub-list — collapsed by default, expand inline when parent .is-open.
   tour-v4.js sets an explicit inline max-height (element.scrollHeight) instead of
   relying on a guessed CSS max-height value — a fixed guess (e.g. 1200px) makes the
   transition visually "snap": the box reaches its real (much smaller) height in a
   fraction of the transition's duration, so opening looks instant and closing looks
   like nothing happens for a while and then suddenly collapses. Pixel-accurate height
   keeps the animation's speed uniform and genuinely smooth both ways.
   CRITICAL: max-height:0 must apply UNCONDITIONALLY (not just while .fixed-menu.active) —
   otherwise every time the whole drawer is closed, this sub-list's max-height reverts to
   the browser default "none" (unconstrained), and the NEXT time the drawer opens, the
   property has to transition "none → 0px". Browsers can't interpolate that gap, so they
   either snap instantly or, worse, render the box at its full natural height for a beat
   before collapsing — exactly the "everything shows, then collapses half a second later"
   glitch. Keeping max-height permanently pinned at 0 (JS only ever sets a real pixel
   value inline) means every transition is a clean, real number → real number tween.
   ONLY max-height is listed in `transition` (not padding/margin/background too): those
   are set instantly the moment .is-open toggles. Animating padding *alongside* max-height
   made the two race each other — the box's clip-height target is measured via scrollHeight
   right as .is-open is added, but the padding driving that same scrollHeight was still mid­
   transition from 0, so the revealed box kept "catching up" to the real content height for
   another moment after it looked done. Applying the padding/background instantly and only
   animating the reveal (max-height) removes that second moving part entirely. */
body.t4-page .fixed-menu__sub-list {
	max-height: 0;
	overflow: hidden !important;
	background: transparent;
	transition: max-height .35s var(--t4-ease);
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	list-style: none !important;
}
/* Specificity note: must match (or beat) "body.t4-page .fixed-menu.active .fixed-menu__sub-list"
   above (which forces padding:0 while the drawer is open) — repeating .fixed-menu.active here
   keeps this padding rule winning instead of being silently overridden by that one.
   Soft rounded tint + extra top gap reads as a distinct "nested" panel instead of the
   first sub-item sitting flush against the parent link, and gives the accordion some
   visual weight instead of just plain stacked text. */
body.t4-page .fixed-menu.active .fixed-menu__sub-list.is-open {
	padding: 6px 0 8px !important;
	margin: 4px 0 6px !important;
	background: rgba(12,12,12,0.035);
	border-radius: 12px;
}
body.t4-page .fixed-menu__sub-list .fixed-menu__list-item { border-bottom: none; width: 100%; }
body.t4-page .fixed-menu__sub-list .fixed-menu__list-link {
	padding: 9px 14px !important;
	font-size: var(--t4-fs-small) !important;
	font-weight: 600 !important;
	color: var(--t4-body) !important;
	justify-content: center !important;
	gap: 8px !important;
}
/* Small leading dot per sub-item — a quiet "nested list" cue instead of bare centered text */
body.t4-page .fixed-menu__sub-list .fixed-menu__list-link::before {
	content: '';
	width: 4px;
	height: 4px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.45;
}
body.t4-page .fixed-menu__sub-list .fixed-menu__list-link:hover::before,
body.t4-page .fixed-menu__sub-list .fixed-menu__list-link:focus-visible::before {
	opacity: 0.9;
}

/* Quick actions — Call / WhatsApp, big thumb-friendly buttons right under the nav list */
body.t4-page .t4-drawer__quick {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 6px 18px 0;
}
body.t4-page .t4-drawer__quick-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 12px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	text-decoration: none;
	transition: transform .15s var(--t4-ease), background .15s ease;
}
body.t4-page .t4-drawer__quick-btn:active { transform: scale(0.97); }
body.t4-page .t4-drawer__quick-btn--call {
	background: var(--t4-red);
	color: #fff;
	box-shadow: 0 6px 16px rgba(255,40,0,0.24);
}
body.t4-page .t4-drawer__quick-btn--call:hover { background: var(--t4-red-dark); }
body.t4-page .t4-drawer__quick-btn--wa {
	background: rgba(37,211,102,0.12);
	color: #128a3e;
}
body.t4-page .t4-drawer__quick-btn--wa:hover { background: rgba(37,211,102,0.2); }
body.t4-page .t4-drawer__quick-icon { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }

/* Contacts block — compact rounded cards, icon in a soft red circle */
body.t4-page .fixed-menu__contacts {
	flex: 0 0 auto;
	background: transparent;
	border-top: 1px solid rgba(12,12,12,0.06);
	margin-top: 4px;
	padding: 4px 18px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
}
body.t4-page .fixed-menu__contact {
	width: 100%;
	padding: 4px 6px;
	border-radius: 10px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--t4-fs-small);
	color: var(--t4-ink);
	transition: background .15s ease;
}
body.t4-page .fixed-menu__contact:hover { background: rgba(12,12,12,0.03); }
body.t4-page .fixed-menu__contact-icon {
	width: 26px;
	height: 26px;
	padding: 6px;
	border-radius: 50%;
	background: var(--t4-red-tint);
	fill: var(--t4-red);
	color: var(--t4-red);
	box-sizing: border-box;
	flex-shrink: 0;
}
body.t4-page .fixed-menu__contact-items { gap: 1px; padding-top: 2px; }
body.t4-page .fixed-menu__contact-item,
body.t4-page .fixed-menu__contact-link {
	color: var(--t4-ink) !important;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--t4-fs-small) !important;
	line-height: 1.4 !important;
}
body.t4-page .fixed-menu__contact-link:hover { color: var(--t4-red) !important; }

/* Book online button — proper sizing, no full-width crookedness */
body.t4-page .fixed-menu__btn {
	background: var(--t4-red) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 10px 20px !important;
	font-size: var(--t4-fs-body) !important;
	font-weight: 600 !important;
	font-family: var(--t4-sans) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin: 2px 18px 4px !important;
	width: auto !important;
	max-width: none !important;
	box-shadow: 0 4px 14px rgba(255,40,0,0.25) !important;
	height: auto !important;
	flex: 0 0 auto;
}
body.t4-page .fixed-menu__btn:hover { background: var(--t4-red-dark) !important; }
body.t4-page .fixed-menu__btn .btn__icon { width: 16px; height: 16px; fill: currentColor; }

/* Socials — compact row, centered */
body.t4-page .fixed-menu__socials {
	flex: 0 0 auto;
	display: flex !important;
	gap: 10px;
	padding: 2px 18px 8px !important;
	margin: 0 !important;
	list-style: none;
	background: transparent !important;
	justify-content: center;
}
body.t4-page .fixed-menu__social { width: auto; height: auto; margin: 0; }
body.t4-page .fixed-menu__social-link {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50%;
	background: rgba(12,12,12,0.05);
	color: var(--t4-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	fill: currentColor;
	transition: background .15s ease, color .15s ease;
}
body.t4-page .fixed-menu__social-link:hover {
	background: var(--t4-red);
	color: #fff;
}
body.t4-page .fixed-menu__social-link-icon {
	width: 16px !important;
	height: 16px !important;
	fill: currentColor;
}

@media (max-width: 400px) {
	body.t4-page .t4-drawer { width: 100vw; }
}

/* Header height padding for hero (existing fixed header overlaps content) */
body.t4-page .t4-hero { padding-top: 88px; }
@media (max-width: 768px) {
	body.t4-page .header { padding: 10px 16px; }
	/* 27.07: логотип на телефоне читался слишком мелким. Причина была не только в
	   размере: шапка это флекс, и логотип ужимался с 90 до 69px, а при
	   background-size:contain это давало картинку ~20px высотой. Фиксируем ширину
	   (flex:none) и увеличиваем. Высота шапки НЕ растёт: её задаёт самый высокий
	   элемент — кнопки 44px (тап-таргет), и бокс логотипа в них укладывается. */
	body.t4-page .header__logo {
		height: 31px;
		width: 100px;
		flex: none;
		/* легаси style.css на <=1024px режет логотип через max-width/max-height
		   (6.9rem × 2rem = 69×20px) — без снятия этих ограничений размеры выше
		   не имеют эффекта, картинка остаётся 20px высотой */
		max-width: 100px;
		max-height: 31px;
	}
	body.t4-page .t4-hero { padding-top: 72px; }
	body.t4-page .header__messenger { width: 38px; height: 38px; }
	body.t4-page .header__messenger-icon { width: 16px; height: 16px; }
}

/* ====================== HERO + QUICK-FACTS WRAPPER ======================
   Desktop: hero and the quick-facts strip together fill exactly one viewport
   (minus the fixed promo banner's 38px, since the header floats ON TOP of the
   hero rather than pushing it down). Flex (hero grows, qf takes its natural
   size) replaces a hardcoded "qf is ~92px" guess that silently broke the
   moment qf wrapped to 2 rows (tablet widths) — flex adapts automatically
   regardless of how tall the strip actually renders. Mobile keeps its own
   distinct photo-dominant proportions (78vh) untouched — see the existing
   mobile override further down. */
.t4-hero-wrap { display: flex; flex-direction: column; }
.t4-hero-wrap .t4-qf { flex: 0 0 auto; }
@media (min-width: 769px) {
	.t4-hero-wrap {
		height: calc(100vh - var(--t4-promo-h, 28px));
		height: calc(100svh - var(--t4-promo-h, 28px));
	}
	.t4-hero-wrap .t4-hero { flex: 1 1 auto; min-height: 0; }
}

/* ====================== HERO ====================== */
.t4-hero {
	position: relative;
	overflow: hidden;
	background: var(--t4-bg-1);
	padding: 80px var(--t4-gutter) 100px;
	display: flex;
	align-items: center;
}
.t4-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.t4-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	filter: blur(3px);
	transition: opacity 1s var(--t4-ease-in-out), filter 1s var(--t4-ease-in-out);
}
.t4-hero__slide.t4-active { opacity: 1; filter: blur(0); }
/* Universal: solid dark overlay 40% — works on any photo (dark/bright). Text on top stays light. */
.t4-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0,0,0,0.4);
}
/* Light text on dark overlay — nuclear override so any text inside hero is white */
body.t4-page .t4-hero,
body.t4-page .t4-hero p,
body.t4-page .t4-hero span:not(.t4-pill__dot):not(.t4-hero__rating-sep):not(.t4-hero__divider),
body.t4-page .t4-hero a,
body.t4-page .t4-hero h1,
body.t4-page .t4-hero h2,
body.t4-page .t4-hero h3,
body.t4-page .t4-hero li,
body.t4-page .t4-hero strong,
body.t4-page .t4-hero em { color: #fff !important; }

body.t4-page .t4-hero__inner { color: #fff; }
body.t4-page .t4-hero__title { color: #fff; }
.t4-hero__title-line { color: #fff; }
.t4-hero__title-line--accent { color: var(--t4-red); }
.t4-hero__lede { color: rgba(255,255,255,0.92); }
.t4-pill {
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.4);
	color: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.t4-pill__dot { background: var(--t4-red-2); }
.t4-hero__rating { color: rgba(255,255,255,0.88); }
.t4-hero__rating-num { color: #fff; }
.t4-hero__rating-count { color: rgba(255,255,255,0.7); }
.t4-hero__rating-sep { background: rgba(255,255,255,0.4); }
/* Brand icons keep their original colors (Google G, TripAdvisor green, TC green owl) — readable on dark anyway */
/* Guarantees row removed entirely from hero (replaced by widget bullets + mobar) */
.t4-hero__guarantees { display: none !important; }
/* Secondary CTA "Watch the Raid" — frosted white outline */
.t4-hero__cta .t4-btn--ghost {
	background: rgba(255,255,255,0.1) !important;
	border-color: rgba(255,255,255,0.5) !important;
	color: #fff !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.t4-hero__cta .t4-btn--ghost:hover {
	background: rgba(255,255,255,0.2) !important;
	border-color: #fff !important;
}
/* Hero nav arrows + thumbs — frosted white on dark */
.t4-hero__arrow {
	background: rgba(255,255,255,0.12) !important;
	border-color: rgba(255,255,255,0.3) !important;
	color: #fff !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.t4-hero__arrow:hover {
	background: rgba(255,255,255,0.22) !important;
	border-color: #fff !important;
	color: #fff !important;
}
.t4-hero__divider { background: rgba(255,255,255,0.4); }
.t4-hero__thumb { border-color: rgba(255,255,255,0.4); }
.t4-hero__thumb.t4-active { border-color: var(--t4-red); }
.t4-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--t4-container);
	width: 100%;
	margin: 0 auto;
	min-width: 0;
}
.t4-hero__inner > * {
	max-width: 720px;
}

.t4-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Homepage-etalon geometry (user 2026-07-15): full 39px TA badge + two-line
	   text, sentence case — now the BASE pill on desktop AND mobile everywhere.
	   Rare single-line custom labels (per-post v4_pill_label) stay caps via PHP. */
	padding: 8px 18px 8px 10px;
	background: rgba(255,255,255,0.15);
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 100px;
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	margin-bottom: 28px;
}
.t4-pill__dot { background: var(--t4-red-2); }
.t4-pill__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--t4-red);
	box-shadow: 0 0 0 0 var(--t4-red-glow);
	/* Pulse once on entry, then settle — was infinite, became ambient noise */
	animation: t4-pulse 1.6s var(--t4-ease) 0.6s 1 both;
}
/* Full TA badge inside the pill — homepage-etalon size on every V4 hero
   (user 2026-07-15): 39px desktop / 34px mobile. Home hero (.t4-hhero) has
   its own identical copy in home-v4.css. */
.t4-pill .t4-pill__tc {
	width: 39px;
	height: 39px;
	flex-shrink: 0;
}
/* Two-line text: "Travelers' Choice" over the year, sentence case. */
.t4-pill__tctext {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.15;
	text-align: left;
}
.t4-pill__tcname {
	font-size: var(--t4-fs-body);
	font-weight: 600;
}
/* Same (0,5,2)+!important weight as the nuclear white hero-span rule above —
   this one wins by coming later in the file. */
body.t4-page .t4-hero .t4-pill .t4-pill__tctext span.t4-pill__tcyear {
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: rgba(255,255,255,0.85) !important;
}
@media (max-width: 768px) {
	.t4-pill .t4-pill__tc {
		width: 34px;
		height: 34px;
	}
	.t4-pill__tcname { font-size: 14px; }
	body.t4-page .t4-hero .t4-pill .t4-pill__tctext span.t4-pill__tcyear { font-size: 12px; }
}
@keyframes t4-pulse {
	0%   { box-shadow: 0 0 0 0 var(--t4-red-glow); }
	100% { box-shadow: 0 0 0 12px rgba(255,40,0,0); }
}

.t4-hero__title {
	font-family: var(--t4-sans);
	font-size: clamp(var(--t4-fs-h2), 3.2vw, var(--t4-fs-h1));
	font-weight: 800;
	line-height: 0.86;
	color: var(--t4-ink);
	text-transform: uppercase;
	margin: 0 0 24px;
	overflow-wrap: break-word;
	word-break: normal;
	max-width: var(--t4-content);
}
.t4-hero__title-line {
	display: block;
}
.t4-hero__title-line--accent {
	color: var(--t4-red);
	display: inline-block;
}
.t4-hero__lede {
	margin: 22px 0 0;
	font-size: var(--t4-fs-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--t4-ink-2);
	max-width: var(--t4-measure);
}

/* ============ HERO RATING ROW (frosted-glass pills, like footer trust-badges) ============ */
.t4-hero__rating {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: var(--t4-fs-small);
	color: #fff;
}
.t4-hero__rating-item {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	column-gap: 10px;
	align-items: center;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 8px;
	padding: 6px 10px;
	color: #fff;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.t4-hero__rating-item:hover {
	background: rgba(255,255,255,0.10);
	border-color: rgba(255,255,255,0.2);
}
.t4-hero__rating-logo {
	height: 22px;
	width: auto;
	flex-shrink: 0;
	display: inline-block;
	grid-row: 1 / span 2;
}
.t4-hero__rating-logo--ta { height: 18px; }
.t4-hero__rating-tc {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	grid-row: 1 / span 2;
}
.t4-hero__rating-num {
	font-weight: 600;
	color: #fff;
	font-size: var(--t4-fs-small);
	line-height: 1;
}
/* Wraps the score (5.0) + the brand stars/dots so they sit on one line with
   a tidy gap, while keeping the existing logo / count grid layout. */
.t4-hero__rating-numrow {
	grid-column: 2;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
/* The asset at /wp-content/uploads/2026/02/google-stars.png is a single 28×28
   star, not a 5-star strip — so repeat it 5× via background-repeat. */
.t4-hero__rating-stars {
	display: inline-block;
	flex-shrink: 0;
	width: 70px;          /* 5 × 14px star tiles */
	height: 14px;
	background-image: url('https://www.bigreddxb.com/wp-content/uploads/2026/02/google-stars.png');
	background-size: 14px 14px;
	background-repeat: repeat-x;
	background-position: left center;
}
/* TripAdvisor dots: 5 filled circles in TA brand green. Sized to match the
   Google stars row so both rating items have visual parity. */
.t4-hero__rating-tadots {
	height: 11px;
	width: auto;
	flex-shrink: 0;
	display: inline-block;
}
.t4-hero__rating-count {
	color: rgba(255,255,255,0.6);
	font-size: var(--t4-fs-micro);
	line-height: 1.2;
	grid-column: 2;
	grid-row: 2;
}
.t4-hero__rating-sep { display: none; }
/* Travelers' Choice item has only 1 text line (no separate count) — center vertically */
.t4-hero__rating-item--text {
	grid-template-columns: auto auto;
	align-items: center;
	cursor: default;
}
.t4-hero__rating-item--text .t4-hero__rating-tc { grid-row: auto; }
.t4-hero__rating-item--text .t4-hero__rating-num {
	grid-row: auto;
	font-size: var(--t4-fs-small);
	font-weight: 600;
}
.t4-hero__rating-item--text:hover {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.18);
}
/* TripAdvisor green logo washes out on dark overlay — invert to white */
.t4-hero .t4-hero__rating-logo--ta { filter: brightness(0) invert(1); }

/* Stagger entry of rating pills — three identical frosted pills hard-cutting in looks like a brochure */
@media (prefers-reduced-motion: no-preference) {
	.t4-hero__rating-item {
		opacity: 0;
		transform: translateY(6px);
		animation: t4-pill-in 360ms var(--t4-ease) forwards;
	}
	.t4-hero__rating-item:nth-child(1) { animation-delay: 80ms; }
	.t4-hero__rating-item:nth-child(3) { animation-delay: 140ms; }
	.t4-hero__rating-item:nth-child(5) { animation-delay: 200ms; }
}
@keyframes t4-pill-in { to { opacity: 1; transform: translateY(0); } }
.t4-hero__meta {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	color: var(--t4-body);
	margin-bottom: 32px;
	letter-spacing: 0.02em;
}

.t4-hero__cta {
	margin-top: 36px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.t4-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 11px 20px;
	border-radius: 8px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
	white-space: nowrap;
	background: none;
	line-height: 1.2;
}
.t4-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.t4-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.t4-btn--red {
	background: var(--t4-red);
	color: #fff;
	box-shadow: var(--t4-sh-red);
}
.t4-btn--red:hover:not(:disabled) {
	background: var(--t4-red-dark);
	transform: translateY(-1px);
}
.t4-btn--ghost {
	background: rgba(255,255,255,0.7);
	color: var(--t4-ink);
	border-color: var(--t4-line-2);
}
.t4-btn--ghost:hover {
	background: #fff;
	border-color: var(--t4-ink);
}
.t4-btn--block {
	width: 100%;
}

.t4-hero__guarantees {
	margin-top: 24px;
	display: flex;
	gap: 14px 22px;
	flex-wrap: wrap;
	font-size: var(--t4-fs-small);
	color: var(--t4-body);
}
.t4-hero__guarantees span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.t4-hero__guarantees svg {
	width: 14px;
	height: 14px;
	color: var(--t4-green);
	flex-shrink: 0;
}

.t4-hero__nav {
	position: absolute;
	bottom: 32px;
	right: var(--t4-gutter);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 10px;
}
.t4-hero__arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--t4-line-2);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--t4-ink);
	box-shadow: var(--t4-sh-sm);
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.t4-hero__arrow:hover {
	background: var(--t4-bg-1);
	border-color: var(--t4-red);
	color: var(--t4-red);
}
.t4-hero__arrow svg { width: 18px; height: 18px; }
.t4-hero__divider {
	width: 24px;
	height: 1px;
	background: var(--t4-line-2);
	display: inline-block;
}

.t4-hero__thumbs {
	position: absolute;
	bottom: 32px;
	left: var(--t4-gutter);
	z-index: 4;
	display: flex;
	gap: 8px;
}
.t4-hero__thumb {
	width: 56px;
	height: 40px;
	border-radius: 6px;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--t4-line-2);
	cursor: pointer;
	transition: border-color .18s ease, transform .18s ease;
	padding: 0;
	background-color: #fff;
	position: relative;
	overflow: hidden;
}
.t4-hero__thumb.t4-active {
	border-color: var(--t4-red);
	transform: translateY(-2px);
}
.t4-hero__thumb.t4-active::after {
	content: '';
	position: absolute;
	inset: 0;
	box-shadow: 0 0 0 2px var(--t4-red);
	border-radius: 5px;
}
.t4-hero__thumb:hover { transform: translateY(-2px); }

@media (max-width: 768px) {
	/* Mobile: photo dominates top, content sits at the BOTTOM (40px from edge) */
	.t4-hero {
		padding: 80px 20px 40px;
		min-height: calc(78vh - 100px);
		min-height: calc(78svh - 100px);
		height: auto;
		align-items: flex-end;
	}
	.t4-hero__nav { display: none; }
	.t4-hero__thumbs { display: none; }
	/* ~33px on a 390px phone — the 12vw version was too loud (user 2026-07-14) */
	.t4-hero__title { font-size: clamp(28px, 8.5vw, 40px); margin-bottom: 14px; }
	.t4-hero__lede { font-size: 14px; margin-top: 12px; margin-bottom: 0; }

	/* Show CTAs (Book Now + Watch the Raid) — full-width buttons */
	.t4-hero__cta {
		margin-top: 18px;
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}
	.t4-hero__cta .t4-btn {
		width: 100%;
		justify-content: center;
	}

	/* Mobile rating — 3 frosted pills in ONE row, equal width (flex with no-wrap) */
	.t4-hero__rating {
		margin-top: 14px;
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 6px;
		width: 100%;
	}
	.t4-hero__rating-item {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		padding: 6px 8px !important;
		column-gap: 6px !important;
		border-radius: 8px !important;
		justify-content: flex-start;
		overflow: hidden;
	}
	.t4-hero__rating-logo { height: 16px !important; }
	.t4-hero__rating-logo--ta { height: 14px !important; }
	.t4-hero__rating-tc { width: 18px !important; height: 18px !important; }
	.t4-hero__rating-num {
		font-size: 12px !important;
		white-space: nowrap;
	}
	.t4-hero__rating-count {
		font-size: 12px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
	}
	/* Travelers' Choice pill on mobile: 2 lines ("Travelers' Choice" / year) instead
	   of one truncated line. Keeps the owl icon on the left (sized to match the
	   Google/TripAdvisor logos); the wordmark drops to 9px with a slightly tighter
	   letter-spacing so it fits one line + the year below inside the equal-width
	   pill. Requires the .t4-hero__rating-tclabel / -year spans in the markup. */
	.t4-hero__rating-item--text {
		grid-template-columns: auto 1fr !important;
		column-gap: 4px !important;
		padding-left: 6px !important;
		padding-right: 5px !important;
		justify-items: start;
	}
	.t4-hero__rating-item--text .t4-hero__rating-tc {
		display: block !important;
		width: 18px !important;
		height: 18px !important;
	}
	.t4-hero__rating-item--text .t4-hero__rating-num {
		font-size: 12px !important;
		line-height: 1.2 !important;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		min-width: 0;
	}
	.t4-hero__rating-tclabel { display: block; white-space: nowrap; letter-spacing: -0.02em; }
	.t4-hero__rating-year { display: block; font-size: 12px !important; color: rgba(255,255,255,0.6); }
}

/* ====================== QUICK FACTS (icon-less, centered text — matches mobile design) ====================== */
.t4-qf {
	background: var(--t4-bg-1);
	border-top: 1px solid var(--t4-line);
	border-bottom: 1px solid var(--t4-line);
	position: relative;
	z-index: 1;
}
.t4-qf__inner {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0;
}
.t4-qf__cell {
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 6px;
	min-width: 0;
	border-right: 1px solid var(--t4-line);
}
.t4-qf__cell:last-child { border-right: none; }
.t4-qf__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
}
.t4-qf__label {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--t4-muted);
	line-height: 1.2;
}
.t4-qf__value {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-h4);
	font-weight: 800;
	color: var(--t4-ink);
	text-transform: uppercase;
	line-height: 1.05;
}
@media (max-width: 1024px) {
	.t4-qf__inner { grid-template-columns: repeat(3, 1fr); }
	.t4-qf__cell { border-bottom: 1px solid var(--t4-line); }
	.t4-qf__cell:nth-child(3n) { border-right: none; }
	.t4-qf__cell:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 600px) {
	/* Phones: tap-target sizes ≥44px for day strip, stepper, strip nav (WCAG 2.5.5 AA) */
	.t4-tile { min-height: 56px; padding: 8px 2px; }
	.t4-strip__nav { width: 36px; }
	.t4-stepper__btn { width: 44px; height: 44px; }

	/* Phones: same vertical card layout, smaller font, single horizontal row */
	.t4-qf__inner {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		padding: 0;
	}
	.t4-qf__cell {
		padding: 14px 6px;
		gap: 4px;
	}
	.t4-qf__label {
		font-size: 12px;
		letter-spacing: 0.14em;
	}
	.t4-qf__value {
		font-family: var(--t4-sans);
		font-weight: 600;
		font-size: 14px;
		text-transform: none;
		letter-spacing: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}
}

/* ====================== TWO-COLUMN MAIN ====================== */
.t4-main2col__inner {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 64px var(--t4-gutter); /* rhythm: tighter than hero (~96px), looser than gallery (48px) */
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 80px;
	/* DO NOT set align-items: start — it collapses .t4-aside grid item which kills sticky */
}
@media (max-width: 1024px) {
	.t4-main2col__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 56px var(--t4-gutter); }
}
@media (max-width: 768px) {
	.t4-main2col__inner { padding: 40px 16px; gap: 40px; }
}

.t4-content > .t4-block { margin-bottom: var(--t4-blk); }
.t4-content > .t4-block:last-child { margin-bottom: 0; }
.t4-kicker {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--t4-red);
	margin-bottom: 16px;
}
.t4-block__title {
	font-family: var(--t4-sans);
	font-size: clamp(var(--t4-fs-lg), 2.2vw, var(--t4-fs-h3));
	font-weight: 800;
	line-height: 1.0;
	color: var(--t4-ink);
	
	margin-bottom: var(--t4-blk-title);
}
.t4-block__body {
	font-size: var(--t4-fs-body); /* Viator-эталон 16/24 */
	line-height: 1.55;
	color: var(--t4-body);
	max-width: var(--t4-measure);
}
.t4-block__body p { margin-bottom: 1em; }
.t4-block__body p:first-of-type {
	font-size: var(--t4-fs-h4);
	line-height: 1.45;
	color: var(--t4-ink-2);
	margin-bottom: 1em;
}

/* Stats grid: auto-fit columns based on count (one row, no wrap on desktop) */
.t4-stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1px;
	background: var(--t4-line-2);
	border: 1px solid var(--t4-line-2);
	border-radius: var(--t4-r-lg);
	overflow: hidden;
	margin-top: 36px;
}
.t4-stat {
	padding: 24px 22px;
	background: var(--t4-bg-1);
	min-width: 0;
}
.t4-stat__num {
	font-family: var(--t4-sans);
	font-size: clamp(var(--t4-fs-h4), 2.2vw, var(--t4-fs-h3));
	font-weight: 800;
	line-height: 1;
	color: var(--t4-red);
}
.t4-stat__label {
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	margin-top: 6px;
	line-height: 1.4;
}
@media (max-width: 600px) {
	.t4-stats {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: 1fr;
	}
}

/* Inclusions (paler check icons per design) */
.t4-incl {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 28px;
}
.t4-incl__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: var(--t4-fs-body);
	color: var(--t4-ink);
}
.t4-incl__check {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255,40,0,0.12);
	color: var(--t4-red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}
.t4-incl__check svg { width: 14px; height: 14px; }
@media (max-width: 600px) {
	.t4-incl { grid-template-columns: 1fr; gap: 12px 0; }
}

/* Itinerary */
.t4-itin { position: relative; }
.t4-itin__item {
	position: relative;
	padding-left: 56px;
	padding-bottom: 32px;
}
.t4-itin__item:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 19px;
	top: 40px;
	bottom: 0;
	width: 2px;
	background: var(--t4-line-2); /* neutral connector — was red gradient (over-saturating page) */
}
.t4-itin__dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--t4-red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	color: var(--t4-red);
}
.t4-itin__time {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}
.t4-itin__title {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h3);
	color: var(--t4-ink);
	text-transform: uppercase;
	margin-bottom: 4px;
	line-height: 1.1;
}
.t4-itin__desc {
	font-size: var(--t4-fs-body);
	color: var(--t4-body);
}

/* Featured reviews (2-card grid inside article column) */
/* Constrain the carousel block — without these, the flex track's intrinsic
   content width forces the parent grid `1fr` track to expand, which in turn
   widens the entire 2-col layout and the page itself. */
.t4-fr-block {
	min-width: 0;
	max-width: 100%;
	width: 100%;
}
.t4-fr-block__head {
	min-width: 0;
	max-width: 100%;
}

/* Featured-reviews block header (kicker + title + prev/next nav) */
.t4-fr-block__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 18px;
}
.t4-fr-block__head .t4-block__title { margin-bottom: 0; }
.t4-fr-block__nav {
	display: inline-flex;
	gap: 8px;
	flex-shrink: 0;
}
.t4-fr-block__navbtn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--t4-line-2);
	color: var(--t4-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 200ms var(--t4-ease), border-color 200ms var(--t4-ease), color 200ms var(--t4-ease), transform 200ms var(--t4-ease);
}
.t4-fr-block__navbtn:hover {
	background: var(--t4-red);
	border-color: var(--t4-red);
	color: #fff;
}
.t4-fr-block__navbtn:active { transform: scale(0.94); }
.t4-fr-block__navbtn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	background: #fff;
	color: var(--t4-ink);
	border-color: var(--t4-line);
}
.t4-fr-block__navbtn svg { width: 16px; height: 16px; }

/* Carousel track — horizontal flex with scroll-snap. Native swipe on touch
   devices, prev/next buttons drive scroll on desktop. `min-width: 0` keeps
   the track from blowing out the parent grid track. */
.t4-fr {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 6px;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}
.t4-fr::-webkit-scrollbar { display: none; }
.t4-fr__card {
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: auto;
	width: calc((100% - 18px) / 2);
	scroll-snap-align: start;
	background: var(--t4-bg-1);
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-lg);
	padding: 24px;
	box-sizing: border-box;
	box-shadow: var(--t4-sh-sm);
}
@media (max-width: 768px) {
	.t4-fr-block__head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.t4-fr-block__nav { align-self: flex-end; }
	/* Show ~85% of a card with peek of the next, so the user sees there's more
	   to swipe/scroll through (same horizontal-scroll pattern as desktop, just
	   one-and-a-bit cards visible instead of two). Viewport-relative calc
	   avoids the mobile flex-basis-100% intrinsic-content-size bug. */
	.t4-fr__card { width: calc((100vw - 32px) * 0.85); max-width: calc(100vw - 32px); }
}
.t4-fr__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}
.t4-fr__stars {
	display: inline-flex;
	gap: 1px;
	color: var(--t4-gold);
}
.t4-fr__stars svg { width: 14px; height: 14px; }
.t4-fr__src {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	letter-spacing: 0.05em;
}
.t4-fr__title {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h4);
	color: var(--t4-ink);
	margin-bottom: 10px;
	line-height: 1.15;
}
.t4-fr__body {
	color: var(--t4-body);
	font-size: var(--t4-fs-small);
	line-height: 1.6;
	margin-bottom: 18px;
}
.t4-fr__by {
	display: flex;
	align-items: center;
	gap: 12px;
}
.t4-fr__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	object-fit: cover;
	color: #fff;
	font-weight: 600;
	font-size: var(--t4-fs-small);
}
.t4-fr__avatar--initials {
	background: linear-gradient(135deg, var(--t4-red) 0%, var(--t4-red-dark) 100%);
}
img.t4-fr__avatar { display: block; }
.t4-fr__name { font-weight: 600; color: var(--t4-ink); font-size: var(--t4-fs-small); }
.t4-fr__meta { font-size: var(--t4-fs-micro); color: var(--t4-muted); }

/* Gallery (full-width section after main 2-col) */
.t4-gallery-section {
	background: #fff;
	border-top: 1px solid var(--t4-line);
	padding: var(--t4-sec-sm) 0; /* rhythm: tightest section, photos speak for themselves */
}
.t4-gallery-section__inner {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
}
.t4-gallery-section__title {
	font-family: var(--t4-sans);
	font-size: clamp(var(--t4-fs-lg), 2.2vw, var(--t4-fs-h3));
	line-height: 1.0;
	color: var(--t4-ink);
	
	margin: 0 0 40px;
	font-weight: 800;
}
.t4-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 220px;
	gap: 10px;
}
.t4-gallery__item {
	display: block;
	overflow: hidden;
	border-radius: var(--t4-r-md);
	position: relative;
}
.t4-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.t4-gallery__item:hover img { transform: scale(1.05); }
.t4-gallery__item--0 { grid-row: span 2; }
.t4-gallery__item--3 { grid-column: span 2; }
@media (max-width: 768px) {
	.t4-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
	.t4-gallery__item--0 { grid-row: auto; }
	.t4-gallery__item--3 { grid-column: auto; }
}

/* FAQ */
.t4-faq__item {
	border-bottom: 1px solid var(--t4-line);
	padding: 18px 0;
}
.t4-faq__item:first-child { border-top: 1px solid var(--t4-line); }
.t4-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	font-size: var(--t4-fs-body);
	font-weight: 600;
	color: var(--t4-ink);
	list-style: none;
	padding-right: 4px;
}
.t4-faq__q::-webkit-details-marker { display: none; }
.t4-faq__q:focus { outline: none; }
.t4-faq__q:focus-visible {
	outline: 2px solid var(--t4-red);
	outline-offset: 4px;
	border-radius: 4px;
}
.t4-faq__sign {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--t4-red-tint);
	color: var(--t4-red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--t4-fs-lg);
	flex-shrink: 0;
	transition: transform .25s ease;
}
.t4-faq__item[open] .t4-faq__sign { transform: rotate(45deg); }
.t4-faq__a {
	padding: 12px 0 0;
	font-size: var(--t4-fs-body);
	line-height: 1.6;
	color: var(--t4-body);
	animation: t4-faq-fade 0.25s var(--t4-ease);
}
@keyframes t4-faq-fade {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ====================== STICKY WIDGET ====================== */
.t4-aside {
	position: relative;
	min-width: 0; /* allow grid item to shrink — prevents widget overflow on narrow desktops */
	/* DO NOT use align-self: start — it collapses the grid item and breaks position:sticky */
}
.t4-widget {
	position: sticky;
	/* Site .header is position:fixed; JS measures actual height into --t4-header-h, fallback 80px.
	   The 38px accounts for the Half Price promo banner permanently fixed above the header
	   (.header itself is pushed down via `top: 38px !important` — see "HALF PRICE PROMO BANNER"
	   below), same offset .t4-drawer already uses. Without it the widget stuck ~38px too high,
	   creeping under the header instead of sitting flush below it. */
	top: calc(var(--t4-promo-h, 28px) + var(--t4-header-h, 80px) + 16px);
	background: #fff;
	border: 1px solid var(--t4-line);
	border-top: 3px solid var(--t4-red); /* visual weight — widget is the page's primary CTA */
	border-radius: 14px 14px 12px 12px;
	box-shadow:
		0 24px 60px -20px rgba(12,12,12,0.18),
		0 8px 20px -8px rgba(12,12,12,0.10);
	overflow: hidden;
}
/* CRITICAL: a sticky element with unbounded height that grows past the viewport (e.g. the
   addons collapsible expanding, or a tall booking step) forces the browser to instantly
   re-stick it so its bottom stays within the containing block — visually a "jump", and it
   scrolls the top (price row) off-screen while the widget is mid-scroll. Cap the box and let
   the STAGE scroll internally instead, so the sticky element's own height never changes.
   Scoped to `--booking`/`--cal-only` only — the default (date-picker) body is short and
   was never the source of this bug; capping it unconditionally clipped it on shorter
   browser windows. The calendar slide-out panel reuses the same cap so it can't reintroduce
   the overflow bug either. */
.t4-widget--booking,
.t4-widget--cal-only {
	max-height: calc(100vh - var(--t4-promo-h, 28px) - var(--t4-header-h, 80px) - 32px);
	display: flex;
	flex-direction: column;
}
/* With all 3 experience packages expanded, content is taller than most viewports can fit —
   the internal scroll (below) is the safety net for that, but on typical screens it was
   clipping ~10-20px more than necessary. Claw back 20px of bottom buffer specifically in
   this state (:has(), same pattern as the mobile-menu scroll-lock rule elsewhere in this
   file) rather than shrinking the buffer everywhere, which would reintroduce the original
   sticky-jump risk on shorter windows for the plain booking steps. */
.t4-widget--booking:has(.booking-step__addons-collapsible.is-open) {
	/* 12px → 6px bottom buffer + tighter stage padding below: together with the
	   .booking-step__note margin fix this claws back ~28px in the addons-open
	   state — the remaining source of the "invisible 10-15px scroll" report. */
	max-height: calc(100vh - var(--t4-promo-h, 28px) - var(--t4-header-h, 80px) - 6px);
}
.t4-widget--booking:has(.booking-step__addons-collapsible.is-open) .t4-widget__stage {
	padding-bottom: 12px;
}
.t4-widget--booking .t4-widget__head,
.t4-widget--cal-only .t4-widget__head { flex: 0 0 auto; }
.t4-widget--booking .t4-widget__stage,
.t4-widget--cal-only .t4-widget__stage {
	flex: 1 1 auto;
	min-height: 0;
	/* Scroll stays functional (mouse wheel / touch / drag) — the `max-height` cap above is
	   what actually prevents the sticky-jump bug, not the visible scrollbar. The bar itself
	   is hidden (same pattern as `.t4-fr` — the featured-reviews carousel) so it can't steal
	   width from the cards; no `scrollbar-gutter` needed either since there's no bar to
	   compensate for. */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Slide-out feel: a light fade+drop-in every time the panel is revealed
	   (re-triggers because [hidden] removal is a fresh paint, not a transition). */
	animation: t4-panel-in 220ms var(--t4-ease);
}
.t4-widget--booking .t4-widget__stage::-webkit-scrollbar,
.t4-widget--cal-only .t4-widget__stage::-webkit-scrollbar { display: none; }
@keyframes t4-panel-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.t4-widget__head {
	padding: 20px 20px 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	border-bottom: 1px solid var(--t4-line);
	margin-bottom: 18px;
}
.t4-widget__price-block {
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.t4-widget__price {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-h3);
	font-weight: 800;
	line-height: 1;
	color: var(--t4-ink);
}
.t4-widget__per {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 400;
	color: var(--t4-muted);
	margin-left: 2px;
}
.t4-widget__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	color: var(--t4-ink);
	white-space: nowrap;
}
.t4-widget__rating-stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	color: var(--t4-gold);
}
.t4-widget__rating-stars svg { width: 11px; height: 11px; }
.t4-widget__rating-num { font-weight: 600; color: var(--t4-ink); }

.t4-widget__body { padding: 0 20px 20px; }
.t4-widget__row { margin-bottom: 18px; }
.t4-widget__row-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.t4-widget__label {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--t4-muted);
	display: block;
	margin-bottom: 10px;
}
.t4-widget__row-head .t4-widget__label { margin-bottom: 0; }
/* "View full calendar" trigger — cream pill with calendar icon, matches the
   secondary-button language of the booking form (Back button etc.) */
.t4-widget__alldates {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--t4-bg-1);
	border: 1px solid var(--t4-line);
	padding: 6px 12px;
	border-radius: 999px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	color: var(--t4-ink);
	cursor: pointer;
	text-decoration: none;
	letter-spacing: 0.005em;
	transition: background 200ms var(--t4-ease), border-color 200ms var(--t4-ease), color 200ms var(--t4-ease);
}
.t4-widget__alldates:hover {
	background: #fff;
	border-color: var(--t4-red);
	color: var(--t4-red);
}
.t4-widget__alldates-icon {
	width: 14px;
	height: 14px;
	color: var(--t4-red);
	flex-shrink: 0;
}

/* Day strip */
.t4-strip {
	display: flex;
	align-items: stretch;
	gap: 4px;
	position: relative;
}
.t4-strip__nav {
	width: 28px;
	flex-shrink: 0;
	background: var(--t4-bg-1);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--t4-ink);
	transition: background .15s ease;
}
.t4-strip__nav:hover:not(:disabled) { background: var(--t4-sand-deep); }
.t4-strip__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	background: transparent;
}
.t4-strip__nav:disabled:hover {
	background: transparent;
}
.t4-strip__nav svg { width: 14px; height: 14px; }
.t4-strip__track {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	min-width: 0;
}
.t4-tile {
	background: var(--t4-bg-1);
	border: none;
	border-radius: 8px;
	padding: 9px 2px 8px;
	cursor: pointer;
	font-family: var(--t4-sans);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	transition: background .15s ease, color .15s ease;
	min-width: 0;
	position: relative;
}
.t4-tile__dow {
	font-size: var(--t4-fs-micro);
	font-family: var(--t4-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--t4-muted);
	font-weight: 600;
}
.t4-tile__day {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	font-weight: 600;
	color: var(--t4-ink);
	line-height: 1.1;
}
.t4-tile__mon {
	font-size: var(--t4-fs-micro);
	font-family: var(--t4-mono);
	color: var(--t4-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}
.t4-tile:hover:not(:disabled) {
	background: var(--t4-sand-deep);
}
.t4-tile.t4-tile--active {
	background: var(--t4-red);
}
.t4-tile.t4-tile--active .t4-tile__dow,
.t4-tile.t4-tile--active .t4-tile__day,
.t4-tile.t4-tile--active .t4-tile__mon { color: #fff; }
.t4-tile.t4-tile--today::before {
	content: 'Today';
	position: absolute;
	top: -7px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--t4-gold);
	color: #000;
	font-size: 8px;
	font-family: var(--t4-mono);
	font-weight: 600;
	padding: 1px 5px;
	border-radius: 100px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	z-index: 1;
	/* No line-height was set, so the browser's default (taller than the 8px font) left the
	   text sitting visibly off-center in the pill — flex + line-height:1 centers it exactly
	   regardless of the mono font's own ascent/descent metrics. */
	line-height: 1;
	display: inline-flex;
	align-items: center;
}
.t4-tile:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Month popover */
.t4-monthwrap {
	margin-top: 12px;
	padding: 14px;
	background: var(--t4-bg-1);
	border: 1px solid var(--t4-line);
	border-radius: 10px;
}
.t4-monthwrap[hidden] { display: none; }

/* Slots (3-up) */
.t4-slots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}
.t4-slot {
	background: var(--t4-bg-1);
	border: 1.5px solid transparent;
	border-radius: 8px;
	padding: 10px 8px 9px;
	cursor: pointer;
	text-align: left;
	font-family: var(--t4-sans);
	display: flex;
	flex-direction: column;
	gap: 1px;
	transition: background .15s ease, border-color .15s ease;
	min-width: 0;
}
.t4-slot:hover:not(:disabled) {
	background: var(--t4-sand-deep);
}
.t4-slot.t4-slot--active {
	background: rgba(255,40,0,0.08);
	border-color: var(--t4-red);
}
.t4-slot__time {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	font-weight: 600;
	color: var(--t4-ink);
	line-height: 1.1;
}
.t4-slot__label {
	font-size: var(--t4-fs-micro);
	color: var(--t4-body);
	font-weight: 600;
	margin-top: 1px;
}
.t4-slot__hint {
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	margin-top: 3px;
}
.t4-slot:disabled { opacity: 0.5; cursor: not-allowed; }
.t4-slot.t4-slot--accent {
	background: rgba(255,40,0,0.06);
}
.t4-slot.t4-slot--accent .t4-slot__hint {
	color: var(--t4-red);
}

/* Stepper */
.t4-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--t4-bg-1);
	border-radius: 8px;
	padding: 6px;
	gap: 8px;
}
.t4-stepper__btn {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid var(--t4-line);
	cursor: pointer;
	font-size: var(--t4-fs-lg);
	color: var(--t4-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s ease, background .15s ease;
	flex-shrink: 0;
}
.t4-stepper__btn:hover:not(:disabled) {
	border-color: var(--t4-ink);
}
.t4-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.t4-stepper__val {
	flex: 1;
	text-align: center;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	font-weight: 600;
	color: var(--t4-ink);
	line-height: 1.2;
}
.t4-stepper__unit {
	font-weight: 600;
	color: var(--t4-body);
	font-size: var(--t4-fs-small);
}
.t4-stepper__note {
	margin-top: 6px;
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
}
.t4-stepper__note a {
	color: var(--t4-red);
	text-decoration: none;
}
.t4-stepper__note a:hover { text-decoration: underline; }

/* Price breakdown */
.t4-widget__breakdown {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 0 12px;
	border-top: 1px solid var(--t4-line);
}
.t4-widget__breakdown:empty { display: none; }
.t4-widget__breakdown-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: var(--t4-fs-small);
	color: var(--t4-body);
}
.t4-widget__breakdown-row > span:last-child {
	color: var(--t4-ink);
	font-weight: 600;
}

/* TOTAL */
.t4-widget__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 0 14px;
	margin: 0 0 14px;
	border-top: 1px solid var(--t4-line);
}
/* Whole row (label + value + border) hidden until a date+slot is actually picked —
   a "TOTAL —" placeholder reads as broken, not "nothing selected yet". */
.t4-widget__total--hidden { display: none !important; }
.t4-widget__total-label {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--t4-ink);
	font-weight: 600;
}
.t4-widget__total-val {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-h4);
	font-weight: 600;
	color: var(--t4-ink);
}

.t4-widget__cta {
	padding: 14px 20px;
	font-size: var(--t4-fs-body);
	font-weight: 600;
}

/* Loading state shown in slots row while date AJAX is in flight.
   Themed cream card with red ring + label; replaces the empty void that used to
   appear for ~1s while Rezdy returned session counts.
   `grid-column: 1/-1` is critical — parent .t4-slots is a 3-col grid, so without
   this the spinner card squishes into 1/3 width and looks broken. */
.t4-slots__loading {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 28px 16px;
	background: var(--t4-bg-1);
	border: 1px solid var(--t4-line);
	border-radius: 14px;
	min-height: 96px;
	animation: t4-loading-fade 240ms var(--t4-ease) both;
}
.t4-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(255,40,0,0.16);
	border-top-color: var(--t4-red);
	border-radius: 50%;
	display: inline-block;
	animation: t4-spin 0.7s linear infinite;
}
.t4-slots__loading-text {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--t4-muted);
}
@keyframes t4-spin { to { transform: rotate(360deg); } }
@keyframes t4-loading-fade {
	from { opacity: 0; transform: translateY(2px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.t4-spinner { animation-duration: 1.6s; }
	.t4-slots__loading { animation: none; }
}
.t4-widget--loading .t4-strip { opacity: 0.7; pointer-events: none; }

/* :active press feedback on every interactive surface — was missing across 3000 lines of CSS.
   Tactile cue: button "compresses" 3% on press, settles back via fast ease-out. */
body.t4-page .t4-btn:active:not(:disabled),
body.t4-page .t4-tile:not(:disabled):active,
body.t4-page .t4-slot:not(:disabled):active,
body.t4-page .t4-stepper__btn:not(:disabled):active,
body.t4-page .t4-strip__nav:not(:disabled):active,
body.t4-page .t4-faq__q:active,
body.t4-page .t4-rtcard:active,
body.t4-page .t4-widget__cta:not(:disabled):active,
body.t4-page .t4-widget__alldates:active,
body.t4-page .t4-widget__back:active,
body.t4-page .t4-mobar__cta:active,
body.t4-page .t4-hero__arrow:active,
body.t4-page .t4-hero__thumb:active,
body.t4-page .t4-foot__socials a:active,
body.t4-page .t4-trustbadge:active,
body.t4-page .t4-widget__wa:active,
body.t4-page .t4-widget__phone:active,
body.t4-page .t4-widget__stage .extra-card__btn:active,
body.t4-page .t4-widget__stage .modal__btn:active,
body.t4-page .t4-widget__stage .booking-checkout__btn:active,
body.t4-page .t4-widget__stage .quantity__btn:active {
	transform: scale(0.97);
	transition: transform 90ms var(--t4-ease);
}

/* Day-tile / time-slot — settle bump after selection (JS adds .t4-bumped briefly) */
body.t4-page .t4-tile,
body.t4-page .t4-slot {
	transition: background 150ms var(--t4-ease), border-color 150ms var(--t4-ease), color 150ms var(--t4-ease), transform 200ms var(--t4-ease);
}
.t4-tile.t4-bumped,
.t4-slot.t4-bumped { animation: t4-bump 220ms var(--t4-ease); }
@keyframes t4-bump {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.04); }
	100% { transform: scale(1); }
}

/* Total value bump on change — the most important number on the page should react */
body.t4-page .t4-widget__total-val {
	transition: transform 200ms var(--t4-ease);
	display: inline-block;
}
.t4-widget__total-val.t4-bumped { transform: scale(1.06); }

/* Reserve-button feedback: shake when clicked-while-invalid + brief highlight on target row */
@keyframes t4-shake {
	0%,100% { transform: translateX(0); }
	20%     { transform: translateX(-4px); }
	40%     { transform: translateX(4px); }
	60%     { transform: translateX(-3px); }
	80%     { transform: translateX(2px); }
}
.t4-shake { animation: t4-shake 0.4s ease; }
.t4-flash {
	animation: t4-flash 0.9s ease;
}
@keyframes t4-flash {
	0%   { box-shadow: 0 0 0 0 rgba(255,40,0,0); border-radius: 8px; }
	30%  { box-shadow: 0 0 0 4px rgba(255,40,0,0.18); }
	100% { box-shadow: 0 0 0 0 rgba(255,40,0,0); }
}

.t4-widget__bullets {
	margin-top: 44px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.t4-widget__bullets li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--t4-fs-small);
	color: var(--t4-body);
}
.t4-widget__bullets svg {
	width: 14px;
	height: 14px;
	color: var(--t4-green);
	flex-shrink: 0;
}

/* "Pay with" row — replaces the old "Free cancellation" bullet. Own layout (label +
   wrapping chip row) instead of the check-icon + single-line-text pattern used by the
   other bullets, so it gets its own display/gap rather than the shared `li` flex rule. */
.t4-widget__bullets li.t4-widget__paywith {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
}
.t4-widget__paywith-label {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--t4-muted);
}
.t4-widget__paywith-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.t4-widget__paywith-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--t4-bg-1);
	border: 1px solid var(--t4-line);
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	color: var(--t4-ink);
	white-space: nowrap;
}
/* Higher specificity than `.t4-widget__bullets svg` above — these are brand logo marks
   (Visa/Mastercard/Apple Pay/Tabby), not the generic green checkmark icon, so they need
   their own size/no-tint instead of being forced into a 14×14 square.
   CRITICAL: explicit width, NOT "auto" — these are <use> references into sprite.svg,
   and without a readable intrinsic aspect ratio through <use>, "width: auto" resolves
   to the CSS spec's replaced-element fallback of 300px instead of scaling with height.
   That's what was blowing the whole chip row out to ~650px and pushing it past the
   widget's right edge. Fixed width keeps every chip (and the row) inside the sidebar. */
.t4-widget__bullets .t4-widget__paywith-icon {
	width: 19px;
	height: 12px;
	color: inherit;
	flex-shrink: 0;
}
.t4-widget__bullets .t4-widget__paywith-icon--wide { width: 34px; height: 11px; }

.t4-widget__contact {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--t4-line);
	display: flex;
	align-items: center;
	gap: 8px;
}
.t4-widget__contact-label {
	font-size: var(--t4-fs-micro);
	color: var(--t4-body);
	font-weight: 600;
	margin-right: 4px;
}
.t4-widget__wa,
.t4-widget__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	text-decoration: none;
	transition: opacity .15s ease, background .15s ease;
	flex: 1;
}
.t4-widget__wa {
	background: var(--t4-wa);
	color: #fff;
}
.t4-widget__phone {
	background: var(--t4-bg-1);
	color: var(--t4-ink);
}
.t4-widget__wa:hover { background: #1eb858; }
.t4-widget__phone:hover { background: var(--t4-sand-deep); }
.t4-widget__wa svg,
.t4-widget__phone svg { width: 14px; height: 14px; flex-shrink: 0; }
.t4-widget__wa-icon { fill: currentColor; color: #fff; }

/* ====================== IN-PLACE BOOKING TRANSFORMATION ======================
   When .t4-widget--booking is set, the booking form is moved into .t4-widget__stage.
   Hide browse-mode body content; show stage content. */
.t4-widget__stage[hidden] { display: none; }
.t4-widget--booking .t4-widget__body,
.t4-widget--cal-only .t4-widget__body { display: none; }
.t4-widget--booking .t4-widget__head,
.t4-widget--cal-only .t4-widget__head { border-bottom: 1px solid var(--t4-line); }
/* Google/TripAdvisor-style star rating already has its own full-detail row up in the
   hero (logo + score + review count for both Google and TripAdvisor) — repeating a bare
   star+number here, next to the price in the booking widget, is pure duplication, not
   useful context for "which date/slot/package should I pick". Hidden everywhere in the
   widget, not just once a booking is in progress. */
.t4-widget__rating { display: none !important; }
/* Narrower side padding than the browse-mode widget body — steps 2-4's recap/buttons/
   total/payment grid read as cramped at 20px; 14px gives them noticeably more breathing
   room without crowding the stage's own outer edge. */
.t4-widget__stage { padding: 16px 14px 20px; }
.t4-widget__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--t4-bg-1);
	border: 1px solid var(--t4-line);
	color: var(--t4-ink);
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	padding: 7px 14px 7px 10px;
	border-radius: 100px;
	margin-bottom: 16px;
	cursor: pointer;
	transition: background .15s var(--t4-ease), border-color .15s var(--t4-ease), transform 90ms var(--t4-ease);
}
.t4-widget__back:hover {
	background: var(--t4-sand-deep);
	border-color: var(--t4-line-2);
}
.t4-widget__back svg {
	width: 14px;
	height: 14px;
	color: var(--t4-ink);
	stroke: currentColor;
}

/* ============ FORM FIELDS (v4 styled — overrides booking.css) ============ */
/* Scope ALL booking-form overrides under .t4-widget__stage so they only apply when form is in widget */
.t4-widget__stage .booking,
.t4-widget__stage .booking * {
	box-sizing: border-box;
	max-width: 100%;
}
.t4-widget__stage .booking { font-family: var(--t4-sans); }
/* Legacy .booking form carries its own padding: 48px 0 (modal-era spacing) — that's the
   real cause of the large gap under "Back to dates" (and equally under every step's own
   back button): 48px of form padding, THEN whatever the step's own header/back-button
   margin adds on top. The widget already provides its own spacing via .t4-widget__stage
   and .booking-step__footer, so the form itself should contribute none. */
.t4-widget__stage .booking { padding: 0 !important; }
.t4-widget__stage .section-header,
.t4-widget__stage .section-booking__header { display: none; }
.t4-widget__stage .booking-steps { display: block; }
.t4-widget__stage .booking-step { display: none; }
.t4-widget__stage .booking-step.active { display: block; }
.t4-widget__stage .booking-step__columns {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	flex: none !important;
}
.t4-widget__stage .booking-step__columns > .booking-step__column {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
}
.t4-widget__stage .booking-step__fields {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

/* Step 1: widget already has date/slot/buggies — hide everything except contact fields */
/* Scoped to --booking (Reserve flow): date/slot/pax are already collected in the widget's
   own body UI, so step-1 of the legacy form only needs its contact fields. Cal-only mode
   (below) needs the OPPOSITE — calendar shown, everything else hidden — so these must NOT
   apply there. */
.t4-widget--booking .t4-widget__stage .booking-step[data-id="step-1"] .booking-step__column:first-child,
.t4-widget--booking .t4-widget__stage .booking-step[data-id="step-1"] .booking-step__header,
.t4-widget--booking .t4-widget__stage .booking-step[data-id="step-1"] .booking-step__fields--tight,
.t4-widget--booking .t4-widget__stage .booking-step[data-id="step-1"] .booking-step__extra,
.t4-widget--booking .t4-widget__stage .booking-step[data-id="step-1"] .booking-step__extra-hint,
.t4-widget--booking .t4-widget__stage .booking-step[data-id="step-1"] .calendar-container,
.t4-widget--booking .t4-widget__stage .booking-step[data-id="step-1"] .variants,
.t4-widget--booking .t4-widget__stage .booking-step[data-id="step-1"] .js-buggy_types,
.t4-widget--booking .t4-widget__stage .booking-step[data-id="step-1"] .field:has(.js-number_of_buggies_list) { display: none !important; }

/* Hide "What is...?" hint links under service items in extras cards (declutter) */
.t4-widget__stage .extra-card__service .booking-step__extra-hint,
.t4-widget__stage .extra-card__service > a { display: none !important; }

/* Field wrapper — clean static label ABOVE input (no floating notch tricks) */
.t4-widget__stage .field {
	margin-bottom: 14px;
}
.t4-widget__stage .field__label {
	display: flex !important;
	flex-direction: column-reverse !important; /* placeholder span comes after input in DOM — flip */
	width: 100%;
}
.t4-widget__stage .field__inner { width: 100%; }
.t4-widget__stage .field__input,
.t4-widget__stage .field__select {
	width: 100%;
	padding: 13px 14px;
	background: var(--t4-bg-1);
	border: 1.5px solid transparent;
	border-radius: 8px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	color: var(--t4-ink);
	box-sizing: border-box;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.t4-widget__stage .field__input::placeholder { color: var(--t4-muted); }
.t4-widget__stage .field__input:focus,
.t4-widget__stage .field__select:focus {
	border-color: var(--t4-red);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255,40,0,0.10);
}
.t4-widget__stage .field--error .field__input,
.t4-widget__stage .field--error .field__select { border-color: var(--t4-red); background: rgba(255,40,0,0.04); }

/* Static label above input */
.t4-widget__stage .field__placeholder {
	position: static !important;
	display: block;
	margin-bottom: 6px;
	padding: 0 !important;
	background: none !important;
	top: auto !important; left: auto !important;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--t4-muted);
	pointer-events: auto;
	line-height: 1.2;
}
.t4-widget__stage .field__label:focus-within .field__placeholder { color: var(--t4-red); }

.t4-widget__stage .field__description {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	margin-top: 6px;
}
.t4-widget__stage .field__description.hidden { display: none; }
.t4-widget__stage .field__description-icon { width: 12px; height: 12px; fill: var(--t4-green); flex-shrink: 0; }
.t4-widget__stage .field__icon { display: none; }

/* intl-tel-input phone field — flag/dial-code as left chunk, input fills rest */
.t4-widget__stage .iti { width: 100%; display: block; position: relative; }
.t4-widget__stage .iti--separate-dial-code { background: var(--t4-bg-1); border-radius: 8px; border: 1.5px solid transparent; transition: border-color .15s ease, box-shadow .15s ease; }
.t4-widget__stage .iti--separate-dial-code:focus-within { border-color: var(--t4-red); box-shadow: 0 0 0 3px rgba(255,40,0,0.10); }
.t4-widget__stage .iti--separate-dial-code .iti__flag-container { background: transparent; border-radius: 8px 0 0 8px; }
.t4-widget__stage .iti--separate-dial-code .iti__selected-flag {
	background: transparent !important;
	padding: 0 8px 0 12px;
}
.t4-widget__stage .iti--separate-dial-code .iti__selected-dial-code {
	color: var(--t4-ink);
	font-family: var(--t4-sans);
	font-weight: 600;
	font-size: var(--t4-fs-small);
}
.t4-widget__stage .iti input { background: transparent !important; border: none !important; box-shadow: none !important; }
.t4-widget__stage .iti input:focus { box-shadow: none !important; }
.t4-widget__stage .iti__country-list {
	background: #fff;
	border: 1px solid var(--t4-line);
	border-radius: 8px;
	box-shadow: var(--t4-sh-md);
}

/* ============ STEP NAVIGATION FOOTER ============ */
.t4-widget__stage .booking-step__footer {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--t4-line);
}
.t4-widget__stage .modal__divider { display: none; }
.t4-widget__stage .modal__current {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}
.t4-widget__stage .modal__current-info {
	color: var(--t4-muted);
	font-size: var(--t4-fs-micro);
	line-height: 1.4;
	min-height: 16px;
}
.t4-widget__stage .modal__current-info:empty { display: none; }
.t4-widget__stage .modal__current-total {
	/* Legacy style.css sets `margin-left: var(--gap)` (16px) on this element — meant for
	   the OLD side-by-side .modal__current layout (info + total sharing a row with a gap
	   between them). Our widget stacks them in a column instead, so that leftover margin
	   just shoved the box 16px off the left edge that every sibling (recap, buttons)
	   lines up on. */
	margin-left: 0 !important;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.06em;
	color: var(--t4-ink);
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 10px 12px;
	background: var(--t4-bg-1);
	border-radius: 8px;
	text-transform: uppercase;
}
.t4-widget__stage .modal__btns {
	display: flex;
	gap: 8px;
}
.t4-widget__stage .modal__btn,
.t4-widget__stage .btn-next-step {
	flex: 1;
	padding: 12px 16px !important;
	background: var(--t4-red) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-family: var(--t4-sans) !important;
	font-size: var(--t4-fs-small) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	box-shadow: 0 4px 14px rgba(255,40,0,0.22) !important;
	transition: background .15s ease, transform .15s ease;
}
.t4-widget__stage .modal__btn:hover:not(:disabled),
.t4-widget__stage .btn-next-step:hover:not(:disabled) {
	background: var(--t4-red-dark) !important;
	transform: translateY(-1px);
}
.t4-widget__stage .modal__btn:disabled,
.t4-widget__stage .btn-next-step:disabled {
	background: var(--t4-line-2) !important;
	box-shadow: none !important;
	cursor: not-allowed;
	opacity: 0.65;
}
.t4-widget__stage .btn--second {
	flex: 0 0 auto !important;
	background: var(--t4-bg-1) !important;
	color: var(--t4-ink) !important;
	box-shadow: none !important;
	width: 44px !important;
	min-width: 44px !important;
}
.t4-widget__stage .btn--second:hover { background: var(--t4-sand-deep) !important; }
.t4-widget__stage .modal__btn-icon { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.t4-widget__stage .modal__btn-icon--reverse { transform: rotate(180deg); }
.t4-widget__stage .modal__btn-text { font-weight: 600; }

/* ============ STEP HEADER (titles for steps 2 + 3) ============ */
/* Hide the legacy big-number badge, show title in v4 display style */
.t4-widget__stage .booking-step__header {
	margin-bottom: 14px;
	display: block;
}
.t4-widget__stage .booking-step__number { display: none !important; }
.t4-widget__stage .booking-step__title {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-h4);
	font-weight: 800;
	color: var(--t4-ink);
	text-transform: uppercase;
	line-height: 1.05;
	background: transparent !important;
	padding: 0 !important;
}

/* ============ STEP 2: EXTRAS (narrow-widget rewrite) ============ */
.t4-widget__stage .booking-step__cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}
/* Compact layout: title+save badge sit LEFT, price sits RIGHT on the same row (was:
   sticker/title/save stacked, then price on its own big centered line below — that
   alone cost ~50px per card). Button/qty-stepper/old-price/included-list all span full
   width beneath. Included items switched from one-per-line to wrapping pill chips —
   the single biggest space win, since packages commonly list 3-8 items. */
.t4-widget__stage .extra-card {
	display: grid;
	grid-template-columns: 1fr auto;
	/* Named areas (not just grid-row/column numbers) so price can be pinned to the SAME
	   row as the title specifically. An empty area with nothing placed in it (e.g. no
	   "sticker" row on a card without the Most Popular badge) collapses to 0 height —
	   no manual show/hide bookkeeping needed per card. */
	grid-template-areas:
		"sticker sticker"
		"title   price"
		"saved   saved"
		"old     old"
		"btn     btn"
		"qty     qty"
		"list    list";
	column-gap: 10px;
	row-gap: 0;
	background: var(--t4-bg-1);
	border: 1.5px solid transparent;
	border-radius: 10px;
	padding: 12px;
	position: relative;
	transition: border-color .15s ease, background .15s ease;
	width: 100%;
	box-sizing: border-box;
	/* Legacy style.css sets `text-align: center` on .extra-card itself (built for the old
	   centered card), and text-align is inherited — every child that doesn't explicitly
	   set its own text-align (the save-badge was the one I missed) silently centers
	   instead of sitting flush left like the title above it. Reset it once here instead
	   of chasing it element-by-element. */
	text-align: left;
}
/* Legacy style.css adds `.extra-card > *:not(:last-child) { margin-bottom: 2rem }` —
   a generic "stack children with spacing" rule from the old, few-big-elements card. It
   was stacking an EXTRA 20px under every direct child (price/old-price/button/qty-
   stepper) on top of our own precise per-element margin-top values, which is what
   made "Individually valued…" → button → chips read as roughly double-spaced. */
.t4-widget__stage .extra-card > * {
	margin-bottom: 0 !important;
}
/* Metal tints per package tier (classes added in booking.php from the package
   title). Deliberately pastel — a quiet wash + tinted hairline border, not a
   loud metallic. The .active rule below has higher specificity, so a selected
   card still flips to the red-tint/red-border state regardless of tier. */
.t4-widget__stage .extra-card--bronze {
	background: linear-gradient(150deg, #fbf3ea 0%, #f3e1cc 100%);
	border-color: rgba(176, 121, 79, 0.28);
}
.t4-widget__stage .extra-card--silver {
	background: linear-gradient(150deg, #f8f9fb 0%, #e8ecf1 100%);
	border-color: rgba(138, 148, 158, 0.32);
}
.t4-widget__stage .extra-card--gold {
	background: linear-gradient(150deg, #fdf9ec 0%, #f5e9c0 100%);
	border-color: rgba(201, 162, 39, 0.32);
}
.t4-widget__stage .extra-card.active {
	background: rgba(255,40,0,0.06);
	border-color: var(--t4-red);
}
/* Dissolve the header wrapper (display:contents) so its children — sticker, title,
   saved-badge — become direct grid items of .extra-card and can each get their own
   named area. Without this, the price (a sibling of .extra-card__header, placed via
   plain grid-row:1) aligned against wherever the HEADER BLOCK started — which was the
   sticker's row whenever "Most Popular" was present, not the title, so price visibly
   floated up next to the badge instead of the package name on those cards. Also strips
   legacy style.css's 16px/60px padding + 25%-black background tint (built for the OLD
   centered card with 60px side clearance for a diagonal corner ribbon) — that's what
   crushed the title column down to ~147px and caused the aggressive text truncation. */
.t4-widget__stage .extra-card__header {
	display: contents;
}
.t4-widget__stage .extra-card__sticker {
	grid-area: sticker;
	justify-self: start;
	display: inline-block;
	background: var(--t4-red);
	color: #fff;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 100px;
	margin-bottom: 6px;
	/* Override booking.css that may position it as corner ribbon */
	position: static !important;
	clip-path: none !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
}
.t4-widget__stage .extra-card__title {
	grid-area: title;
	align-self: center;
	min-width: 0;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-ink);
	line-height: 1.25;
	text-align: left;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	/* Variant A (approved): single line only, not 2 — a 2-line clamp let the price end up
	   aligned only against the title's FIRST line, floating oddly next to a title that
	   visually continued below it. One line + ellipsis keeps title and price reliably
	   level with each other regardless of name length. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.t4-widget__stage .extra-card__price {
	grid-area: price;
	align-self: center;
	justify-self: end;
	/* Legacy style.css makes this `display: flex; align-items: flex-start;` — meant to
	   pin a small "AED" prefix to the top of a much taller number (its own span rule
	   sets that span to 4rem/40px). We render "AED" and the number at the SAME size, so
	   that flex-start top-alignment just made the two text runs sit on different
	   baselines instead of reading as one price. Plain block text lets them share the
	   normal, natural text baseline instead. */
	display: block;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-h4);
	font-weight: 800;
	color: var(--t4-red);
	margin-bottom: 0;
	line-height: 1.25;
	white-space: nowrap;
	text-align: right;
}
.t4-widget__stage .extra-card__price span {
	font-size: inherit;
	margin-left: 2px;
	font-weight: inherit;
}
.t4-widget__stage .extra-card__saved {
	grid-area: saved;
	display: inline-block;
	font-size: var(--t4-fs-micro);
	color: var(--t4-green);
	font-weight: 600;
	margin-left: 0;
	margin-top: 2px;
}
.t4-widget__stage .extra-card__old-price {
	grid-area: old;
	text-align: left;
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	margin-top: 4px;
	font-style: italic;
}
/* Legacy style.css adds its OWN divider via ::after on this element (12px top margin +
   a 1px line) — that was rendering as a second, unstyled divider directly above our
   intentional one on .extra-card__list's border-top, which is what made the "Individually
   valued…" → chips gap read as roughly double what it should be. */
.t4-widget__stage .extra-card__old-price::after { content: none !important; }
.t4-widget__stage .extra-card__btn {
	grid-area: btn;
	display: block !important;
	background: #fff !important;
	border: 1.5px solid var(--t4-line-2) !important;
	color: var(--t4-ink) !important;
	padding: 7px 14px !important;
	border-radius: 8px !important;
	font-family: var(--t4-sans) !important;
	font-size: var(--t4-fs-micro) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	width: 100% !important;
	margin-top: 8px;
	box-shadow: none !important;
	transition: border-color .15s ease, background .15s ease !important;
}
.t4-widget__stage .extra-card__btn:hover {
	border-color: var(--t4-ink) !important;
	background: var(--t4-bg-1) !important;
}
.t4-widget__stage .extra-card.active .extra-card__btn { display: none !important; }
.t4-widget__stage .extra-card__quantity {
	grid-area: qty;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border-radius: 8px;
	padding: 4px;
	margin-top: 8px;
	border: 1.5px solid var(--t4-line);
	width: 100% !important;
	box-sizing: border-box;
	height: auto !important;
}
.t4-widget__stage .extra-card__quantity.hidden { display: none !important; }
.t4-widget__stage .extra-card__quantity .quantity__btn {
	width: 32px !important;
	height: 32px !important;
	/* Legacy `.quantity__btn { padding: 1.4rem 2.4rem }` (style.css) was never reset here —
	   24px of horizontal padding inside a 32px-wide box left ~2px of actual content room.
	   The "−"/"+" text characters visually overflowed that with nobody noticing; an SVG
	   child can't, and collapsed to 0 width as a result. */
	padding: 0 !important;
	border: 1px solid var(--t4-line-2) !important;
	background: #fff !important;
	border-radius: 6px !important;
	font-size: var(--t4-fs-body) !important;
	cursor: pointer;
	color: var(--t4-ink) !important;
	flex-shrink: 0;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.t4-widget__stage .extra-card__quantity .quantity__btn:hover { border-color: var(--t4-ink) !important; }
.t4-widget__stage .extra-card__quantity .quantity__btn-icon { display: inline-block; width: 14px; height: 14px; flex-shrink: 0; }
.t4-widget__stage .extra-card__quantity .quantity__input {
	flex: 1;
	border: none !important;
	background: transparent !important;
	text-align: center;
	font-weight: 600 !important;
	font-size: var(--t4-fs-small);
	color: var(--t4-ink) !important;
	width: auto !important;
	padding: 0 !important;
}
/* Included items — one line if everything fits, otherwise wraps to a 2nd line and stops
   there (max-height + hidden overflow caps it at 2 rows instead of growing to fit
   however many items a package lists — Gold's 7 items used to take 3 full rows and was
   the tallest part of the whole card). */
.t4-widget__stage .extra-card__list {
	grid-area: list;
	/* Legacy style.css sets `width: 18rem` (180px, fixed) + `margin: 0 auto` — built to
	   center a narrower list inside the old wide card. Left un-reset, it capped this
	   list at 180px inside our ~350px-wide card, so roughly HALF the card's own width
	   just went unused and items wrapped/clipped sooner than they needed to. */
	width: 100% !important;
	max-width: 100% !important;
	margin: 8px 0 0;
	padding: 8px 0 0;
	list-style: none;
	border-top: 1px solid rgba(12,12,12,0.06);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	/* ~2 rows: measured chip row height is ~26.5px (11px font, line-height 1.3, 4px
	   top+bottom padding) × 2 + one 6px row gap ≈ 59px. Round up slightly so real text
	   metrics/OS font rendering variance never clips the 2nd row. */
	max-height: 62px;
	overflow: hidden;
	gap: 6px;
}
.t4-widget__stage .extra-card__service {
	display: inline-flex !important;
	flex-direction: row !important;
	flex-shrink: 0 !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 4px 9px !important;
	margin: 0 !important;
	background: rgba(12,12,12,0.045) !important;
	border: none !important;
	border-radius: 999px !important;
	width: auto !important;
	white-space: nowrap !important;
	font-size: var(--t4-fs-micro) !important;
	color: var(--t4-ink) !important;
	font-weight: 600;
	line-height: 1.3 !important;
}
.t4-widget__stage .extra-card__service::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--t4-green);
	flex-shrink: 0;
}
.t4-widget__stage .extra-card__service > div {
	color: var(--t4-ink);
	font-weight: 600;
}
.t4-widget__stage .extra-card__service a,
.t4-widget__stage .extra-card__service .booking-step__extra-hint {
	font-size: var(--t4-fs-micro) !important;
	color: var(--t4-muted) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	font-weight: 400;
	display: inline-block;
}
.t4-widget__stage .extra-card__service a:hover { color: var(--t4-red) !important; }
.t4-widget__stage .extra-card input[type="checkbox"] { display: none !important; }
.t4-widget__stage .booking-step__note {
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	/* No bottom margin: this note is the LAST element when the addons list is
	   expanded, and the stage's own padding-bottom already provides the gap —
	   the extra 14px only fed the invisible internal scroll (user-reported
	   10-15px "silent" scroll with packages open). */
	margin: 6px 0 0;
	line-height: 1.5;
	font-style: italic;
}

/* ============ STEP 3: CHECKOUT ============ */
.t4-widget__stage .booking-checkout { padding: 0; }
.t4-widget__stage .booking-checkout__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h4);
	color: var(--t4-ink);
	text-transform: uppercase;
}
/* This step has no other way back once you've reached checkout (no footer Back/Next
   pair like steps 1-2), and a bare rotated-arrow circle next to the title read as
   unclear/decorative rather than an obvious nav control — removed per feedback. */
.t4-widget__stage .booking-checkout__back {
	display: none !important;
}
.t4-widget__stage .booking-checkout__order { font-size: var(--t4-fs-small); }
.t4-widget__stage .booking-checkout__table {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 10px;
}
.t4-widget__stage .booking-checkout__table-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 4px 0;
	color: var(--t4-body);
	font-size: var(--t4-fs-small);
}
.t4-widget__stage .booking-checkout__table-item-name { flex: 1; }
.t4-widget__stage .booking-checkout__table-item-quantity { color: var(--t4-muted); margin: 0 8px; }
.t4-widget__stage .booking-checkout__table-item-value { color: var(--t4-ink); font-weight: 600; }
.t4-widget__stage .modal__divider--light { display: block; height: 1px; background: var(--t4-line); border: none; margin: 8px 0; }
.t4-widget__stage .booking-checkout__payments {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 12px 0;
}
.t4-widget__stage .booking-checkout__payment {
	display: block;
	cursor: pointer;
	position: relative;
}
.t4-widget__stage .booking-checkout__payment-input { position: absolute; opacity: 0; pointer-events: none; }
.t4-widget__stage .booking-checkout__payment-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: var(--t4-bg-1);
	border: 1.5px solid transparent;
	border-radius: 8px;
	transition: border-color .15s ease, background .15s ease;
}
.t4-widget__stage .booking-checkout__payment-input:checked + .booking-checkout__payment-inner {
	background: rgba(255,40,0,0.06);
	border-color: var(--t4-red);
}
.t4-widget__stage .booking-checkout__payment-title {
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-ink);
}
.t4-widget__stage .booking-checkout__payment-icons {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}
.t4-widget__stage .booking-checkout__payment-icon { width: 28px; height: 18px; }
.t4-widget__stage .booking-checkout__payment-icon--wide { width: 50px; }

.t4-widget__stage .tabby-roadmap {
	display: flex;
	gap: 4px;
	background: var(--t4-bg-1);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 10px;
}
.t4-widget__stage .tabby-roadmap.hidden { display: none; }
.t4-widget__stage .tabby-roadmap__item { flex: 1; text-align: center; }
.t4-widget__stage .tabby-roadmap__price { font-weight: 600; font-size: var(--t4-fs-micro); color: var(--t4-ink); }
.t4-widget__stage .tabby-roadmap__date { font-size: var(--t4-fs-micro); color: var(--t4-muted); margin: 2px 0 6px; }
.t4-widget__stage .tabby-roadmap__progress { height: 3px; border-radius: 2px; background: var(--t4-line-2); }
.t4-widget__stage .tabby-roadmap__progress.active { background: var(--t4-red); }

.t4-widget__stage .booking-checkout__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 0;
	border-top: 1px solid var(--t4-line);
	margin-bottom: 14px;
}
.t4-widget__stage .booking-checkout__total-title {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--t4-ink);
	font-weight: 600;
}
.t4-widget__stage .booking-checkout__total-value {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h3);
	color: var(--t4-ink);
}
.t4-widget__stage .checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	margin-bottom: 14px;
}
.t4-widget__stage .checkbox__pointer {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: #fff;
	border: 1.5px solid var(--t4-line-2);
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.t4-widget__stage .checkbox__input { position: absolute; opacity: 0; pointer-events: none; }
.t4-widget__stage .checkbox__custom { width: 11px; height: 11px; fill: transparent; transition: fill .15s ease; }
.t4-widget__stage .checkbox__input:checked + .checkbox__custom { fill: var(--t4-red); }
.t4-widget__stage .checkbox__input:checked + .checkbox__custom + .field__placeholder,
.t4-widget__stage .checkbox__input:checked ~ .checkbox__pointer { border-color: var(--t4-red); }
.t4-widget__stage .checkbox__text {
	font-size: var(--t4-fs-micro);
	color: var(--t4-body);
	line-height: 1.5;
}
.t4-widget__stage .checkbox__text a { color: var(--t4-red); text-decoration: none; }
/* booking.js actually adds .error to the hidden <input name="privacy"> itself (not to
   .checkbox or .checkbox__pointer), so the old ".checkbox.error .checkbox__pointer" rule
   above never matched anything — the "unchecked terms" warning was effectively invisible,
   not just faint. :has() reaches the real target: the visible 18px box gets a red
   border + tint, the row shakes once, the label text turns red, and a persistent glow
   (reusing the site's existing `pulse` keyframes) keeps it noticeable until fixed. */
.t4-widget__stage .checkbox__pointer:has(.checkbox__input.error) {
	border-color: var(--t4-red) !important;
	background: rgba(255,40,0,0.08);
	animation: pulse 2s infinite;
}
.t4-widget__stage .checkbox:has(.checkbox__input.error) {
	animation: t4-checkbox-shake 0.4s ease;
}
.t4-widget__stage .checkbox:has(.checkbox__input.error) .checkbox__text {
	color: var(--t4-red);
}
@keyframes t4-checkbox-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-3px); }
	40%, 60% { transform: translateX(3px); }
}

.t4-widget__stage .booking-checkout__btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100%;
	padding: 12px 20px !important;
	white-space: nowrap;
	background: var(--t4-red) !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-family: var(--t4-sans) !important;
	font-size: var(--t4-fs-small) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(255,40,0,0.22) !important;
	transition: background .15s ease, transform .15s ease !important;
}
.t4-widget__stage .booking-checkout__btn:hover {
	background: var(--t4-red-dark) !important;
	transform: translateY(-1px);
}
.t4-widget__stage .booking-checkout__btn .btn__icon { width: 14px; height: 14px; fill: currentColor; }

/* ====================== HOST FOR EXISTING FORM (off-screen; parks the shared .booking
   element when it's not moved into the widget stage for Reserve or "View full calendar") ====================== */
.t4-formhost {
	/* Off-screen but full-width so AirDatepicker calendar grid initializes correctly */
	position: absolute;
	left: -200vw;
	top: 0;
	width: 720px;
	max-width: 720px;
	pointer-events: none;
	opacity: 0;
}

/* Calendar-only mode (triggered by "View full calendar") — the SAME in-place
   transformation used for Reserve: the form moves into `.t4-widget__stage`
   (see `openModal('cal')` in tour-v4.js) instead of a separate dark-overlay modal,
   so it inherits the widget's own white/red-top-border/shadow card language for free.
   Only the date column is shown; restyle the AirDatepicker grid to match the v4
   booking-form aesthetic (cream surfaces, red selection, soft borders, mono daynames). */
.t4-widget--cal-only .t4-widget__stage .section-header,
.t4-widget--cal-only .t4-widget__stage .booking-step__column:nth-child(2),
.t4-widget--cal-only .t4-widget__stage .booking-step:not([data-id="step-1"]),
.t4-widget--cal-only .t4-widget__stage .booking-step__footer,
.t4-widget--cal-only .t4-widget__stage .variants {
	display: none !important;
}
/* Kill legacy .booking { padding: 4.8rem } (style.css:4689) — already neutralized by the
   blanket `.t4-widget__stage .booking { padding: 0 !important }` rule above; no duplicate
   needed here. */
.t4-widget--cal-only .t4-widget__stage .booking-step,
.t4-widget--cal-only .t4-widget__stage .booking-steps {
	padding: 0 !important;
	margin: 0 !important;
}
.t4-widget--cal-only .t4-widget__stage .booking-step__columns,
.t4-widget--cal-only .t4-widget__stage .booking-step__column {
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block !important;
}
/* Hide the legacy step header ("1 — Select date for buggy tour") — the widget's own
   "Back to dates" pill at the top of the stage is the close affordance; the calendar
   is self-explanatory. */
.t4-widget--cal-only .t4-widget__stage .booking-step__header {
	display: none !important;
}
.t4-widget--cal-only .t4-widget__stage .calendar-container,
.t4-bmodal .t4-widget__stage .calendar-container {
	min-height: 320px;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-top: 10px;
}
/* AirDatepicker reskin — "Soft tiles" (approved mockup mockups/booking-calendar-v4
   V2, 2026-07-09): every day is a cream tile like the widget's date strip, gold
   TODAY badge, red selected tile, Bebas month + mono year, round nav buttons on
   the right. Scoped to the cal-only widget stage + modal so the live booking page
   keeps its original look until V4 ships. !important everywhere — legacy style.css
   has heavy rules on these exact air-datepicker classes. */
.t4-widget--cal-only .t4-widget__stage .air-datepicker,
.t4-bmodal .t4-widget__stage .air-datepicker {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	font-family: var(--t4-sans) !important;
	width: 100% !important;
}
/* Nav row: month title on the LEFT (Bebas + mono year), both arrows together on
   the right — flex reorder, DOM stays prev|title|next. */
.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav,
.t4-bmodal .t4-widget__stage .air-datepicker-nav {
	background: transparent !important;
	color: var(--t4-ink) !important;
	fill: var(--t4-ink) !important;
	border: none !important;
	margin: 0 !important;
	padding: 2px 0 14px !important;
	min-height: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 6px !important;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav--title,
.t4-bmodal .t4-widget__stage .air-datepicker-nav--title {
	order: -1 !important;
	margin-right: auto !important;
	flex: 0 1 auto !important;
	text-align: left !important;
	font-family: var(--t4-sans) !important;
	font-size: var(--t4-fs-h4) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	color: var(--t4-ink) !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	background: none !important;
	border-radius: 8px;
	padding: 2px 6px 2px 2px !important;
	cursor: default !important;
	pointer-events: none !important; /* month/year drill-down view is off-brand — arrows only */
}
/* Year inside the nav title (script.js navTitles 'MMMM <i>yyyy</i>') */
.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav--title i,
.t4-bmodal .t4-widget__stage .air-datepicker-nav--title i {
	font-family: var(--t4-mono) !important;
	font-style: normal !important;
	font-size: var(--t4-fs-micro) !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	color: var(--t4-muted) !important;
	margin-left: 7px !important;
	vertical-align: 4px !important;
}
/* Prev/next: round buttons, cream fill, ink hover. Prev auto-gets -disabled-
   from AirDatepicker (minDate=today) on the current month. */
.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav--action,
.t4-bmodal .t4-widget__stage .air-datepicker-nav--action {
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	background: var(--t4-bg-1) !important;
	border: 1px solid var(--t4-line-2) !important;
	border-radius: 50% !important;
	padding: 0 !important;
	color: var(--t4-ink) !important;
	fill: var(--t4-ink) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 180ms var(--t4-ease), border-color 180ms var(--t4-ease), color 180ms var(--t4-ease), transform 180ms var(--t4-ease) !important;
	box-shadow: none !important;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav--action:hover,
.t4-bmodal .t4-widget__stage .air-datepicker-nav--action:hover {
	background: var(--t4-ink) !important;
	border-color: var(--t4-ink) !important;
	color: #fff !important;
	fill: #fff !important;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav--action:active { transform: scale(0.94); }
/* Current month: back arrow fully HIDDEN until you flip forward (user call
   2026-07-09); visibility keeps the slot so the next arrow never jumps. */
.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav--action.-disabled-,
.t4-bmodal .t4-widget__stage .air-datepicker-nav--action.-disabled- {
	visibility: hidden !important;
	pointer-events: none !important;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav--action svg,
.t4-bmodal .t4-widget__stage .air-datepicker-nav--action svg {
	width: 13px !important;
	height: 13px !important;
	stroke: currentColor !important;
	fill: currentColor !important;
}
/* Both nav icons are the same sprite arrow-right — mirror the prev one */
.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav--action[data-action="prev"] svg,
.t4-bmodal .t4-widget__stage .air-datepicker-nav--action[data-action="prev"] svg {
	transform: rotate(180deg) !important;
}
/* Legacy style.css pins .air-datepicker--content to 271px and cells to 2.4rem —
   stretch everything to the stage width so the tiles fill their grid columns. */
.t4-widget--cal-only .t4-widget__stage .air-datepicker--content,
.t4-bmodal .t4-widget__stage .air-datepicker--content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-body--day-names,
.t4-bmodal .t4-widget__stage .air-datepicker-body--day-names {
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: none !important;
	grid-gap: 5px !important;
	gap: 5px !important;
	width: 100% !important;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-body--day-name,
.t4-bmodal .t4-widget__stage .air-datepicker-body--day-name {
	font-family: var(--t4-mono) !important;
	font-size: var(--t4-fs-micro) !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--t4-muted) !important;
	background: none !important;
	padding: 4px 0 !important;
	width: auto !important;
	height: auto !important;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-body--cells.-days-,
.t4-bmodal .t4-widget__stage .air-datepicker-body--cells.-days- {
	padding: 0 !important;
	gap: 5px !important;
	grid-gap: 5px !important;
	grid-auto-rows: auto !important;
}
/* Date cells — soft tiles: same family as the widget's horizontal date strip. */
.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell,
.t4-bmodal .t4-widget__stage .air-datepicker-cell {
	position: relative !important;
	font-family: var(--t4-sans) !important;
	font-size: var(--t4-fs-small) !important;
	font-weight: 600 !important;
	color: var(--t4-ink) !important;
	background: var(--t4-bg-1) !important;
	border: 1px solid transparent !important;
	border-radius: 9px !important;
	width: auto !important;
	height: 42px !important;
	letter-spacing: -0.01em !important;
	transition: background 160ms var(--t4-ease), color 160ms var(--t4-ease), border-color 160ms var(--t4-ease), transform 160ms var(--t4-ease), box-shadow 160ms var(--t4-ease) !important;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell.-day-:not(.-disabled-):hover,
.t4-bmodal .t4-widget__stage .air-datepicker-cell.-day-:not(.-disabled-):hover {
	background: #fff !important;
	border-color: var(--t4-line-2) !important;
	color: var(--t4-ink) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(12,12,12,0.1) !important;
}
/* Today: gold-ringed tile + tiny gold TODAY badge (same language as the strip tile) */
.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell.-current-,
.t4-bmodal .t4-widget__stage .air-datepicker-cell.-current- {
	color: var(--t4-ink) !important;
	font-weight: 600 !important;
	background: var(--t4-bg-1) !important;
	border-color: #f5b301 !important;
	box-shadow: none !important;
	z-index: 1 !important;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell.-current-::before,
.t4-bmodal .t4-widget__stage .air-datepicker-cell.-current-::before {
	content: 'TODAY';
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	background: #f5b301;
	color: var(--t4-ink);
	font-family: var(--t4-mono);
	font-size: 6.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 2px 5px;
	border-radius: 4px;
	pointer-events: none;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell.-current-:hover,
.t4-bmodal .t4-widget__stage .air-datepicker-cell.-current-:hover {
	background: #fff !important;
	color: var(--t4-ink) !important;
	border-color: #f5b301 !important;
}
/* Selected — red tile with glow (current+selected keeps the badge, goes red too) */
.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell.-day-.-selected-,
.t4-bmodal .t4-widget__stage .air-datepicker-cell.-day-.-selected-,
.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell.-day-.-selected-.-focus-,
.t4-bmodal .t4-widget__stage .air-datepicker-cell.-day-.-selected-.-focus-,
.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell.-current-.-selected-,
.t4-bmodal .t4-widget__stage .air-datepicker-cell.-current-.-selected- {
	background: var(--t4-red) !important;
	color: #fff !important;
	border-color: var(--t4-red) !important;
	box-shadow: 0 8px 18px rgba(255,40,0,0.4) !important;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell.-day-.-disabled-,
.t4-bmodal .t4-widget__stage .air-datepicker-cell.-day-.-disabled- {
	color: rgba(12,12,12,0.2) !important;
	cursor: not-allowed !important;
	background: transparent !important;
	border-color: transparent !important;
}
/* Neighbouring-month days: invisible placeholders (mockup-approved) */
.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell.-day-.-other-month-,
.t4-bmodal .t4-widget__stage .air-datepicker-cell.-day-.-other-month- {
	color: transparent !important;
	background: transparent !important;
	border-color: transparent !important;
	pointer-events: none !important;
	box-shadow: none !important;
}
.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell.-day-.-other-month-::before,
.t4-bmodal .t4-widget__stage .air-datepicker-cell.-day-.-other-month-::before { display: none; }
/* Hide the in-panel preloader — the spinner shows in the widget itself */
.t4-widget--cal-only .t4-widget__stage .calendar-preloader { display: none !important; }

@media (max-width: 600px) {
	.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav,
	.t4-bmodal .t4-widget__stage .air-datepicker-nav {
		padding: 0 0 10px !important;
		gap: 5px !important;
	}
	.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav--title,
	.t4-bmodal .t4-widget__stage .air-datepicker-nav--title {
		font-size: 22px !important;
	}
	.t4-widget--cal-only .t4-widget__stage .air-datepicker-nav--action,
	.t4-bmodal .t4-widget__stage .air-datepicker-nav--action {
		width: 30px !important;
		height: 30px !important;
		min-width: 30px !important;
		flex-shrink: 0 !important;
	}
	.t4-widget--cal-only .t4-widget__stage .air-datepicker-cell,
	.t4-bmodal .t4-widget__stage .air-datepicker-cell {
		font-size: 12px !important;
		height: 38px !important;
	}
	.t4-widget--cal-only .t4-widget__stage .air-datepicker-body--day-name,
	.t4-bmodal .t4-widget__stage .air-datepicker-body--day-name {
		font-size: 8.5px !important;
		padding: 2px 0 !important;
	}
	.t4-widget--cal-only .t4-widget__stage .air-datepicker-body--cells.-days-,
	.t4-bmodal .t4-widget__stage .air-datepicker-body--cells.-days- {
		gap: 4px !important;
		grid-gap: 4px !important;
	}
	.t4-widget--cal-only .t4-widget__stage .air-datepicker-body--day-names,
	.t4-bmodal .t4-widget__stage .air-datepicker-body--day-names {
		grid-gap: 4px !important;
		gap: 4px !important;
	}
}

/* ====================== REVIEWS + RELATED ====================== */
.t4-reviews {
	background: var(--t4-bg-1);
	border-top: 1px solid var(--t4-line);
	border-bottom: 1px solid var(--t4-line);
	padding: var(--t4-sec-sm) 0;
}
.t4-reviews .section-reviews {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
}

.t4-related {
	background: var(--t4-bg);
	padding: var(--t4-sec) 0; /* rhythm: prominent section, matches hero weight */
}
.t4-section-head {
	max-width: var(--t4-container);
	margin: 0 auto 40px;
	padding: 0 var(--t4-gutter);
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 30px;
	flex-wrap: wrap;
}
.t4-section-title {
	font-family: var(--t4-sans);
	font-size: clamp(var(--t4-fs-h4), 2.4vw, var(--t4-fs-h3));
	font-weight: 800;
	line-height: 0.95;
	margin: 0;
	color: var(--t4-ink);
	
}
.t4-related__grid {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1024px) {
	.t4-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.t4-related { padding: var(--t4-sec) 0; }
	.t4-related__grid { grid-template-columns: 1fr; }
	.t4-section-head { flex-direction: column; align-items: flex-start; }
}
/* MOBILE: related = горизонтальная snap-рельса, как рельсы карточек в категориях
   (юзер 2026-07-16), 16px слева. scroll-padding обязателен — mandatory-snap иначе
   прищёлкивает первую карточку к краю и съедает padding. */
@media (max-width: 768px) {
	.t4-related .t4-section-head { padding: 0 16px; }
	.t4-related__grid {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0 16px 8px;
		scroll-padding-left: 16px;
	}
	.t4-related__grid::-webkit-scrollbar { display: none; }
	.t4-related__grid > .t4-rtcard {
		flex: 0 0 min(78vw, 340px);
		scroll-snap-align: start;
	}
}

.t4-rtcard {
	background: #fff;
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-lg);
	overflow: hidden;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
	display: flex;
	flex-direction: column;
	box-shadow: var(--t4-sh-sm);
	text-decoration: none;
	color: var(--t4-ink);
}
.t4-rtcard:hover {
	transform: translateY(-4px);
	/* Neutral hover — the red border read as a red overlay on the cards (user 2026-07-14) */
	border-color: var(--t4-line-2);
	box-shadow: var(--t4-sh-md);
}
.t4-rtcard__media {
	height: 200px;
	background-color: var(--t4-bg-1);
	position: relative;
	overflow: hidden;
}
/* Card photo is a real <img> (lazy-loadable), not a CSS background — perf 2026-07-15 */
.t4-rtcard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.t4-rtcard__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #fff;
	border: 1px solid var(--t4-line);
	box-shadow: var(--t4-sh-sm);
	padding: 5px 10px;
	border-radius: 100px;
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--t4-ink);
}
.t4-rtcard__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.t4-rtcard__title {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body); /* PJS: 22px был громадным (юзер 2026-07-14) */
	color: var(--t4-ink);
	line-height: 1.1;
	margin-bottom: 8px;
	text-transform: uppercase;
	font-weight: 800;
}
.t4-rtcard__meta {
	display: flex;
	gap: 14px;
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	margin-bottom: 16px;
}
.t4-rtcard__meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.t4-rtcard__meta svg {
	width: 12px;
	height: 12px;
}
.t4-rtcard__bottom {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--t4-line);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.t4-rtcard__price {
	font-size: var(--t4-fs-small);
	color: var(--t4-muted);
}
.t4-rtcard__price strong {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-lg); /* PJS: ужато вместе с заголовком */
	color: var(--t4-ink);
	margin-left: 4px;
	font-weight: 800;
}
.t4-rtcard__cta {
	font-size: var(--t4-fs-micro);
	color: var(--t4-red);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.t4-rtcard__cta svg {
	width: 12px;
	height: 12px;
}

/* ====================== FOOTER V4 (dark, design-exact) ====================== */
/* Hide existing site footer on v4 pages — keep all modals + fixed-menu untouched */
body.t4-page > #page > .footer,
body.t4-page .footer { display: none !important; }

.t4-foot {
	background: #0c0c0c;
	border-top: 1px solid rgba(255,255,255,0.08);
	padding: 64px 0 30px; /* rhythm: footer doesn't need to scream */
	color: rgba(255,255,255,0.6);
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	line-height: 1.5;
}
.t4-foot__top {
	max-width: var(--t4-container);
	margin: 0 auto 50px;
	padding: 0 var(--t4-gutter);
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: 60px;
}

.t4-foot__brand { min-width: 0; }
.t4-foot__logo {
	display: inline-block;
	line-height: 0;
}
.t4-foot__logo img {
	height: 48px;
	width: auto;
	display: block;
}
.t4-foot__name {
	font-family: var(--t4-sans);
	font-weight: 800;
	letter-spacing: 0.18em;
	font-size: var(--t4-fs-micro);
	color: rgba(255,255,255,0.5);
	margin-top: 6px;
	text-transform: uppercase;
}
.t4-foot__tagline {
	color: rgba(255,255,255,0.7);
	margin-top: 16px;
	font-size: var(--t4-fs-small);
	max-width: 36ch;
	line-height: 1.55;
}
.t4-foot__badges {
	display: flex;
	gap: 16px;
	margin-top: 22px;
	flex-wrap: wrap;
}
.t4-trustbadge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	padding: 8px 12px;
	color: #fff;
	text-decoration: none;
	transition: background .2s var(--t4-ease), border-color .2s var(--t4-ease), transform .2s var(--t4-ease);
}
.t4-trustbadge:hover {
	background: rgba(255,255,255,0.14);
	border-color: rgba(255,255,255,0.22);
	transform: translateY(-1px);
}
.t4-trustbadge__logo { height: 18px; width: auto; flex-shrink: 0; }
.t4-trustbadge__logo--ta { height: 16px; }
/* Inside the dark footer: invert the TripAdvisor PNG to white (green branding washes out on black) */
.t4-foot .t4-trustbadge__logo--ta { filter: brightness(0) invert(1); }
.t4-trustbadge__text { display: flex; flex-direction: column; line-height: 1.1; }
.t4-trustbadge__value { font-weight: 600; font-size: var(--t4-fs-small); color: #fff; }
.t4-trustbadge__label { font-size: var(--t4-fs-micro); color: rgba(255,255,255,0.55); }

.t4-foot__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	font-size: var(--t4-fs-small);
}
.t4-foot__col { min-width: 0; }
.t4-foot__h {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5); /* neutralized — was red-2 fighting the page red */
	margin-bottom: 16px;
}
.t4-foot__col ul { display: flex; flex-direction: column; gap: 0; }
.t4-foot__col li { padding: 5px 0; }
.t4-foot__col a {
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	transition: color .15s ease;
}
.t4-foot__col a:hover { color: #fff; }

.t4-foot__contact li {
	display: flex !important;
	align-items: center;
	gap: 10px;
}
.t4-foot__icon { width: 14px; height: 14px; flex-shrink: 0; fill: rgba(255,255,255,0.5); color: rgba(255,255,255,0.5); }

.t4-foot__bottom {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 24px var(--t4-gutter) 0;
	border-top: 1px solid rgba(255,255,255,0.08);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	font-size: var(--t4-fs-micro);
	color: rgba(255,255,255,0.4);
	flex-wrap: wrap;
}
.t4-foot__copy { color: rgba(255,255,255,0.4); }
.t4-foot__copy a { color: rgba(255,255,255,0.6); text-decoration: none; }
/* Accepted payment methods row — matches site-wide .icon-list--payment but
   tinted for the dark v4 footer. Sprite icons are duotone — desaturate +
   brighten so brand badges read as a neutral row, not a Vegas marquee. */
.t4-foot__pay {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.t4-foot__pay-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding: 4px 10px;
	background: rgba(255,255,255,0.08);
	border-radius: 6px;
	transition: background 200ms var(--t4-ease);
}
.t4-foot__pay-item:hover { background: rgba(255,255,255,0.14); }
.t4-foot__pay-icon {
	display: block;
	width: 36px;
	height: 18px;
	fill: currentColor;
	color: rgba(255,255,255,0.85);
}
.t4-foot__pay-item--big .t4-foot__pay-icon { width: 52px; height: 20px; }
.t4-foot__socials { display: inline-flex; gap: 14px; }
.t4-foot__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.7);
	transition: background .15s ease, color .15s ease;
}
.t4-foot__socials a:hover { background: var(--t4-red); color: #fff; }
.t4-foot__socials svg { width: 14px; height: 14px; fill: currentColor; }

@media (max-width: 1024px) {
	.t4-foot__top { grid-template-columns: 1fr; gap: 40px; }
	/* iPad portrait / small laptop — 3 cols cramped, drop to 2 */
	.t4-foot__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
	.t4-foot { padding: 50px 0 24px; }
	.t4-foot__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
	.t4-foot__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
	.t4-foot__pay { order: -1; gap: 10px; }
	.t4-foot__pay-item { padding: 4px 8px; }
}

/* ====================== MOBILE BAR ====================== */
.t4-mobar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 50;
	background: #fff;
	border-top: 1px solid var(--t4-line-2);
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-shadow: 0 -4px 16px rgba(12,12,12,0.06);
	/* Hidden until first scroll — JS adds .t4-mobar--ready when user starts scrolling */
	transform: translateY(110%);
	transition: transform .3s ease;
}
.t4-mobar.t4-mobar--ready {
	transform: translateY(0);
}
.t4-mobar__price {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.t4-mobar__label {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--t4-muted);
	line-height: 1.2;
	margin-bottom: 2px;
	/* Constrain to width of the price below */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.t4-mobar__amount {
	font-family: var(--t4-sans);
	font-weight: 600;
	font-size: var(--t4-fs-body);
	color: var(--t4-ink);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.t4-mobar__cta { padding: 12px 22px; }

@media (max-width: 1024px) {
	.t4-mobar { display: flex; }
	body.t4-page { padding-bottom: 70px; }
}

/* ====================== AIR DATEPICKER scoping inside widget ====================== */
.t4-monthwrap .air-datepicker {
	background: #fff;
	border: none;
	box-shadow: none;
	width: 100%;
}

/* Hide the stub styling that booking.css applies to existing form when in formhost (off-screen) */
.t4-formhost .section-header,
.t4-formhost .booking-step__footer .modal__current-info {
	/* Will use existing styles for now */
}

/* ====================== RTL fixes ====================== */
.rtl.t4-page .t4-hero__inner { padding-right: max(0px, calc((100% - var(--t4-container)) / 2 + var(--t4-gutter))); padding-left: 0; }
.rtl.t4-page .t4-hero__nav { right: var(--t4-gutter); left: auto; }
.rtl.t4-page .t4-hero__thumbs { left: var(--t4-gutter); right: auto; }
/* Flip directional chevrons in RTL (prev/next semantics swap) */
.rtl.t4-page .t4-strip__nav svg,
.rtl.t4-page .t4-rtcard__cta svg,
.rtl.t4-page .t4-hero__cta svg,
.rtl.t4-page .t4-related__card svg,
.rtl.t4-page .t4-faq__sign,
.rtl.t4-page .t4-widget__cta svg { transform: scaleX(-1); }
/* Itinerary dot uses left positioning — swap to right in RTL */
.rtl.t4-page .t4-itin__item { padding-left: 0; padding-right: 56px; }
.rtl.t4-page .t4-itin__dot { left: auto; right: 0; }
.rtl.t4-page .t4-itin__item:not(:last-child)::before { left: auto; right: 19px; }
/* Stat parser limitation: handles ASCII digits + Arabic-Indic digits via regex hardening (PHP side) */

/* ====================== HALF PRICE PROMO BANNER ======================
   Universal banner shown above .header on every V4 page (tours + home).
   Both .t4-promo and .header are position:fixed at top — promo first, header
   pushed down by promo height. Body padding-top compensates for promo only
   (header has its own top:Xpx now, and body content already accounts for the
   header via the existing layout — we just add promo height on top). */
body.t4-page { --t4-promo-h: 28px; }
body.t4-page .t4-promo {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	/* Deep calm green (user 2026-07-15 — не ядовитый), was brand red */
	background: #15803d;
	color: #fff;
	font-family: var(--t4-sans);
	/* Bar height lives in --t4-promo-h (22→28px 2026-07-15) — every offset below
	   (header top, body padding, widget/drawer calcs) derives from the var. */
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.005em;
	padding: 2px 0;
	text-align: center;
	overflow: hidden;
	height: var(--t4-promo-h);
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
body.t4-page .header { top: var(--t4-promo-h) !important; }
body.t4-page { padding-top: var(--t4-promo-h); }
body.t4-page .t4-promo__inner {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}
body.t4-page .t4-promo__bold {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.04em;
	line-height: 1;
}
body.t4-page .t4-promo__sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255,255,255,0.6);
	display: inline-block;
}
body.t4-page .t4-promo__sub { color: rgba(255,255,255,0.92); }
body.t4-page .t4-promo__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	padding-bottom: 1px;
	transition: border-color 200ms var(--t4-ease);
}
body.t4-page .t4-promo__cta:hover { border-color: #fff; }
body.t4-page .t4-promo__cta svg { width: 12px; height: 12px; }

@media (max-width: 768px) {
	/* 27.07: было 36px, а кнопка внутри полосы — тап-таргет 44px (правило доступности
	   26.07). Полоса физически не могла её вместить: контент срезался по overflow.
	   Все смещения шапки/виджетов считаются от этой переменной, поэтому поднять её
	   безопасно — остальная раскладка едет следом. */
	body.t4-page { --t4-promo-h: 44px; }
	body.t4-page .t4-promo { padding: 0; font-size: 12px; }
	/* min-width:0 обязателен: без него контейнер (flex-элемент с min-width:auto)
	   разрастается по контенту до 471px вместо ширины экрана, и внутренний текст
	   не может ужаться — именно это ломало русскую версию. */
	body.t4-page .t4-promo__inner { gap: 6px; padding: 0 8px; min-width: 0; width: 100%; }
	body.t4-page .t4-promo__bold { font-size: 14px; letter-spacing: 0.05em; }
	body.t4-page .t4-promo__sub { display: none; }
	/* 27.07: на языках с длинной фразой (RU «Спецпредложение. Приключение на максимум!»)
	   строка переносилась, а полоса имеет фиксированную высоту --t4-promo-h и overflow:hidden —
	   вторая строка с кнопкой «Смотреть туры» просто срезалась, кликнуть было нельзя.
	   Держим одну строку: текст ужимается с многоточием, кнопка не сжимается. */
	body.t4-page .t4-promo__inner { flex-wrap: nowrap; }
	body.t4-page .t4-promo__bold {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/* На узких экранах кегль промо-строки чуть меньше: иначе русская фраза
	   («Спецпредложение - скидки на туры», 32 знака) не влезает рядом с кнопкой
	   и обрезается многоточием. Английская при 12px тем более помещается. */
	@media (max-width: 480px) {
		body.t4-page .t4-promo__bold { font-size: 12px; letter-spacing: 0.03em; }
	}
	body.t4-page .t4-promo__cta { flex: none; }
	body.t4-page .t4-drawer {
		top: calc(var(--t4-promo-h) + var(--t4-header-h, 64px));
		height: calc(var(--vh, 1vh) * 100 - var(--t4-promo-h) - var(--t4-header-h, 64px));
	}
	/* Widget sticky offset/cap re-derived from the promo var (drawer above too). */
	body.t4-page .t4-widget { top: calc(var(--t4-promo-h) + var(--t4-header-h, 64px) + 16px); }
	body.t4-page .t4-widget--booking,
	body.t4-page .t4-widget--cal-only {
		max-height: calc(100vh - var(--t4-promo-h) - var(--t4-header-h, 64px) - 32px);
	}
}
@media (max-width: 480px) {
	body.t4-page .t4-promo__sep { display: none; }
}

/* ============================================================================
   BOOKING ADD-ONS — Private tour (widget/modal pick step) + Refund guarantee
   (checkout step-3). Shared by the tour widget (.t4-widget) and the booking
   modal (.t4-bmodal). See tour-v4.js / booking-modal-v4.js.
   ============================================================================ */

/* ---- Private tour add-on row (proxy toggle in the pick UI) ---- */
.t4-addon-row { display: flex; align-items: center; gap: 8px; }
.t4-addon {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 13px;
	background: var(--t4-bg-1);
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-md);
	cursor: pointer;
	transition: border-color .2s var(--t4-ease), background .2s var(--t4-ease);
}
.t4-addon:hover { border-color: var(--t4-line-2); }
.t4-addon:has(.t4-addon__input:checked) { border-color: var(--t4-red); background: var(--t4-red-tint); }
.t4-addon__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.t4-addon__check {
	width: 22px; height: 22px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--t4-line-2);
	border-radius: 6px;
	color: #fff;
	transition: background .18s var(--t4-ease), border-color .18s var(--t4-ease);
}
.t4-addon__check svg { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity .18s var(--t4-ease), transform .18s var(--t4-ease); }
.t4-addon__input:checked ~ .t4-addon__check { background: var(--t4-red); border-color: var(--t4-red); }
.t4-addon__input:checked ~ .t4-addon__check svg { opacity: 1; transform: scale(1); }
.t4-addon__name { flex: 1 1 auto; min-width: 0; font-family: var(--t4-sans); font-weight: 600; font-size: var(--t4-fs-small); color: var(--t4-ink); }
.t4-addon__price { font-family: var(--t4-sans); font-weight: 600; font-size: var(--t4-fs-small); color: var(--t4-red); white-space: nowrap; }
.t4-addon__hint {
	width: 22px; height: 22px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--t4-bg-3);
	color: var(--t4-ink);
	font-family: var(--t4-sans); font-weight: 600; font-size: var(--t4-fs-micro); line-height: 1;
	text-decoration: none;
	transition: background .18s var(--t4-ease), color .18s var(--t4-ease);
}
.t4-addon__hint:hover { background: var(--t4-red); color: #fff; }

/* ---- Refund guarantee card (relocated .booking-step__extra, sits in step-3 checkout) ---- */
.booking-checkout .t4-refund {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 18px;
	padding: 11px 13px;
	background: var(--t4-bg-1);
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-md);
}
.booking-checkout .t4-refund:has(.js-refund:checked) { border-color: var(--t4-red); background: var(--t4-red-tint); }
.booking-checkout .t4-refund__label.checkbox {
	display: flex !important;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
}
.booking-checkout .t4-refund__label .checkbox__pointer { position: relative; flex-shrink: 0; width: 22px; height: 22px; }
.booking-checkout .t4-refund__label .checkbox__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.booking-checkout .t4-refund__label .checkbox__custom {
	width: 22px; height: 22px;
	border: 2px solid var(--t4-line-2);
	border-radius: 6px;
	color: #fff; fill: #fff;
	transition: background .18s var(--t4-ease), border-color .18s var(--t4-ease);
}
.booking-checkout .t4-refund__label .checkbox__input:checked ~ .checkbox__custom { background: var(--t4-red); border-color: var(--t4-red); }
.booking-checkout .t4-refund__label .checkbox__text {
	font-family: var(--t4-sans); font-weight: 600; font-size: var(--t4-fs-small); color: var(--t4-ink); line-height: 1.35;
}
.booking-checkout .t4-refund__label .js-refund-price { color: var(--t4-red); font-weight: 600; white-space: nowrap; }
.booking-checkout .t4-refund__hint {
	width: 22px; height: 22px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--t4-bg-3);
	color: var(--t4-ink);
	text-decoration: none;
	overflow: hidden;
	/* Collapse the long "What is refund guarantee?" link text to a clean "?" badge
	   (matches the private-tour hint). The text stays in the DOM for screen readers. */
	font-size: 0;
	transition: background .18s var(--t4-ease), color .18s var(--t4-ease);
}
.booking-checkout .t4-refund__hint::before {
	content: '?';
	font-family: var(--t4-sans); font-weight: 600; font-size: var(--t4-fs-micro); line-height: 1;
}
.booking-checkout .t4-refund__hint:hover { background: var(--t4-red); color: #fff; }

/* ====================== FANCYBOX SCROLLBAR JITTER FIX (all V4 pages) ======================
   Fancybox hides the body scrollbar on open (.compensate-for-scrollbar { overflow:hidden })
   and injects margin-right = scrollbar width onto <body>. Body content stays put, but FIXED
   elements (V4 header, promo bar, WhatsApp float) shift by the scrollbar width - the "page
   jumps a few px" effect. Fix: reserve the scrollbar gutter permanently on V4 pages, then
   cancel Fancybox's margin compensation (it would double-shift otherwise). */
html:has(body.t4-page) { scrollbar-gutter: stable; }
body.t4-page.compensate-for-scrollbar { margin-right: 0 !important; }

/* ====================== V4 RESKIN - SITE MODALS ======================
   The legacy fancybox modals re-inked to the V4 card language. Scoped to V4 pages
   only; old-design pages keep the untouched legacy modals.
   Covers: .modal--theme-info (Terms / Private Tour / Refund Guarantee / per-service
   "What is..." modalExtra*) + the 4 status modals (Thank / PaymentError / Process /
   Success). #modalBooking has its own V4 shell (booking-modal-v4.css). */
body.t4-page .modal--theme-info,
body.t4-page #modalThank,
body.t4-page #modalPaymentError,
body.t4-page #modalPaymentProcess,
body.t4-page #modalPaymentSuccess {
	border-radius: var(--t4-r-lg, 20px);
	border-top: 3px solid var(--t4-red);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
body.t4-page .modal--theme-info { width: min(560px, 92vw); }
body.t4-page #modalTerms { width: min(680px, 94vw); } /* long legal text breathes wider */
body.t4-page #modalThank,
body.t4-page #modalPaymentError,
body.t4-page #modalPaymentProcess,
body.t4-page #modalPaymentSuccess { width: min(640px, 94vw); }

body.t4-page .modal--theme-info .modal__inner {
	padding: 30px 34px 36px;
	min-height: 0;
}
body.t4-page .modal--theme-info .modal__info {
	border-left: 0; /* kill the legacy thick red side bar */
	padding-left: 0;
	margin-right: 24px;
}
/* mono kicker above the title - generic default + per-modal flavors */
body.t4-page .modal--theme-info .modal__info::before {
	content: 'GOOD TO KNOW';
	display: block;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--t4-red);
	margin-bottom: 10px;
}
body.t4-page #modalPrivate .modal__info::before { content: 'PRIVATE EXPERIENCE'; }
body.t4-page #modalRefund .modal__info::before  { content: 'PEACE OF MIND'; }
body.t4-page #modalTerms .modal__info::before   { content: 'BOOKING POLICY'; }
body.t4-page .modal--theme-info .modal__title {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h3);
	line-height: .95;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--t4-ink);
}
body.t4-page .modal--theme-info .modal__body {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	line-height: 1.65;
	color: var(--t4-body, #444);
}
/* these two ACF fields are plain text with \n line breaks; Terms/Extra are real HTML */
body.t4-page #modalPrivate .modal__body,
body.t4-page #modalRefund .modal__body { white-space: pre-line; }
body.t4-page .modal--theme-info .modal__body h2 {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h4);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--t4-ink);
	margin: 0 0 10px;
}
body.t4-page .modal--theme-info .modal__body strong { color: var(--t4-ink); }

/* close button - shared circle across all reskinned modals */
body.t4-page .modal--theme-info .modal__close,
body.t4-page #modalThank .modal__close,
body.t4-page #modalPaymentError .modal__close,
body.t4-page #modalPaymentProcess .modal__close,
body.t4-page #modalPaymentSuccess .modal__close {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--t4-bg-1);
	color: var(--t4-ink);
	transition: background .18s var(--t4-ease), color .18s var(--t4-ease);
}
body.t4-page .modal--theme-info .modal__close:hover,
body.t4-page #modalThank .modal__close:hover,
body.t4-page #modalPaymentError .modal__close:hover,
body.t4-page #modalPaymentProcess .modal__close:hover,
body.t4-page #modalPaymentSuccess .modal__close:hover {
	background: var(--t4-red);
	color: #fff;
}
body.t4-page .modal--theme-info .modal__close:active { transform: scale(.94); }
body.t4-page .modal--theme-info .modal__close-icon,
body.t4-page #modalThank .modal__close-icon,
body.t4-page #modalPaymentError .modal__close-icon,
body.t4-page #modalPaymentProcess .modal__close-icon,
body.t4-page #modalPaymentSuccess .modal__close-icon {
	width: 14px;
	height: 14px;
	fill: currentColor;
	stroke: currentColor;
}

/* ----- status modals (Thank you / payment result) ----- */
body.t4-page #modalThank .modal__inner,
body.t4-page #modalPaymentError .modal__inner,
body.t4-page #modalPaymentProcess .modal__inner,
body.t4-page #modalPaymentSuccess .modal__inner {
	padding: 24px 30px 32px;
	min-height: 0;
}
body.t4-page .thank__title {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h2);
	line-height: .95;
	text-transform: uppercase;
	color: var(--t4-ink);
}
body.t4-page .thank__title--small { font-size: var(--t4-fs-h2); }
body.t4-page .thank__sub-title {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	font-weight: 600;
	color: var(--t4-ink);
	margin-top: 10px;
}
body.t4-page .thank__description {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	line-height: 1.65;
	color: var(--t4-muted);
}
body.t4-page .modal__booking-number {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-small);
	letter-spacing: .06em;
	color: var(--t4-red);
	margin-top: 12px;
}
body.t4-page .modal__contact-title {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--t4-red);
}
body.t4-page .modal__contact-title-icon { fill: currentColor; }
body.t4-page .modal__contact-item,
body.t4-page .modal__contact-link {
	font-family: var(--t4-sans);
	color: var(--t4-ink);
}
body.t4-page .modal__contact-link:hover { color: var(--t4-red); }
body.t4-page .modal__divider { border-color: var(--t4-line, #e8e2d8); }

@media (max-width: 640px) {
	body.t4-page .modal--theme-info .modal__inner { padding: 24px 20px 28px; }
	body.t4-page .modal--theme-info .modal__title { font-size: 32px; }
	body.t4-page .thank__title { font-size: 32px; }
}

/* ====================== V4 MOBILE MENU REDESIGN (t4-mnav, 2026-07-06) ======================
   New drawer content per user's mock: red Book-online bar, card group (Buggy Tours
   accordion / Race Training / Treasure Hunt), plain nav list, WA + Call action buttons,
   language accordion, contacts, socials. Shell (.t4-drawer slide/scrim) unchanged. */
body.t4-page .t4-drawer--mnav { padding: 12px 14px 14px; }
body.t4-page .t4-mnav { display: flex; flex-direction: column; gap: 10px; }

/* --- Book online --- */
body.t4-page .t4-mnav__book {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--t4-red);
	color: #fff;
	border-radius: 14px;
	padding: 13px 16px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(255,40,0,0.28);
}
body.t4-page .t4-mnav__book-icon { width: 20px; height: 20px; flex-shrink: 0; }
body.t4-page .t4-mnav__book-arrow { width: 20px; height: 20px; margin-left: auto; }

/* --- Trust line under Book online --- */
body.t4-page .t4-mnav__trustline {
	text-align: center;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: rgba(12,12,12,0.68);
	margin-top: 8px;
}

/* --- Card group --- */
body.t4-page .t4-mnav__cards {
	background: #FAF9F7;
	border-radius: 16px;
	padding: 4px 18px;
}
body.t4-page .t4-mnav__card {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	background: none;
	border: 0;
	padding: 11px 2px;
	line-height: 1.55;
	min-height: 47px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	font-weight: 600;
	color: var(--t4-ink);
	text-decoration: none;
	cursor: pointer;
	text-align: left;
}
body.t4-page .t4-mnav__card + .t4-mnav__card,
body.t4-page .t4-mnav__sub + .t4-mnav__card { border-top: 1px solid rgba(12,12,12,0.07); }
body.t4-page .t4-mnav__card-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--t4-ink); }
body.t4-page .t4-mnav__chev { width: 18px; height: 18px; margin-left: auto; color: rgba(120,124,130,0.65); transition: transform .3s var(--t4-ease); flex-shrink: 0; }
body.t4-page .t4-mnav__card.is-open .t4-mnav__chev,
body.t4-page .t4-mnav__lang.is-open .t4-mnav__chev { transform: rotate(90deg); }

/* --- Accordion panels --- */
body.t4-page .t4-mnav__sub {
	max-height: 0;
	overflow: hidden;
	transition: max-height .38s var(--t4-ease);
}
body.t4-page .t4-mnav__sub.is-open { max-height: 620px; }
body.t4-page .t4-mnav__sub-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 2px 11px 38px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	font-weight: 400;
	color: var(--t4-body);
	text-decoration: none;
	border-top: 1px solid rgba(12,12,12,0.05);
}
body.t4-page .t4-mnav__sub-link:first-child { border-top: 1px solid rgba(12,12,12,0.07); }
body.t4-page .t4-mnav__sub-link--lang { padding-left: 2px; }

/* --- Plain nav list --- */
body.t4-page .t4-mnav__list { display: flex; flex-direction: column; padding: 0 4px; }
body.t4-page .t4-mnav__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 2px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	font-weight: 400;
	color: var(--t4-ink);
	text-decoration: none;
}
body.t4-page .t4-mnav__link-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--t4-ink); }

/* --- WA / Call actions --- */
body.t4-page .t4-mnav__actions { display: flex; flex-direction: row; gap: 8px; border-top: 1px solid rgba(12,12,12,0.08); padding-top: 10px; }
body.t4-page .t4-mnav__actions .t4-mnav__action { flex: 1; }
body.t4-page .t4-mnav__action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 11px;
	padding: 10px 10px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	text-decoration: none;
}
body.t4-page .t4-mnav__action-icon { width: 17px; height: 17px; fill: currentColor; }
body.t4-page .t4-mnav__action--wa,
body.t4-page .t4-mnav__action--call { background: transparent; color: var(--t4-ink); border: 1px solid rgba(12,12,12,0.16); }
body.t4-page .t4-mnav__action--wa .t4-mnav__action-icon { color: #25D366; fill: #25D366; }
body.t4-page .t4-mnav__action--call .t4-mnav__action-icon { color: var(--t4-red); fill: var(--t4-red); }

/* --- Language --- */
body.t4-page .t4-mnav__langwrap { border-top: 1px solid rgba(12,12,12,0.08); padding-top: 2px; }
body.t4-page .t4-mnav__lang {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	background: none;
	border: 0;
	padding: 8px 6px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	font-weight: 400;
	color: var(--t4-ink);
	cursor: pointer;
	text-align: left;
}
body.t4-page .t4-mnav__lang-flag { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
body.t4-page .t4-mnav__lang-globe { width: 20px; height: 20px; flex-shrink: 0; color: var(--t4-ink); }
body.t4-page .t4-mnav__lang-value { margin-left: auto; font-weight: 600; color: rgba(12,12,12,0.55); }
body.t4-page .t4-mnav__lang .t4-mnav__chev { margin-left: 6px; }
body.t4-page .t4-mnav__langwrap .t4-mnav__sub-link { padding-left: 6px; }

/* --- Contacts --- */
body.t4-page .t4-mnav__contacts { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(12,12,12,0.08); padding-top: 10px; }
body.t4-page .t4-mnav__contact {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-ink);
	text-decoration: none;
}
body.t4-page .t4-mnav__contact-badge {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255,40,0,0.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
body.t4-page .t4-mnav__contact-badge svg { width: 14px; height: 14px; fill: var(--t4-red); stroke: var(--t4-red); }
body.t4-page .t4-mnav__contact > span:last-child { align-self: center; }
body.t4-page .t4-mnav__contact-phones { display: flex; flex-direction: column; gap: 2px; }
body.t4-page .t4-mnav__contact-phones a { color: var(--t4-ink); text-decoration: none; }

/* --- Socials --- */
body.t4-page .t4-mnav__socials { display: flex; justify-content: center; gap: 16px; padding-top: 0; }
body.t4-page .t4-mnav__socials a {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(12,12,12,0.06);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
body.t4-page .t4-mnav__socials svg { width: 13px; height: 13px; fill: var(--t4-ink); }

/* ============================================================================
   BOOKING FORM UX POLISH (2026-07-07) — progress indicator, pick summary,
   details heading, per-field errors, step-2 reorder (summary -> packages ->
   Next), payment label, refund card restructure, trust line.
   All additive + V4-scoped; legacy forms untouched.
   ============================================================================ */

/* ---- Progress indicator (Date & time -> Details -> Extras -> Payment) ---- */
.t4-prog {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding-top: 10px;
	margin-top: 4px;
	border-top: 1px dashed var(--t4-line);
}
.t4-bmodal__head .t4-prog {
	border-top: none;
	padding-top: 8px;
	margin-top: 6px;
}
.t4-prog__step {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}
.t4-prog__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1.5px solid var(--t4-line-2);
	background: #fff;
	flex-shrink: 0;
	box-sizing: border-box;
	transition: background .15s ease, border-color .15s ease;
}
.t4-prog__dot svg {
	width: 8px;
	height: 8px;
	color: #fff;
	display: none;
}
.t4-prog__lab {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--t4-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.t4-prog__sep {
	flex: 1 1 8px;
	min-width: 6px;
	height: 1px;
	background: var(--t4-line-2);
}
.t4-prog__step.is-active .t4-prog__dot {
	border-color: var(--t4-red);
	background: var(--t4-red);
}
.t4-prog__step.is-active .t4-prog__lab { color: var(--t4-ink); font-weight: 600; }
.t4-prog__step.is-done .t4-prog__dot {
	border-color: var(--t4-red);
	background: var(--t4-red);
}
.t4-prog__step.is-done .t4-prog__dot svg { display: block; }
.t4-prog__step.is-done .t4-prog__lab { color: var(--t4-body); }
/* Compact on phones: label only for the ACTIVE step — done/future are dots. With all
   four labels visible they ellipsize into "DATE & TI… DETAI…" noise on late steps. */
@media (max-width: 480px) {
	.t4-prog__step:not(.is-active) .t4-prog__lab { display: none; }
}

/* ---- Pick-phase summary line (above Reserve Now) ---- */
.t4-picksum {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--t4-ink);
	background: var(--t4-bg-1);
	border-radius: 8px;
	padding: 9px 12px;
	text-align: center;
	margin-bottom: 10px;
}

/* ---- Details step heading ---- */
.t4-widget__stage .t4-formhead { margin: 2px 0 14px; }
.t4-widget__stage .t4-formhead__t {
	font-family: var(--t4-sans);
	font-weight: 800; /* PJS: Bebas был одновесный */
	font-size: var(--t4-fs-h4);
	color: var(--t4-ink);
	text-transform: uppercase;
	line-height: 1.05;
}
.t4-widget__stage .t4-formhead__s {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	line-height: 1.5;
	color: var(--t4-muted);
	margin: 6px 0 0;
}
/* Hidden outside the details step: step-1 is the only step that shows contact fields,
   and the hide-list already scopes what renders there — the heading only exists inside
   step-1 markup so nothing else needed. */

/* ---- Per-field validation (scoped to .booking — form may live in stage, modal or formhost) ---- */
body.t4-page .booking .field .t4-ferr {
	display: none;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	color: var(--t4-red);
	margin-top: 6px;
	line-height: 1.4;
}
body.t4-page .booking .field.t4-invalid .t4-ferr { display: block; }
body.t4-page .booking .field.t4-invalid .field__input {
	border-color: var(--t4-red) !important;
	box-shadow: 0 0 0 3px rgba(255, 40, 0, 0.08) !important;
}

/* ---- Step-2 "Review & extras": summary -> packages -> Next ----
   The shared markup keeps the footer (Total + buttons) ABOVE the collapsed packages
   (a legacy conversion fix for the pre-V4 page-embedded form). In the V4 stage the
   step is a flex column, so we reorder visually: recap summary first, packages next,
   footer with the Next CTA last — CTA never sits above optional content. */
.t4-widget__stage .booking-step[data-id="step-2"].active {
	display: flex;
	flex-direction: column;
}
.t4-widget__stage .booking-step[data-id="step-2"] .booking-step__header { order: 1; }
.t4-widget__stage .booking-step[data-id="step-2"] .booking-step__recap { order: 2; margin-top: 0; }
.t4-widget__stage .booking-step[data-id="step-2"] .booking-step__addons-toggle { order: 3; }
.t4-widget__stage .booking-step[data-id="step-2"] .booking-step__addons-collapsible { order: 4; }
.t4-widget__stage .booking-step[data-id="step-2"] .booking-step__footer--top { order: 5; }
/* Total already lives in the recap card (added by t4EnhanceBookingForm) — the footer
   repeat would just say the same number twice within 100px. */
.t4-widget__stage .booking-step[data-id="step-2"] .booking-step__footer .modal__current { display: none; }
/* One unified Back (the stage pill at the top) — the footer arrow-only back and the
   checkout title arrow duplicated it with a different look on every step. */
.t4-widget__stage .booking-step[data-id="step-2"] .modal__btns .btn--second { display: none !important; }
.t4-widget__stage .booking-checkout__back { display: none !important; }

/* ---- Package cards: "Selected" state chip ---- */
.t4-widget__stage .extra-card { position: relative; }
.t4-widget__stage .extra-card.active::after {
	content: '✓ Selected';
	position: absolute;
	top: -8px;
	right: 10px;
	background: var(--t4-green, #14934a);
	color: #fff;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 100px;
}
/* Slightly larger "Save AED" so the deal registers at a glance */
.t4-widget__stage .extra-card__saved { font-size: var(--t4-fs-micro); font-weight: 600; }

/* ---- Payment section label ---- */
.t4-widget__stage .t4-paylabel {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--t4-muted);
	margin: 14px 0 8px;
}

/* ---- Refund card: title + price on row 1, "Cancel for any reason" under it ----
   The card is a flex ROW (label + hint); flex-wrap lets the sub-line take its own
   full-width second row, indented to align with the label text (checkbox 22 + gap 10). */
.booking-checkout .t4-refund { position: relative; cursor: pointer; flex-wrap: wrap; }
.booking-checkout .t4-refund__label .checkbox__text {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}
.booking-checkout .t4-refund__sub {
	flex: 1 1 100%;
	order: 10;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	margin: 0 0 0 32px;
	line-height: 1.4;
}

/* ---- Trust line under Complete booking ---- */
.t4-widget__stage .t4-paytrust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
}
.t4-widget__stage .t4-paytrust svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ---- Mobile: the details step must fit the capped widget WITHOUT internal scroll ----
   Measured at 390x844: stage content 720px vs 584px visible = 136px hidden scroll.
   Reclaimed via tighter (still >44px-tap-safe) inputs, spacing and cap buffer.
   Scoped to the tour widget only — the modal bottom sheet has its own 100dvh budget. */
@media (max-width: 768px) {
	body.t4-page .t4-widget--booking {
		max-height: calc(100vh - 32px - var(--t4-header-h, 64px) - 12px);
	}
	.t4-widget .t4-widget__stage { padding: 12px 14px 14px; }
	.t4-widget .t4-widget__stage .t4-widget__back { margin-bottom: 10px; }
	.t4-widget .t4-widget__stage .t4-formhead { margin: 0 0 8px; }
	.t4-widget .t4-widget__stage .t4-formhead__t { font-size: 18px; }
	.t4-widget .t4-widget__stage .t4-formhead__s { font-size: 12px; margin-top: 3px; }
	.t4-widget .t4-widget__stage .booking-step__fields { gap: 8px; }
	.t4-widget .t4-widget__stage .booking-step__fields .field { margin-bottom: 4px; }
	.t4-widget .t4-widget__stage .booking-step__fields .field__input {
		height: 46px;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.t4-widget .t4-widget__stage .booking-step__footer { margin-top: 10px; padding-top: 10px; }
	.t4-widget .t4-widget__stage .modal__current { margin-bottom: 10px; }
	.t4-widget .t4-widget__stage .modal__current-total { padding-top: 7px; padding-bottom: 7px; }
}

/* ---- Mobile: payment step (step-3) fits one screen on ~844px-tall phones ----
   Measured at 390x844: checkout content overflowed the capped widget by ~97px
   (~123px with a package row) and Complete booking hid below the fold. Shorter
   payment cells (78 -> 50px, still comfortably tappable), tighter rhythm around
   Back/title/refund/total. Tour widget only — the modal sheet has its own budget. */
@media (max-width: 768px) {
	/* Head: tighter on phones in every phase — frees ~26px for the capped stage below
	   (the worst-case checkout — package + refund + their table rows — needed it) */
	.t4-widget .t4-widget__head { padding: 14px 16px 12px; margin-bottom: 12px; }
	.t4-widget .t4-prog { padding-top: 8px; margin-top: 2px; }
	.t4-widget .t4-widget__stage .t4-widget__back { margin-bottom: 6px; }
	.t4-widget .t4-widget__stage .booking-checkout__title { margin-bottom: 8px; }
	.t4-widget .t4-widget__stage .booking-checkout__order { margin-bottom: 6px; }
	.t4-widget .t4-widget__stage .booking-checkout__table { margin-bottom: 6px; gap: 2px; }
	.t4-widget .t4-widget__stage .booking-checkout .t4-refund { margin: 2px 0 10px; padding: 8px 12px; }
	.t4-widget .t4-widget__stage .t4-paylabel { margin: 8px 0 6px; }
	.t4-widget .t4-widget__stage .booking-checkout__payments { margin: 6px 0; gap: 6px; }
	.t4-widget .t4-widget__stage .booking-checkout__payment-inner {
		min-height: 48px;
		padding: 5px 10px;
	}
	.t4-widget .t4-widget__stage .booking-checkout__payment-icon { height: 16px; }
	.t4-widget .t4-widget__stage .booking-checkout__total {
		margin: 6px 0 10px;
		padding: 8px 0;
	}
	.t4-widget .t4-widget__stage .booking-checkout .checkbox:not(.t4-refund__label) { margin-bottom: 8px; }
	.t4-widget .t4-widget__stage .booking-checkout__btn { margin-bottom: 0; }
	.t4-widget .t4-widget__stage .t4-paytrust { margin-top: 6px; }
	.t4-widget--booking .t4-widget__stage { padding-bottom: 10px; }
}

/* ====================== V4 PAYMENT RESULT MODALS (t4-pay) ======================
   New markup (footer.php, bigred_v4_active branch) per approved mockup
   mockups/payment-modal-v4. IDs kept for fancybox deep-links (?modal=...).
   ID selectors below intentionally out-gun the older "V4 RESKIN - SITE MODALS"
   block that styled the legacy markup of the same IDs. */
body.t4-page #modalPaymentError.t4-pay,
body.t4-page #modalPaymentProcess.t4-pay,
body.t4-page #modalPaymentSuccess.t4-pay {
	width: min(520px, 94vw);
	border-top: 0;
	border-radius: var(--t4-r-xl);
	box-shadow: var(--t4-sh-lg);
	background: var(--t4-bg);
}
body.t4-page #modalPaymentError.t4-pay .modal__inner,
body.t4-page #modalPaymentProcess.t4-pay .modal__inner,
body.t4-page #modalPaymentSuccess.t4-pay .modal__inner {
	padding: 16px 40px 32px;
	min-height: 0;
	text-align: center;
}
body.t4-page .t4-pay .t4-pay__header {
	margin-bottom: 0;
	justify-content: flex-end;
}

/* status icon */
.t4-pay__ico { width: 84px; height: 84px; margin: 2px auto 22px; }
.t4-pay__ico svg { width: 100%; height: 100%; display: block; }
.t4-pay__ico-ring { fill: none; stroke-width: 2.5; opacity: .18; }
.t4-pay__ico-fill { opacity: .09; }
.t4-pay__ico-mark {
	fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 70; stroke-dashoffset: 70;
	animation: t4-pay-draw .55s .25s var(--t4-ease) forwards;
}
@keyframes t4-pay-draw { to { stroke-dashoffset: 0; } }
.t4-pay__ico--ok  .t4-pay__ico-ring, .t4-pay__ico--ok  .t4-pay__ico-mark { stroke: var(--t4-green); }
.t4-pay__ico--ok  .t4-pay__ico-fill { fill: var(--t4-green); }
.t4-pay__ico--err .t4-pay__ico-ring, .t4-pay__ico--err .t4-pay__ico-mark { stroke: var(--t4-red); }
.t4-pay__ico--err .t4-pay__ico-fill { fill: var(--t4-red); }
.t4-pay__ico--proc .t4-pay__ico-ring, .t4-pay__ico--proc .t4-pay__ico-mark { stroke: var(--t4-gold); }
.t4-pay__ico--proc .t4-pay__ico-fill { fill: var(--t4-gold); }

/* kicker / title / sub */
.t4-pay__kicker {
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro); font-weight: 600; line-height: 1;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--t4-muted); margin-bottom: 10px;
}
.t4-pay__kicker--ok span   { color: var(--t4-green); }
.t4-pay__kicker--err span  { color: var(--t4-red); }
.t4-pay__kicker--proc span { color: var(--t4-gold); }
.t4-pay__title {
	font-family: var(--t4-sans); font-weight: 800;
	font-size: var(--t4-fs-h3); line-height: .95; letter-spacing: .01em;
	text-transform: uppercase; color: var(--t4-ink);
	margin: 0 0 12px;
}
.t4-pay__sub {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body); line-height: 1.55; color: var(--t4-body);
	max-width: 380px; margin: 0 auto 24px;
}
.t4-pay__sub strong { color: var(--t4-ink); }

/* booking number chip */
.t4-pay__num {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--t4-bg-1); border: 1px dashed var(--t4-line-2);
	border-radius: var(--t4-r-md); padding: 14px 16px; margin-bottom: 22px;
	text-align: left;
}
.t4-pay__num-lbl {
	font-family: var(--t4-mono); font-size: var(--t4-fs-micro); font-weight: 600; line-height: 1;
	letter-spacing: .12em; text-transform: uppercase; color: var(--t4-muted);
	margin-bottom: 5px;
}
.t4-pay__num-val {
	font-family: var(--t4-mono); font-size: var(--t4-fs-body); font-weight: 600; line-height: 1;
	letter-spacing: .02em; color: var(--t4-ink);
}
.t4-pay__copy {
	flex: 0 0 auto; border: 1px solid var(--t4-line-2); background: #fff;
	border-radius: 8px; padding: 10px 12px; cursor: pointer;
	font-family: var(--t4-mono); font-size: var(--t4-fs-micro); font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--t4-ink-2);
	transition: .2s var(--t4-ease);
}
.t4-pay__copy:hover { border-color: var(--t4-red); color: var(--t4-red); }
.t4-pay__copy.is-done { border-color: var(--t4-green); color: var(--t4-green); }

/* "what happens next" rows */
.t4-pay__next { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; text-align: left; }
.t4-pay__next-row {
	display: flex; gap: 10px; align-items: flex-start;
	font-family: var(--t4-sans); font-size: var(--t4-fs-small); line-height: 1.45; color: var(--t4-body);
}
.t4-pay__next-dot {
	flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
	background: var(--t4-red-tint); color: var(--t4-red);
	display: flex; align-items: center; justify-content: center; font-size: var(--t4-fs-micro);
}
#modalPaymentSuccess .t4-pay__next-dot { background: rgba(22, 163, 74, .08); color: var(--t4-green); }

/* CTA row */
.t4-pay__ctas { display: flex; gap: 10px; margin-bottom: 22px; }
.t4-pay__btn {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
	border-radius: 999px; padding: 15px 18px; cursor: pointer; text-decoration: none;
	font-family: var(--t4-sans); font-size: var(--t4-fs-small); font-weight: 600; line-height: 1;
	letter-spacing: .02em; border: 1px solid transparent;
	transition: .22s var(--t4-ease);
}
.t4-pay__btn--ghost { background: #fff; color: var(--t4-ink); border-color: var(--t4-line-2); }
.t4-pay__btn--ghost:hover { border-color: var(--t4-ink); }
.t4-pay__btn--wa { background: #fff; color: #128C4B; border-color: rgba(37, 211, 102, .45); }
.t4-pay__btn--wa:hover { background: rgba(37, 211, 102, .07); }
.t4-pay__btn-icon { width: 16px; height: 16px; fill: currentColor; }

/* footer: phones */
.t4-pay__foot { border-top: 1px solid var(--t4-line); padding-top: 16px; }
.t4-pay__foot-cap {
	font-family: var(--t4-mono); font-size: var(--t4-fs-micro); font-weight: 600; line-height: 1;
	letter-spacing: .12em; text-transform: uppercase; color: var(--t4-muted);
	margin-bottom: 8px;
}
.t4-pay__foot-tel { font-family: var(--t4-mono); font-size: var(--t4-fs-small); font-weight: 600; line-height: 1.6; }
.t4-pay__foot-tel a { color: var(--t4-ink-2); text-decoration: none; margin: 0 6px; white-space: nowrap; }
.t4-pay__foot-tel a:hover { color: var(--t4-red); }

/* mobile: bottom sheet (progressive - :has(); fallback = centered card) */
@media (max-width: 640px) {
	.fancybox-slide:has(.t4-pay) { padding: 0; text-align: center; }
	.fancybox-slide:has(.t4-pay) .t4-pay { vertical-align: bottom; }
	body.t4-page #modalPaymentError.t4-pay,
	body.t4-page #modalPaymentProcess.t4-pay,
	body.t4-page #modalPaymentSuccess.t4-pay {
		width: 100vw;
		border-radius: 22px 22px 0 0;
		max-height: 92dvh;
		overflow-y: auto;
		position: relative;
	}
	body.t4-page #modalPaymentError.t4-pay .modal__inner,
	body.t4-page #modalPaymentProcess.t4-pay .modal__inner,
	body.t4-page #modalPaymentSuccess.t4-pay .modal__inner {
		padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
	}
	.t4-pay::before {
		content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
		width: 42px; height: 4px; border-radius: 99px; background: var(--t4-line-2);
	}
	.t4-pay__ico { width: 68px; height: 68px; margin-bottom: 16px; }
	.t4-pay__title { font-size: 26px; }
	.t4-pay__sub { font-size: 14px; margin-bottom: 18px; }
	.t4-pay__ctas { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
	.t4-pay__ico-mark { animation: none; stroke-dashoffset: 0; }
}

/* RU DISPLAY FONT swap удалён 2026-07-14: Plus Jakarta Sans имеет кириллицу,
   один display-шрифт на всех языках (Alumni Sans больше не грузится). */

/* ============================================================================
   SAME-DAY 12H-CUTOFF BANNER (2026-07-09) — rendered by t4CutoffHtml() into the
   slots box (tour widget + booking modal) when the visitor picks TODAY.
   Wide, vertically-compact banner: bold lead-in + text in one paragraph,
   WhatsApp + Call buttons side by side on every viewport.
   ==========================================================================*/
/* The slots-row label ("Time slots") is noise above the banner — hide it,
   and un-grid the slots box so the banner spans the FULL form width (the
   default .t4-slots is a 3-column grid for the slot buttons). */
.t4-widget__row--cutoff > .t4-widget__label { display: none; }
.t4-widget__row--cutoff .t4-slots { display: block; }

.t4-cutoff {
	border: 1px solid var(--t4-line);
	border-left: 3px solid var(--t4-red);
	background: var(--t4-bg-1);
	border-radius: var(--t4-r-md);
	padding: 10px 12px;
}
.t4-cutoff__text {
	margin: 0 0 8px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	line-height: 1.45;
	color: var(--t4-body);
}
.t4-cutoff__text b { color: var(--t4-ink); }
.t4-cutoff__text svg {
	width: 13px;
	height: 13px;
	color: var(--t4-red);
	vertical-align: -2px;
	margin-right: 4px;
}
.t4-cutoff__btns {
	display: flex;
	gap: 8px;
}
.t4-cutoff__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
	min-height: 38px;
	padding: 6px 8px;
	border-radius: var(--t4-r-md);
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 200ms var(--t4-ease), color 200ms var(--t4-ease), border-color 200ms var(--t4-ease);
}
.t4-cutoff__btn svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.t4-cutoff__btn span {
	overflow: hidden;
	text-overflow: ellipsis;
}
/* WhatsApp shrinks to its label; the Call button takes the rest of the row so
   the full phone number is never truncated. */
.t4-cutoff__btn--wa {
	flex: 0 0 auto;
	background: #1DA851;
	color: #fff;
}
.t4-cutoff__btn--call { flex: 1 1 auto; }
.t4-cutoff__btn--wa:hover { background: #178a42; color: #fff; }
.t4-cutoff__btn--call {
	border: 1.5px solid var(--t4-ink);
	color: var(--t4-ink);
	background: transparent;
}
.t4-cutoff__btn--call:hover { border-color: var(--t4-red); color: var(--t4-red); }

/* ============================================================================
   BOOKING FORM FIT PASS (2026-07-09) — kill internal stage scroll on EVERY step,
   both surfaces (tour widget AND booking modal: the modal stage carries the same
   .t4-widget__stage class), all viewports. Promotes the previously mobile-only
   compaction (details 3.3.2 + payment 3.3.4 blocks above) to universal: inputs
   46px (>44px tap-safe), tight-but-breathing rhythm everywhere else. The old
   ≤768 blocks stay (same values, higher specificity — harmless duplicates).
   ==========================================================================*/
.t4-widget__stage .t4-widget__back { margin-bottom: 8px; }
.t4-widget__stage .t4-formhead { margin: 0 0 8px; }
.t4-widget__stage .t4-formhead__t { font-size: var(--t4-fs-lg); }
.t4-widget__stage .t4-formhead__s { font-size: var(--t4-fs-micro); margin-top: 3px; }
.t4-widget__stage .booking-step__fields { gap: 8px; }
.t4-widget__stage .booking-step__fields .field { margin-bottom: 4px; }
.t4-widget__stage .booking-step__fields .field__input {
	height: 46px;
	padding-top: 8px;
	padding-bottom: 8px;
}
/* Legacy .field__label is a column-reverse flex with 12px top/bottom padding and
   an 8px gap — nearly half of each field's 98px height was empty air. */
.t4-widget__stage .booking-step__fields .field__label {
	padding-top: 5px;
	padding-bottom: 5px;
	gap: 6px;
}
.t4-widget__stage .booking-step__fields .field__placeholder { margin-bottom: 2px; }
.t4-widget__stage .booking-step__footer { margin-top: 10px; padding-top: 10px; }
.t4-widget__stage .modal__current { margin-bottom: 10px; }
.t4-widget__stage .modal__current-total { padding-top: 7px; padding-bottom: 7px; }

/* Checkout / payment step */
.t4-widget__stage .booking-checkout__title { margin-bottom: 8px; }
.t4-widget__stage .booking-checkout__order { margin-bottom: 6px; }
.t4-widget__stage .booking-checkout__table { margin-bottom: 6px; gap: 2px; }
.t4-widget__stage .booking-checkout .t4-refund { margin: 2px 0 10px; padding: 8px 12px; }
.t4-widget__stage .t4-paylabel { margin: 8px 0 6px; }
.t4-widget__stage .booking-checkout__payments { margin: 6px 0; gap: 6px; }
.t4-widget__stage .booking-checkout__payment-inner {
	min-height: 48px;
	padding: 5px 10px;
}
.t4-widget__stage .booking-checkout__payment-icon { height: 16px; }
.t4-widget__stage .booking-checkout__total { margin: 6px 0 10px; padding: 8px 0; }
.t4-widget__stage .booking-checkout .checkbox:not(.t4-refund__label) { margin-bottom: 8px; }
.t4-widget__stage .booking-checkout__btn { margin-bottom: 0; }
.t4-widget__stage .t4-paytrust { margin-top: 6px; }

/* Review & extras step */
.t4-widget__stage .booking-step__addons-toggle { margin: 8px 0; }
.t4-widget__stage .booking-step__note { margin-bottom: 0; }

/* Modal: taller dialog on desktop (was min(88vh,920px) — the details/payment
   steps genuinely need the room) + tighter stage padding on both axes. */
body.t4-page .fancybox-slide--html .t4-bmodal { max-height: min(94vh, 1000px); }
body.t4-page .t4-bmodal .t4-bmodal__stage { padding: 16px 24px 20px; }
body.t4-page .t4-bmodal__head { padding: 14px 24px 10px; }

/* Modal pick phase rows: slightly tighter than the tour widget defaults so the
   date strip + slots + stepper + total + CTA fit the sheet without scrolling. */
.t4-bmodal .t4-widget__row { margin-bottom: 10px; }
.t4-bmodal .t4-widget__back { margin-bottom: 8px; }
.t4-bmodal .t4-widget__bullets { margin-top: 8px; }

@media (max-width: 600px) {
	body.t4-page .t4-bmodal .t4-bmodal__stage { padding: 12px 16px 16px; }
	body.t4-page .t4-bmodal__head { padding: 12px 16px 8px; }
}

/* ============ ON-REQUEST CHECKOUT NOTE (family-configurator stage 4, 2026-07-09) ============
   Resort combos: Pay later is the only method; the note explains the manual confirmation. */
.booking-checkout__payments--request { grid-template-columns: 1fr; }
/* The lone full-width Pay-later cell: the generic row rule (space-between, 5214 area)
   pushed a small icon to the far right edge — label and icon read as unrelated. Center
   them as one group and give the cash icon its natural sprite size (user 2026-07-10).
   3-class selectors: out-gun the (0,2,0) stage rules AND the (0,3,0) mobile icon-height
   override in the 768px block above (equal specificity, later in file). */
.t4-widget__stage .booking-checkout__payments--request .booking-checkout__payment-inner {
	/* row, not the legacy column: the cell reads as one "Pay later 💵" control */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.t4-widget__stage .booking-checkout__payments--request .booking-checkout__payment-title {
	margin-bottom: 0; /* the legacy column layout's 4px gap under the title */
}
.t4-widget__stage .booking-checkout__payments--request .booking-checkout__payment-icon {
	width: 34px;
	height: 24px;
}
.booking-checkout__request-note {
	margin: 10px 0 0;
	padding: 11px 13px;
	border: 1px solid rgba(214, 138, 0, .35);
	border-radius: 10px;
	background: rgba(255, 170, 60, .09);
	color: #8a5a00;
	font-size: var(--t4-fs-micro);
	line-height: 1.55;
}

/* ============ BOOKING-EXPERIENCE SURVEY (success modal, 2026-07-09) ============
   Approved mockup: mockups/payment-modal-v4 «V4 + опрос». One-tap smileys; sad/neutral
   reveal the optional «what could we improve» field. */
.t4-pay__survey {
	border-top: 1px solid var(--t4-line);
	padding: 18px 0 4px;
	margin-bottom: 16px;
	text-align: center;
}
.t4-pay__survey-q { font: 600 12.5px/1.4 var(--t4-sans); color: var(--t4-ink-2); margin-bottom: 12px; }
.t4-pay__faces { display: flex; justify-content: center; gap: 14px; }
.t4-pay__face {
	width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
	border: 1.5px solid var(--t4-line-2); background: var(--t4-bg-1);
	font-size: var(--t4-fs-h3); line-height: 1; display: flex; align-items: center; justify-content: center;
	transition: .22s var(--t4-ease);
	filter: grayscale(.55); opacity: .85;
}
.t4-pay__face:hover { transform: translateY(-3px) scale(1.06); filter: none; opacity: 1; border-color: var(--t4-ink); }
.t4-pay__face.is-sel {
	filter: none; opacity: 1; border-color: var(--t4-red); background: #fff;
	box-shadow: 0 6px 16px rgba(12,12,12,.10); transform: scale(1.08);
}
.t4-pay__survey-followup { margin-top: 14px; text-align: left; }
.t4-pay__survey-followup textarea {
	width: 100%; min-height: 60px; resize: vertical;
	border: 1.5px solid var(--t4-line-2); border-radius: var(--t4-r-md);
	background: var(--t4-bg-1); padding: 11px 12px;
	font: 400 13.5px/1.5 var(--t4-sans); color: var(--t4-ink); outline: none;
	transition: border-color .2s; box-sizing: border-box;
}
.t4-pay__survey-followup textarea:focus { border-color: rgba(255,40,0,.5); background: #fff; }
.t4-pay__survey-send {
	margin-top: 9px; width: 100%;
	border: 0; border-radius: 999px; padding: 12px; cursor: pointer;
	background: var(--t4-ink); color: #fff; font: 600 12.5px/1 var(--t4-sans);
	transition: .2s;
}
.t4-pay__survey-send:hover { background: #000; }
.t4-pay__survey-thanks { margin-top: 12px; font: 600 13px/1.5 var(--t4-sans); color: var(--t4-green, #16a34a); }
@media (max-width: 640px) {
	.t4-pay__face { width: 50px; height: 50px; font-size: 22px; }
}

/* ============ DESKTOP MEGA MENU — Tours dropdown (option 1a, 2026-07-10) ============
   Rendered inside the Tours <li> (walker filter, inc/tour-v4.php); anchored to the
   FIXED .header so it centers under the bar. Pure-CSS hover with a soft rise-in. */
/* legacy .menu__item{position:relative} would make the narrow <li> the containing
   block (panel clips off-screen) — free ONLY the li that hosts the mega panel, so
   left:50% resolves against the full-width fixed .header */
.menu__item:has(.t4-mega) { position: static; }
.t4-mega {
	position: absolute;
	top: 100%;
	/* Anchored under the MENU (logo ~140px + header padding + gap ≈ 205px), not the
	   viewport center: on wide monitors the nav hugs the logo on the left while a
	   centered panel drifted away from the Tours item (user 2026-07-10). The min()
	   pulls the panel left on narrow desktops so it never overflows the right edge. */
	left: min(205px, calc(100vw - 1196px));
	width: min(1180px, calc(100vw - 48px));
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 30px 70px rgba(12,12,12,0.18), 0 2px 8px rgba(12,12,12,0.06);
	padding: 26px 26px 14px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 280px;
	gap: 8px 26px;
	z-index: 60;
	text-align: left;
	cursor: default;
	/* hidden state — rises in on hover, никакого снапа. NO pointer-events:none here:
	   visibility:hidden already blocks hit-testing, and during the 0.35s closing grace
	   the panel must keep catching the cursor (with pointer-events:none the traversal
	   from the nav link died in the gap — user 2026-07-10). */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.99);
	transition: opacity 0.18s var(--t4-ease) 0.15s, transform 0.18s var(--t4-ease) 0.15s, visibility 0s linear 0.35s;
}
/* invisible hover bridge across the gap between the nav link and the panel */
.t4-mega::before { content: ''; position: absolute; top: -34px; left: 0; right: 0; height: 34px; }
.menu__item:hover .t4-mega,
.menu__item.is-open .t4-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	transition-delay: 0s;
}
/* K3: touch devices in the desktop layout — first tap pins the panel open (JS adds
   .is-open), second tap follows the link. Same for the plain dropdown (Media). */
body.t4-page .menu__item.is-open .dropdown {
	opacity: 1;
	visibility: visible;
}
.menu__item:hover .menu__link-dropdown,
.menu__item.is-open .menu__link-dropdown { transform: rotate(180deg); }
.menu__link-dropdown { transition: transform 0.22s var(--t4-ease); }

.t4-mega__col { min-width: 0; }
.t4-mega__head {
	display: flex; align-items: center; gap: 10px;
	padding: 0 10px 12px;
	border-bottom: 1px solid var(--t4-line);
	margin-bottom: 8px;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--t4-muted);
}
.t4-mega__ic {
	width: 30px; height: 30px; border-radius: 9px; background: rgba(255,40,0,0.07);
	display: inline-flex; align-items: center; justify-content: center; color: var(--t4-red);
	flex-shrink: 0;
}
.t4-mega__ic svg { width: 15px; height: 15px; }
.t4-mega__row {
	display: flex; align-items: baseline; gap: 10px;
	padding: 8px 10px; border-radius: 10px;
	text-decoration: none;
	transition: background 0.15s ease;
}
.t4-mega__row:hover { background: var(--t4-bg-1); }
.t4-mega__rowmain { flex: 1; min-width: 0; display: block; }
.t4-mega__name { display: block; font-family: var(--t4-sans); font-size: var(--t4-fs-small); font-weight: 600; color: var(--t4-ink); line-height: 1.25; }
.t4-mega__row:hover .t4-mega__name { color: var(--t4-red); }
.t4-mega__desc { display: block; font-family: var(--t4-sans); font-size: var(--t4-fs-micro); color: var(--t4-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t4-mega__price { font-family: var(--t4-sans); font-size: var(--t4-fs-micro); font-weight: 600; color: var(--t4-red); white-space: nowrap; }
.t4-mega__price small { font-family: var(--t4-mono); font-size: var(--t4-fs-micro); color: var(--t4-muted); }

/* featured best-seller card */
.t4-mega__feat {
	grid-row: 1; grid-column: 4;
	background: var(--t4-bg-1);
	border: 1px solid var(--t4-line);
	border-radius: 16px;
	padding: 12px;
	display: flex; flex-direction: column; gap: 8px;
	text-decoration: none;
	transition: box-shadow 0.2s var(--t4-ease), border-color 0.2s var(--t4-ease);
}
.t4-mega__feat:hover { box-shadow: var(--t4-sh-md); border-color: rgba(255,40,0,0.35); }
.t4-mega__featimg { display: block; width: 100%; height: 128px; border-radius: 11px; background-size: cover; background-position: center; }
.t4-mega__badge {
	align-self: flex-start;
	font-family: var(--t4-mono); font-size: var(--t4-fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: #fff; background: var(--t4-red); padding: 3px 8px; border-radius: 999px;
}
.t4-mega__featname { font-family: var(--t4-sans); font-size: var(--t4-fs-small); font-weight: 600; color: var(--t4-ink); line-height: 1.3; }
.t4-mega__featfoot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 8px; }
.t4-mega__featprice { font-family: var(--t4-sans); font-size: var(--t4-fs-small); font-weight: 800; color: var(--t4-ink); }
.t4-mega__featprice s { color: var(--t4-muted); font-weight: 600; font-size: 0.82em; margin-right: 2px; }
.t4-mega__featprice small { font-family: var(--t4-mono); font-size: var(--t4-fs-micro); color: var(--t4-muted); }
.t4-mega__featcta {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--t4-sans); font-size: var(--t4-fs-micro); font-weight: 600; color: var(--t4-ink);
	background: #fff; border: 1px solid var(--t4-line-2, var(--t4-line)); border-radius: 999px; padding: 7px 13px;
	transition: background 0.15s ease, color 0.15s ease;
}
.t4-mega__featcta svg { width: 13px; height: 13px; }
.t4-mega__feat:hover .t4-mega__featcta { background: var(--t4-ink); color: #fff; border-color: var(--t4-ink); }

/* full-width footer strip → hub */
.t4-mega__all {
	grid-column: 1 / -1;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin-top: 10px; padding: 12px;
	border-top: 1px solid var(--t4-line);
	font-family: var(--t4-sans); font-size: var(--t4-fs-small); font-weight: 600; color: var(--t4-ink);
	text-decoration: none;
	border-radius: 0 0 14px 14px;
	transition: color 0.15s ease, background 0.15s ease;
}
.t4-mega__all svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.t4-mega__all:hover { color: var(--t4-red); background: var(--t4-bg-1); }
.t4-mega__all:hover svg { transform: translateX(3px); }

/* the nav is hidden on <1200 anyway (mobile burger takes over) — hard guard regardless */
@media (max-width: 1199px) { .t4-mega { display: none; } }

/* ---- Mobile tours accordion: desktop-mega parity (groups + from-prices, 2026-07-10) ---- */
body.t4-page .t4-mnav__sub-kicker {
	padding: 12px 2px 6px 38px;
	font-family: var(--t4-mono);
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--t4-muted);
	border-top: 1px solid rgba(12,12,12,0.07);
}
body.t4-page .t4-mnav__sub-kicker + .t4-mnav__sub-link { border-top: none; }
body.t4-page .t4-mnav__sub-price {
	margin-left: auto;
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	color: var(--t4-red);
	white-space: nowrap;
}
body.t4-page .t4-mnav__sub-price small { font-family: var(--t4-mono); font-size: var(--t4-fs-micro); color: var(--t4-muted); }
body.t4-page .t4-mnav__sub-link--all { font-weight: 600; color: var(--t4-ink); }
/* 8 rows + 2 kickers + the all-link outgrew the old 620px accordion cap */
body.t4-page .t4-mnav__sub.is-open { max-height: 760px; }

/* ============ УЖИМКА СТАРОЙ БУКИНГ-РАЗМЕТКИ под шкалу агрегаторов (2026-07-14) ============
   Старые классы (.d3, extra-card, booking-step) стилизуются style.css/booking.css c
   Bebas-эпохи размерами — на t4-страницах приводим к новой шкале. */
body.t4-page .d3.section-header__title { font-size: var(--t4-fs-h3); font-weight: 600; }
.t4-widget__stage .extra-card__price span,
.t4-bmodal .extra-card__price span { font-size: var(--t4-fs-h4); }
.t4-widget__stage .booking-step__number,
.t4-bmodal .booking-step__number { font-size: var(--t4-fs-h2); }

/* ============ TOUR PAGE ROLLOUT 2026-07-15 (ex-pilot use_v4_product, merged from product-v4.css) ============
   In-article gallery between Includes and the next section, strikethrough
   price_old on discounted tours, Includes rows with custom illustrated icons.
   Related-hover + mobile hero-title tweaks live in their base rules above. */

/* ---------- In-article gallery: desktop = 1 big square (2×2) + 4 squares.
   Overrides the base .t4-gallery rules (3 cols / fixed 220px rows / item--3 wide). */
.t4-galblock .t4-gallery {
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: auto;
}
.t4-galblock .t4-gallery__item { aspect-ratio: 1 / 1; }
.t4-galblock .t4-gallery__item--0 {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: auto;
}
.t4-galblock .t4-gallery__item--3 { grid-column: auto; }
/* Swipe-position dots only exist for the mobile rail */
.t4-galdots { display: none; }

/* ---------- Discounted tours (price_old set — day/sunset): strikethrough old
   price in the booking widget, the QF-strip Price cell and related cards.
   Strike line inherits the muted text color (user: no red line). ---------- */
.t4-widget__price-was {
	font-size: var(--t4-fs-small);
	color: var(--t4-muted);
	margin-bottom: 2px;
}
.t4-qf__old {
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	line-height: 1;
}
.t4-rtcard__old {
	display: block;
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	margin-bottom: 2px;
}
.t4-rtcard__price strong { white-space: nowrap; margin-left: 0; }

/* ---------- Includes (user mockup): hairline rows, thematic illustrated icons
   instead of red check circles, muted parentheticals ---------- */
.t4-incl { gap: 0 40px; }
.t4-incl__item {
	padding: 13px 0;
	border-bottom: 1px solid var(--t4-line);
	align-items: center;
	font-size: var(--t4-fs-body);
}
.t4-incl__check {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: var(--t4-ink-2);
	margin-top: 0;
}
.t4-incl__check svg { width: 20px; height: 20px; }
/* User-supplied filled illustrations read best a notch larger than line icons */
.t4-incl__check svg.t4-incl__cicon { width: 24px; height: 24px; }
.t4-incl__muted { color: var(--t4-muted); }
@media (max-width: 600px) {
	.t4-incl { gap: 0; }
}

/* ---------- Mobile: gallery block → horizontal snap rail, ONE full-width photo
   per view (user 2026-07-15: не «разделённая» — сосед не выглядывает), rounded
   shape with the column's side gutters, dots INSIDE the photo (native gallery
   affordance), swipe-only, no arrows. ~406×430 on a 430px phone via aspect-ratio. */
@media (max-width: 768px) {
	.t4-galblock { position: relative; } /* anchor for the overlay dots */
	.t4-galblock .t4-gallery {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.t4-galblock .t4-gallery::-webkit-scrollbar { display: none; }
	.t4-galblock .t4-gallery .t4-gallery__item {
		flex: 0 0 100%;
		aspect-ratio: 406 / 430;
		scroll-snap-align: start;
		border-radius: var(--t4-r-lg);
	}
	.t4-galblock .t4-gallery__item--0 {
		grid-column: auto;
		grid-row: auto;
	}
	/* Dots overlaid at the bottom of the photo (gallery is the block's last
	   flow child, so absolute-bottom of the block = bottom of the rail). */
	.t4-galdots {
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 14px;
		justify-content: center;
		gap: 7px;
		margin: 0;
		z-index: 1;
		pointer-events: none;
	}
	.t4-galdots__dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: rgba(255,255,255,0.55);
		box-shadow: 0 1px 3px rgba(0,0,0,0.35);
		transition: background .2s var(--t4-ease), transform .2s var(--t4-ease);
	}
	.t4-galdots__dot.t4-active {
		background: #fff;
		transform: scale(1.2);
	}
}

/* OverlayScrollbars dropped on V4 pages (2026-07-15) — the booking "Buggy" dropdown
   (.js-custom-scroll) falls back to native overflow (max-height comes from style.css). */
body.t4-page .field__list-inner.js-custom-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 404 (V4, 2026-07-16): one-screen t4ge-hero, page ends after it
   (legacy footer hidden by the t4-page rule). Specificity (0,3,1) — must beat
   longread-v4.css's 72vh (it loads after this file). ---------- */
body.t4-page.t4-e404 .t4ge-hero {
	min-height: calc(100vh - var(--t4-promo-h, 28px));
}
body.t4-page.t4-e404 .t4-e404__kicker { margin-bottom: 14px; }

/* Promo strike in the mobile booking bar (2026-07-15) */
.t4-mobar__old {
	font-size: var(--t4-fs-micro);
	font-weight: 600;
	color: var(--t4-muted);
	margin-right: 4px;
}

/* ============================================================================
   ТАП-ТАРГЕТЫ НА МОБИЛЬНОМ (26.07)
   Палец накрывает ~9 мм, поэтому Apple требует минимум 44x44, Google — 48x48.
   Замер показал: кнопки 43px, пункты меню 40px, ссылки футера 39px, иконки
   соцсетей 26-32px, заголовки аккордеона 28px. До нормы не хватало чуть-чуть,
   но промах по ссылке на тур — это потерянная бронь.
   Инлайновые ссылки внутри абзацев намеренно не трогаем: увеличивать высоту
   ссылки в середине предложения нельзя, она разорвёт строку.
   ============================================================================ */
@media (max-width: 900px) {
	.t4-page .t4-btn,
	.t4-page .t4-mnav__link,
	.t4-page .t4-faq__q,
	.t4-page .t4-bug__avail {
		min-height: 44px;
	}

	/* Ссылки-строки в футере и меню: высоту даём через выравнивание, а не через
	   padding, чтобы не разъехались колонки. */
	.t4-page .t4-foot__col a,
	.t4-page .t4-foot__contact a,
	.t4-page .menu-item > a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Круглые иконки: цель должна быть квадратной, а не полоской. */
	.t4-page .t4-foot__socials a,
	.t4-page .t4-mnav__socials a,
	.t4-page .header__messenger,
	.t4-page .header__menu-btn,
	.t4-page .header__logo,
	.t4-page .t4-fr-block__navbtn {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Кнопки-ссылки в шапке и промо-полосе + служебные ссылки разделов. */
	.t4-page .header__btn,
	.t4-page .t4-promo__cta,
	.t4-page .t4-hgal__all,
	.t4-page .t4-mnav__lang,
	.t4-page .t4-mnav__contact-phones a,
	.t4-page .t4-bug__title a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}