/* Albira — GYIK. Világos kék/narancs PC-oldal, egyetlen stílusforrás. */

@media (min-width: 1025px) {
	body.kmae-faq-page {
		--faq-blue: #08bfea;
		--faq-blue-strong: #008fbd;
		--faq-blue-rgb: 8, 191, 234;
		--faq-orange: #ff8a3d;
		--faq-orange-strong: #e95e13;
		--faq-orange-rgb: 255, 138, 61;
		--faq-ink: #202936;
		--faq-copy: #4c5968;
		--faq-muted: #667383;
		--faq-white: rgba(255, 255, 255, 0.84);
	}

	/* Önálló, viewport-középre zárt vászon; a közös fejléc érintetlen. */
	body.kmae-faq-page .kmae-page {
		position: relative;
		left: 50%;
		width: 100vw;
		margin-left: -50vw;
		padding: calc(var(--kmae-header-h, 72px) + 50px) 32px 84px;
		box-sizing: border-box;
		background: transparent;
	}

	body.kmae-faq-page .kmae-page > .kmae-container {
		width: min(1120px, calc(100vw - 64px));
		max-width: 1120px;
		margin: 0 auto;
		padding: 0;
	}

	body.kmae-faq-page .kmae-page__article,
	body.kmae-faq-page .kmae-page__content {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	body.kmae-faq-page .kmae-page__article > .kmae-page__title {
		display: none;
	}

	.kmae-faq {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: 34px;
	}

	.kmae-faq__hero {
		max-width: 720px;
		margin: 0 auto 10px;
		text-align: center;
	}

	.kmae-faq__eyebrow {
		margin: 0 0 8px;
		font-size: 11px;
		font-weight: 850;
		line-height: 1.4;
		letter-spacing: 0.18em;
		color: var(--faq-blue-strong);
	}

	.kmae-faq__title {
		margin: 0;
		font-family: "Outfit", "Space Grotesk", system-ui, sans-serif;
		font-size: 54px;
		font-weight: 850;
		line-height: 1.06;
		letter-spacing: -0.045em;
		color: var(--faq-ink);
		text-shadow: 0 2px 12px rgba(255, 255, 255, 0.78);
	}

	.kmae-faq__lead {
		max-width: 650px;
		margin: 17px auto 0;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.7;
		color: var(--faq-copy);
		text-shadow: 0 1px 10px rgba(255, 255, 255, 0.88);
	}

	.kmae-faq__groups {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		align-items: start;
	}

	.kmae-faq-group {
		--group: var(--faq-blue);
		--group-strong: var(--faq-blue-strong);
		--group-rgb: var(--faq-blue-rgb);
		position: relative;
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 22px;
		padding: 28px;
		overflow: hidden;
		box-sizing: border-box;
		border: 1px solid rgba(var(--group-rgb), 0.62);
		border-radius: 22px;
		background:
			radial-gradient(circle at 8% 0%, rgba(var(--group-rgb), 0.24), transparent 42%),
			linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(246, 252, 255, 0.67));
		box-shadow: 0 20px 46px rgba(31, 66, 92, 0.16), 0 0 24px rgba(var(--group-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92);
		backdrop-filter: blur(18px) saturate(120%);
	}

	.kmae-faq-group::before {
		content: "";
		position: absolute;
		top: 0;
		left: 7%;
		width: 54%;
		height: 2px;
		background: linear-gradient(90deg, transparent, var(--group), transparent);
		box-shadow: 0 0 15px rgba(var(--group-rgb), 0.7);
	}

	.kmae-faq-group--orange {
		--group: var(--faq-orange);
		--group-strong: var(--faq-orange-strong);
		--group-rgb: var(--faq-orange-rgb);
	}

	.kmae-faq-group__header {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.kmae-faq-group__mark {
		display: inline-flex;
		width: 48px;
		height: 48px;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(var(--group-rgb), 0.72);
		border-radius: 14px;
		background: rgba(var(--group-rgb), 0.13);
		box-shadow: 0 0 18px rgba(var(--group-rgb), 0.16);
		color: var(--group-strong);
	}

	.kmae-faq-group__mark svg {
		width: 22px;
		height: 22px;
	}

	.kmae-faq-group__eyebrow {
		margin: 0 0 3px;
		font-size: 10px;
		font-weight: 850;
		line-height: 1.4;
		letter-spacing: 0.16em;
		color: var(--group-strong);
	}

	.kmae-faq-group__title {
		margin: 0;
		font-size: 25px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -0.03em;
		color: var(--faq-ink);
	}

	.kmae-faq-group__items {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.kmae-faq-item {
		border: 1px solid rgba(var(--group-rgb), 0.28);
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.62);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
		transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
	}

	.kmae-faq-item[open] {
		border-color: rgba(var(--group-rgb), 0.72);
		background: rgba(255, 255, 255, 0.88);
		box-shadow: 0 10px 24px rgba(var(--group-rgb), 0.1), inset 3px 0 0 var(--group);
	}

	.kmae-faq-item__question {
		display: flex;
		min-height: 58px;
		align-items: center;
		justify-content: space-between;
		gap: 18px;
		padding: 0 17px;
		box-sizing: border-box;
		list-style: none;
		font-size: 14px;
		font-weight: 780;
		line-height: 1.4;
		color: var(--faq-ink);
		cursor: pointer;
	}

	.kmae-faq-item__question::-webkit-details-marker {
		display: none;
	}

	.kmae-faq-item__question:focus-visible {
		border-radius: 13px;
		outline: 2px solid rgba(var(--group-rgb), 0.68);
		outline-offset: 2px;
	}

	.kmae-faq-item__toggle {
		position: relative;
		display: inline-flex;
		width: 28px;
		height: 28px;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(var(--group-rgb), 0.48);
		border-radius: 50%;
		background: rgba(var(--group-rgb), 0.1);
	}

	.kmae-faq-item__toggle::before,
	.kmae-faq-item__toggle::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 2px;
		border-radius: 2px;
		background: var(--group-strong);
		transition: transform 160ms ease;
	}

	.kmae-faq-item__toggle::after {
		transform: rotate(90deg);
	}

	.kmae-faq-item[open] .kmae-faq-item__toggle::after {
		transform: rotate(0deg);
	}

	.kmae-faq-item__answer {
		padding: 0 58px 18px 17px;
	}

	.kmae-faq-item__answer p {
		margin: 0;
		font-size: 13px;
		line-height: 1.65;
		color: var(--faq-copy);
	}

	.kmae-faq__footer {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
		margin-top: 2px;
		padding: 20px 26px;
		border: 1px solid rgba(41, 67, 86, 0.16);
		border-radius: 18px;
		background: rgba(255, 255, 255, 0.68);
		box-shadow: 0 14px 34px rgba(34, 61, 82, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88);
		backdrop-filter: blur(16px);
	}

	.kmae-faq__footer p {
		margin: 0;
		font-size: 15px;
		font-weight: 750;
		color: var(--faq-ink);
	}

	/* Egy hangsúly, ahogy a többi cselekvés-gombnál is: a narancs a teendő
	   színe, a kék-narancs kettős gradiens idegen volt a témától. */
	.kmae-faq__footer a {
		display: inline-flex;
		height: 40px;
		align-items: center;
		justify-content: center;
		gap: 9px;
		padding: 0 18px;
		border: 1px solid rgba(var(--faq-orange-rgb), 0.85);
		border-radius: 11px;
		background: linear-gradient(110deg, #ffad41, var(--faq-orange));
		box-shadow: 0 8px 20px rgba(var(--faq-orange-rgb), 0.3);
		font-size: 13px;
		font-weight: 800;
		text-decoration: none;
		color: #fff;
		transition: transform 160ms ease, filter 160ms ease;
	}

	.kmae-faq__footer a:hover,
	.kmae-faq__footer a:focus-visible {
		transform: translateY(-2px);
		filter: brightness(1.06);
		outline: none;
	}
}