/* =====================================================================
   VIBEX — SEARCH/DISCOVER v3  «Discover Hub»
   Файл: /wp-content/themes/buddyboss-child/css/vibex-search.css
   Залежність: vibex-design-system.css (токени --vx-*) — ВЖЕ підключений
   глобально mu-loaderом, не імпортуємо повторно.

   Namespace: vxs-*  (vibex-search). Не перетинається з vx-, vxe-, vxp-, vbx-.
   Active body class: .vibex-search-active  (scroll lock, animation gate).
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   0 · LOCAL TOKENS (тільки для пошуку — не --vx-*)
   ───────────────────────────────────────────────────────────────────── */
.vxs-stage {
	--vxs-r:        var(--vx-r);
	--vxs-r-lg:     var(--vx-r-lg);
	--vxs-r-pill:   var(--vx-r-pill);
	--vxs-stage-pad: 28px;
	--vxs-gap:      14px;
	--vxs-tab-h:    44px;
	--vxs-ease:     var(--vx-ease);
	--vxs-spring:   var(--vx-spring);
	--vxs-grad-gold: linear-gradient(135deg, #ffc800, #ff7a00);
}

/* Scroll lock */
body.vibex-search-active { overflow: hidden !important; }

/* ─────────────────────────────────────────────────────────────────────
   1 · STAGE — root overlay
   ───────────────────────────────────────────────────────────────────── */
.vxs-stage {
	position: fixed;
	inset: 0;
	z-index: 999990;
	display: flex;
	flex-direction: column;
	background: var(--vx-bg);
	color: var(--vx-text);
	font-family: var(--vx-font-body);
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s var(--vxs-ease), visibility 0s linear .22s;
}
.vxs-stage[data-open="true"] {
	opacity: 1;
	visibility: visible;
	transition: opacity .22s var(--vxs-ease), visibility 0s linear 0s;
}
.vxs-stage[data-open="true"] .vxs-stage__inner {
	transform: scale(1);
	opacity: 1;
}
.vxs-stage__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	transform: scale(.96);
	opacity: 0;
	transition: transform .28s var(--vxs-spring), opacity .28s var(--vxs-ease);
}

/* Backdrop wash (parallax glow) */
.vxs-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 22% -10%, rgba(255,45,126,.20), transparent 45%),
		radial-gradient(circle at 78% -5%,  rgba(168,85,247,.16), transparent 50%),
		radial-gradient(circle at 50% 110%, rgba(22,224,255,.08), transparent 55%);
	pointer-events: none;
	z-index: 0;
}
.vxs-stage > * { position: relative; z-index: 1; }

/* Scrollable body wrap */
.vxs-stage__scroll {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
}
.vxs-stage__scroll::-webkit-scrollbar       { width: 6px; }
.vxs-stage__scroll::-webkit-scrollbar-thumb { background: rgba(255,45,126,.35); border-radius: 3px; }

/* ─────────────────────────────────────────────────────────────────────
   2 · HEADER (close · brand · live · balance)
   ───────────────────────────────────────────────────────────────────── */
.vxs-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px var(--vxs-stage-pad);
	background: rgba(10,6,18,.72);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--vx-line-soft);
}
.vxs-header__group { display: flex; align-items: center; gap: 12px; }
.vxs-header__brand {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--vx-font-display);
	font-weight: 600; font-size: 15px; letter-spacing: .02em;
}
.vxs-header__brand-mark {
	width: 28px; height: 28px; border-radius: 8px;
	background: var(--vx-grad);
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--vx-glow-pink);
}
.vxs-header__title {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--vx-font-display);
	font-weight: 700; font-size: 22px; letter-spacing: -.01em;
	background: var(--vx-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
@media (max-width: 720px) {
	.vxs-header__title { font-size: 18px; }
	.vxs-header { padding: 12px 16px; }
}

/* Close button */
.vxs-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--vx-glass);
	border: 1px solid var(--vx-line);
	color: var(--vx-text);
	cursor: pointer;
	transition: background .14s var(--vxs-ease), transform .14s var(--vxs-ease);
}
.vxs-iconbtn:hover  { background: var(--vx-glass-2); }
.vxs-iconbtn:active { transform: scale(.94); }
.vxs-iconbtn--sm    { width: 34px; height: 34px; }
.vxs-iconbtn svg    { width: 18px; height: 18px; }
@media (max-width: 720px) {
	.vxs-iconbtn { width: 38px; height: 38px; }
}

/* Live counter pill */
.vxs-live {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 11px; border-radius: var(--vxs-r-pill);
	background: rgba(46,204,113,.14);
	border: 1px solid rgba(46,204,113,.28);
	font-family: var(--vx-font-display);
	font-size: 12.5px; font-weight: 700;
	color: var(--vx-text);
}
.vxs-live__suffix { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.7); }
.vxs-live__dot {
	position: relative;
	width: 7px; height: 7px;
}
.vxs-live__dot::before, .vxs-live__dot::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 50%;
	background: var(--vx-green);
}
.vxs-live__dot::before { box-shadow: 0 0 8px var(--vx-green); animation: vxsLivePulse 1.6s ease-in-out infinite; }
.vxs-live__dot::after  { animation: vxsRingPulse 1.6s ease-out infinite; }

/* Vibes balance chip */
.vxs-balance {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 14px; border-radius: var(--vxs-r-pill);
	background: linear-gradient(135deg, rgba(255,216,77,.16), rgba(255,122,0,.14));
	border: 1px solid rgba(255,200,0,.32);
	color: var(--vx-gold);
	font-size: 13px; font-weight: 700;
	cursor: pointer;
	transition: background .14s var(--vxs-ease);
}
.vxs-balance:hover { background: linear-gradient(135deg, rgba(255,216,77,.22), rgba(255,122,0,.18)); }
.vxs-balance__n { color: #fff; }
.vxs-balance__l { color: rgba(255,216,77,.7); font-size: 11px; font-weight: 500; }
@media (max-width: 720px) {
	.vxs-balance     { padding: 6px 10px; font-size: 12px; }
	.vxs-balance__l  { display: none; }
	.vxs-live__suffix { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   3 · TABS (4 modes)
   ───────────────────────────────────────────────────────────────────── */
.vxs-tabs {
	display: flex; align-items: center; gap: 8px;
	padding: 18px var(--vxs-stage-pad) 0;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}
.vxs-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 720px) {
	.vxs-tabs { padding: 12px 16px 0; gap: 6px; }
}

.vxs-tabs__item {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 11px 18px; border-radius: var(--vxs-r-pill);
	background: var(--vx-glass);
	border: 1px solid var(--vx-line);
	color: var(--vx-text-2);
	font-size: 14px; font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	flex: none;
	scroll-snap-align: start;
	transition: background .14s var(--vxs-ease), color .14s var(--vxs-ease), transform .12s var(--vxs-ease);
}
.vxs-tabs__item:hover   { background: var(--vx-glass-2); color: var(--vx-text); }
.vxs-tabs__item:active  { transform: scale(.97); }
.vxs-tabs__item svg     { width: 15px; height: 15px; flex: none; }

.vxs-tabs__item--active {
	background: var(--vx-grad);
	border-color: transparent;
	color: #fff;
	font-weight: 600;
	box-shadow: var(--vx-glow-pink), inset 0 1px 0 rgba(255,255,255,.18);
}
.vxs-tabs__item--active:hover { background: var(--vx-grad); color: #fff; }

.vxs-tabs__badge {
	font-family: var(--vx-font-display);
	font-size: 9px; font-weight: 700; letter-spacing: .08em;
	padding: 2px 6px; border-radius: 4px;
	background: rgba(22,224,255,.16);
	color: var(--vx-cyan);
}
.vxs-tabs__badge--gold {
	background: rgba(255,200,0,.16);
	color: var(--vx-gold);
}

/* Locked indicator (gold lock dot on tab) */
.vxs-tabs__lock {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--vxs-grad-gold);
	color: #1a1410;
}
.vxs-tabs__lock svg { width: 9px; height: 9px; }

/* ─────────────────────────────────────────────────────────────────────
   4 · TYPE PILLS (Bumble-style large)
   ───────────────────────────────────────────────────────────────────── */
.vxs-typepills {
	display: flex; gap: 10px;
	padding: 18px var(--vxs-stage-pad) 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.vxs-typepills::-webkit-scrollbar { display: none; }
@media (max-width: 720px) {
	.vxs-typepills {
		padding: 12px 16px 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		overflow: visible;
	}
}

.vxs-typepill {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 13px 18px; border-radius: 14px;
	background: var(--vx-glass);
	border: 1px solid var(--vx-line);
	color: var(--vx-text);
	font-family: var(--vx-font-display);
	font-size: 14px; font-weight: 600;
	cursor: pointer;
	flex: none;
	transition: background .14s var(--vxs-ease), border-color .14s var(--vxs-ease), transform .12s var(--vxs-ease);
}
.vxs-typepill:hover  { background: var(--vx-glass-2); }
.vxs-typepill:active { transform: scale(.98); }
.vxs-typepill__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 7px;
	background: var(--vx-glass-2);
	color: #fff;
	flex: none;
}
.vxs-typepill__icon svg { width: 14px; height: 14px; }
.vxs-typepill__count {
	font-size: 11px; font-weight: 500;
	color: rgba(255,255,255,.6);
}
@media (max-width: 720px) {
	.vxs-typepill {
		padding: 11px 13px;
		text-align: left;
		display: flex;
	}
	.vxs-typepill__inner { flex: 1; }
	.vxs-typepill__label { font-size: 13px; }
	.vxs-typepill__count { font-size: 10px; display: block; margin-top: 1px; }
}

/* Variants */
.vxs-typepill[data-kind="all"]     { background: var(--vx-grad); border-color: transparent; box-shadow: var(--vx-glow-pink), inset 0 1px 0 rgba(255,255,255,.18); }
.vxs-typepill[data-kind="all"] .vxs-typepill__count { color: rgba(255,255,255,.8); }

.vxs-typepill[data-kind="women"]    .vxs-typepill__icon { background: linear-gradient(135deg, #ff2d7e, #ff6ad5); }
.vxs-typepill[data-kind="men"]      .vxs-typepill__icon { background: linear-gradient(135deg, #16e0ff, #7c3aed); }
.vxs-typepill[data-kind="couples"]  .vxs-typepill__icon { background: linear-gradient(135deg, #a855f7, #ff2d7e); }
.vxs-typepill[data-kind="creators"] .vxs-typepill__icon { background: var(--vxs-grad-gold); color: #1a1410; }
.vxs-typepill[data-kind="creators"] {
	background: linear-gradient(135deg, rgba(255,216,77,.10), rgba(255,122,0,.08));
	border-color: rgba(255,200,0,.40);
}
.vxs-typepill[data-kind="creators"] .vxs-typepill__count { color: var(--vx-gold); }

.vxs-typepill--active {
	background: rgba(255,45,126,.16) !important;
	border-color: rgba(255,45,126,.45) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   5 · DISTANCE / FILTER CHIPS
   ───────────────────────────────────────────────────────────────────── */
.vxs-chiprow {
	display: flex; align-items: center; gap: 8px;
	padding: 14px var(--vxs-stage-pad) 18px;
	overflow-x: auto;
	scrollbar-width: none;
}
.vxs-chiprow::-webkit-scrollbar { display: none; }
.vxs-chiprow__icon { color: rgba(255,255,255,.45); flex: none; }
.vxs-chiprow__icon svg { width: 14px; height: 14px; display: block; }
@media (max-width: 720px) {
	.vxs-chiprow { padding: 10px 16px 14px; gap: 6px; }
}

.vxs-chip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 7px 13px; border-radius: var(--vxs-r-pill);
	background: var(--vx-glass);
	border: 1px solid var(--vx-line);
	color: var(--vx-text-2);
	font-size: 12px; font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	flex: none;
	white-space: nowrap;
	transition: background .14s var(--vxs-ease), color .14s var(--vxs-ease), border-color .14s var(--vxs-ease);
}
.vxs-chip:hover  { background: var(--vx-glass-2); color: var(--vx-text); }
.vxs-chip svg    { width: 11px; height: 11px; }

.vxs-chip--selected {
	background: rgba(22,224,255,.16);
	border-color: rgba(22,224,255,.40);
	color: var(--vx-cyan);
	font-weight: 600;
}
.vxs-chip--primary {
	background: var(--vx-grad);
	border-color: transparent;
	color: #fff;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(255,45,126,.35);
}
.vxs-chip--paid {
	background: linear-gradient(135deg, rgba(255,216,77,.10), rgba(255,122,0,.08));
	border-color: rgba(255,200,0,.40);
	color: var(--vx-gold);
	font-weight: 600;
}
.vxs-chip--paid.vxs-chip--unlocked {
	background: var(--vxs-grad-gold);
	color: #1a1410;
}
.vxs-chip--paid.vxs-chip--unlocked .vxs-chip__lock { display: none; }

/* ─────────────────────────────────────────────────────────────────────
   6 · SEARCH INPUT (filter tab)
   ───────────────────────────────────────────────────────────────────── */
.vxs-search {
	padding: 14px var(--vxs-stage-pad) 10px;
}
.vxs-search__field {
	display: flex; align-items: center; gap: 10px;
	padding: 13px 16px; border-radius: var(--vxs-r);
	background: var(--vx-bg-2);
	border: 1.5px solid var(--vx-line);
	transition: border-color .14s var(--vxs-ease), box-shadow .14s var(--vxs-ease);
}
.vxs-search__field:focus-within {
	border-color: var(--vx-pink);
	box-shadow: 0 0 0 4px rgba(255,45,126,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.vxs-search__field svg { width: 17px; height: 17px; flex: none; color: var(--vx-pink); }
.vxs-search__input {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	color: #fff;
	font-size: 16px;          /* prevent iOS zoom */
	font-family: inherit;
	min-width: 0;
}
.vxs-search__input::placeholder { color: var(--vx-text-3); }
.vxs-search__clear {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: rgba(255,255,255,.10);
	border: none; color: #fff;
	cursor: pointer;
}
.vxs-search__clear svg { width: 11px; height: 11px; color: #fff; }

/* ─────────────────────────────────────────────────────────────────────
   7 · LIVE COUNTER STRIP (Hot Now hero)
   ───────────────────────────────────────────────────────────────────── */
.vxs-livestrip {
	display: flex; align-items: center; justify-content: space-between;
	margin: 22px var(--vxs-stage-pad) 20px;
	padding: 18px 24px;
	border-radius: var(--vxs-r-lg);
	background: linear-gradient(135deg, rgba(46,204,113,.10), rgba(22,224,255,.06));
	border: 1px solid rgba(46,204,113,.20);
}
.vxs-livestrip__main { display: flex; align-items: center; gap: 14px; }
.vxs-livestrip__big-dot { position: relative; width: 12px; height: 12px; }
.vxs-livestrip__big-dot::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: var(--vx-green); box-shadow: 0 0 16px var(--vx-green);
	animation: vxsLivePulse 1.6s ease-in-out infinite;
}
.vxs-livestrip__big-dot::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: var(--vx-green);
	animation: vxsRingPulse 1.6s ease-out infinite;
}
.vxs-livestrip__num {
	font-family: var(--vx-font-display);
	font-weight: 700; font-size: 26px;
	color: #fff; letter-spacing: -.01em;
}
.vxs-livestrip__label { font-size: 14px; color: var(--vx-text-2); margin-left: 8px; }
.vxs-livestrip__delta { font-size: 12px; color: var(--vx-text-3); margin-top: 2px; }
.vxs-livestrip__badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: var(--vxs-r-pill);
	background: rgba(46,204,113,.15);
	border: 1px solid rgba(46,204,113,.30);
	font-family: var(--vx-font-display);
	font-size: 10px; letter-spacing: .15em; color: var(--vx-green);
	font-weight: 700;
}
.vxs-livestrip__badge-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--vx-green);
	animation: vxsLivePulse 1.2s ease-in-out infinite;
}
@media (max-width: 720px) {
	.vxs-livestrip { margin: 14px 16px; padding: 14px 16px; }
	.vxs-livestrip__num { font-size: 22px; }
}

/* ─────────────────────────────────────────────────────────────────────
   8 · SECTION HEADER (title + counter + view-all)
   ───────────────────────────────────────────────────────────────────── */
.vxs-section { padding: 0 var(--vxs-stage-pad) 26px; }
@media (max-width: 720px) { .vxs-section { padding: 0 16px 20px; } }

.vxs-section__head {
	display: flex; align-items: end; justify-content: space-between;
	margin-bottom: 14px;
}
.vxs-section__title {
	display: flex; align-items: center; gap: 10px;
}
.vxs-section__title svg { width: 20px; height: 20px; flex: none; }
.vxs-section__title h3 {
	font-family: var(--vx-font-display);
	font-weight: 700; font-size: 21px; letter-spacing: -.01em;
	color: #fff;
	margin: 0;
}
.vxs-section__sub {
	font-size: 12px; color: var(--vx-text-3);
	margin-top: 4px; padding-left: 30px;
}
.vxs-section__counter {
	font-family: var(--vx-font-display);
	font-size: 10px; padding: 3px 8px; border-radius: 4px;
	font-weight: 700; letter-spacing: .08em;
}
.vxs-section__counter--cyan { background: rgba(22,224,255,.18); color: var(--vx-cyan); }
.vxs-section__counter--gold { background: rgba(255,200,0,.16); color: var(--vx-gold); }

.vxs-section__more {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 7px 11px; border-radius: var(--vxs-r-pill);
	background: var(--vx-glass);
	border: 1px solid var(--vx-line);
	color: var(--vx-text-2);
	font-size: 12px;
	font-family: inherit;
	cursor: pointer;
	transition: background .14s var(--vxs-ease), color .14s var(--vxs-ease);
}
.vxs-section__more:hover { background: var(--vx-glass-2); color: var(--vx-text); }
.vxs-section__more svg   { width: 11px; height: 11px; }
@media (max-width: 720px) {
	.vxs-section__title h3 { font-size: 17px; }
}

/* LIVE chip (small, for section heads) */
.vxs-section__live {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 8px; border-radius: var(--vxs-r-pill);
	background: rgba(46,204,113,.14);
	border: 1px solid rgba(46,204,113,.30);
	font-family: var(--vx-font-display);
	font-size: 9px; letter-spacing: .12em;
	color: var(--vx-green); font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────
   9 · CARD GRID (default 4-col desktop, 2-col mobile)
   ───────────────────────────────────────────────────────────────────── */
.vxs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--vxs-gap);
}
.vxs-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
	.vxs-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
	.vxs-grid, .vxs-grid--3 { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ─────────────────────────────────────────────────────────────────────
   10 · CARD (vxs-card)
   ───────────────────────────────────────────────────────────────────── */
.vxs-card {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--vxs-r-lg);
	overflow: hidden;
	background: var(--vx-bg-3);
	border: 1px solid var(--vx-line);
	box-shadow: var(--vx-shadow-card);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform .28s var(--vxs-spring), border-color .22s var(--vxs-ease), box-shadow .22s var(--vxs-ease);
}
.vxs-card:hover {
	transform: translateY(-4px) scale(1.02);
	border-color: rgba(255,45,126,.35);
	box-shadow: var(--vx-shadow-card), 0 0 28px rgba(255,45,126,.20);
}
.vxs-card:active { transform: translateY(-2px) scale(1.00); }
@media (hover: none) {
	.vxs-card:hover  { transform: none; }
	.vxs-card:active { transform: scale(.98); border-color: rgba(22,224,255,.35); }
}

/* Card variants */
.vxs-card--couple {
	border-color: rgba(168,85,247,.30);
	box-shadow: var(--vx-shadow-card), 0 0 0 1px rgba(168,85,247,.10);
}
.vxs-card--couple:hover { border-color: rgba(168,85,247,.55); box-shadow: var(--vx-shadow-card), 0 0 28px rgba(168,85,247,.22); }
.vxs-card--couple.vxs-card--wide { aspect-ratio: 4 / 3; }

.vxs-card--creator { border-color: rgba(255,200,0,.35); }
.vxs-card--creator:hover { border-color: rgba(255,200,0,.55); box-shadow: var(--vx-shadow-card), 0 0 28px rgba(255,200,0,.20); }

/* Photo bg */
.vxs-card__photo {
	position: absolute; inset: 0;
	background: var(--vx-bg-3);
	background-size: cover;
	background-position: center;
}

/* Scrims */
.vxs-card__scrim-top {
	position: absolute; inset: 0 0 auto 0;
	height: 40%;
	background: linear-gradient(180deg, rgba(0,0,0,.45), transparent);
}
.vxs-card__scrim-bot {
	position: absolute; inset: auto 0 0 0;
	height: 60%;
	background: linear-gradient(0deg, rgba(10,6,18,.94) 0%, rgba(10,6,18,.55) 50%, transparent 100%);
}

/* Boost chip top-left */
.vxs-card__boost {
	position: absolute; top: 10px; left: 10px;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 9px; border-radius: var(--vxs-r-pill);
	background: var(--vxs-grad-gold);
	color: #1a1410;
	font-family: var(--vx-font-display);
	font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(255,150,0,.40);
}
.vxs-card__boost svg { width: 8px; height: 8px; }

/* NEW chip */
.vxs-card__new {
	position: absolute; top: 10px; left: 10px;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 9px; border-radius: var(--vxs-r-pill);
	background: linear-gradient(135deg, #16e0ff, #a855f7);
	color: #fff;
	font-family: var(--vx-font-display);
	font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(22,224,255,.40);
}
.vxs-card__new svg { width: 8px; height: 8px; }

/* Match% chip top-right */
.vxs-card__match {
	position: absolute; top: 10px; right: 10px;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 8px; border-radius: var(--vxs-r-pill);
	background: rgba(10,6,18,.65);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,45,126,.50);
	font-family: var(--vx-font-display);
	font-size: 11px; font-weight: 700; color: #fff;
}
.vxs-card__match-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--vx-pink); }
.vxs-card__match[data-band="high"]   { border-color: rgba(255,45,126,.50);  }
.vxs-card__match[data-band="high"]   .vxs-card__match-dot { background: var(--vx-pink); }
.vxs-card__match[data-band="mid"]    { border-color: rgba(168,85,247,.50); }
.vxs-card__match[data-band="mid"]    .vxs-card__match-dot { background: var(--vx-purple); }
.vxs-card__match[data-band="ok"]     { border-color: rgba(22,224,255,.50); }
.vxs-card__match[data-band="ok"]     .vxs-card__match-dot { background: var(--vx-cyan); }
.vxs-card__match[data-band="low"]    { border-color: rgba(255,216,77,.50); }
.vxs-card__match[data-band="low"]    .vxs-card__match-dot { background: var(--vx-gold); }

/* Online dot (under match%) */
.vxs-card__online {
	position: absolute; top: 38px; right: 10px;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 7px 3px 5px; border-radius: var(--vxs-r-pill);
	background: rgba(10,6,18,.65);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(46,204,113,.45);
	font-size: 9.5px; font-weight: 600; color: #fff;
}
.vxs-card__online-dot {
	position: relative; width: 6px; height: 6px;
	border-radius: 50%; background: var(--vx-green);
	box-shadow: 0 0 6px var(--vx-green);
}

/* Verified mark */
.vxs-card__verified {
	position: absolute;
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: rgba(22,224,255,.20);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(22,224,255,.45);
	color: var(--vx-cyan);
}
.vxs-card__verified svg { width: 11px; height: 11px; }

/* Bottom info */
.vxs-card__info {
	position: absolute; left: 13px; right: 13px; bottom: 11px;
}
.vxs-card__name {
	font-family: var(--vx-font-display);
	font-weight: 700; font-size: 17px;
	color: #fff; letter-spacing: -.005em;
}
.vxs-card__age { font-size: 13px; color: var(--vx-text-2); margin-left: 4px; }
.vxs-card__meta {
	display: flex; align-items: center; gap: 7px;
	font-size: 11px; color: var(--vx-text-3);
	margin-top: 3px;
}
.vxs-card__meta .sep { opacity: .5; }
.vxs-card__tag {
	display: inline-flex; align-items: center; gap: 3px;
	margin-top: 7px;
	padding: 3px 7px; border-radius: var(--vxs-r-pill);
	font-size: 10px; font-weight: 600;
	background: rgba(255,45,126,.18);
	color: #ff6ad5;
}
.vxs-card__tag-dot {
	width: 4px; height: 4px; border-radius: 50%;
	background: currentColor;
}
.vxs-card__tag[data-tone="green"] { background: rgba(46,204,113,.18); color: var(--vx-green); }
.vxs-card__tag[data-tone="cyan"]  { background: rgba(22,224,255,.16); color: var(--vx-cyan); }
.vxs-card__tag[data-tone="purple"]{ background: rgba(168,85,247,.20); color: #c896ff; }
.vxs-card__tag[data-tone="gold"]  { background: rgba(255,216,77,.14); color: var(--vx-gold); }

@media (max-width: 720px) {
	.vxs-card__name  { font-size: 14px; }
	.vxs-card__age   { font-size: 11.5px; }
	.vxs-card__meta  { font-size: 10px; gap: 4px; }
	.vxs-card__tag   { font-size: 9.5px; padding: 3px 6px; }
	.vxs-card__info  { left: 10px; right: 10px; bottom: 9px; }
}

/* Kind chip (Жінка / Чоловік / Пара / Creator on card) */
.vxs-card__kind {
	display: inline-flex; align-items: center; gap: 4px;
	margin-top: 8px;
	padding: 3px 8px; border-radius: var(--vxs-r-pill);
	font-size: 10px; font-weight: 600;
	background: rgba(168,85,247,.18); color: #c896ff;
	border: 1px solid rgba(168,85,247,.30);
}
.vxs-card__kind svg { width: 10px; height: 10px; }
.vxs-card__kind[data-kind="women"] { background: rgba(255,45,126,.18); color: #ff6ad5; border-color: rgba(255,45,126,.30); }
.vxs-card__kind[data-kind="men"]   { background: rgba(22,224,255,.16); color: var(--vx-cyan); border-color: rgba(22,224,255,.30); }
.vxs-card__kind[data-kind="creator"]{ background: rgba(255,200,0,.16); color: var(--vx-gold); border-color: rgba(255,200,0,.30); }

/* ─────────────────────────────────────────────────────────────────────
   11 · HOOK (Premium emotional teaser — "12 людям ти сподобався")
   ───────────────────────────────────────────────────────────────────── */
.vxs-hook {
	position: relative;
	margin: 0 var(--vxs-stage-pad) 26px;
	padding: 22px 24px;
	border-radius: var(--vxs-r-lg);
	background: linear-gradient(135deg, rgba(255,45,126,.14), rgba(168,85,247,.12));
	border: 1px solid rgba(255,200,0,.25);
	backdrop-filter: blur(20px);
	overflow: hidden;
}
.vxs-hook::before, .vxs-hook::after {
	content: ""; position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.vxs-hook::before {
	top: -30px; right: 60px;
	width: 160px; height: 160px;
	background: radial-gradient(circle, rgba(255,45,126,.30), transparent 65%);
	filter: blur(12px);
}
.vxs-hook::after {
	bottom: -40px; left: 30%;
	width: 200px; height: 120px;
	background: radial-gradient(ellipse, rgba(255,216,77,.20), transparent 70%);
	filter: blur(10px);
}
.vxs-hook__inner {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: 32px;
}
.vxs-hook__avs { display: flex; align-items: center; gap: 6px; flex: none; }
.vxs-hook__av {
	width: 58px; height: 58px; border-radius: 50%;
	filter: blur(4.5px) saturate(1.3);
	border: 2px solid rgba(255,255,255,.10);
	margin-left: -12px;
	background-size: cover; background-position: center;
}
.vxs-hook__av:first-child { margin-left: 0; }
.vxs-hook__heart {
	position: relative;
	width: 34px; height: 34px; border-radius: 50%;
	background: linear-gradient(135deg, #ff2d7e, #ff6ad5);
	display: flex; align-items: center; justify-content: center;
	margin-left: -6px;
	box-shadow: 0 0 18px rgba(255,45,126,.6);
	border: 2px solid var(--vx-bg);
}
.vxs-hook__heart svg { width: 17px; height: 17px; color: #fff; }
.vxs-hook__copy { flex: 1; }
.vxs-hook__eyebrow {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--vx-font-display);
	font-size: 10px; letter-spacing: .18em;
	color: var(--vx-gold); text-transform: uppercase;
	margin-bottom: 6px;
}
.vxs-hook__eyebrow svg { width: 11px; height: 11px; }
.vxs-hook__title {
	font-family: var(--vx-font-display);
	font-weight: 700; font-size: 30px; line-height: 1.1;
	color: #fff; letter-spacing: -.02em;
}
.vxs-hook__title-em {
	background: linear-gradient(135deg, #ff2d7e, #ffc800);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 800;
}
.vxs-hook__desc { font-size: 14px; color: var(--vx-text-2); margin-top: 6px; }

@media (max-width: 720px) {
	.vxs-hook         { padding: 14px 16px; margin: 0 16px 16px; border-radius: var(--vxs-r); }
	.vxs-hook__inner  { gap: 12px; }
	.vxs-hook__title  { font-size: 16px; }
	.vxs-hook__desc   { display: none; }
	.vxs-hook__av     { width: 34px; height: 34px; filter: blur(3px) saturate(1.3); }
	.vxs-hook__heart  { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   12 · BUTTONS (primary gold / primary gradient / glass)
   ───────────────────────────────────────────────────────────────────── */
.vxs-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 9px;
	padding: 14px 22px; border-radius: var(--vxs-r-pill);
	border: none;
	font-family: var(--vx-font-display);
	font-size: 14px; font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: transform .14s var(--vxs-ease), box-shadow .22s var(--vxs-ease), background .14s var(--vxs-ease);
}
.vxs-btn:active { transform: scale(.97); }
.vxs-btn svg    { width: 15px; height: 15px; flex: none; }

.vxs-btn--gold {
	background: var(--vxs-grad-gold);
	color: #1a1410;
	font-weight: 700;
	box-shadow: 0 12px 28px rgba(255,150,0,.40);
}
.vxs-btn--gold:hover { box-shadow: 0 14px 32px rgba(255,150,0,.50); }

.vxs-btn--grad {
	background: var(--vx-grad);
	box-shadow: 0 8px 24px rgba(255,45,126,.25);
}
.vxs-btn--grad:hover { box-shadow: var(--vx-glow-pink), 0 10px 28px rgba(255,45,126,.35); }

.vxs-btn--glass {
	background: var(--vx-glass-2);
	border: 1px solid var(--vx-line);
	font-weight: 500;
}
.vxs-btn--glass:hover { background: var(--vx-glass-3); }

.vxs-btn--block { width: 100%; padding: 16px; font-size: 15px; }

/* ─────────────────────────────────────────────────────────────────────
   13 · EVENT TILE
   ───────────────────────────────────────────────────────────────────── */
.vxs-event {
	display: flex; align-items: center; gap: 14px;
	padding: 16px 18px; border-radius: var(--vxs-r-lg);
	background: linear-gradient(135deg, rgba(255,200,0,.06), rgba(168,85,247,.06));
	border: 1px solid var(--vx-line);
	cursor: pointer;
	transition: border-color .14s var(--vxs-ease), background .14s var(--vxs-ease);
}
.vxs-event:hover {
	border-color: rgba(255,200,0,.30);
	background: linear-gradient(135deg, rgba(255,200,0,.10), rgba(168,85,247,.08));
}
.vxs-event__date {
	flex: none; width: 54px; padding: 8px 0;
	border-radius: 12px;
	text-align: center;
	border: 1px solid rgba(255,45,126,.35);
	background: rgba(255,45,126,.16);
}
.vxs-event__date[data-tone="purple"] { background: rgba(168,85,247,.16); border-color: rgba(168,85,247,.35); }
.vxs-event__date[data-tone="gold"]   { background: rgba(255,200,0,.14);  border-color: rgba(255,200,0,.35); }
.vxs-event__month {
	font-family: var(--vx-font-display);
	font-size: 10px; font-weight: 700; letter-spacing: .08em;
	color: var(--vx-pink);
}
.vxs-event__date[data-tone="purple"] .vxs-event__month { color: #c896ff; }
.vxs-event__date[data-tone="gold"]   .vxs-event__month { color: var(--vx-gold); }
.vxs-event__day {
	font-family: var(--vx-font-display);
	font-size: 22px; font-weight: 700; line-height: 1.1;
	color: #fff;
}
.vxs-event__body { flex: 1; min-width: 0; }
.vxs-event__city {
	font-family: var(--vx-font-display);
	font-size: 15px; font-weight: 600; color: #fff;
}
.vxs-event__title { font-size: 11.5px; color: var(--vx-text-2); margin-top: 2px; }
.vxs-event__meta {
	display: flex; align-items: center; gap: 4px;
	margin-top: 6px;
	font-size: 11px; color: var(--vx-text-3);
}
.vxs-event__meta svg { width: 10px; height: 10px; }

/* ─────────────────────────────────────────────────────────────────────
   14 · UPSELL SHEET (bottom on mobile, modal on desktop)
   ───────────────────────────────────────────────────────────────────── */
.vxs-sheet {
	position: fixed;
	inset: 0;
	z-index: 999995;
	display: flex; align-items: flex-end; justify-content: center;
	background: rgba(10,6,18,.70);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s var(--vxs-ease), visibility 0s linear .22s;
}
.vxs-sheet[data-open="true"] {
	opacity: 1; visibility: visible;
	transition: opacity .22s var(--vxs-ease), visibility 0s linear 0s;
}
.vxs-sheet[data-open="true"] .vxs-sheet__panel { transform: translateY(0); }
.vxs-sheet__panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	background: linear-gradient(180deg, rgba(26,18,38,.97), rgba(18,11,28,.98));
	backdrop-filter: blur(30px);
	border: 1px solid var(--vx-line);
	border-bottom: none;
	border-radius: 28px 28px 0 0;
	box-shadow: 0 -20px 60px -10px rgba(0,0,0,.6);
	padding-bottom: calc(34px + env(safe-area-inset-bottom, 0));
	transform: translateY(100%);
	transition: transform .32s var(--vxs-spring);
}
@media (min-width: 720px) {
	.vxs-sheet { align-items: center; }
	.vxs-sheet__panel {
		max-width: 460px;
		border-radius: 28px;
		border-bottom: 1px solid var(--vx-line);
		padding-bottom: 28px;
		transform: scale(.92);
	}
	.vxs-sheet[data-open="true"] .vxs-sheet__panel { transform: scale(1); }
}
.vxs-sheet__panel::before {
	content: ""; position: absolute;
	top: 0; left: 24px; right: 24px; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,45,126,.5), transparent);
}
.vxs-sheet__handle {
	display: flex; justify-content: center;
	padding: 10px 0 4px;
}
.vxs-sheet__handle-bar {
	width: 38px; height: 4px; border-radius: 2px;
	background: rgba(255,255,255,.25);
}
.vxs-sheet__close {
	position: absolute; top: 18px; right: 18px;
}
.vxs-sheet__art {
	position: relative;
	height: 180px;
	margin-top: 6px;
}
.vxs-sheet__art-glow {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 240px; height: 160px;
	background: radial-gradient(ellipse, rgba(255,45,126,.30), transparent 60%);
	filter: blur(14px);
	pointer-events: none;
}
.vxs-sheet__art-ring {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid rgba(255,45,126,.35);
	animation: vxsRingPulse 2.4s ease-out infinite;
}
.vxs-sheet__art-ring--2 {
	animation-delay: .5s;
	border-color: rgba(255,45,126,.45);
}
.vxs-sheet__art-orb {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 88px; height: 88px; border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #ff6ad5, #ff2d7e 60%, #a855f7 100%);
	box-shadow: 0 0 48px rgba(255,45,126,.65), inset 0 -8px 20px rgba(0,0,0,.25);
	display: flex; align-items: center; justify-content: center;
	z-index: 2;
}
.vxs-sheet__art-orb svg { width: 36px; height: 36px; color: #fff; }
.vxs-sheet__art-av {
	position: absolute;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.08);
	filter: blur(3.5px);
}
.vxs-sheet__eyebrow {
	text-align: center;
	padding: 10px 32px 0;
}
.vxs-sheet__eyebrow-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 11px; border-radius: var(--vxs-r-pill);
	background: rgba(255,216,77,.14);
	border: 1px solid rgba(255,200,0,.35);
	font-family: var(--vx-font-display);
	font-size: 10px; letter-spacing: .15em; color: var(--vx-gold);
	font-weight: 700;
}
.vxs-sheet__eyebrow-pill svg { width: 10px; height: 10px; }
.vxs-sheet__title {
	text-align: center;
	padding: 14px 28px 4px;
	font-family: var(--vx-font-display);
	font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -.02em;
	color: #fff;
	margin: 0;
}
.vxs-sheet__title-em {
	background: linear-gradient(135deg, #ff2d7e, #ffc800);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.vxs-sheet__desc {
	text-align: center;
	padding: 0 36px 18px;
	font-size: 14px; line-height: 1.5;
	color: var(--vx-text-2);
	margin: 8px 0 0;
}
.vxs-sheet__stats {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 14px 22px 22px;
}
.vxs-sheet__stat {
	padding: 11px; border-radius: 14px;
	text-align: center;
	background: linear-gradient(135deg, rgba(255,45,126,.12), rgba(168,85,247,.08));
	border: 1px solid rgba(255,45,126,.25);
}
.vxs-sheet__stat[data-tone="cyan"] { background: linear-gradient(135deg, rgba(22,224,255,.10), rgba(168,85,247,.08));  border-color: rgba(22,224,255,.25); }
.vxs-sheet__stat[data-tone="gold"] { background: linear-gradient(135deg, rgba(255,216,77,.10), rgba(255,122,0,.08));   border-color: rgba(255,200,0,.30); }
.vxs-sheet__stat-n {
	font-family: var(--vx-font-display);
	font-weight: 700; font-size: 22px;
	color: #fff; line-height: 1;
}
.vxs-sheet__stat-l { font-size: 10.5px; color: var(--vx-text-3); margin-top: 5px; }
.vxs-sheet__ctas { padding: 0 20px 14px; }
.vxs-sheet__fine {
	text-align: center; font-size: 11px;
	color: var(--vx-text-3); margin: 8px 0 0;
}
.vxs-sheet__row {
	display: flex; gap: 8px;
	padding: 10px 20px 14px;
}
.vxs-sheet__row .vxs-btn { flex: 1; }

/* ─────────────────────────────────────────────────────────────────────
   15 · TOAST
   ───────────────────────────────────────────────────────────────────── */
.vxs-toast {
	position: fixed;
	left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0));
	transform: translate(-50%, 20px);
	z-index: 999998;
	display: flex; align-items: center; gap: 10px;
	padding: 12px 18px;
	border-radius: var(--vxs-r-pill);
	background: rgba(26,18,38,.96);
	backdrop-filter: blur(16px);
	border: 1px solid var(--vx-line);
	box-shadow: 0 12px 40px rgba(0,0,0,.5);
	color: #fff; font-size: 14px;
	opacity: 0; pointer-events: none;
	transition: transform .28s var(--vxs-spring), opacity .22s var(--vxs-ease);
	max-width: calc(100vw - 32px);
}
.vxs-toast[data-open="true"] {
	opacity: 1; transform: translate(-50%, 0);
	pointer-events: auto;
}
.vxs-toast svg     { width: 16px; height: 16px; flex: none; }
.vxs-toast--ok     { border-color: rgba(46,204,113,.40);  }
.vxs-toast--ok svg { color: var(--vx-green); }
.vxs-toast--warn   { border-color: rgba(255,216,77,.40); }
.vxs-toast--warn svg { color: var(--vx-gold); }
.vxs-toast--err    { border-color: rgba(255,77,109,.40); }
.vxs-toast--err svg { color: #ff4d6d; }

/* ─────────────────────────────────────────────────────────────────────
   16 · EMPTY / LOADING / ERROR STATES
   ───────────────────────────────────────────────────────────────────── */
.vxs-empty {
	display: flex; flex-direction: column; align-items: center;
	padding: 60px 32px;
	text-align: center;
}
.vxs-empty__art {
	width: 96px; height: 96px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, rgba(255,45,126,.30), transparent 70%);
	filter: blur(4px);
	margin-bottom: 8px;
	position: relative;
}
.vxs-empty__art::after {
	content: ""; position: absolute; inset: 28px;
	border-radius: 50%;
	background: var(--vx-glass-2);
	border: 1px solid var(--vx-line);
}
.vxs-empty__title {
	font-family: var(--vx-font-display);
	font-weight: 700; font-size: 20px;
	color: #fff; margin: 12px 0 6px;
}
.vxs-empty__desc {
	font-size: 14px; color: var(--vx-text-2);
	margin: 0 0 20px;
	max-width: 360px;
}
.vxs-empty__ctas { display: flex; gap: 8px; }

/* Skeleton */
.vxs-skeleton {
	position: relative;
	aspect-ratio: 3/4;
	border-radius: var(--vxs-r-lg);
	overflow: hidden;
	background: var(--vx-bg-3);
	border: 1px solid var(--vx-line);
}
.vxs-skeleton::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(255,255,255,.06) 50%,
		transparent 100%
	);
	background-size: 200% 100%;
	animation: vxsShimmer 1.4s linear infinite;
}

/* Error banner */
.vxs-error {
	display: flex; align-items: center; gap: 12px;
	margin: 16px var(--vxs-stage-pad);
	padding: 14px 18px; border-radius: var(--vxs-r);
	background: rgba(255,77,109,.10);
	border: 1px solid rgba(255,77,109,.30);
	color: #ff8fa3;
}
.vxs-error svg { width: 18px; height: 18px; flex: none; color: #ff4d6d; }
.vxs-error__msg { flex: 1; font-size: 14px; }
.vxs-error__retry {
	padding: 6px 12px; border-radius: var(--vxs-r-pill);
	background: var(--vx-glass);
	border: 1px solid var(--vx-line);
	color: #fff;
	font-family: inherit; font-size: 12px;
	cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────
   17 · ANIMATIONS
   ───────────────────────────────────────────────────────────────────── */
@keyframes vxsLivePulse {
	0%, 100% { opacity: 1;   }
	50%      { opacity: .35; }
}
@keyframes vxsRingPulse {
	0%   { transform: scale(1);    opacity: .9; }
	100% { transform: scale(1.85); opacity: 0;  }
}
@keyframes vxsShimmer {
	0%   { background-position: -200% 0; }
	100% { background-position:  200% 0; }
}
@keyframes vxsDrift {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(20px, -12px, 0); }
}

/* Stagger fade-in for opened tabs/sections */
.vxs-stage[data-open="true"] .vxs-tabs       { animation: vxsFadeUp .42s var(--vxs-ease) .12s both; }
.vxs-stage[data-open="true"] .vxs-typepills  { animation: vxsFadeUp .42s var(--vxs-ease) .18s both; }
.vxs-stage[data-open="true"] .vxs-chiprow    { animation: vxsFadeUp .42s var(--vxs-ease) .24s both; }
.vxs-stage[data-open="true"] .vxs-section    { animation: vxsFadeUp .42s var(--vxs-ease) .30s both; }
.vxs-stage[data-open="true"] .vxs-section:nth-of-type(2) { animation-delay: .36s; }
.vxs-stage[data-open="true"] .vxs-section:nth-of-type(3) { animation-delay: .42s; }
.vxs-stage[data-open="true"] .vxs-section:nth-of-type(4) { animation-delay: .48s; }
.vxs-stage[data-open="true"] .vxs-section:nth-of-type(5) { animation-delay: .54s; }

@keyframes vxsFadeUp {
	from { opacity: 0; transform: translate3d(0, 12px, 0); }
	to   { opacity: 1; transform: translate3d(0,  0, 0);   }
}

/* Respect motion preference */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────
   18 · SAFE-AREA & STICKY FOOTER spacing
   ───────────────────────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
	.vxs-stage__scroll {
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
}

/* End of vibex-search.css */