.custom-vu-tickets {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	font-family: var(--font-body, 'Manrope', sans-serif);
	-webkit-font-smoothing: antialiased;
}

/* ── Stage ── */
.vut-stage {
	position: relative;
	display: grid;
	place-items: center;
	gap: 34px;
}

.vut-tabs-heading {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 20px;
    color: rgba(237,231,246,.72);
    text-align: center;
    margin: 0;
    letter-spacing: .02em;
}

/* ── Taby ──────────────────────────────────────────────────────────
   width sa prispôsobuje počtu reálne viditeľných tabov (data-count) —
   predtým bol grid natvrdo na 3 stĺpce, takže pri skrytej karte ostávalo
   vpravo prázdne miesto. Teraz sa šírka aj počet stĺpcov riadi podľa toho,
   koľko kariet je reálne zobrazených. */
.vut-tabs {
	position: relative;
	z-index: 2;
	width: calc(var(--vut-card-maxw, 780px) + 100px);
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 7px;
	border-radius: 16px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	overflow: hidden;
}

.vut-tabs[data-count="1"] {
	grid-template-columns: 1fr;
	width: calc(var(--vut-card-maxw, 780px) / 3 + 40px);
}

.vut-tabs[data-count="2"] {
	grid-template-columns: repeat(2, 1fr);
	width: calc(var(--vut-card-maxw, 780px) / 3 * 2 + 70px);
}

/* ── Glow-slide "thumb" — sklzavý svietiaci podklad za aktívnym tabom.
   Solídne pozadie na [aria-selected="true"] ostáva ako spoľahlivý fallback
   (funguje aj bez JS) — thumb je len animovaný glow navyše, ktorý sa
   posúva presne pod aktívny tab. Pozíciu/šírku počíta script.js. */
.vut-tabs__thumb {
	position: absolute;
	top: 7px;
	bottom: 7px;
	left: 0;
	width: 0;
	border-radius: 11px;
	background: linear-gradient(135deg, #E91E8C 0%, #6B2DB0 100%);
	filter: blur(18px);
	opacity: .7;
	z-index: 0;
	pointer-events: none;
	transition: transform .4s cubic-bezier(.65,0,.35,1), width .4s cubic-bezier(.65,0,.35,1);
	animation: vutThumbPulse 2.4s ease-in-out infinite;
}

@keyframes vutThumbPulse {
	0%, 100% { opacity: .55; }
	50%      { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
	.vut-tabs__thumb { transition: none; animation: none; }
}

.vut-tab {
	position: relative;
	z-index: 1;
	appearance: none;
	border: 0;
	cursor: pointer;
	font-family: var(--font-body, 'Manrope', sans-serif);
	font-weight: 800;
	font-size: 15.5px;
	color: rgba(237,231,246,.72);
	padding: 15px 16px;
	border-radius: 11px;
	background: transparent;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	transition: color .18s, background .18s, box-shadow .18s;
}

.vut-tab__ic {
	width: 18px;
	height: 18px;
	flex: none;
}

.vut-tab__sub {
	font-weight: 500;
	font-size: 12px;
	opacity: .7;
}

.vut-tab:hover {
	color: #fff;
}

.vut-tab[aria-selected="true"] {
	color: #fff !important;
	font-weight: 800;
	background: linear-gradient(135deg, #E91E8C 0%, #6B2DB0 100%);
	box-shadow: 0 16px 34px -14px rgba(233,30,140,.7);
}

.vut-tab[aria-selected="true"] .vut-tab__sub {
	opacity: .85;
}

/* ── Pulzujúci "invite" prstenec na neaktívnom tabe — jemné, opakované
   pozvanie kliknúť a vyskúšať aj druhú možnosť, nech je hneď jasné, že
   ide o živý prepínač medzi dvoma formátmi, nielen popisok. ── */
.vut-tab[aria-selected="false"] {
	animation: vutTabInvite 2.6s ease-in-out infinite;
}

@keyframes vutTabInvite {
	0%, 100% { box-shadow: inset 0 0 0 1px rgba(249,168,37,0); }
	50%      { box-shadow: inset 0 0 0 1.5px rgba(249,168,37,.55); }
}

@media (prefers-reduced-motion: reduce) {
	.vut-tab[aria-selected="false"] { animation: none; }
}

/* ── Pane ── */
.vut-pane {
	position: relative;
	z-index: 1;
	width: var(--vut-card-maxw, 780px);
	max-width: 100%;
	display: grid;
	justify-items: center;
	gap: 18px;
}

.vut-pane--hidden {
	display: none;
}

/* Jemný fade-in pri prepnutí na kartu — CSS animácia sa spustí zakaždým,
   keď prvok prejde z display:none na viditeľné (odobratím --hidden triedy). */
.vut-pane:not(.vut-pane--hidden) {
	animation: vutPaneIn .38s ease;
}

@keyframes vutPaneIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.vut-pane:not(.vut-pane--hidden) { animation: none; }
}

/* Panes wrapper — vždy len "display:contents", nech sú panes priamymi
   potomkami .vut-stage gridu (centrovanie + gap rieši .vut-stage samo). */
.vut-panes--tabs {
	display: contents;
}

/* ── Nadpis sekcie ── */
.vut-head {
	text-align: center;
	width: 100%;
}

.vut-head__kicker {
	display: block;
	font-family: var(--font-brand, 'Patrick Hand', cursive);
	color: var(--vu-gold, #F9A825);
	font-size: 23px;
	line-height: 1.18;
	margin-bottom: 6px;
}

.vut-head__title {
	font-family: var(--font-body, 'Manrope', sans-serif);
	font-weight: 700;
	font-size: 30px;
	color: #fff;
	letter-spacing: -.01em;
	line-height: 1.12;
	margin: 0;
}

/* ── Karta ── */
.vut-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: var(--vut-card-r, 26px);
	overflow: hidden;
	box-shadow: 0 44px 100px -34px rgba(0,0,0,.82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	width: 100%;
	background: var(--vut-card-bg, rgba(255,255,255,.04));
	border: 1px solid var(--vut-card-brd, rgba(255,255,255,.12));
}

.vut-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--vut-accent-h, 5px);
	z-index: 3;
	background: linear-gradient(90deg, var(--vut-accent-from), var(--vut-accent-mid), var(--vut-accent-to));
}

/* ── Ľavý stĺpec ── */
.vut-left {
	padding: 42px 36px 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-right: 1px solid rgba(255,255,255,.12);
}

.vut-logo {
	display: block;
	width: 188px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 22px;
}

.vut-eyebrow {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}

.vut-eyebrow span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: linear-gradient(135deg, var(--vut-ey-from, #F9A825), var(--vut-ey-to, #E91E8C));
	color: var(--vut-ey-color, #1a0b2e);
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

.vut-title {
	text-align: center;
	font-weight: 700;
	font-size: var(--vut-title-fs, 25px);
	line-height: 1.2;
	color: var(--vut-title-color, #fff);
	margin: 0 0 10px;
	letter-spacing: -.01em;
}

.vut-sub {
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--vut-sub-color, rgba(237,231,246,.72));
	margin-bottom: 24px;
}

.vut-sub b {
	color: var(--vut-dates-color, #F9A825);
	font-weight: 700;
	display: block;
	margin-bottom: 4px;
}

/* Cena */
.vut-price-block {
	text-align: center;
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.12);
	width: 100%;
}

.vut-price-amt {
	font-size: var(--vut-price-fs, 48px);
	line-height: 1;
	letter-spacing: -.02em;
}

.vut-price-amt b {
	font-weight: 700;
	background: linear-gradient(135deg, var(--vut-price-from, #fff) 0%, var(--vut-price-to, #F9A825) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.vut-price-note {
	display: block;
	font-size: 12.5px;
	color: var(--vut-price-note-color, rgba(237,231,246,.7));
	margin-top: 8px;
	line-height: 1.4;
}

.vut-cta {
	display: block;
	width: 100%;
	margin-top: 18px;
	background: linear-gradient(135deg, var(--vut-cta-from, #E91E8C) 0%, var(--vut-cta-to, #6B2DB0) 100%);
	color: var(--vut-cta-color, #fff) !important;
	text-decoration: none;
	text-align: center;
	font-weight: 700;
	font-size: var(--vut-cta-fs, 16px);
	letter-spacing: .01em;
	padding: 15px 20px;
	border-radius: var(--vut-cta-r, 14px);
	box-shadow: 0 18px 40px -14px rgba(233,30,140,.6);
	transition: transform .15s, box-shadow .15s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vut-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 24px 48px -14px rgba(233,30,140,.78);
	color: var(--vut-cta-color, #fff) !important;
}

/* ── Pravý stĺpec ── */
.vut-right {
	padding: 44px 38px 38px;
	background: var(--vut-right-bg, rgba(255,255,255,.03));
	display: flex;
	flex-direction: column;
}

/* Online karta — pravý stĺpec má live badge hore, treba viac priestoru */
.vut-card--online .vut-right {
	padding-top: 56px;
}

.vut-incl-h {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--vut-incl-h-color, #F9A825);
	margin: 0 0 22px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.vut-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vut-list li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--vut-list-color, rgba(255,255,255,.92));
}

.vut-list li svg {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 1px;
}

.vut-note {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--vut-note-color, rgba(237,231,246,.72));
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.10);
}

.vut-note b {
	color: var(--vut-note-bold-color, #F9A825);
	font-weight: 700;
}

.vut-note a {
	color: var(--vut-note-link-color, #E91E8C);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(233,30,140,.5);
}

.vut-note a:hover {
	border-bottom-color: currentColor;
}

/* ── Online karta — live badge ── */
.vut-live {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(233,30,140,.16);
	border: 1px solid rgba(233,30,140,.55);
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	backdrop-filter: blur(4px);
	white-space: nowrap;
}

.vut-live i {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #E91E8C;
	animation: vutPulse 1.8s infinite;
}

@keyframes vutPulse {
	0%   { box-shadow: 0 0 0 0 rgba(233,30,140,.7); }
	70%  { box-shadow: 0 0 0 8px rgba(233,30,140,0); }
	100% { box-shadow: 0 0 0 0 rgba(233,30,140,0); }
}

@media (prefers-reduced-motion: reduce) {
	.vut-live i { animation: none; }
}

/* ── Hybrid karta — badge ── */
.vut-hybrid-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: linear-gradient(135deg, #F9A825 0%, #E91E8C 100%);
	color: #1a0b2e;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Arrange — text namiesto ceny na hybridnej karte */
.vut-arrange {
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: #fff;
	margin-bottom: 4px;
}

/* ── Rozpis ceny (receipt) — online karta ── */
.vut-receipt {
	background: rgba(10,10,46,.45);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 14px;
	padding: 17px 19px 6px;
	margin-bottom: 22px;
}

.vut-receipt__h {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #F9A825;
	margin: 0 0 6px;
}

.vut-receipt__row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px dashed rgba(255,255,255,.12);
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255,255,255,.88);
}

.vut-receipt__row small {
	display: block;
	font-size: 11.5px;
	font-weight: 500;
	color: rgba(237,231,246,.6);
	margin-top: 2px;
}

.vut-receipt__sum {
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
}

.vut-receipt__row--total {
	border-bottom: 0;
	padding: 12px 0 12px;
	font-weight: 800;
	color: #fff;
}

.vut-receipt__row--total .vut-receipt__sum {
	font-size: 19px;
	background: linear-gradient(135deg, #fff, #F9A825);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ── Kroky (steps) — hybrid karta "Ako to funguje" ── */
.vut-steps {
	list-style: none;
	counter-reset: vutstep;
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0 0 24px;
	padding: 0;
}

.vut-steps li {
	counter-increment: vutstep;
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255,255,255,.9);
}

.vut-steps li::before {
	content: counter(vutstep);
	width: 22px;
	height: 22px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(249,168,37,.14);
	border: 1.5px solid #F9A825;
	color: #F9A825;
	font-size: 11px;
	font-weight: 800;
	margin-top: 1px;
}

.vut-steps li b {
	color: #F9A825;
	font-weight: 800;
}

/* Online list — oddelená od receiptu */
.vut-list--online {
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,.10);
}

.vut-list--online li {
	font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 780px) {
	.vut-tabs,
	.vut-tabs[data-count="1"],
	.vut-tabs[data-count="2"] {
		width: 100%;
	}
	.vut-pane {
		width: 100%;
	}
}

@media (max-width: 680px) {
	.vut-card {
		grid-template-columns: 1fr;
	}
	.vut-left {
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,.12);
		padding: 32px 24px 28px;
	}
	.vut-right {
		padding: 28px 24px 28px;
	}
	.vut-card--online .vut-right {
		padding-top: 28px;
	}
	.vut-price-block {
		margin-top: 24px;
	}
	.vut-live,
	.vut-hybrid-badge {
		position: static;
		display: inline-flex;
		align-self: center;
		margin-bottom: 16px;
		margin-top: 8px;
	}
	.vut-logo {
		width: 150px;
		margin: 0 auto 18px;
	}
	.vut-head__title {
		font-size: 24px;
	}
	.vut-head__kicker {
		font-size: 19px;
	}
}

@media (max-width: 560px) {
	.vut-tab {
		flex-direction: column;
		gap: 3px;
		font-size: 13px;
		padding: 10px 8px;
	}
	.vut-tab__sub {
		display: none;
	}
	.vut-head__kicker,
	.vut-head__title {
		white-space: normal;
	}
	.vut-left,
	.vut-right {
		padding: 24px 18px 22px;
	}
	.vut-title {
		font-size: 20px;
	}
	.vut-steps li {
		font-size: 13px;
	}
	.vut-list li {
		font-size: 13.5px;
	}
}