/* =========================================================================
   Сторінка: ВІП відпочинок (page-vip.php)
   Namespace: .pk-vip / .pk-vip-hero. Лише дизайн-токени. Брейкпоінти 1024 / 768.
   Патерни секцій — дзеркало page-corporate.css / page-recovery.css:
   overlay-шапка + центрований герой + плаваюча картка категорій.
   Спільні partials (consultation-form) стилізуються своїм component-CSS.
   ========================================================================= */

/* =========================================================================
   1. Hero (overlay) + плаваюча картка категорій
   Шапка прозора (header.php → $GLOBALS['pk_hero_overlay']); герой центрований.
   .pk-catcard-wrap / .pk-cats--card дублюємо тут, бо home.css вантажиться лише
   на front-page (внутрішній .pk-cats__* layout — глобальний, у header.css).
   ========================================================================= */
.pk-vip-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	color: var(--pk-white);
	min-height: 860px;
	padding-bottom: 16px;
}
.pk-vip-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.pk-vip-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,38,19,.30) 0%, rgba(0,50,25,.06) 45%, rgba(0,45,22,.20) 100%);
}
.pk-vip-hero__inner {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 150px 24px 60px;
	text-align: center;
}
.pk-vip-hero__title {
	font: var(--pk-t-display); /* Montserrat Alternates 700 64/86 */
	color: var(--pk-white);
	margin: 0 auto;
	max-width: 1000px;
	text-shadow: 0 2px 18px rgba(0,0,0,.28);
}
.pk-catcard-wrap {
	position: relative;
	z-index: 3;
	margin-bottom: 0;
}
.pk-cats--card {
	background: var(--pk-white);
	border-radius: var(--pk-r-lg);
	box-shadow: var(--pk-shadow-card);
	padding: 10px 12px;
}
/* Більші іконки та текст у картці-меню */
.pk-vip-hero .pk-cats--card .pk-cats__link { font-size: 16px; }
.pk-vip-hero .pk-cats--card .pk-cats__icon { margin-bottom: 14px; }
.pk-vip-hero .pk-cats--card .pk-cats__icon .pk-i { width: 40px !important; height: 40px !important; }

/* --- Спільні елементи секцій --- */
.pk-vip__h2 {
	font: var(--pk-t-h35);
	color: var(--pk-ink);
	text-align: center;
	margin: 0 0 12px;
}
.pk-vip__h2--left { text-align: left; }
.pk-vip__h2--inv { color: var(--pk-white); }
.pk-vip__lead {
	font: var(--pk-t-body16);
	color: var(--pk-ink); /* v6: темніше (читабельність, пакет замовника 2026-07-11) */
	text-align: center;
	margin: 0 auto 40px;
	max-width: 720px;
}
.pk-vip__lead--inv { color: var(--pk-green-300); }

/* =========================================================================
   2. Вступ (фото + текст)
   ========================================================================= */
.pk-vip__intro { background: var(--pk-line); padding: 72px 0 80px; }
.pk-vip__intro-row {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: stretch;
}
.pk-vip__intro-photo {
	border-radius: var(--pk-r-lg);
	overflow: hidden;
	min-height: 440px;
}
.pk-vip__intro-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-vip__intro-card {
	background: var(--pk-white);
	border-radius: var(--pk-r-lg);
	box-shadow: var(--pk-shadow-card);
	padding: 44px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.pk-vip__intro-text { font: var(--pk-t-body16); color: var(--pk-ink); margin: 0 0 18px; }
.pk-vip__intro-cta { align-self: flex-start; margin-top: 12px; }

/* =========================================================================
   3. Статистика (зелена) — рамка з чотирьох шевронів навколо числа
   ========================================================================= */
.pk-vip__stats { background: var(--pk-green); padding: 120px 0; }
/* Заголовок блоку — більший (h35→h40) і з більшим відступом до підзаголовка;
   підзаголовок — більший відступ до ряду цифр (прохання замовника). Скоуп — лише ця секція. */
.pk-vip__stats .pk-vip__h2 { font: var(--pk-t-h40); margin-bottom: 18px; }
.pk-vip__stats .pk-vip__lead--inv { margin-bottom: 76px; }
.pk-vip__stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	align-items: start; /* різна висота підписів/бейдж під 4-м показником не зсуває сусідів */
}
/* v5: показник = КВАДРАТ фіксованого розміру, число по центру, 4 шеврони absolute
   від квадрата → рівний ромб, незалежний від ширини числа. (Стара верстка: верх/низ
   від .stat-frame на всю ширину колонки, боки — від inline-block числа зі змінною
   шириною → дві різні системи координат, ромб «плавав» між показниками.) */
.vip-stats-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vip-stats-square {
	position: relative;
	width: 250px;
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Квадрат розширено до 250px (2026-07-18, прохання замовника): «2 000+» на 1440 ≈ 177px,
   бічна стрілка сягає 22,5px від краю → при 220 число торкалось стрілок; 250 дає ≥14px
   повітря (і ≥4px на 1600+, де clamp доводить шрифт до 56px). */
.vip-stats-num { font: 700 clamp(40px, 3.5vw, 56px)/1.1 var(--pk-font-sans); color: var(--pk-white); }
/* Бокс шеврона — квадрат 30×30: маска contain (svg 24×12) малює стрілку 30×15 ПО ЦЕНТРУ
   бокса, тож візуальний центр стрілки = центр бокса при будь-якому повороті →
   відстань до центру квадрата однакова в усіх чотирьох напрямках. */
.vip-stats-chev {
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: var(--pk-green-300);
	-webkit-mask: url(../../icons/chevron.svg) center / contain no-repeat;
	mask: url(../../icons/chevron.svg) center / contain no-repeat;
}
.vip-stats-chev--t { top: 0;    left: 50%; transform: translateX(-50%) rotate(180deg); }
.vip-stats-chev--b { bottom: 0; left: 50%; transform: translateX(-50%); }
.vip-stats-chev--l { left: 0;   top: 50%;  transform: translateY(-50%) rotate(90deg); }
.vip-stats-chev--r { right: 0;  top: 50%;  transform: translateY(-50%) rotate(-90deg); }
.vip-stats-cap {
	font: 500 17px/26px var(--pk-font-sans); /* збільшено з 14px (прохання замовника) */
	color: var(--pk-white); /* 2026-07-18: підписи білі (прохання замовника) */
	margin: 14px 0 0;
	max-width: 280px;
}
/* «600+» у підписі рейтингу — білим, на 2pt більше (17→19px) і підкреслено.
   v6: це <a> на сторінку Google-відгуків (та сама, що й бейдж нижче). */
.vip-stats-cap-hl { color: var(--pk-white); font-size: 19px; text-decoration: underline; text-underline-offset: 3px; }
a.vip-stats-cap-hl:hover { color: var(--pk-green-300); }
a.vip-stats-cap-hl:focus-visible { outline: 2px solid var(--pk-white); outline-offset: 2px; border-radius: 2px; }

/* =========================================================================
   4. Що входить у VIP (плитки з іконками)
   ========================================================================= */
.pk-vip__includes { background: var(--pk-line); padding: 80px 0; }
.pk-vip__includes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pk-vip__include {
	background: var(--pk-white);
	border-radius: var(--pk-r-lg);
	box-shadow: var(--pk-shadow-card);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.pk-vip__include-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--pk-r-md);
	background: var(--pk-green-100);
	color: var(--pk-green);
	margin-bottom: 20px;
}
.pk-vip__include-title { font: var(--pk-t-h24); color: var(--pk-ink); margin: 0 0 10px; }
.pk-vip__include-text { font: var(--pk-t-body); color: var(--pk-muted); margin: 0; }
.pk-vip__includes-cta { text-align: center; margin-top: 48px; }

/* =========================================================================
   5. Переваги (іконки в білих плитках)
   ========================================================================= */
.pk-vip__features { background: var(--pk-green-100); padding: 80px 0; }
/* v5: 6 переваг → сітка 3×2 десктоп (2 планшет / 1 мобільний); вирівнювання по верху.
   2026-07-18: секція отримала лід-підзаголовок → спец-відступ H2 68px знято, діє
   стандартний ритм сторінки (H2 12px → лід 40px → сітка). Брейкпоінти 1023/640 — власні. */
.pk-vip__features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; align-items: start; }
@media (max-width: 1023px) { .pk-vip__features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
	.pk-vip__features-grid { grid-template-columns: 1fr; row-gap: 40px; }
}
.pk-vip__feature-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 16px;
	background: var(--pk-white);
	color: var(--pk-green);
	box-shadow: var(--pk-shadow-soft);
	margin-bottom: 22px;
}
.pk-vip__feature-ico .pk-i { width: 44px; height: 44px; }
.pk-vip__feature-title {
	font: 700 clamp(18px, 1.4vw, 22px)/1.3 var(--pk-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--pk-green);
	margin: 0 0 14px;
}
/* a11y: muted на зеленому фоні --pk-green-100 давав контраст <4.5:1 (PSI color-contrast) → ink. */
.pk-vip__feature-sub { display: block; font: var(--pk-t-small); color: var(--pk-ink); text-transform: none; letter-spacing: 0; margin-top: 3px; }
.pk-vip__feature-text { font: var(--pk-t-body16); color: var(--pk-ink); margin: 0; }

/* =========================================================================
   6. Як це працює (кроки)
   ========================================================================= */
.pk-vip__steps { background: var(--pk-line); padding: 80px 0; }
.pk-vip__steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.pk-vip__step {
	position: relative;
	background: var(--pk-white);
	border-radius: var(--pk-r-lg);
	box-shadow: var(--pk-shadow-card);
	padding: 36px 28px 32px;
}
.pk-vip__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--pk-green);
	color: var(--pk-white);
	font: var(--pk-t-h24);
	margin-bottom: 20px;
}
.pk-vip__step-title { font: var(--pk-t-body-bd); text-transform: uppercase; letter-spacing: 0.01em; color: var(--pk-green); margin: 0 0 10px; }
.pk-vip__step-text { font: var(--pk-t-body); color: var(--pk-ink); margin: 0; }

/* =========================================================================
   7. CTA-банер (зелений, без фото)
   ========================================================================= */
/* Низький банер + менеджерка праворуч (патерн page-corporate: фото absolute,
   голова «виступає» над верхнім краєм банера завдяки overflow:visible; top-padding
   секції дає їй кліренс від блоку відгуків вище). turoperator@2x.webp — спільна
   менеджерка сайту (корпоратив/школа/форми). */
.pk-vip__cta { background: var(--pk-line); padding: 40px 0 72px; }
.pk-vip__cta-box {
	position: relative;
	border-radius: var(--pk-r-lg);
	/* Як на еталонних лендингах (corporate/recovery): світлий фон + ТЕМНИЙ текст */
	background: var(--pk-green-100) url(../../img/consult-bg.webp) bottom center / cover no-repeat;
	overflow: visible;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	min-height: 190px;
	padding: 40px 56px;
}
.pk-vip__cta-body { max-width: 720px; padding: 8px 0 12px; }
.pk-vip__cta-title { font: var(--pk-t-h28); color: var(--pk-ink); margin: 0 0 24px; }
.pk-vip__cta-text { font: var(--pk-t-body16); color: var(--pk-ink); margin: 0 0 18px; }
.pk-vip__cta-photo { position: absolute; right: 56px; bottom: 0; flex: 0 0 auto; }
.pk-vip__cta-photo img { display: block; width: auto; max-height: 340px; }

/* =========================================================================
   8. FAQ (акордеон, без JS — <details>)
   ========================================================================= */
.pk-vip__faq { background: var(--pk-line); padding: 64px 0; }
/* FAQ: 2 ФІКСОВАНІ колонки (замовник, 2026-07-18) — кожна .pk-vip__faq-col — незалежний
   стек, питання не перетікають між колонками при відкритті (CSS columns перетікали). */
.pk-vip__faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; max-width: 1100px; margin: 0 auto; }
.pk-vip__faq-col { display: grid; gap: 14px; align-content: start; }
/* Більший відступ заголовка FAQ до питань (замовник, 2026-07-18). */
.pk-vip__faq .pk-vip__h2 { margin-bottom: 72px; }
.pk-vip__faq-item {
	background: var(--pk-green-100);
	border-radius: var(--pk-r-md);
	overflow: hidden;
}
.pk-vip__faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;
	padding: 20px 24px;
	font: var(--pk-t-body-bd);
	color: var(--pk-ink);
}
.pk-vip__faq-q::-webkit-details-marker { display: none; }
.pk-vip__faq-mark {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: var(--pk-green);
	-webkit-mask: url(../../icons/chevron.svg) center / contain no-repeat;
	mask: url(../../icons/chevron.svg) center / contain no-repeat;
	transition: transform .2s ease;
}
.pk-vip__faq-item[open] .pk-vip__faq-mark { transform: rotate(180deg); }
.pk-vip__faq-a {
	padding: 20px 24px; /* симетрично → відповідь центрована у комірці */
	font: var(--pk-t-body16);
	color: var(--pk-ink); /* v6: темніше */
	background: var(--pk-white);
	margin: 0;
}

/* =========================================================================
   9. SEO-текст
   ========================================================================= */
.pk-vip__seo { background: var(--pk-line); padding: 24px 0 260px; } /* низ 120→260: більший відступ до форми (замовник, 2026-07-18; як FAQ→форма Мукачева) */
/* v4-аудит: центр — як усі H2 сторінки (і як SEO-заголовок корпоративної) */
.pk-vip__seo-title { font: var(--pk-t-h35); color: var(--pk-ink); text-align: center; margin: 0 0 32px; }
/* Один потік тексту у 2 колонки (замовник, 2026-07-18): ліва зверху вниз → права. */
.pk-vip__seo-cols { display: block; columns: 2; column-gap: 56px; }
.pk-vip__seo-cols h3 { break-after: avoid; } /* заголовок не лишається сиротою внизу колонки */
.pk-vip__seo-cols p { font: var(--pk-t-body16); color: var(--pk-ink); margin: 0 0 18px; }
.pk-vip__seo-cols h3 { font: 700 18px/26px var(--pk-font-sans); color: var(--pk-ink); margin: 8px 0 14px; }

/* =========================================================================
   Адаптив
   ========================================================================= */
@media (max-width: 1024px) {
	.pk-vip-hero { min-height: 560px; }
	.pk-vip__faq-list { grid-template-columns: 1fr; } /* FAQ: одна колонка на планшеті/мобільному */
	.pk-vip-hero__inner { padding: 140px 20px 64px; }
	.pk-vip-hero__title { font: 700 44px/1.15 var(--pk-font-display); }
	.pk-catcard-wrap { display: none; } /* картка категорій лише десктоп; на мобільному — бургер */
	.pk-vip__intro-row { grid-template-columns: 1fr; }
	.pk-vip__intro-photo { min-height: 300px; }
	.pk-vip__includes-grid { grid-template-columns: repeat(2, 1fr); }
	/* .pk-vip__features-grid — власні брейкпоінти 1023/640 (див. вище); тут НЕ керуємо */
	.pk-vip__steps-grid { grid-template-columns: repeat(2, 1fr); }
	.pk-vip__stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
	.vip-stats-square { width: 200px; height: 200px; }
}

@media (max-width: 768px) {
	.pk-vip-hero { min-height: 460px; }
	/* Легший hero-фон 1200w на випадок показу hero ≤768 (зараз hero прихований — фон
	   не завантажується; правило-заготовка для site-wide патерну). !important — бо
	   десктопний URL заданий інлайн-стилем у шаблоні. */
	.pk-vip-hero__bg { background-image: url('../../img/hero-bg-mob.webp') !important; }
	.pk-vip-hero__inner { padding: 120px 20px 52px; }
	.pk-vip-hero__title { font: 700 30px/1.18 var(--pk-font-display); }
	.pk-vip__h2 { font: var(--pk-t-h24); }
	.pk-vip__h2--inv { color: var(--pk-white); }
	/* Відкат скоупленого h40 заголовка блоку цифр на мобільному (специфічність > .pk-vip__h2) */
	.pk-vip__stats .pk-vip__h2 { font: var(--pk-t-h24); }
	.pk-vip__seo-title { font: var(--pk-t-h24); }
	/* Мобільний ромб ~120px (сітка 2×2 лишається з ≤1024); менші шеврони й число */
	.vip-stats-square { width: 140px; height: 140px; }
	.vip-stats-chev { width: 24px; height: 24px; }
	.vip-stats-num { font-size: 28px; }
	.pk-vip__includes-grid,
	.pk-vip__steps-grid,
	.pk-vip__seo-cols { columns: 1; }
	.pk-vip__intro-card { padding: 28px 24px; }
	.pk-vip__cta-box { padding: 40px 24px; min-height: 0; justify-content: center; }
	.pk-vip__cta-title { font: var(--pk-t-h24); }
	.pk-vip__cta-body { max-width: none; text-align: center; }
	.pk-vip__cta-photo { display: none; } /* менеджерка ховається на мобільному (як на corporate/schools) */
}

/* =========================================================================
   РОЗШИРЕННЯ vip-ext-* — 5 нових секцій між «Що входить» і «Як це працює»:
   A трансфер / B готелі / C активності / D гіди / E сценарії.
   Лише дизайн-токени теми. Заголовки/кнопки/іконки/картки-чипи — спільні класи
   теми (.pk-vip__h2, .pk-vip__lead, pk-btn, pk_icon, .pk-vip__include). Тут — лише
   layout нових блоків. Фони чергуються білий (--white) / бежевий (--line).
   ========================================================================= */
.vip-ext-sec { padding: 80px 0; }
.vip-ext-sec--white { background: var(--pk-white); }
.vip-ext-sec--line  { background: var(--pk-line); }
.vip-ext-note { font: var(--pk-t-body16); color: var(--pk-ink); max-width: 900px; margin: 44px auto 0; text-align: center; }
.vip-ext-center { text-align: center; margin-top: 44px; }
/* «Що входить» і «Активний відпочинок»: кнопку опущено нижче (замовник, 2026-07-18). */
.pk-vip__includes .vip-ext-center,
#vip-active .vip-ext-center { margin-top: 72px; }
/* Контурна контекстна CTA (v6, ієрархія кнопок: суцільна зелена = лише головна дія).
   Радіус/падінги успадковуються від .pk-btn (border 2px там уже закладено). */
.vip-cta-outline { background: transparent; border-color: var(--pk-green); color: var(--pk-green); }
.vip-cta-outline:hover { background: var(--pk-green); color: var(--pk-white); }
.vip-cta-outline:focus-visible { outline: 2px solid var(--pk-green); outline-offset: 2px; }

/* Текстове посилання зі стрілкою (мікро-CTA) */
.vip-ext-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--pk-green); font: var(--pk-t-body-bd); text-decoration: none; }
.vip-ext-arrow .pk-i { width: 18px; height: 18px; transition: transform .18s ease; }
.vip-ext-arrow:hover .pk-i { transform: translateX(4px); }
.vip-ext-arrow:hover { text-decoration: underline; }
/* Чип-тег (готелі) */
.vip-ext-tag { display: inline-block; font: var(--pk-t-small); color: var(--pk-green); background: var(--pk-green-100); border-radius: 999px; padding: 5px 12px; }

/* Врізка довіри під картками проживання (замість дрібного сірого note): світло-зелена
   підкладка (той самий --pk-green-100, що в тегів), радіус карток, іконка приватності зліва. */
.vip-stay-trust {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	max-width: 800px;
	margin: 44px auto 0;
	padding: 22px 28px;
	background: var(--pk-green-100);
	border-radius: var(--pk-r-lg);
}
.vip-stay-trust__ico { flex: 0 0 auto; display: inline-flex; margin-top: 2px; color: var(--pk-green); }
.vip-stay-trust__ico .pk-i { width: 26px; height: 26px; }
.vip-stay-trust__text { font: var(--pk-t-body16); color: var(--pk-ink); margin: 0; }

/* --- A. Рядок «текст + фото» (v4: використовують гастрономія та Європа) --- */
.vip-ext-transfer__row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-bottom: 0; }
.vip-ext-transfer__photo { position: relative; border-radius: var(--pk-r-lg); overflow: hidden; min-height: 440px; background: var(--pk-green-100); }
.vip-ext-transfer__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vip-ext-transfer__text { font: var(--pk-t-body16); color: var(--pk-ink); margin: 0 0 18px; }
/* Гастрономія / Європа: фото розтягується на висоту текстової колонки (спільний layout
   лишається center для інших інстансів — скоуп лише цих рядків). Стек — від спільного ≤1024. */
.vip-gastro-row,
.vip-europe-row { align-items: stretch; }
/* Акцентний абзац «Один організатор…» — лише жирність, без зміни кольору. */
.vip-europe-usp { font-weight: 600; }
.vip-ext-transfer__cta { margin-top: 10px; }
.vip-ext-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 32px; }
.vip-ext-perk { display: flex; gap: 14px; align-items: center; }
.vip-ext-perk__ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--pk-r-md); background: var(--pk-green-100); color: var(--pk-green); }
.vip-ext-perk__ico .pk-i { width: 24px; height: 24px; }
.vip-ext-perk__text { font: var(--pk-t-body); color: var(--pk-ink); margin: 0; }

/* --- B. Готелі --- */
.vip-ext-hotels__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.vip-ext-hotel { display: flex; flex-direction: column; background: var(--pk-white); border-radius: var(--pk-r-lg); box-shadow: var(--pk-shadow-card); overflow: hidden; }
.vip-ext-hotel__media { position: relative; aspect-ratio: 4 / 3; background: var(--pk-green-100); }
.vip-ext-hotel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vip-ext-hotel__badge { position: absolute; top: 12px; left: 12px; font: var(--pk-t-small); font-weight: 600; color: var(--pk-green); background: rgba(255,255,255,.92); border-radius: 999px; padding: 5px 12px; }
.vip-ext-hotel__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1 1 auto; }
.vip-ext-hotel__name { font: var(--pk-t-h24); color: var(--pk-ink); margin: 0; }
.vip-ext-hotel__desc { font: var(--pk-t-body16); color: var(--pk-ink); margin: 0; } /* v6: ≥16px/ink */
.vip-ext-hotel__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }

/* --- C. Активності (реюз карток .pk-vip__include) --- */
.vip-ext-active__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* --- D. Гіди --- */
.vip-ext-guides__row { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: center; }
.vip-ext-guides__text { font: var(--pk-t-body16); color: var(--pk-ink); margin: 0; }
.vip-ext-guides__cards { display: grid; gap: 16px; }
.vip-ext-guide { display: flex; gap: 16px; align-items: flex-start; background: var(--pk-white); border-radius: var(--pk-r-lg); box-shadow: var(--pk-shadow-card); padding: 22px 24px; }
.vip-ext-guide__ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--pk-r-md); background: var(--pk-green-100); color: var(--pk-green); }
.vip-ext-guide__ico .pk-i { width: 26px; height: 26px; }
.vip-ext-guide__title { font: var(--pk-t-body-bd); color: var(--pk-ink); margin: 0 0 4px; }
.vip-ext-guide__text { font: var(--pk-t-body); color: var(--pk-muted); margin: 0; }

/* --- E. Сценарії --- */
.vip-ext-scenarios__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vip-ext-scenario { display: flex; flex-direction: column; background: var(--pk-white); border-radius: var(--pk-r-lg); box-shadow: var(--pk-shadow-card); padding: 30px 28px; }
.vip-ext-scenario__name { font: var(--pk-t-h24); color: var(--pk-ink); margin: 0 0 8px; }
.vip-ext-scenario__for { font: var(--pk-t-small); font-weight: 600; color: var(--pk-green); margin: 0 0 12px; }
.vip-ext-scenario__text { font: var(--pk-t-body16); color: var(--pk-ink); margin: 0 0 22px; } /* v6: ≥16px/ink */
.vip-ext-scenario__link { margin-top: auto; }

/* SEO — доданий абзац на всю ширину під 2 колонки */
.vip-ext-seo-extra { margin-top: 28px; } /* абзац у спільному потоці колонок; шрифт від .pk-vip__seo-cols p */

/* --- Адаптив розширення --- */
@media (max-width: 1024px) {
	.vip-ext-sec { padding: 64px 0; }
	.vip-ext-transfer__row { grid-template-columns: 1fr; gap: 32px; }
	.vip-ext-transfer__photo { min-height: 300px; }
	.vip-ext-perks { grid-template-columns: repeat(2, 1fr); }
	.vip-ext-hotels__grid { grid-template-columns: repeat(2, 1fr); }
	.vip-ext-active__grid { grid-template-columns: repeat(2, 1fr); }
	.vip-ext-guides__row { grid-template-columns: 1fr; gap: 32px; }
	.vip-ext-scenarios__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.vip-ext-perks,
	.vip-ext-hotels__grid,
	.vip-ext-active__grid,
	.vip-ext-scenarios__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   РОЗШИРЕННЯ v4 (2026-07-10, погоджено замовником) — компактна структура:
   фото-плитки-якорі (донор .pk-corp__service + .pk-sch-tile), два формати
   дороги (наш трансфер / гід у вашому авто), чипи, Google-бейджі (донори
   .pk-corp__gbadge / .pk-sch-proof__gbadge), картки відгуків (донор
   .pk-corp__review). Прибрано v3-блоки: міні-галерея трансферу, стрічка
   інтер'єрів, окрема секція гідів (влита в «Чому обирають нас»), інтро.
   Orphan-правила старої зони (.pk-vip__intro*, .vip-ext-guides* v2,
   .vip-ext-transfer__cta) лишено — нешкідливі, відкат простіший.
   ========================================================================= */

/* Плавний скрол до секцій-якорів з плиток «Що входить» */
.vip-ext-sec { scroll-margin-top: 16px; }

/* --- Google-бейдж під цифрою 4,9 (копія .pk-corp__gbadge) --- */
.vip-ext-gbadge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	margin-top: 16px;
	background: var(--pk-white);
	border-radius: var(--pk-r-md);
	padding: 7px 14px;
	box-shadow: var(--pk-shadow-soft);
	text-decoration: none;
	color: var(--pk-ink);
	transition: transform .18s ease, box-shadow .18s ease;
}
.vip-ext-gbadge:hover { transform: translateY(-2px); box-shadow: var(--pk-shadow-card); }
.vip-ext-gbadge:focus-visible { outline: 2px solid var(--pk-green-300); outline-offset: 2px; }
.vip-ext-gbadge-top { display: inline-flex; align-items: center; gap: 6px; }
.vip-ext-gbadge-logo { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
.vip-ext-gbadge-stars { color: #FBBC04; font-size: 12px; letter-spacing: .5px; }
.vip-ext-gbadge-cta { font: 700 12px/1.2 var(--pk-font-sans); color: var(--pk-green); white-space: nowrap; }
.vip-ext-gbadge-arrow { display: inline-block; font-weight: 700; transition: transform .18s ease; }
.vip-ext-gbadge:hover .vip-ext-gbadge-arrow { transform: translateX(3px); }

/* --- Фото-плитки (Секції «Що входить» = <a>-якорі; «Активний» = --static) --- */
.vip-ext-photocards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.vip-ext-photocards__grid--3 { grid-template-columns: repeat(3, 1fr); }
.vip-ext-photocard {
	position: relative;
	aspect-ratio: 1 / 1.05;
	border-radius: var(--pk-r-lg);
	box-shadow: var(--pk-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
	color: var(--pk-white);
	isolation: isolate;
	text-decoration: none;
}
a.vip-ext-photocard { transition: transform .2s ease, box-shadow .2s ease; }
a.vip-ext-photocard:hover { transform: translateY(-4px); }
a.vip-ext-photocard:focus-visible { outline: 2px solid var(--pk-green); outline-offset: 3px; }
.vip-ext-photocard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vip-ext-photocard::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.86) 100%);
}
.vip-ext-photocard__cap { position: relative; }
.vip-ext-photocard__title { font: var(--pk-t-h24); color: var(--pk-white); margin: 0; }
.vip-ext-photocard__sub { font: var(--pk-t-body16); color: var(--pk-white); margin: 6px 0 0; } /* v6: ≥16px; на фото-оверлеї лишається білим */
/* «Що входить» + «Активний відпочинок»: опис приглушено-сірий, не білий (замовник,
   2026-07-18) — заголовок лишається білим. */
.vip-services-card .vip-ext-photocard__sub,
.vip-active-card .vip-ext-photocard__sub { color: rgba(255, 255, 255, 0.75); }

/* ── Уніфіковане брендове затемнення фото-карток ──
   Спільне для блоків «Що входить у VIP» (.vip-services-card, 8 шт.) та «Активний
   відпочинок» (.vip-active-card, 6 шт.) — ОДНІ значення, без дублювання. На цих картках
   спільний чорний ::before ВИМКНЕНО і замінено брендовим ::after — щоб затемнення було
   однакове й білий текст читався навіть на найсвітлішому фото.
   🎨 Підкрутити затемнення — тут: колір/альфа у змінній + зупинки в градієнті. */
.vip-services-card,
.vip-active-card {
	--vip-services-overlay-color: rgba(8, 24, 16, 0.82); /* дуже темний зелено-чорний під бренд */
}
.vip-services-card::before,
.vip-active-card::before { content: none; } /* прибрати старий спільний чорний оверлей */
.vip-services-card::after,
.vip-active-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;              /* поверх фото (z-index:-2), під текстом (.cap position:relative → auto 0) */
	pointer-events: none;     /* кліки/hover проходять до картки */
	background: linear-gradient(
		to top,
		var(--vip-services-overlay-color) 0%,
		rgba(8, 24, 16, 0.45) 32%,
		rgba(8, 24, 16, 0) 62%
	);
}

/* Клікабельні картки активностей (role="button"): pointer, легкий zoom фото на hover,
   focus-ring для клавіатури; мікролінк «Додати в програму» — білий, стиль сценарних лінків. */
.vip-active-card { cursor: pointer; }
/* Посилений градієнт низу (правка замовника 2026-07-18, двічі): і активні картки, і
   сервісні «Що входить» — текст стартує високо, низ має бути глибоко темним. Оверлей цих
   карток — ::after (::before вимкнено content:none вище). */
.vip-services-card::after,
.vip-active-card::after {
	background: linear-gradient(
		to top,
		rgba(8, 24, 16, 0.97) 0%,
		rgba(8, 24, 16, 0.75) 45%,
		rgba(8, 24, 16, 0) 80%
	);
}
.vip-active-card .vip-ext-photocard__img { transition: transform .3s ease; }
.vip-active-card:hover .vip-ext-photocard__img { transform: scale(1.05); }
.vip-active-card:focus-visible { outline: 2px solid var(--pk-green); outline-offset: 3px; }
.vip-active-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--pk-white); font: var(--pk-t-body-bd); }
.vip-active-link .pk-i { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
	.vip-active-card .vip-ext-photocard__img { transition: none; }
	.vip-active-card:hover .vip-ext-photocard__img { transform: none; }
}

/* --- Дорога: два формати (наш трансфер / гід у вашому авто) --- */
.vip-ext-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 44px; }
.vip-ext-fmt { display: flex; flex-direction: column; background: var(--pk-white); border-radius: var(--pk-r-lg); box-shadow: var(--pk-shadow-card); overflow: hidden; }
.vip-ext-fmt__media { position: relative; aspect-ratio: 3 / 2; background: var(--pk-green-100); }
.vip-ext-fmt__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vip-ext-fmt__body { padding: 24px 28px 28px; }
.vip-ext-fmt__title { font: var(--pk-t-h24); color: var(--pk-ink); margin: 0 0 10px; }
.vip-ext-fmt__text { font: var(--pk-t-body16); color: var(--pk-ink); margin: 0; } /* v6: темніше */
/* 4 перки в один ряд на десктопі (перебиває базові 3 колонки; media нижче) */
.vip-ext-perks--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Чипи (гастрономія + Європа) --- */
.vip-ext-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.vip-ext-chips__cta { margin-top: 22px; }

/* --- Сценарії з фото + 2 бейджі (донор «Готові шкільні маршрути») --- */
/* Уся плитка клікабельна (JS-тригер у page-vip.js) — кнопка «Дізнатись деталі»
   лишається клавіатурним тригером; тут — pointer-афорданс і focus-ring. */
.vip-ext-scenario--photo { padding: 0; overflow: hidden; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.vip-ext-scenario--photo:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .16); }
.vip-ext-scenario--photo:focus-within { box-shadow: 0 0 0 2px var(--pk-green), var(--pk-shadow-card); }
.vip-ext-scenario__media { position: relative; aspect-ratio: 16 / 10; }
.vip-ext-scenario__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vip-ext-scenario__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.vip-ext-scenario__badge { font: var(--pk-t-small); font-weight: 600; color: var(--pk-green); background: rgba(255,255,255,.92); border-radius: 999px; padding: 5px 12px; }
.vip-ext-scenario--photo .vip-ext-scenario__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 28px 30px; }

/* --- Відгуки VIP-гостей (донор .pk-sch-proof__gbadge + .pk-corp__review) --- */
.vip-ext-reviews { background: var(--pk-line); padding: 80px 0; }
.vip-ext-gbig {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: fit-content;
	margin: 0 auto 40px;
	background: var(--pk-white);
	border: 1px solid var(--pk-line);
	border-radius: var(--pk-r-pill);
	box-shadow: var(--pk-shadow-green);
	padding: 10px 22px;
	text-decoration: none;
}
.vip-ext-gbig img { display: block; }
.vip-ext-gbig__num { font: 700 20px/1 var(--pk-font-sans); color: var(--pk-ink); }
.vip-ext-gbig__stars { color: #FBBC04; font-size: 15px; letter-spacing: 2px; }
.vip-ext-gbig__cap { font: var(--pk-t-small13); color: var(--pk-muted); }
.vip-ext-gbig__cta { font: var(--pk-t-body-md); color: var(--pk-green); }
.vip-ext-gbig:hover .vip-ext-gbig__cta { color: var(--pk-green-dark); }
.vip-ext-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.vip-ext-review { position: relative; display: flex; flex-direction: column; background: var(--pk-white); border-radius: var(--pk-r-lg); box-shadow: var(--pk-shadow-card); padding: 28px; margin: 0; transition: transform .18s ease, box-shadow .18s ease; }
.vip-ext-review:hover { transform: translateY(-3px); box-shadow: 6px 8px 22px rgba(0,0,0,.16); }
.vip-ext-review__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.vip-ext-review__ava { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--pk-green-100); flex: 0 0 auto; }
.vip-ext-review__ava::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 26px;
	height: 26px;
	background-color: var(--pk-green);
	-webkit-mask: url(../../icons/user.svg) center / contain no-repeat;
	mask: url(../../icons/user.svg) center / contain no-repeat;
}
/* Аватар-фото гостя (опційний 'photo' у $pk_reviews) — замість іконки-заглушки */
.vip-ext-review__ava--photo::before { content: none; }
.vip-ext-review__ava--photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* Довгі відгуки згортає глобальний .pk-collapsible; кнопку «Показати ще» піднімаємо
   НАД stretched-link «Читати в Google» (::after розтягнутий на всю картку). */
.vip-ext-review .pk-collapsible-toggle { position: relative; z-index: 1; align-self: flex-start; margin-top: 8px; }
.vip-ext-review__name { display: block; font: var(--pk-t-body-bd); color: var(--pk-green); }
.vip-ext-review__role { display: block; font: var(--pk-t-small); color: var(--pk-muted); }
.vip-ext-review__text { font: var(--pk-t-body16); color: var(--pk-ink); margin: 0; } /* v6: ≥16px */
/* Кнопка «Читати в Google» — вниз картки; ::after розтягує клік на весь відгук (stretched link) */
.vip-ext-review__more { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--pk-line); font: 700 14px/1.2 var(--pk-font-sans); color: var(--pk-green); text-decoration: none; }
.vip-ext-review__more img { display: block; flex: 0 0 auto; }
.vip-ext-review__arrow { display: inline-block; transition: transform .18s ease; }
.vip-ext-review:hover .vip-ext-review__arrow { transform: translateX(3px); }
.vip-ext-review:hover .vip-ext-review__more { color: var(--pk-green-dark); }
.vip-ext-review__more::after { content: ""; position: absolute; inset: 0; border-radius: var(--pk-r-lg); }
.vip-ext-review__more:focus-visible { outline: none; }
.vip-ext-review__more:focus-visible::after { outline: 2px solid var(--pk-green-300); outline-offset: 2px; }

/* --- Адаптив v4 --- */
@media (max-width: 1024px) {
	.vip-ext-photocards__grid,
	.vip-ext-photocards__grid--3 { grid-template-columns: repeat(2, 1fr); }
	/* компактніші плитки у 2-кол сітці (1/1.05 давав 4 ряди × ~500px) */
	.vip-ext-photocard { aspect-ratio: 4 / 3; }
	.vip-ext-formats { grid-template-columns: 1fr; }
	/* нижче фото у стеку карток формату дороги (3/2 при 1-кол було ~524px) */
	.vip-ext-fmt__media { aspect-ratio: 2 / 1; }
	.vip-ext-perks--4 { grid-template-columns: repeat(2, 1fr); }
	.vip-ext-reviews__grid { grid-template-columns: repeat(2, 1fr); }
	/* єдиний ритм секцій ≤1024: 64px (як .vip-ext-sec) */
	.pk-vip__includes,
	.pk-vip__features,
	.pk-vip__steps,
	.vip-ext-reviews { padding: 64px 0; }
}
@media (max-width: 768px) {
	.vip-ext-photocards__grid,
	.vip-ext-photocards__grid--3,
	.vip-ext-perks--4,
	.vip-ext-reviews__grid { grid-template-columns: 1fr; }
	.vip-ext-photocard { aspect-ratio: 16 / 10; }
	/* мобільний: усі заголовки секцій центровані (гастрономія/Європа були left) */
	.pk-vip__h2--left { text-align: center; }
	.vip-ext-reviews { padding: 64px 0; }
}

/* ─────────────────────────────────────────────────────────────
   Модалки «Готові VIP-сценарії» (v5) — нативний <dialog>,
   патерн .pk-popup з archive-excursion.css (той файл тут НЕ
   вантажиться, тому стилі продубльовано під префіксом vip-modal-).
   JS: assets/js/pages/page-vip.js. Обробник: inc/vip-leads.php.
   ───────────────────────────────────────────────────────────── */

/* «Дізнатись деталі» тепер <button> — знімаємо UA-стилі кнопки,
   решту дає спільний .vip-ext-arrow. */
button.vip-ext-arrow { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

html.vip-modal-lock,
html.vip-modal-lock body { overflow: hidden; } /* скрол-лок при відкритій модалці */

.vip-modal {
	border: 0;
	padding: 0;
	margin: auto;
	background: transparent;
	width: calc(100vw - 32px);
	max-width: 620px;
	max-height: calc(100dvh - 32px);
	overflow: visible;
}
.vip-modal::backdrop { background: rgba(0, 27, 14, .55); }
.vip-modal-card {
	position: relative;
	background: var(--pk-white);
	border-radius: var(--pk-r-lg);
	box-shadow: var(--pk-shadow-card);
	padding: 36px 32px 32px;
	max-height: calc(100dvh - 32px);
	overflow: auto;
	overscroll-behavior: contain; /* скрол модалки не «протікає» на сторінку */
}
.vip-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pk-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.vip-modal-close:hover { background: var(--pk-green-050); color: var(--pk-ink); }
.vip-modal-close:focus-visible { outline: 2px solid var(--pk-green); outline-offset: 2px; }

.vip-modal-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 40px 12px 0; }
.vip-modal-badge { font: var(--pk-t-small); font-weight: 600; color: var(--pk-green); background: var(--pk-green-050); border-radius: 999px; padding: 5px 12px; }
/* Заголовок по центру в УСІХ модалках (замовник, 2026-07-18); симетричний паддінг 36px
   з обох боків — центр істинний і довгий заголовок не лізе під кнопку-close. */
.vip-modal-title { margin: 0 0 10px; padding: 0 36px; text-align: center; font: var(--pk-t-h24); color: var(--pk-ink); }
.vip-modal-lead { margin: 0 0 20px; font: var(--pk-t-body16); color: var(--pk-ink); } /* v6: темніше */
.vip-modal-sub { margin: 0 0 10px; font: var(--pk-t-body-bd); font-size: 16px; color: var(--pk-ink); }
.vip-modal-includes { margin: 0 0 22px; padding: 0 0 0 20px; }
.vip-modal-includes li { font: var(--pk-t-body16); color: var(--pk-ink); margin-bottom: 6px; } /* v6: ≥16px/ink */
.vip-modal-includes li::marker { color: var(--pk-green); }

.vip-modal-how { border-top: 1px solid var(--pk-line); padding-top: 18px; margin-bottom: 22px; }
.vip-modal-how__steps { margin: 0 0 10px; padding: 0 0 0 20px; }
.vip-modal-how__steps li { font: var(--pk-t-body16); color: var(--pk-ink); margin-bottom: 6px; } /* v6: ≥16px/ink */
.vip-modal-how__steps li::marker { color: var(--pk-green); font-weight: 700; }
.vip-modal-how__note { margin: 0; font: var(--pk-t-body16); color: var(--pk-ink); } /* v6: ≥16px/ink */

.vip-modal-form { display: flex; flex-direction: column; gap: 12px; }
/* Поля: спільний .pk-field, на білій картці — світло-зелений фон замість тіні (як .pk-popup). */
.vip-modal-form .pk-field { background: var(--pk-green-050); box-shadow: none; min-width: 0; }
.vip-modal-form .pk-field:focus-within { box-shadow: 0 0 0 2px var(--pk-green); }
/* Honeypot: візуально та для скрінрідерів прихований, але БЕЗ display:none (боти його бачать). */
.vip-modal-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.vip-modal-err { margin: -4px 0 0 6px; font: var(--pk-t-small13); color: var(--pk-red); }
.vip-modal-err[hidden] { display: none; }
.vip-modal-submit { margin-top: 4px; }
.vip-modal-micro { margin: 0; font: var(--pk-t-small); color: var(--pk-muted); text-align: center; }
.vip-modal-fail { margin: 0; font: var(--pk-t-body); color: var(--pk-red); text-align: center; }
.vip-modal-fail a { color: var(--pk-red); font-weight: 700; }
.vip-modal-fail[hidden] { display: none; }
.vip-modal-success { margin: 0; background: var(--pk-green-050); border-radius: var(--pk-r-sm, 12px); padding: 18px 20px; font: var(--pk-t-body16); color: var(--pk-ink); }
.vip-modal-success[hidden] { display: none; }
.vip-modal-success:focus { outline: none; }
.vip-modal-form[hidden] { display: none; }

/* Поява: легкий fade+slide; глушиться на reduce (патерн .pk-popup). */
@media (prefers-reduced-motion: no-preference) {
	.vip-modal[open] { animation: vip-modal-in .22s ease-out; }
	.vip-modal[open]::backdrop { animation: vip-modal-fade .22s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
	.vip-modal[open],
	.vip-modal[open]::backdrop { animation: none; }
}
@keyframes vip-modal-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
@keyframes vip-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Мобільний: шторка знизу на всю ширину, max-height 90vh, внутрішній скрол. */
@media (max-width: 480px) {
	.vip-modal {
		width: 100vw;
		max-width: none;
		margin: auto 0 0;
		max-height: 90vh;
	}
	.vip-modal-card {
		border-radius: var(--pk-r-lg) var(--pk-r-lg) 0 0;
		padding: 28px 20px 24px;
		max-height: 90vh;
	}
	@media (prefers-reduced-motion: no-preference) {
		.vip-modal[open] { animation-name: vip-modal-up; }
	}
}
@keyframes vip-modal-up {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}