/* Vikingo Hírsáv: keskeny Ink sáv a fejléc fölött és a hozzá tartozó
   dialógus. A kit gomb- és címsorstílusait minden állapotban lenullázzuk
   (dupla osztály-erősség), szín csak a tokenekből. Gradiens és árnyék
   nincs; csökkentett mozgásnál nincs átmenet. */

.vk-vs-hirsav {
	--vk-hs-ink: var(--vk-ink, #3E2E45);
	--vk-hs-paper: var(--vk-paper, #F3EEEB);
	--vk-hs-sand: var(--vk-sand, #DCD0C3);
	--vk-hs-coral: var(--vk-coral, #FF544D);
	--vk-hs-coral-hover: var(--vk-coral-hover, #E83D36);
	--vk-hs-feher: var(--vk-white, #FFFFFF);
	--vk-hs-clash: var(--vk-clash-display, 'Clash Display'), sans-serif;
	--vk-hs-mono: var(--vk-dm-mono, 'DM Mono'), monospace;
	display: block;
}

/* ---- Sáv ---- */

.vk-vs-hirsav .vk-vs-hirsav__sav {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 6px 72px;
	box-sizing: border-box;
	background: var(--vk-hs-ink);
	color: var(--vk-hs-feher);
}

.vk-vs-hirsav .vk-vs-hirsav__nyito,
.vk-vs-hirsav .vk-vs-hirsav__nyito:hover,
.vk-vs-hirsav .vk-vs-hirsav__nyito:focus,
.vk-vs-hirsav .vk-vs-hirsav__nyito:visited {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 16px;
	padding: 6px 0;
	color: var(--vk-hs-feher);
	text-decoration: none;
	font-family: var(--vk-hs-clash);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: center;
}

.vk-vs-hirsav .vk-vs-hirsav__szoveg strong {
	font-weight: 500;
}

.vk-vs-hirsav .vk-vs-hirsav__gomb {
	display: inline-flex;
	align-items: center;
	padding: 3px 14px;
	border: 1px solid var(--vk-hs-feher);
	border-radius: 99px;
	font-family: var(--vk-hs-mono);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
	.vk-vs-hirsav .vk-vs-hirsav__nyito:hover .vk-vs-hirsav__gomb {
		background: var(--vk-hs-feher);
		color: var(--vk-hs-ink);
	}
}

.vk-vs-hirsav .vk-vs-hirsav__nyito:focus-visible,
body .vk-vs-hirsav button.vk-vs-hirsav__bezar:focus-visible {
	outline: 2px solid var(--vk-hs-coral);
	outline-offset: 2px;
	border-radius: 0;
}

body .vk-vs-hirsav button.vk-vs-hirsav__bezar,
body .vk-vs-hirsav button.vk-vs-hirsav__bezar:hover,
body .vk-vs-hirsav button.vk-vs-hirsav__bezar:focus,
body .vk-vs-hirsav button.vk-vs-hirsav__bezar:active {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 50%;
	right: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--vk-hs-feher);
	cursor: pointer;
	transform: translateY(-50%);
}

/* Asztalon a × a fejléc jobb szélével (80 px-es margó) egy vonalban. */
@media (min-width: 1025px) {
	body .vk-vs-hirsav button.vk-vs-hirsav__bezar {
		right: 66px;
	}
}

@media (hover: hover) {
	body .vk-vs-hirsav button.vk-vs-hirsav__bezar:hover {
		background: rgba(255, 255, 255, 0.12);
	}
}

@media (max-width: 767px) {
	.vk-vs-hirsav .vk-vs-hirsav__sav {
		justify-content: flex-start;
		padding: 6px 52px 6px 16px;
	}

	.vk-vs-hirsav .vk-vs-hirsav__nyito,
	.vk-vs-hirsav .vk-vs-hirsav__nyito:hover,
	.vk-vs-hirsav .vk-vs-hirsav__nyito:focus {
		justify-content: flex-start;
		gap: 6px 12px;
		font-size: 14px;
		text-align: left;
	}

	.vk-vs-hirsav .vk-vs-hirsav__gomb {
		padding: 2px 12px;
		font-size: 13px;
	}

	body .vk-vs-hirsav button.vk-vs-hirsav__bezar,
	body .vk-vs-hirsav button.vk-vs-hirsav__bezar:hover,
	body .vk-vs-hirsav button.vk-vs-hirsav__bezar:focus {
		right: 4px;
	}
}

/* ---- Dialógus ---- */

html.vk-hirsav-nyitva {
	overflow: hidden;
}

.vk-vs-hirsav .vk-vs-hirsav-ablak {
	width: min(720px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100dvh - 48px);
	margin: auto;
	padding: 0;
	box-sizing: border-box;
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--vk-hs-feher);
	border: 1px solid var(--vk-hs-sand);
	border-radius: 0;
	box-shadow: none;
	color: var(--vk-hs-ink);
}

.vk-vs-hirsav .vk-vs-hirsav-ablak::backdrop {
	background: rgba(26, 9, 34, 0.72);
}

.vk-vs-hirsav .vk-vs-hirsav-ablak[open] {
	animation: vk-hs-be 0.22s ease-out;
}

.vk-vs-hirsav .vk-vs-hirsav-ablak[open]::backdrop {
	animation: vk-hs-hatter 0.22s ease-out;
}

@keyframes vk-hs-be {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@keyframes vk-hs-hatter {
	from {
		opacity: 0;
	}
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__keret {
	position: relative;
}

body .vk-vs-hirsav button.vk-vs-hirsav-ablak__x,
body .vk-vs-hirsav button.vk-vs-hirsav-ablak__x:hover,
body .vk-vs-hirsav button.vk-vs-hirsav-ablak__x:focus,
body .vk-vs-hirsav button.vk-vs-hirsav-ablak__x:active {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: var(--vk-hs-feher);
	border: 1px solid var(--vk-hs-sand);
	border-radius: 0;
	box-shadow: none;
	color: var(--vk-hs-ink);
	cursor: pointer;
	transform: none;
}

@media (hover: hover) {
	body .vk-vs-hirsav button.vk-vs-hirsav-ablak__x:hover {
		border-color: var(--vk-hs-ink);
	}
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__video {
	position: relative;
	background: var(--vk-hs-paper);
	border-bottom: 1px solid var(--vk-hs-sand);
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 450;
	object-fit: cover;
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__tartalom {
	padding: 36px 48px 40px;
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__kicker {
	margin: 0 0 12px;
	font-family: var(--vk-hs-mono);
	font-size: 14px;
	line-height: 1.4;
	color: var(--vk-hs-coral);
}

.vk-vs-hirsav .vk-vs-hirsav-ablak h2.vk-vs-hirsav-ablak__cim {
	margin: 0 0 20px;
	font-family: var(--vk-hs-clash);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--vk-hs-ink);
	text-wrap: balance;
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__szoveg p {
	margin: 0 0 12px;
	font-family: var(--vk-hs-clash);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--vk-hs-ink);
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__szoveg p:last-child {
	margin-bottom: 0;
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__szoveg strong {
	font-weight: 500;
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__gombok {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
}

/* A dialógus gombjai a főoldali hero gombjainak nyelvén: kitöltött korall
   és körvonalas (Ink keret, korall felirat, hoverre Ink alap). */
.vk-vs-hirsav a.vk-vs-hirsav-ablak__gomb,
.vk-vs-hirsav a.vk-vs-hirsav-ablak__gomb:visited,
.vk-vs-hirsav a.vk-vs-hirsav-ablak__gomb:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 14px 28px;
	box-sizing: border-box;
	background: var(--vk-hs-feher);
	border: 1px solid var(--vk-hs-ink);
	border-radius: 40px;
	color: var(--vk-hs-coral);
	font-family: var(--vk-hs-mono);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vk-vs-hirsav a.vk-vs-hirsav-ablak__gomb--kitoltott,
.vk-vs-hirsav a.vk-vs-hirsav-ablak__gomb--kitoltott:visited,
.vk-vs-hirsav a.vk-vs-hirsav-ablak__gomb--kitoltott:focus {
	background: var(--vk-hs-coral);
	border-color: var(--vk-hs-coral);
	color: var(--vk-hs-feher);
}

@media (hover: hover) {
	.vk-vs-hirsav a.vk-vs-hirsav-ablak__gomb:hover {
		background: var(--vk-hs-ink);
		color: var(--vk-hs-feher);
	}

	.vk-vs-hirsav a.vk-vs-hirsav-ablak__gomb--kitoltott:hover {
		background: var(--vk-hs-coral-hover);
		border-color: var(--vk-hs-coral-hover);
		color: var(--vk-hs-feher);
	}
}

.vk-vs-hirsav a.vk-vs-hirsav-ablak__gomb:focus-visible,
body .vk-vs-hirsav button.vk-vs-hirsav-ablak__x:focus-visible {
	outline: 2px solid var(--vk-hs-coral);
	outline-offset: 3px;
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__uj-lap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__kepdoboz {
	padding: 0 24px;
}

.vk-vs-hirsav .vk-vs-hirsav-ablak__kepdoboz img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* Mobilon a dialógus a teljes képernyő: nincs keret, a tartalom görög. */
@media (max-width: 767px) {
	.vk-vs-hirsav .vk-vs-hirsav-ablak {
		width: 100%;
		height: 100%;
		max-height: 100dvh;
		margin: 0;
		border: 0;
	}

	.vk-vs-hirsav .vk-vs-hirsav-ablak__keret {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.vk-vs-hirsav .vk-vs-hirsav-ablak__kepdoboz {
		margin-top: auto;
	}

	.vk-vs-hirsav .vk-vs-hirsav-ablak__tartalom {
		padding: 28px 24px 32px;
	}

	.vk-vs-hirsav .vk-vs-hirsav-ablak h2.vk-vs-hirsav-ablak__cim {
		font-size: 26px;
	}

	.vk-vs-hirsav a.vk-vs-hirsav-ablak__gomb {
		flex: 1 1 100%;
	}

	.vk-vs-hirsav .vk-vs-hirsav-ablak__kepdoboz {
		padding: 0;
	}

	body .vk-vs-hirsav button.vk-vs-hirsav-ablak__x,
	body .vk-vs-hirsav button.vk-vs-hirsav-ablak__x:hover,
	body .vk-vs-hirsav button.vk-vs-hirsav-ablak__x:focus {
		top: 8px;
		right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vk-vs-hirsav .vk-vs-hirsav-ablak[open],
	.vk-vs-hirsav .vk-vs-hirsav-ablak[open]::backdrop {
		animation: none;
	}

	.vk-vs-hirsav .vk-vs-hirsav__gomb,
	.vk-vs-hirsav a.vk-vs-hirsav-ablak__gomb {
		transition: none;
	}
}