/* Vikingo lebegő visszajelzés: a jobb szélre tapasztott fül és a natív
   dialógus. A mezők, a gomb és a köszönő nézet az űrlap-alaprétegé
   (urlap.css); itt csak a fül, a dialógus, a fajta-csempék és a
   köszönő gomb áll. A tokenek --vkvj-* lokális változók var(--vk-*,
   tartalék) értékkel, hogy az oldal design systeme elsőbbséget élvezzen.
   A gombok explicit alap + hover + focus + active stílust kapnak, mert az
   Elementor-kit minden <button>-re korall pillt kényszerít. */

.vk-visszajelzes {
	--vkvj-ink: var(--vk-ink, #3E2E45);
	--vkvj-ink-deep: var(--vk-ink-deep, #2A2036);
	--vkvj-paper: var(--vk-paper, #F3EEEB);
	--vkvj-korall: var(--vk-coral, #FF544D);
	--vkvj-korall2: var(--vk-coral-hover, #E83D36);
	--vkvj-homok: var(--vk-sand, #DCD0C3);
	--vkvj-mauve: var(--vk-mauve, #7A687F);
	--vkvj-feher: #FFFFFF;
	--vkvj-cim-font: var(--vk-clash-display, 'Clash Display', sans-serif);
	--vkvj-mono-font: var(--vk-dm-mono, 'DM Mono', monospace);
}

.vk-visszajelzes[hidden] {
	display: none;
}

/* Mobilon alapból nincs fül: a beállítás kapcsolja be (Segítségközpont). */
@media (max-width: 767px) {
	.vk-visszajelzes--asztali {
		display: none !important;
	}
}

/* ---- A fül ---- */

.vk-visszajelzes .vk-visszajelzes__ful,
.vk-visszajelzes .vk-visszajelzes__ful:hover,
.vk-visszajelzes .vk-visszajelzes__ful:focus,
.vk-visszajelzes .vk-visszajelzes__ful:active {
	appearance: none;
	-webkit-appearance: none;
	margin: 0 !important;
	/* A keret a fül három szabad oldalán: a képernyő élén nincs. */
	border: 1px solid var(--vkvj-mauve) !important;
	border-right: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0.02em !important;
	font-family: var(--vkvj-mono-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	color: var(--vkvj-feher) !important;
	transform: translateY(-50%) !important;
}

/* Függőleges felirat fentről lefelé (vertical-rl), a doboz forgatása
   nélkül: így a lekerekítés a képernyő belseje felé néző oldalon marad,
   és az ikon a felirat fölött áll. */
.vk-visszajelzes .vk-visszajelzes__ful {
	position: fixed;
	right: 0;
	top: 50%;
	z-index: 985;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	min-height: 0;
	padding: 18px 13px 18px 12px !important;
	border-radius: 10px 0 0 10px !important;
	background: var(--vkvj-ink) !important;
	cursor: pointer;
	writing-mode: vertical-rl;
	transition: background 0.15s;
}

.vk-visszajelzes .vk-visszajelzes__ful:hover,
.vk-visszajelzes .vk-visszajelzes__ful:focus-visible {
	background: var(--vkvj-korall) !important;
	border-radius: 10px 0 0 10px !important;
}

.vk-visszajelzes .vk-visszajelzes__ful:focus-visible {
	outline: 2px solid var(--vkvj-ink) !important;
	outline-offset: 2px;
}

.vk-visszajelzes .vk-visszajelzes__ful svg {
	display: block;
	width: 20px;
	height: 20px;
	flex: none;
}

.vk-visszajelzes .vk-visszajelzes__ful-szoveg {
	white-space: nowrap;
}

/* Kisebb kijelzőn ikon-gomb a jobb alsó sarokban: a függőleges fül a
   keskeny tartalomra lógna, és hüvelykujjal a sarok a kényelmes. */
@media (max-width: 767px) {
	.vk-visszajelzes .vk-visszajelzes__ful,
	.vk-visszajelzes .vk-visszajelzes__ful:hover,
	.vk-visszajelzes .vk-visszajelzes__ful:focus,
	.vk-visszajelzes .vk-visszajelzes__ful:active {
		transform: none !important;
		padding: 0 !important;
		border: 1px solid var(--vkvj-mauve) !important;
		border-radius: 50% !important;
	}

	.vk-visszajelzes .vk-visszajelzes__ful {
		top: auto;
		right: 16px;
		bottom: 20px;
		width: 52px;
		height: 52px;
		writing-mode: horizontal-tb;
	}

	.vk-visszajelzes .vk-visszajelzes__ful svg {
		width: 22px;
		height: 22px;
	}

	.vk-visszajelzes .vk-visszajelzes__ful-szoveg {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ---- A dialógus: paper lap, a Csapat- és Mérföldkő-modál párja ---- */

.vk-visszajelzes .vk-visszajelzes__dialog {
	box-sizing: border-box;
	width: min(540px, calc(100vw - 32px));
	max-height: min(92vh, 860px);
	overflow: auto;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--vkvj-paper);
	color: var(--vkvj-ink);
	font-family: var(--vkvj-cim-font);
}

.vk-visszajelzes .vk-visszajelzes__dialog::backdrop {
	background: rgba(42, 32, 54, 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.vk-visszajelzes .vk-visszajelzes__dialog[open] {
	animation: vk-visszajelzes-be 0.25s ease;
}

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

@media (prefers-reduced-motion: reduce) {
	.vk-visszajelzes .vk-visszajelzes__dialog[open] {
		animation: none;
	}
}

/* Keskeny kijelzőn alulról nyíló lap: a hüvelykujj eléri, a billentyűzet
   fölött is marad hely. */
@media (max-width: 600px) {
	.vk-visszajelzes .vk-visszajelzes__dialog {
		width: 100vw;
		max-width: 100vw;
		max-height: 94vh;
		margin: auto 0 0;
	}
}

.vk-vhp-modal-nyitva {
	overflow: hidden;
}

.vk-visszajelzes .vk-visszajelzes__tarto {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(24px, 5vw, 40px);
}

.vk-visszajelzes .vk-visszajelzes__felcim {
	margin: 0;
	padding-right: 44px;
	font-family: var(--vkvj-mono-font);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vkvj-mauve);
}

.vk-visszajelzes .vk-visszajelzes__cim {
	margin: 0;
	padding-right: 32px;
	font-family: var(--vkvj-cim-font);
	font-size: clamp(24px, 4.5vw, 30px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--vkvj-ink);
	text-wrap: balance;
}

.vk-visszajelzes .vk-visszajelzes__bevezeto {
	margin: 0 0 14px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--vkvj-ink);
}

/* ---- Bezáró gomb ---- */

.vk-visszajelzes .vk-visszajelzes__zar,
.vk-visszajelzes .vk-visszajelzes__zar:hover,
.vk-visszajelzes .vk-visszajelzes__zar:focus,
.vk-visszajelzes .vk-visszajelzes__zar:active {
	appearance: none;
	-webkit-appearance: none;
	transform: none !important;
	text-shadow: none !important;
	margin: 0 !important;
	padding: 10px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-height: 0;
	color: var(--vkvj-ink) !important;
}

.vk-visszajelzes .vk-visszajelzes__zar {
	position: absolute;
	top: 12px;
	right: 12px;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	cursor: pointer;
	transition: color 0.2s;
}

.vk-visszajelzes .vk-visszajelzes__zar:hover,
.vk-visszajelzes .vk-visszajelzes__zar:focus-visible {
	color: var(--vkvj-korall) !important;
}

.vk-visszajelzes .vk-visszajelzes__zar:focus-visible {
	outline: 2px solid var(--vkvj-korall);
	outline-offset: 2px;
}

.vk-visszajelzes .vk-visszajelzes__zar svg {
	display: block;
	width: 22px;
	height: 22px;
}

/* ---- Fajta-csempék ---- */

.vk-visszajelzes .vk-visszajelzes__tipusok fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.vk-visszajelzes .vk-visszajelzes__tipusok legend {
	padding: 0;
	margin-bottom: 8px;
}

.vk-visszajelzes .vk-visszajelzes__chipek {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vk-visszajelzes .vk-visszajelzes__chip {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.vk-visszajelzes .vk-visszajelzes__chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.vk-visszajelzes .vk-visszajelzes__chip span {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--vkvj-homok);
	border-radius: 999px;
	background: var(--vkvj-feher);
	color: var(--vkvj-ink);
	font-family: var(--vkvj-mono-font);
	font-size: 13.5px;
	line-height: 1.2;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.vk-visszajelzes .vk-visszajelzes__chip:hover span {
	border-color: var(--vkvj-ink);
}

.vk-visszajelzes .vk-visszajelzes__chip input:checked + span {
	border-color: var(--vkvj-ink);
	background: var(--vkvj-ink);
	color: var(--vkvj-feher);
}

.vk-visszajelzes .vk-visszajelzes__chip input:focus-visible + span {
	outline: 2px solid var(--vkvj-korall);
	outline-offset: 2px;
}

/* ---- Az űrlap finomhangolása a dialógusban ---- */

.vk-visszajelzes .vk-urlap {
	gap: 16px;
}

.vk-visszajelzes .vk-urlap textarea {
	min-height: 104px;
}

.vk-visszajelzes .vk-urlap .vk-urlap__gomb {
	align-self: stretch;
}

/* A képernyőkép-mező (kártyák, gomb) a közös urlap.css-ből jön (.vk-csatol). */

/* ---- Köszönő nézet ---- */

/* Siker után a felvezető (felcím, cím, bevezető) eltűnik: a köszönő nézet
   az egyetlen tartalom, a kérő mondat fölötte félrevezető lenne. */
.vk-visszajelzes[data-vk-visszajelzes-kesz-allapot="siker"] .vk-visszajelzes__felcim,
.vk-visszajelzes[data-vk-visszajelzes-kesz-allapot="siker"] .vk-visszajelzes__cim,
.vk-visszajelzes[data-vk-visszajelzes-kesz-allapot="siker"] .vk-visszajelzes__bevezeto {
	display: none;
}

.vk-visszajelzes .vk-urlap-koszono {
	padding-top: 20px;
	padding-right: 44px;
}

.vk-visszajelzes .vk-urlap-koszono__jel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 4px;
	border-radius: 50%;
	background: var(--vkvj-korall);
	color: var(--vkvj-feher);
}

.vk-visszajelzes .vk-urlap-koszono strong {
	font-weight: 500;
	word-break: break-word;
}

/* A „Rendben” gomb a köszönőben: az alapréteg gomb-stílusa a form-ra
   szűkül, ezért itt ugyanaz a pill újra kimondva. */
.vk-visszajelzes .vk-urlap-koszono .vk-urlap__gomb,
.vk-visszajelzes .vk-urlap-koszono .vk-urlap__gomb:hover,
.vk-visszajelzes .vk-urlap-koszono .vk-urlap__gomb:focus,
.vk-visszajelzes .vk-urlap-koszono .vk-urlap__gomb:active {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 8px 0 0;
	padding: 13px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--vkvj-ink);
	color: var(--vkvj-feher);
	font-family: var(--vkvj-mono-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.15s;
}

.vk-visszajelzes .vk-urlap-koszono .vk-urlap__gomb:hover,
.vk-visszajelzes .vk-urlap-koszono .vk-urlap__gomb:focus-visible {
	background: var(--vkvj-ink-deep);
}