/*!
 * ClickNest Trapdoor Pills
 * Megfeszített hártya + fizikával eső, húzható kapszulák + bemutató panel.
 * A színek CSS változókból jönnek, hogy az Elementor controlok felül tudják írni őket.
 */

.cntp {
	/* --- ClickNest arculati alapok --- */
	--cntp-primary: #284b63;
	--cntp-primary-soft: rgba(40, 75, 99, 0.465);
	--cntp-primary-dark: #1e3a4a;
	--cntp-secondary: #3c6e71;
	--cntp-ink: #353535;
	--cntp-muted: #6b7d89;
	--cntp-surface: #ffffff;
	--cntp-surface-alt: #f4f7f9;
	--cntp-line: rgba(40, 75, 99, 0.14);
	--cntp-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
	--cntp-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.07);
	--cntp-radius: 4px;
	--cntp-accent-w: 0px;
	--cntp-gradient: linear-gradient(135deg, var(--cntp-primary-soft) 0%, var(--cntp-primary) 100%);

	/* --- Ajánlati besorolás --- */
	--cntp-blue-base: #202228;
	--cntp-gold: #bf9c4a;
	--cntp-gold-light: #fdf6c2;
	--cntp-gold-ink: #332710;
	--cntp-filter-ink: var(--cntp-muted);
	--cntp-filter-active: var(--cntp-primary);

	/* --- Elrendezés --- */
	--cntp-stage-height: 380px;
	--cntp-hatch-height: 18px;
	--cntp-membrane: var(--cntp-primary);
	--cntp-membrane-hot: #9ecdcd;
	--cntp-membrane-width: 2.4px;
	--cntp-pill-radius: 999px;
	--cntp-pill-padding: 3px 17px;
	--cntp-pill-min-h: 32px;
	--cntp-gap: 26px;
	/* A lenyíló rész overlay, ezért nem tolja lejjebb a szekciót. Alapból
	   pontosan annyi hely jut neki, amennyi a panel alatt amúgy is van. */
	--cntp-overlay-max: calc(var(--cntp-hatch-height) + var(--cntp-gap) + var(--cntp-stage-h, var(--cntp-stage-height)));

	position: relative;
	/* A >90 fokban kinyílt szárny túllóg a dobozon; itt levágjuk, hogy ne
	   jelenjen meg vízszintes görgetősáv az oldalon. */
	overflow-x: clip;
	/* A szekció a saját szélességéhez igazodik, nem a képernyőéhez – így
	   keskeny hasábban (pl. az asztali nézet harmadán) is jól működik. */
	container-type: inline-size;
	container-name: cntp;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	color: var(--cntp-ink);
	-webkit-tap-highlight-color: transparent;
}

.cntp *,
.cntp *::before,
.cntp *::after {
	box-sizing: border-box;
}

.cntp__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* A húzott pill ide kerül át: az egész widget fölött lebeg, így a színpad
   overflow-ja nem vágja le, amikor a panel felé viszed. */
.cntp__drag-layer {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
}

.cntp__drag-layer .cntp__pill {
	position: absolute;
	top: 0;
	left: 0;
}

/* ==========================================================================
   1. Panel — a csapóajtó FÖLÖTT, ide lehet behúzni a pill-eket
   ========================================================================== */

.cntp__panel {
	position: relative;
	z-index: 3;
	background: var(--cntp-surface);
	border-left: var(--cntp-accent-w) solid var(--cntp-primary);
	border-radius: var(--cntp-radius);
	box-shadow: var(--cntp-shadow);
	padding: 26px 28px;
	transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.cntp__panel-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-bottom: 18px;
}

.cntp__panel-title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	background: var(--cntp-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.cntp__panel-eyebrow {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cntp-muted);
}

/* --- A fogadó "slot" --- */

.cntp__slot {
	position: relative;
	min-height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	border: 2px dashed var(--cntp-line);
	border-radius: var(--cntp-radius);
	background: var(--cntp-surface-alt);
	transition: border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
	overflow: hidden;
}

/* Az arculatból ismert alsó betöltő csík, itt "ide húzhatod" jelzésként. */
.cntp__slot::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	width: 100%;
	background: var(--cntp-gradient);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	pointer-events: none;
	animation: cntp-slot-sweep 8s infinite;
	will-change: transform, opacity;
}

@keyframes cntp-slot-sweep {
	0% { transform: scaleX(0); opacity: 0; }
	3% { transform: scaleX(0); opacity: 0.25; }
	6% { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }
	37.5% { transform: scaleX(1); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
	43.75% { transform: scaleX(1); opacity: 0; }
	43.76% { transform: scaleX(0); opacity: 0; }
	100% { transform: scaleX(0); opacity: 0; }
}

.cntp__slot-empty {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--cntp-muted);
	font-size: 15px;
	text-align: center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cntp__slot-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--cntp-line);
	background: var(--cntp-surface);
	color: var(--cntp-primary);
	animation: cntp-nudge 2.6s ease-in-out infinite;
}

.cntp__slot-icon svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

@keyframes cntp-nudge {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

/* Húzás közben: a panel egésze fogadóterület, jelezzük is. */
.cntp.is-dragging .cntp__slot {
	border-color: var(--cntp-secondary);
	border-style: solid;
	background: rgba(60, 110, 113, 0.07);
}

.cntp.is-dragging .cntp__slot-empty {
	color: var(--cntp-secondary);
}

.cntp.is-dragging .cntp__panel {
	box-shadow: 10px 10px 24px rgba(40, 75, 99, 0.22);
}

/* Aktív drop-zóna (fölötte lebeg egy pill) */
.cntp.is-dropzone-hot .cntp__slot {
	border-color: var(--cntp-primary);
	border-style: solid;
	background: rgba(40, 75, 99, 0.06);
	box-shadow: inset 0 0 0 4px rgba(40, 75, 99, 0.08);
}

.cntp.is-dropzone-hot .cntp__panel {
	box-shadow: 10px 10px 26px rgba(40, 75, 99, 0.28);
	transform: translateY(-2px);
}

.cntp.is-dropzone-hot .cntp__slot-empty {
	/* A lebegő pill takarná a súgószöveget, ezért az háttérbe húzódik. */
	opacity: 0.3;
	color: var(--cntp-primary);
}

.cntp.has-docked .cntp__slot-empty {
	display: none;
}

/* A padding és a min-height szándékosan marad: így a panel pontosan ugyanakkora
   behúzott pill-lel is, mint üresen, és a szekció nem ugrik meg nyitáskor. */
.cntp.has-docked .cntp__slot {
	border-style: solid;
	border-color: transparent;
	background: transparent;
	justify-content: flex-start;
}

.cntp.has-docked .cntp__slot::after {
	animation: none;
	opacity: 0;
}

.cntp__docked:empty {
	display: none;
}

.cntp__docked {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

/* --- Kinyíló részletes tartalom --- */

.cntp__detail {
	position: absolute;
	top: 100%;
	/* A panel bal oldali kiemelő csíkján kívülre igazítva, hogy a két doboz
	   széle pontosan egy vonalba essen. */
	left: calc(-1 * var(--cntp-accent-w));
	right: 0;
	z-index: 7;
	max-height: var(--cntp-overlay-max);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--cntp-surface);
	border-left: var(--cntp-accent-w) solid var(--cntp-primary);
	border-radius: 0 0 var(--cntp-radius) var(--cntp-radius);
	box-shadow: var(--cntp-shadow);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-12px);
	transition:
		opacity 0.26s ease,
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.34s;
}

.cntp.is-open .cntp__detail {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition:
		opacity 0.26s ease,
		transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s;
}

.cntp__detail-clip {
	min-height: 0;
}

.cntp__detail-inner {
	padding: 20px 24px;
	font-size: 16px;
	line-height: 1.6;
}

/* Az arculat tipográfiája a behúzott tartalomban */
.cntp__detail-inner > *:first-child { margin-top: 0; }
.cntp__detail-inner > *:last-child { margin-bottom: 0; }

.cntp__detail-inner h2,
.cntp__detail-inner h3,
.cntp__detail-inner h4 {
	font-weight: 600;
	color: var(--cntp-primary);
	margin: 0 0 10px;
}

.cntp__detail-inner ul {
	list-style-type: square;
	padding-left: 20px;
	margin: 0 0 12px;
}

.cntp__detail-inner ul li::marker {
	color: var(--cntp-primary);
}

.cntp__detail-inner li {
	margin-bottom: 6px;
}

.cntp__detail-inner a {
	color: var(--cntp-primary);
	font-weight: 500;
}

.cntp__detail-inner strong {
	color: var(--cntp-primary);
}

/* A widget gombjai (×, Bezárás, szűrők, kapszulák) a .cntp előtaggal és az
   állapotoknál is maguk adják meg a megjelenésüket. A Hello Elementor téma
   reset.css-e minden gombra rózsaszín (#C36) keretet, hover- és fókusz-
   állapotban rózsaszín hátteret tesz, kattintás utáni fókuszban pedig leveszi
   az árnyékot; az Elementor „Gombok” oldalbeállítása ugyanígy minden gombra
   hat. Ezek (0,2,0) és (0,2,1) erősségűek, ezért itt (0,2,0) és (0,3,0) kell. */
.cntp .cntp__eject {
	position: relative;
	flex: 0 0 auto;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(40, 75, 99, 0.24);
	border-radius: 50%;
	background: var(--cntp-surface);
	color: var(--cntp-primary);
	font-size: inherit;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition:
		color 0.24s ease,
		background 0.24s ease,
		border-color 0.24s ease,
		box-shadow 0.24s ease,
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Vékony gyűrű, ami ráhúzáskor kinyílik a gomb körül. */
.cntp__eject::before {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1px solid var(--cntp-secondary);
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
	transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cntp__eject svg {
	width: 17px;
	height: 17px;
	overflow: visible;
}

.cntp__eject svg line {
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* Kattintás utáni fókusz és lenyomás: marad az alapállapot. */
.cntp .cntp__eject:focus,
.cntp .cntp__eject:active {
	background: var(--cntp-surface);
	border-color: rgba(40, 75, 99, 0.24);
	color: var(--cntp-primary);
	box-shadow: none;
}

.cntp .cntp__eject:hover,
.cntp .cntp__eject:focus-visible {
	background: var(--cntp-gradient);
	border-color: transparent;
	color: #ffffff;
	transform: rotate(90deg);
	box-shadow: 0 6px 16px rgba(40, 75, 99, 0.32);
}

.cntp__eject:hover::before,
.cntp__eject:focus-visible::before {
	opacity: 0.5;
	transform: scale(1);
}

.cntp .cntp__eject:focus-visible {
	outline: 3px solid var(--cntp-secondary);
	outline-offset: 3px;
}

.cntp .cntp__eject:active {
	transform: rotate(90deg) scale(0.93);
}

/* ==========================================================================
   2. Membrán — nincs ajtó, csak egy megfeszített felület
   ========================================================================== */

.cntp__hatch {
	position: relative;
	z-index: 2;
	/* Ez a hártya FÖLÖTT hagyott hely: a nyugalmi vonal a mező felső élén ül,
	   és felfelé ide tud kitérni. Lefelé a vászon belóg a mezőbe. */
	height: var(--cntp-hatch-height);
	margin-top: var(--cntp-gap);
	pointer-events: none;
}

.cntp__membrane {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	display: block;
	pointer-events: none;
}

/* Fizika nélkül a hártya egyenes vonal marad. */
.cntp--static .cntp__hatch {
	display: none;
}

/* ==========================================================================
   3. Színpad — ide esnek ki a pill-ek
   ========================================================================== */

.cntp__stage {
	position: relative;
	z-index: 1;
	/* A --cntp-stage-h a Mező magassága beállításból jön; üresen automatikus. */
	height: var(--cntp-stage-h, var(--cntp-stage-height));
	border-radius: var(--cntp-radius);
	overflow: hidden;
	touch-action: pan-y;
}

/* Finom "padló" vonal a színpad alján */
.cntp__stage::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(40, 75, 99, 0) 0%, var(--cntp-line) 18%, var(--cntp-line) 82%, rgba(40, 75, 99, 0) 100%);
}

.cntp__pill {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	max-width: 100%;
	margin: 0;
	will-change: transform;
	/* Az eltűnés áttűnése szűréskor. */
	transition: opacity 0.2s ease;
	/* A fizika a transform-ot írja; amíg nem indult el, a JS elrejti. */
}

.cntp .cntp__pill-btn {
	/* A szikrák ehhez igazodnak. */
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: var(--cntp-pill-padding);
	min-height: var(--cntp-pill-min-h);
	max-width: 100%;
	border: 0;
	border-radius: var(--cntp-pill-radius);
	background: var(--cntp-gradient);
	color: #ffffff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
	/* A hosszú nevek inkább törjenek, mint hogy levágódjanak. */
	white-space: normal;
	text-align: center;
	justify-content: center;
	text-wrap: balance;
	cursor: grab;
	user-select: none;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	/* Az árnyék változóból jön, hogy fókuszban is ugyanez maradjon. */
	--cntp-pill-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 3px 7px rgba(40, 75, 99, 0.16);
	--cntp-pill-shadow-hover:
		inset 0 1px 0 rgba(255, 255, 255, 0.24),
		0 5px 11px rgba(40, 75, 99, 0.2);
	box-shadow: var(--cntp-pill-shadow);
	transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.cntp .cntp__pill-btn:focus,
.cntp .cntp__pill-btn:active {
	box-shadow: var(--cntp-pill-shadow);
}

.cntp .cntp__pill-btn:focus-visible {
	outline: 3px solid var(--cntp-secondary);
	outline-offset: 3px;
}

.cntp .cntp__pill-btn:hover {
	filter: brightness(1.06);
	box-shadow: var(--cntp-pill-shadow-hover);
}

/* A két ajánlati besorolás pontos színátmenete. A 40% alfaérték, ezért kell
   mögé a sötét alapszín, hogy a fehér felirat olvasható maradjon. */
.cntp .cntp__pill--blue .cntp__pill-btn {
	background-color: var(--cntp-blue-base);
	background-image: linear-gradient(135deg, rgba(40, 75, 99, 0.4) 0%, #284b63 100%);
	color: #ffffff;
}

.cntp .cntp__pill--gold .cntp__pill-btn {
	background-color: var(--cntp-gold);
	background-image: linear-gradient(135deg, var(--cntp-gold-light) 0%, var(--cntp-gold) 100%);
	color: var(--cntp-gold-ink);
	--cntp-pill-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 3px 7px rgba(94, 74, 26, 0.18);
	--cntp-pill-shadow-hover:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 5px 11px rgba(94, 74, 26, 0.22);
}

.cntp .cntp__pill--alt .cntp__pill-btn {
	background: linear-gradient(135deg, rgba(60, 110, 113, 0.55) 0%, var(--cntp-secondary) 100%);
}

.cntp .cntp__pill--ghost .cntp__pill-btn {
	background: var(--cntp-surface);
	color: var(--cntp-primary);
	--cntp-pill-shadow:
		inset 0 0 0 1px var(--cntp-primary),
		0 3px 7px rgba(40, 75, 99, 0.12);
	--cntp-pill-shadow-hover: var(--cntp-pill-shadow);
}

/* ==========================================================================
   Fejjel lefelé megállt kapszula: a felirat fordul meg, nem a test
   ==========================================================================
   A kapszula ott marad, ahova a fizika tette. Csak a gomb tartalma fordul
   át, és a váltást a felirat széteső-összeálló animációja takarja. */

.cntp__pill-inner {
	display: inline-flex;
	align-items: center;
	gap: inherit;
}

.cntp__pill.is-flipped .cntp__pill-inner {
	transform: rotate(180deg);
}

/* A panelben a kapszula amúgy is egyenesen áll, ott nem kell a fordítás. */
.cntp__docked .cntp__pill.is-flipped .cntp__pill-inner {
	transform: none;
}

/* A felirat darabjai: kirepülnek, majd a másik irányból visszaállnak. */
.cntp__ch {
	display: inline-block;
	white-space: pre;
}

.cntp__pill.is-shimmer .cntp__ch {
	animation: cntp-shard 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation-delay: calc(var(--i) * var(--cntp-shard-step, 9ms));
	will-change: transform, opacity;
}

@keyframes cntp-shard {
	0% { opacity: 1; transform: none; filter: none; }
	30% { opacity: 0; transform: translate3d(var(--dx), -9px, 0) scale(0.45) rotate(var(--r)); filter: blur(3px); }
	62% { opacity: 0; transform: translate3d(calc(var(--dx) * -1), 9px, 0) scale(0.45) rotate(calc(var(--r) * -1)); filter: blur(3px); }
	100% { opacity: 1; transform: none; filter: none; }
}

/* Szikrák, amíg a betűk szétszórva vannak. */
.cntp__pill-spark {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cntp__pill-spark i {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 3px;
	height: 3px;
	margin: -1.5px 0 0 -1.5px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.9);
	opacity: 0;
	animation: cntp-spark 0.6s ease-out both;
	animation-delay: calc(var(--i) * 56ms + 180ms);
}

@keyframes cntp-spark {
	0% { opacity: 0; transform: scale(0); }
	35% { opacity: 1; transform: scale(1.6); }
	100% { opacity: 0; transform: scale(0.2); }
}

.cntp__pill-icon {
	display: inline-flex;
	align-items: center;
	font-size: 1.05em;
}

.cntp__pill-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.cntp .cntp__pill.is-dragging .cntp__pill-btn {
	cursor: grabbing;
	--cntp-pill-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.24),
		0 9px 18px rgba(40, 75, 99, 0.24);
	--cntp-pill-shadow-hover: var(--cntp-pill-shadow);
}

/* Szűréskor a mező kiürül: a kapszulák egyenként halványulnak el, majd a
   kiválasztott kategória elemei újra kiesnek az ajtóból. */
.cntp__pill.is-gone {
	opacity: 0;
	pointer-events: none;
}

.cntp__pill.is-gone-done {
	visibility: hidden;
}

.cntp__docked .cntp__pill.is-gone {
	opacity: 1;
	visibility: visible;
}

.cntp__pill.is-docked {
	display: none;
}

/* A behúzott pill a panelben */
.cntp__docked .cntp__pill-btn {
	cursor: pointer;
}

/* Szerver oldalról jövő, JS nélkül is olvasható tartalom */
.cntp__pill-content[hidden] {
	display: none;
}

/* ==========================================================================
   4. Mobil / érintés
   ========================================================================== */

.cntp--tap .cntp__pill-btn {
	cursor: pointer;
}

.cntp--drag .cntp__pill-btn {
	touch-action: none;
}

@media (max-width: 767px) {
	.cntp {
		--cntp-gap: 18px;
	}
}

/* ==========================================================================
   5. Fallback: nincs JS, vagy csökkentett mozgás
   ========================================================================== */

.cntp--static .cntp__stage,
.cntp--static .cntp__hatch {
	display: none;
}

/* Amíg a szkript át nem veszi a mezőt, a kapszulák nem látszanak — különben a
   mező bal felső sarkában egymásra rakódva várnának. Normál betöltéskor ez egy
   villanás lenne, JS-t késleltető gyorsítótár-bővítménnyel pedig az első
   érintésig így maradna. A szkript a cntp--drag, cntp--tap vagy cntp--static
   osztállyal jelzi, hogy elindult. */
.cntp:not(.cntp--drag):not(.cntp--tap):not(.cntp--static) .cntp__stage .cntp__pill {
	visibility: hidden;
}

.cntp__fallback {
	display: none;
	margin-top: var(--cntp-gap);
}

.cntp--static .cntp__fallback {
	display: block;
}

.cntp__fallback-item {
	border-left: 4px solid var(--cntp-primary);
	background: var(--cntp-surface);
	box-shadow: var(--cntp-shadow-soft);
	margin-bottom: 12px;
}

.cntp__fallback-item > summary {
	cursor: pointer;
	padding: 14px 18px;
	font-weight: 600;
	color: var(--cntp-primary);
	list-style: none;
}

.cntp__fallback-item > summary::-webkit-details-marker {
	display: none;
}

.cntp__fallback-item > summary::after {
	content: "";
	float: right;
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.cntp__fallback-item[open] > summary::after {
	transform: rotate(-135deg);
}

.cntp__fallback-body {
	padding: 0 18px 16px;
}

@media (prefers-reduced-motion: reduce) {
	.cntp__detail,
	.cntp__detail-inner,
	.cntp__panel,
	.cntp__slot {
		transition-duration: 0.01ms !important;
	}

	.cntp__slot::after,
	.cntp__slot-icon {
		animation: none !important;
	}
}

/* ==========================================================================
   6. A panelbe behúzott pill
   ========================================================================== */

.cntp__docked .cntp__pill {
	position: static;
	transform: none;
	visibility: visible;
}

.cntp .cntp__docked .cntp__pill-btn {
	--cntp-pill-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 2px 6px rgba(40, 75, 99, 0.14);
	--cntp-pill-shadow-hover: var(--cntp-pill-shadow);
}

/* Asztali / mobil súgószöveg váltása (a JS teszi ki a cntp--tap illetve cntp--drag osztályt). */
.cntp__slot-hint--mobile {
	display: none;
}

.cntp--tap .cntp__slot-hint--desktop {
	display: none;
}

.cntp--tap .cntp__slot-hint--mobile {
	display: inline;
}

/* ==========================================================================
   7. Keskeny hasáb — konténer lekérdezéssel, nem a képernyő szélessége alapján
   Így akkor is jól néz ki, ha a szekció az asztali nézet harmadát tölti ki.
   ========================================================================== */

/* ==========================================================================
   7. Kategóriaszűrők — a mező alatt, egy sorban
   ========================================================================== */

/* Kompakt kapszulák: a forma és a viselkedés a régi, a méret kisebb. Az 5 px-es
   köz és a 10 px-es oldalsó margó azért nem 6 és 11, mert így 350 px-es mezőben
   két sorba férnek három helyett. */
.cntp__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-top: 0;
	padding: 10px 2px 0;
	border-top: 1px solid var(--cntp-line);
}

.cntp .cntp__filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--cntp-line);
	border-radius: 999px;
	background: transparent;
	color: var(--cntp-filter-ink);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

/* Kattintás utáni fókusz és lenyomás: marad az alapállapot, a téma rózsaszín
   vagy az Elementor lila háttere nélkül. */
.cntp .cntp__filter:focus,
.cntp .cntp__filter:active {
	background-color: transparent;
	border-color: var(--cntp-line);
	color: var(--cntp-filter-ink);
	box-shadow: none;
}

.cntp .cntp__filter:hover {
	background-color: transparent;
	border-color: var(--cntp-filter-active);
	color: var(--cntp-filter-active);
}

.cntp .cntp__filter:focus-visible {
	outline: 3px solid var(--cntp-secondary);
	outline-offset: 2px;
}

/* Az aktív kategóriát hangsúlyosabb keret és szín jelzi. */
.cntp .cntp__filter.is-active {
	background-color: transparent;
	border-color: var(--cntp-filter-active);
	box-shadow: inset 0 0 0 1px var(--cntp-filter-active);
	color: var(--cntp-filter-active);
	font-weight: 600;
}

.cntp__filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 15px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--cntp-surface-alt);
	color: var(--cntp-muted);
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.cntp__filter.is-active .cntp__filter-count {
	background: var(--cntp-filter-active);
	color: #ffffff;
}

/* ==========================================================================
   8. Bemutató lábléce
   ========================================================================== */

/* A lábléc eddig stílus nélkül, közvetlenül a szöveg alatt ült. */
.cntp__detail-foot {
	margin-top: 20px;
}

.cntp .cntp__detail-close {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border: 1px solid var(--cntp-line);
	border-radius: 999px;
	background: transparent;
	color: var(--cntp-primary);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cntp .cntp__detail-close:focus,
.cntp .cntp__detail-close:active {
	background-color: transparent;
	border-color: var(--cntp-line);
	color: var(--cntp-primary);
	box-shadow: none;
}

/* A téma hoverre fehér szöveget adna a világos háttérre — itt is megadjuk. */
.cntp .cntp__detail-close:hover {
	border-color: var(--cntp-primary);
	background-color: var(--cntp-surface-alt);
	color: var(--cntp-primary);
}

.cntp .cntp__detail-close:focus-visible {
	outline: 3px solid var(--cntp-secondary);
	outline-offset: 2px;
}

.cntp__detail-close svg {
	width: 10px;
	height: 10px;
}

.cntp__detail-close svg line {
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}

.cntp__detail-body > *:first-child {
	margin-top: 0;
}

.cntp__detail-body > *:last-child {
	margin-bottom: 0;
}

.cntp__fallback-title {
	font-weight: 600;
}

.cntp__fallback-cat {
	margin-left: 8px;
	color: var(--cntp-muted);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Keskeny hasábban mind a 19 kapszula sokkal magasabb mezőt kér, mint teljes
   szélességen, ezért ott az automatikus magasság 620 px (szűrt nézetben a
   szokásos). Ha a Mező magassága be van állítva, az minden nézetben pontosan
   érvényes — ez eddig 620 px alá nem engedett. */
@container cntp (max-width: 500px) {
	.cntp__stage {
		height: var(--cntp-stage-h, max(var(--cntp-stage-height), 620px));
	}

	.cntp.is-filtered .cntp__stage {
		height: var(--cntp-stage-h, var(--cntp-stage-height));
	}
}

@container cntp (max-width: 560px) {
	.cntp__panel {
		padding: 18px 16px;
	}

	.cntp__panel-head {
		gap: 2px 10px;
		margin-bottom: 14px;
	}

	.cntp__panel-title {
		font-size: clamp(17px, 5cqi, 23px);
	}

	.cntp__panel-eyebrow {
		font-size: 11px;
		letter-spacing: 0.06em;
	}

	.cntp__slot {
		min-height: 58px;
		padding: 10px;
	}

	.cntp__slot-empty {
		gap: 9px;
		font-size: 13px;
	}

	.cntp__slot-icon {
		width: 28px;
		height: 28px;
	}

	.cntp__slot-icon svg {
		width: 13px;
		height: 13px;
	}

	.cntp .cntp__eject {
		width: 34px;
		height: 34px;
	}

	.cntp__eject svg {
		width: 15px;
		height: 15px;
	}

	.cntp .cntp__pill-btn {
		padding: 3px 14px;
		font-size: 12px;
		gap: 7px;
	}

	.cntp__hatch {
		margin-top: min(var(--cntp-gap), 16px);
	}

	.cntp__detail {
		max-height: min(var(--cntp-overlay-max), 340px);
	}

	.cntp__detail-inner {
		padding: 16px;
		font-size: 15px;
	}

	.cntp__detail-foot {
		margin-top: 16px;
	}

	.cntp__panel,
	.cntp__detail {
		box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.16);
	}
}

@container cntp (max-width: 390px) {
	.cntp__panel {
		padding: 14px 12px;
	}

	.cntp__panel-title {
		font-size: clamp(16px, 6cqi, 20px);
	}

	.cntp .cntp__pill-btn {
		padding: 3px 14px;
		font-size: 12px;
	}

	.cntp__detail-inner {
		padding: 14px 12px;
		font-size: 14px;
	}

	.cntp__slot-empty {
		font-size: 12px;
	}
}

/* Ha a halasztott fizikai szkript nem tud letoltodni, a szerveren mar
   szereplo, hozzaferheto harmonikalista legyen hasznalhato. */
.cntp--lazy-error .cntp__slot,
.cntp--lazy-error .cntp__filters {
    display: none;
}