/* Vikingo Bejelentő sáv: keskeny sáv a fejléc tetején. A "régi → új"
   szópár betöltéskor cserélődik (a régit korall vonal húzza át, az új
   alulról csúszik be), utána nyugalomban áll. Minden szabály a gyökér-
   osztállyal prefixelve és explicit gomb-resettel, mert a kit minden
   <button>-t korall pillre fest. Csökkentett mozgásnál a végállapot áll. */

/* A widget-burkoló a konténer teljes szélességét kapja: flex-oszlopban a
   tartalom szélességére zsugorodna, és a sáv nem futna ki a szélekig. */
.vk-vhp-bejelento-doboz {
	display: block;
	width: 100%;
}

.vk-vhp-bejelento {
	--vkvhp-bej-hatter: var(--vk-ink, #3E2E45);
	--vkvhp-bej-szoveg: #FFFFFF;
	--vkvhp-bej-halvany: rgba(255, 255, 255, 0.62);
	--vkvhp-bej-kiemeles: var(--vk-coral, #FF544D);
	--vkvhp-bej-vonal: rgba(255, 255, 255, 0.14);
	--vkvhp-bej-cim-font: var(--vk-clash-display, 'Clash Display', system-ui, sans-serif);
	--vkvhp-bej-mono-font: var(--vk-dm-mono, 'DM Mono', ui-monospace, monospace);
	position: relative;
	box-sizing: border-box;
	width: 100%;
	background: var(--vkvhp-bej-hatter);
	color: var(--vkvhp-bej-szoveg);
	font-size: 14px;
	line-height: 1.4;
}

.vk-vhp-bejelento--korall {
	--vkvhp-bej-hatter: var(--vk-coral, #FF544D);
	--vkvhp-bej-halvany: rgba(255, 255, 255, 0.7);
	--vkvhp-bej-kiemeles: var(--vk-ink, #3E2E45);
	--vkvhp-bej-vonal: rgba(62, 46, 69, 0.18);
}

.vk-vhp-bejelento--paper {
	--vkvhp-bej-hatter: var(--vk-paper, #F3EEEB);
	--vkvhp-bej-szoveg: var(--vk-ink, #3E2E45);
	--vkvhp-bej-halvany: var(--vk-mauve, #7A687F);
	--vkvhp-bej-vonal: var(--vk-sand, #DCD0C3);
	border-bottom: 1px solid var(--vkvhp-bej-vonal);
}

.vk-vhp-bejelento[hidden] {
	display: none !important;
}

/* Átlátszó fejlécnél a fejlécben ülő sáv magasságát a lap tetején pótoljuk
   (a változót a bejelento.js írja). Csak tablet és mobil szélességen: az
   asztali hero távolsága a sávval együtt lett beállítva, a keskenyebb
   nézeteké a sáv nélkül - és ott a sáv több sorba is törik. A fejléc
   position: absolute, ezért a body felső belső margója nem mozdítja. */
@media (max-width: 1024px) {
	body.vk-fejlec-atlatszo:not(.elementor-editor-active) {
		padding-top: var(--vk-bejelento-magassag, 0px);
	}
}

.vk-vhp-bejelento .vk-vhp-bejelento-hasab {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 44px;
	padding: 8px 56px 8px 80px;
}

.vk-vhp-bejelento .vk-vhp-bejelento-szoveg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 14px;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-align: center;
}

/* A szópár: Clash Display 500, egymás mellett; a régi áthúzva, az új kiemelve. */
.vk-vhp-bejelento .vk-vhp-bejelento-valtas {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--vkvhp-bej-cim-font);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.vk-vhp-bejelento .vk-vhp-bejelento-regi {
	position: relative;
	color: var(--vkvhp-bej-halvany);
	animation: vkvhp-bej-halvanyul 0.4s ease 0.9s both;
}

.vk-vhp-bejelento .vk-vhp-bejelento-regi::after {
	content: '';
	position: absolute;
	left: -2px;
	right: -2px;
	top: 52%;
	height: 2px;
	background: var(--vkvhp-bej-kiemeles);
	transform: scaleX(1);
	transform-origin: left center;
	animation: vkvhp-bej-athuz 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both;
}

.vk-vhp-bejelento .vk-vhp-bejelento-nyil {
	display: inline-flex;
	color: var(--vkvhp-bej-kiemeles);
	animation: vkvhp-bej-felbukkan 0.35s ease 1s both;
}

.vk-vhp-bejelento .vk-vhp-bejelento-nyil svg,
.vk-vhp-bejelento .vk-vhp-bejelento-link-nyil svg {
	display: block;
	width: 16px;
	height: 16px;
}

.vk-vhp-bejelento .vk-vhp-bejelento-uj {
	display: inline-block;
	color: var(--vkvhp-bej-kiemeles);
	animation: vkvhp-bej-becsuszik 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 1.15s both;
}

.vk-vhp-bejelento--korall .vk-vhp-bejelento-uj {
	color: var(--vkvhp-bej-szoveg);
}

.vk-vhp-bejelento .vk-vhp-bejelento-mondat {
	color: var(--vkvhp-bej-szoveg);
}

/* A link: a szöveg színe, alatta halvány vonal, hoverre a kiemelés színe és a nyíl elmozdul. */
.vk-vhp-bejelento .vk-vhp-bejelento-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--vkvhp-bej-szoveg);
	font-family: var(--vkvhp-bej-mono-font);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 0;
	border-bottom: 1px solid var(--vkvhp-bej-vonal);
	padding-bottom: 1px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.vk-vhp-bejelento .vk-vhp-bejelento-link-nyil {
	display: inline-flex;
	transition: transform 0.2s ease;
}

.vk-vhp-bejelento .vk-vhp-bejelento-link:hover,
.vk-vhp-bejelento .vk-vhp-bejelento-link:focus-visible {
	color: var(--vkvhp-bej-kiemeles);
	border-color: var(--vkvhp-bej-kiemeles);
	text-decoration: none;
	outline: none;
}

.vk-vhp-bejelento--korall .vk-vhp-bejelento-link:hover,
.vk-vhp-bejelento--korall .vk-vhp-bejelento-link:focus-visible {
	color: var(--vkvhp-bej-szoveg);
	border-color: var(--vkvhp-bej-szoveg);
}

.vk-vhp-bejelento .vk-vhp-bejelento-link:hover .vk-vhp-bejelento-link-nyil,
.vk-vhp-bejelento .vk-vhp-bejelento-link:focus-visible .vk-vhp-bejelento-link-nyil {
	transform: translateX(4px);
}

/* Az X gomb: a kit pill-stílusa ellen minden állapot explicit. */
.vk-vhp-bejelento .vk-vhp-bejelento-zar,
.vk-vhp-bejelento .vk-vhp-bejelento-zar:hover,
.vk-vhp-bejelento .vk-vhp-bejelento-zar:focus,
.vk-vhp-bejelento .vk-vhp-bejelento-zar:active {
	position: absolute;
	right: 24px;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0 !important;
	transform: translateY(-50%);
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--vkvhp-bej-halvany) !important;
	cursor: pointer;
	line-height: 1;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.vk-vhp-bejelento .vk-vhp-bejelento-zar:hover,
.vk-vhp-bejelento .vk-vhp-bejelento-zar:focus-visible {
	color: var(--vkvhp-bej-szoveg) !important;
	border-color: var(--vkvhp-bej-vonal) !important;
	outline: none;
}

.vk-vhp-bejelento .vk-vhp-bejelento-zar svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Lejárt sáv: csak a szerkesztő látja, mono jelzéssel. */
.vk-vhp-bejelento--lejart {
	outline: 1px dashed var(--vkvhp-bej-kiemeles);
	outline-offset: -1px;
}

.vk-vhp-bejelento .vk-vhp-bejelento-jelzes {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--vkvhp-bej-mono-font);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vkvhp-bej-kiemeles);
}

@keyframes vkvhp-bej-athuz {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes vkvhp-bej-halvanyul {
	from { color: var(--vkvhp-bej-szoveg); }
	to { color: var(--vkvhp-bej-halvany); }
}

@keyframes vkvhp-bej-felbukkan {
	from { opacity: 0; transform: translateX(-6px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes vkvhp-bej-becsuszik {
	from { opacity: 0; transform: translateY(70%); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.vk-vhp-bejelento .vk-vhp-bejelento-regi,
	.vk-vhp-bejelento .vk-vhp-bejelento-regi::after,
	.vk-vhp-bejelento .vk-vhp-bejelento-nyil,
	.vk-vhp-bejelento .vk-vhp-bejelento-uj,
	.vk-vhp-bejelento .vk-vhp-bejelento-link-nyil {
		animation: none;
		transition: none;
	}
}

@media (max-width: 1199px) {
	.vk-vhp-bejelento .vk-vhp-bejelento-hasab {
		padding: 10px 52px 10px 32px;
	}
}

@media (max-width: 767px) {
	.vk-vhp-bejelento {
		font-size: 13px;
	}

	.vk-vhp-bejelento .vk-vhp-bejelento-hasab {
		justify-content: flex-start;
		padding: 10px 48px 10px 16px;
	}

	.vk-vhp-bejelento .vk-vhp-bejelento-szoveg {
		justify-content: flex-start;
		text-align: left;
		gap: 4px 10px;
	}

	.vk-vhp-bejelento .vk-vhp-bejelento-valtas {
		font-size: 15px;
	}

	.vk-vhp-bejelento .vk-vhp-bejelento-zar,
	.vk-vhp-bejelento .vk-vhp-bejelento-zar:hover,
	.vk-vhp-bejelento .vk-vhp-bejelento-zar:focus,
	.vk-vhp-bejelento .vk-vhp-bejelento-zar:active {
		right: 8px;
	}
}