/* ============================================================
   McKinsey-stílusú offcanvas — kétpaneles layout (test.chomox.hu)
   ----------------------------------------------------------------
   - Bal felső sarok: floating hamburger gomb
   - Backdrop: sötét + blur
   - Offcanvas alapból 25vw (kék panel), submenu nyitásakor 100vw
   - 25vw kék (mix-dark) bal panel: primary nav
   - 75vw fehér jobb panel: aktuális kibontott submenu (title + lista)
   - Mobilon (≤768px): full-screen, klasszikus drill-down vissza-gombbal
   ============================================================ */

/* Trigger gomb (gettouch + triggergettouch) — alapertelmezett pozicio
   felulirasa a static.chomox.hu/styles/_fixes.scss `:root` valtozoira.
   Reszponziv: mobilon kompaktabb, asztalin nagyobb gomb es tobb levego. */
:root {
	--trigger-size: 80px;
	--trigger-right: 15px;
	--trigger-bottom: 15px;
}
@media (min-width: 769px) {
	:root {
		--trigger-size: 88px;
		--trigger-right: 30px;
		--trigger-bottom: 30px;
	}
}

#offcanvasNavbar.mck-offcanvas {
	--mck-bg: var(--bs-darkaccent, #051c2c);
	--mck-bg-2: rgba(255, 255, 255, 0.06);
	--mck-fg: #fff;
	--mck-fg-muted: rgba(255, 255, 255, 0.6);
	--mck-divider: rgba(255, 255, 255, 0.12);
	--mck-accent: var(--bs-accent, #2c5cdc);

	--mck-sub-bg: #fff;
	--mck-sub-fg: var(--bs-darkaccent, #051c2c);
	--mck-sub-fg-muted: rgba(5, 28, 44, 0.55);
	--mck-sub-divider: rgba(5, 28, 44, 0.10);

	--mck-primary-w: 25vw;
	--mck-sub-w: 50vw;
	--mck-primary-min: 320px;
	--mck-pad: 2rem;
	--mck-header-h: 97px;
	--mck-footer-h: 142px;

	width: var(--mck-primary-w) !important;
	min-width: var(--mck-primary-min);
	max-width: 75vw;
	background-color: var(--mck-bg) !important;
	color: var(--mck-fg);
	border: 0;
	box-shadow: none;
	transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
	overflow: visible;
}

/* Submenu nyitva: a teljes offcanvas 75vw szeles asztalin (primary 25vw + tree 50vw) */
#offcanvasNavbar.mck-offcanvas.mck-sub-open {
	width: 75vw !important;
}

@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas {
		--mck-primary-w: 100vw;
		--mck-sub-w: 100vw;
		--mck-header-h: 81px;
		width: 100vw !important;
		max-width: 100vw;
	}
	#offcanvasNavbar.mck-offcanvas.mck-sub-open { width: 100vw !important; }
}

/* ───── BACKDROP ───── */
.offcanvas-backdrop.show {
	background-color: rgba(5, 28, 44, 0.78);
	opacity: 1;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* ───── FAB HAMBURGER ───── */
.mck-fab-toggle {
	position: fixed;
	top: 1.25rem;
	left: 1.25rem;
	z-index: 1045;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--bs-text, #fff);
	cursor: pointer;
	transition: opacity 200ms ease, transform 200ms ease;
}
.mck-fab-toggle:hover { opacity: 0.7; }
.mck-fab-toggle:active { transform: scale(0.92); }

.mck-fab-bars,
.mck-fab-bars::before,
.mck-fab-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	transition: transform 240ms ease, opacity 240ms ease;
}
.mck-fab-bars { position: relative; }
.mck-fab-bars::before,
.mck-fab-bars::after { content: ""; position: absolute; left: 0; }
.mck-fab-bars::before { top: -7px; }
.mck-fab-bars::after { top: 7px; }

body.mck-menu-open .mck-fab-toggle { opacity: 0; pointer-events: none; }

/* ───── HEADER (X + brand a kek panel tetejen) ───── */
#offcanvasNavbar.mck-offcanvas .mck-offcanvas-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	width: var(--mck-primary-w);
	min-width: var(--mck-primary-min);
	border-bottom: 1px solid var(--mck-divider);
	z-index: 5;
	box-sizing: border-box;
}

/* Header magassagat a --mck-header-h valtozo adja (asztali 97px, mobil 81px az override-bol) */
#offcanvasNavbar.mck-offcanvas .mck-offcanvas-header {
	height: var(--mck-header-h);
	min-height: var(--mck-header-h);
}

/* Asztali nezet: padding csak balrol 2rem */
@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .mck-offcanvas-header {
		padding: 0 0 0 2rem !important;
	}
}

/* Mobil: uniform 1.5rem padding */
@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas .mck-offcanvas-header {
		padding: 1.5rem !important;
	}
}

#offcanvasNavbar.mck-offcanvas .mck-close {
	background: transparent;
	border: 0;
	color: var(--mck-fg);
	padding: 0;
	margin: 0;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 220ms ease, opacity 220ms ease;
}
#offcanvasNavbar.mck-offcanvas .mck-close svg { width: 24px; height: 24px; fill: currentColor; display: block; }
#offcanvasNavbar.mck-offcanvas .mck-close:hover { opacity: 0.7; transform: rotate(90deg); }

#offcanvasNavbar.mck-offcanvas .mck-brand { margin: 0; min-width: 0; flex: 1 1 auto; }
#offcanvasNavbar.mck-offcanvas .mck-brand a,
#offcanvasNavbar.mck-offcanvas .mck-brand a:hover {
	color: var(--mck-fg) !important;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-decoration: none;
}
#offcanvasNavbar.mck-offcanvas .mck-brand .logo {
	flex-shrink: 0;
	object-fit: contain;
}

/* a <b> alapertelmezett `bolder` (=900) helyett sima `bold` (700) az offcanvasban */
#offcanvasNavbar.mck-offcanvas b,
#offcanvasNavbar.mck-offcanvas strong {
	font-weight: 700;
}

/* ───── BODY ─────
   FONTOS: az offcanvas-body es mck-nav NEM positioned — igy a feher submenu panel
   absolute pozicija a .offcanvas elemhez (fixed) igazodik, vagyis a teljes
   offcanvas magassagaban (a header tetejetol kezdve) tud kiterulni. */
#offcanvasNavbar.mck-offcanvas .offcanvas-body {
	padding: 0 !important;
	background-color: transparent !important;
	position: static !important;
	height: calc(100dvh - var(--mck-header-h) - var(--mck-footer-h));
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
#offcanvasNavbar.mck-offcanvas .offcanvas-body::-webkit-scrollbar {
	width: 8px;
	height: 0;
}
#offcanvasNavbar.mck-offcanvas .offcanvas-body::-webkit-scrollbar-track {
	background: transparent;
}
#offcanvasNavbar.mck-offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: padding-box;
	transition: background-color 200ms ease;
}
#offcanvasNavbar.mck-offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 0.45);
}


#offcanvasNavbar.mck-offcanvas .mck-nav {
	position: static !important;
	width: 100%;
	height: 100%;
}

/* PRIMARY (gyokerszintu) ul = bal kek panel
   FONTOS: overflow nem allithato itt — kulonben a kifele (left:25vw) pozicionalt
   feher submenu paneleket levagja. A scroll-t a .offcanvas-body kezeli. */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0.75rem 0;
	width: var(--mck-primary-w);
	min-width: var(--mck-primary-min);
	height: auto;
	overflow: visible;
	background-color: var(--mck-bg);
}


/* SUB-CONTAINER (a JS hozza letre az offcanvas-body-be) — a panelek itt elnek (mobile drilldown),
   keletkezett struktura: .mck-sub-container > .mck-sub-panel[data-mck-id] > (header + ul) */
#offcanvasNavbar.mck-offcanvas .mck-sub-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--mck-primary-w);
	right: 0;
	width: var(--mck-sub-w);
	pointer-events: none;
	z-index: 10;
}

@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas .mck-sub-container {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100dvh;
		z-index: 1060;
	}
}

/* TREE-CONTAINER (asztali nézet) — a 75vw jobb oldal, ahol a teljes nested fa megjelenik */
#offcanvasNavbar.mck-offcanvas .mck-tree-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--mck-primary-w);
	right: 0;
	width: var(--mck-sub-w);
	background-color: var(--mck-sub-bg);
	color: var(--mck-sub-fg);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 10;
	display: none;
}

/* Asztali nézetben tree-container látszik, sub-container rejtve */
@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas.mck-sub-open .mck-tree-container { display: block; }
	#offcanvasNavbar.mck-offcanvas .mck-sub-container { display: none !important; }
}

/* Mobilon a tree rejtve, panel-rendszer aktiv */
@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas .mck-tree-container { display: none !important; }
}

/* TREE-PANEL = wrapper (header + tree). A scroll a panelen, NEM a tree-n
   (kulonben az overflow:auto block formatting context tonkretenne a columns-ot) */
#offcanvasNavbar.mck-offcanvas .mck-tree-panel {
	display: none;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}
#offcanvasNavbar.mck-offcanvas .mck-tree-panel.mck-active {
	display: flex;
}

/* a header rogzitve marad mig a tree scrollol — sticky tetejen */
#offcanvasNavbar.mck-offcanvas .mck-tree-panel > .mck-sub-header {
	position: sticky;
	top: 0;
	background-color: var(--mck-sub-bg);
	z-index: 1;
}

/* TREE — a primary li klonozott teljes submenuja, NINCS overflow rajta.
   FONTOS: display: block (felulirja az orokolt webkit-box-ot, kulonben columns nem fog) */
#offcanvasNavbar.mck-offcanvas .mck-tree {
	display: block !important;
	list-style: none;
	margin: 0;
	padding: 1.5rem var(--mck-pad) 2rem var(--mck-pad);
	background: transparent;
}

/* Tree li-k */
#offcanvasNavbar.mck-offcanvas .mck-tree li {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Top-level (level 2) item: bold, nagyobb */
#offcanvasNavbar.mck-offcanvas .mck-tree > li {
	margin-bottom: 0;
	break-inside: avoid;
}
#offcanvasNavbar.mck-offcanvas .mck-tree > li > a,
#offcanvasNavbar.mck-offcanvas .mck-tree > li > button {
	display: inline-block;
	padding: 0.4rem 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--mck-sub-fg) !important;
	text-decoration: none;
	transition: color 200ms ease;
}
#offcanvasNavbar.mck-offcanvas .mck-tree > li > a:hover,
#offcanvasNavbar.mck-offcanvas .mck-tree > li > button:hover {
	color: var(--mck-accent) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Beágyazott szintek: vékonyabb font, nincs border, nincs padding */
#offcanvasNavbar.mck-offcanvas .mck-tree ul {
	list-style: none;
	margin: 0.4rem 0 0 0;
	padding: 0;
	border-left: 0;
}

#offcanvasNavbar.mck-offcanvas .mck-tree ul li {
	margin: 0.15rem 0;
}

#offcanvasNavbar.mck-offcanvas .mck-tree ul a,
#offcanvasNavbar.mck-offcanvas .mck-tree ul button {
	display: inline-block;
	padding: 0.35rem 0;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--mck-sub-fg) !important;
	text-decoration: none;
	transition: color 200ms ease;
}
#offcanvasNavbar.mck-offcanvas .mck-tree ul a:hover,
#offcanvasNavbar.mck-offcanvas .mck-tree ul button:hover {
	color: var(--mck-accent) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tree multi-column flow asztalin + 3 navigacios elem-stilus */
@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .mck-tree {
		column-count: 3;
		column-gap: 2rem;
		column-fill: balance;
	}

	/* (1) Elso szintu csoport (van child ul) — uppercase + 500 + arrow ikon lefele */
	#offcanvasNavbar.mck-offcanvas .mck-tree > li:has(> ul) > a,
	#offcanvasNavbar.mck-offcanvas .mck-tree > li:has(> ul) > button {
		font-size: 1rem;
		line-height: 1.5rem;
		font-weight: 500;
		text-transform: uppercase;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
	}
	/* arrow_back SVG, 90 fokkal forgatva (lefele mutat) */
	#offcanvasNavbar.mck-offcanvas .mck-tree > li:has(> ul) > a::after,
	#offcanvasNavbar.mck-offcanvas .mck-tree > li:has(> ul) > button::after {
		content: "";
		display: inline-block;
		width: 24px;
		height: 24px;
		flex-shrink: 0;
		background-color: currentColor;
		mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M400-120 160-360l241-241 56 57-144 144h367v-400h80v480H313l144 143-57 57Z'/></svg>");
		-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M400-120 160-360l241-241 56 57-144 144h367v-400h80v480H313l144 143-57 57Z'/></svg>");
		mask-repeat: no-repeat;
		-webkit-mask-repeat: no-repeat;
		mask-position: center;
		-webkit-mask-position: center;
		mask-size: contain;
		-webkit-mask-size: contain;
		transform: rotate(-90deg);
	}

	/* (2) Elso szintu leaf (nincs child ul) — 500, normal case */
	#offcanvasNavbar.mck-offcanvas .mck-tree > li:not(:has(> ul)) > a,
	#offcanvasNavbar.mck-offcanvas .mck-tree > li:not(:has(> ul)) > button {
		font-size: 1rem;
		line-height: 1.5rem;
		font-weight: 500;
		text-transform: none;
	}

	/* (3) Beagyazott szintek (level 2/3/4) — 300 weight */
	#offcanvasNavbar.mck-offcanvas .mck-tree li li > a,
	#offcanvasNavbar.mck-offcanvas .mck-tree li li > button {
		font-size: 1rem;
		line-height: 1.5rem;
		font-weight: 300;
		text-transform: none;
	}
}

/* PANEL — wrapper a header + items koruleget. Default: rejtve, balrol kicsit eltolva. */
#offcanvasNavbar.mck-offcanvas .mck-sub-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--mck-sub-bg);
	color: var(--mck-sub-fg);
	border-left: 1px solid var(--mck-sub-divider);
	transform: translateX(-12px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease, visibility 0s linear 380ms;
}


#offcanvasNavbar.mck-offcanvas .mck-sub-panel.mck-active {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease, visibility 0s linear 0s;
}

/* HEADER (back gomb + breadcrumb + title egy sorban) — ugyanolyan magas mint a kek main header */
#offcanvasNavbar.mck-offcanvas .mck-sub-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	height: var(--mck-header-h);
	min-height: var(--mck-header-h);
	padding: 0 var(--mck-pad);
	border-bottom: 1px solid var(--mck-sub-divider);
	flex-shrink: 0;
	box-sizing: border-box;
}

/* Breadcrumb — szulo-szintek lanca, kattinthato lepesek */
#offcanvasNavbar.mck-offcanvas .mck-breadcrumb {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	color: var(--mck-sub-fg-muted);
	min-width: 0;
}

#offcanvasNavbar.mck-offcanvas .mck-bc-step {
	display: inline-block;
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--mck-sub-fg-muted);
	cursor: pointer;
	max-width: 14ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}
#offcanvasNavbar.mck-offcanvas .mck-bc-step:hover {
	color: var(--mck-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

#offcanvasNavbar.mck-offcanvas .mck-bc-sep {
	color: var(--mck-sub-fg-muted);
	opacity: 0.5;
	user-select: none;
}

/* Vissza gomb — csak ikon, kor formaju, jol kattinthato meret.
   Asztali nezeten elrejtve (a breadcrumb-bol/main nav-bol egyertelmu az ugras),
   csak mobilon (≤768px) latszik. */
#offcanvasNavbar.mck-offcanvas .mck-sub-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--mck-sub-fg-muted);
	background: transparent;
	border: 1px solid var(--mck-sub-divider);
	border-radius: 999px;
	cursor: pointer;
	flex-shrink: 0;
	transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .mck-sub-back { display: none; }
}
#offcanvasNavbar.mck-offcanvas .mck-sub-back:hover {
	color: var(--mck-sub-fg);
	background-color: rgba(5, 28, 44, 0.04);
	border-color: rgba(5, 28, 44, 0.2);
}
#offcanvasNavbar.mck-offcanvas .mck-sub-back:hover .mck-icon-arrow-left {
	transform: translateX(-2px);
}
#offcanvasNavbar.mck-offcanvas .mck-sub-back .mck-icon-arrow-left {
	transition: transform 200ms ease;
}

/* Title link (cim + kor formaju kek nyil-gomb).
   Mobilon jobbra (a back gomb mellett), asztalin balra. */
#offcanvasNavbar.mck-offcanvas .mck-sub-title {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
	font-family: var(--bs-font-header, var(--bs-font-sans-serif)), sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mck-sub-fg);
	letter-spacing: 0;
	text-decoration: none;
	transition: color 200ms ease;
}

@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .mck-sub-title {
		margin-left: 0;
		margin-right: auto;
	}
}

/* a nyil ikon a sub-title-ben kor formaju keret. Hatter atlatszo, szin a fonttal egyezik. */
#offcanvasNavbar.mck-offcanvas .mck-sub-title .mck-icon-arrow-right {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background-color: transparent;
	color: var(--mck-sub-fg);
	flex-shrink: 0;
	transition: transform 200ms ease, color 200ms ease;
}

/* mivel a mck-icon span eredetileg mask-tal mutatja az ikont (currentColor szinnel),
   itt felulirjuk: a span-on belul allitjuk a mask-imaget — de mivel a span MAGA mutatja
   az ikont, kell egy belso elem ami a tenyleges ikon. Egyszerubb: pseudo-elem ::before */
#offcanvasNavbar.mck-offcanvas .mck-sub-title .mck-icon-arrow-right::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
}

/* a sub-title saját mask-imagejat letiltjuk, mert a ::before-on van */
#offcanvasNavbar.mck-offcanvas .mck-sub-title .mck-icon-arrow-right {
	-webkit-mask-image: none;
	mask-image: none;
}

#offcanvasNavbar.mck-offcanvas a.mck-sub-title:hover {
	color: var(--mck-accent);
}
#offcanvasNavbar.mck-offcanvas a.mck-sub-title:hover .mck-icon-arrow-right {
	color: var(--mck-accent);
	transform: translateX(2px);
}

/* MCK ICON utility (Material SVG mask) — fekete alapszinnel */
#offcanvasNavbar.mck-offcanvas .mck-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: #000;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	flex-shrink: 0;
	vertical-align: middle;
}

/* Vissza ikon — level 2 (elso sub-panel): klasszikus arrow_back */
#offcanvasNavbar.mck-offcanvas .mck-icon-arrow-left {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M313-440l224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M313-440l224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z'/></svg>");
	width: 24px;
	height: 24px;
}

/* Vissza ikon — level 3+ panelekben: u-turn-left SVG, -90 fok elforgatva */
#offcanvasNavbar.mck-offcanvas .mck-sub-panel[data-level="3"] .mck-icon-arrow-left,
#offcanvasNavbar.mck-offcanvas .mck-sub-panel[data-level="4"] .mck-icon-arrow-left,
#offcanvasNavbar.mck-offcanvas .mck-sub-panel[data-level="5"] .mck-icon-arrow-left,
#offcanvasNavbar.mck-offcanvas .mck-sub-panel[data-level="6"] .mck-icon-arrow-left,
#offcanvasNavbar.mck-offcanvas .mck-sub-panel[data-level="7"] .mck-icon-arrow-left {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M200-160v-480h447L503-783l57-57 240 240-241 241-56-57 144-144H280v400h-80Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M200-160v-480h447L503-783l57-57 240 240-241 241-56-57 144-144H280v400h-80Z'/></svg>");
	width: 24px;
	height: 24px;
	transform: rotate(-90deg);
}

#offcanvasNavbar.mck-offcanvas .mck-icon-arrow-right {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>");
	width: 24px;
	height: 24px;
	transition: transform 200ms ease, background-color 200ms ease;
}

/* ITEMS (3 oszlopos flow layout sok elemnel) */
#offcanvasNavbar.mck-offcanvas .mck-sub-items {
	list-style: none;
	margin: 0;
	padding: 1.5rem var(--mck-pad) 2rem var(--mck-pad);
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	column-gap: 2rem;
	column-fill: balance;
}

/* alapertelmezett 1-2 oszlopos bekapcs reszponzivig, sok elem eseten 3 oszlop */
#offcanvasNavbar.mck-offcanvas .mck-sub-items {
	columns: 2;
}

@media (min-width: 1180px) {
	#offcanvasNavbar.mck-offcanvas .mck-sub-items {
		columns: 3;
	}
}

@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas .mck-sub-items {
		columns: 1;
	}
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items li {
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	border: 0 !important;
	padding: 0;
	margin: 0 0 0.4rem 0;
	display: block;
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-sub-header,
#offcanvasNavbar.mck-offcanvas .mck-sub-items > li.mck-sub-header,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-back-li {
	display: none;
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items a,
#offcanvasNavbar.mck-offcanvas .mck-sub-items button {
	display: inline-block;
	padding: 0.5rem 0;
	font-size: 1rem;
	font-weight: 400;
	color: var(--mck-sub-fg) !important;
	line-height: 1.4;
	text-align: left !important;
	text-decoration: none;
	background: transparent;
	border: 0;
	width: auto;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items a:hover,
#offcanvasNavbar.mck-offcanvas .mck-sub-items button:hover {
	color: var(--mck-accent) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	background: transparent;
	padding-left: 0;
}

/* a sub-items-en belul ha van mck-has-children li (mélyebb szint), chevron jobbra
   — jelzi, hogy van submenu, kattintásra panel nyilik mobilon */
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-has-children > a,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-has-children > button,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.dropdown > a,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.dropdown > button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-has-children > a::after,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-has-children > button::after,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.dropdown > a::after,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.dropdown > button::after {
	content: "" !important;
	display: inline-block !important;
	width: 24px !important;
	height: 24px !important;
	margin-left: auto !important;
	background-color: var(--mck-sub-fg-muted);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	border: 0 !important;
	transition: transform 200ms ease, background-color 200ms ease;
	flex-shrink: 0;
}

#offcanvasNavbar.mck-offcanvas .mck-sub-items li.mck-has-children > a:hover::after,
#offcanvasNavbar.mck-offcanvas .mck-sub-items li.dropdown > a:hover::after {
	background-color: var(--mck-accent);
	transform: translateX(3px);
}

/* ───── PRIMARY NAV (bal kek panel — McKinsey stilusban) ───── */
#offcanvasNavbar.mck-offcanvas .mck-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	position: relative;
}

#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li {
	padding: 1rem 2.5rem 1rem 1.5rem; /* mdc spacing: 16 40 16 24 */
	transition: background-color 200ms ease;
}

/* Asztali finomitas: kisebb font + szukebb fuggoleges padding */
@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li {
		padding: 0.75rem 2.5rem 0.75rem 1.5rem;
	}
	#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > a,
	#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > button {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > a,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0;
	font-family: var(--bs-font-header, var(--bs-font-sans-serif)), sans-serif;
	font-size: 1.125rem; /* 18px */
	line-height: 1.55; /* 28px */
	font-weight: 500;
	letter-spacing: 0;
	color: var(--mck-fg) !important;
	background: transparent;
	border: 0;
	width: 100%;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: text-decoration-color 200ms ease;
}

/* hover/focus: McKinsey-szerű underline (vastag, 6px alatt) */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > a:hover,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > button:hover,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > a:focus,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > button:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-skip-ink: none;
}

/* aktiv (kibontott) primary item: enyhébb kék bg + underline */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li.mck-open {
	background-color: rgba(255, 255, 255, 0.06);
}

#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li.mck-open > a,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li.mck-open > button {
	color: var(--mck-fg) !important;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-skip-ink: none;
}

/* a chevron (::after) ne kapja meg az underline-t */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > a::after,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li > button::after {
	text-decoration: none !important;
}

/* Bootstrap natív caret triangle elrejtese */
#offcanvasNavbar.mck-offcanvas .mck-nav .dropdown-toggle::after {
	border: 0 !important;
	margin: 0 !important;
	vertical-align: baseline !important;
	content: "" !important;
	display: none !important;
}

/* CHEVRON (Material Design `chevron_right`) — SVG mask-imgge, currentColor szinnel */
#offcanvasNavbar.mck-offcanvas .mck-nav li.mck-has-children > a::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.mck-has-children > button::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.dropdown > a::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.dropdown > button::after {
	content: "" !important;
	display: inline-block !important;
	width: 24px !important;
	height: 24px !important;
	margin-left: auto !important;
	background-color: var(--mck-fg-muted);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	border: 0 !important;
	vertical-align: middle !important;
	transition: transform 240ms ease, background-color 240ms ease;
	flex-shrink: 0;
}

#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li.mck-open > a::after,
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li.mck-open > button::after {
	background-color: var(--mck-accent);
	transform: translateX(4px);
}

#offcanvasNavbar.mck-offcanvas .mck-nav li.mck-has-children > a:hover::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.mck-has-children > button:hover::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.dropdown > a:hover::after,
#offcanvasNavbar.mck-offcanvas .mck-nav li.dropdown > button:hover::after {
	background-color: var(--mck-fg);
	transform: translateX(4px);
}

/* ───── FOOTER ───── */
#offcanvasNavbar.mck-offcanvas .offcanvas-footer {
	width: var(--mck-primary-w);
	min-width: var(--mck-primary-min);
	height: var(--mck-footer-h);
	min-height: var(--mck-footer-h);
	border-top: 1px solid var(--mck-divider);
	padding: 0 !important;
	background-color: var(--mck-bg);
	z-index: 5;
	box-shadow: none !important;
}

/* a belso wrapper: 2x2 grid mind a 4 gombnak — fehér elvalaszto vonalakkal */
#offcanvasNavbar.mck-offcanvas .offcanvas-footer > div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn {
	background-color: transparent;
	color: var(--mck-fg);
	border: 0;
	border-radius: 0;
	gap: 0.5rem;
	font-weight: 500;
	font-size: 0.9rem;
	padding: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	box-shadow: none;
	transition: background-color 200ms ease;
}

/* Asztali padding: bal oldali behuzas 4rem */
@media (min-width: 769px) {
	#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn {
		padding: 1.5rem 1rem 1.5rem 4rem;
	}
}

/* Mobil padding: bal oldali behuzas 3rem */
@media (max-width: 768px) {
	#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn {
		padding: 1.5rem 1rem 1.5rem 3rem;
	}
}

/* csak a 2. sor (3. es 4. gomb) kap felulre vonalat — az 1. sor tisztan marad */
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn:nth-child(n+3) {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* a paros gombok (2., 4.) bal oldalan vonal — fuggoleges elvalaszto a 2 oszlop kozott */
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn:nth-child(2n) {
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn:hover { background-color: rgba(255, 255, 255, 0.14); color: var(--mck-fg); }
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn.mix-btn-accent,
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn[href^="tel:"] {
	background-color: var(--mck-accent);
	color: #fff;
}
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn svg { fill: currentColor; }

/* a footer gombok ne mutassanak chevront (azt csak a nav-bar items-en akarjuk) */
#offcanvasNavbar.mck-offcanvas .offcanvas-footer .btn::after { content: none !important; display: none !important; }

/* az offcanvas konteneren is shadow off */
#offcanvasNavbar.mck-offcanvas { box-shadow: none !important; }
#offcanvasNavbar.mck-offcanvas .mck-offcanvas-header { box-shadow: none !important; }

/* ───── SCROLLBAR ───── */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul::-webkit-scrollbar { width: 6px; }
#offcanvasNavbar.mck-offcanvas .mck-nav > ul::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
#offcanvasNavbar.mck-offcanvas .mck-nav > ul::-webkit-scrollbar-track { background: transparent; }

#offcanvasNavbar.mck-offcanvas .mck-nav ul ul::-webkit-scrollbar { width: 6px; }
#offcanvasNavbar.mck-offcanvas .mck-nav ul ul::-webkit-scrollbar-thumb { background: rgba(5, 28, 44, 0.18); border-radius: 3px; }
#offcanvasNavbar.mck-offcanvas .mck-nav ul ul::-webkit-scrollbar-track { background: transparent; }

/* ───── BELÉPŐ ANIMÁCIÓ A NAV ELEMEKRE (csak első szint) ─────
   FONTOS: alapból rejtve vannak (opacity 0 + eltolva), hogy a slide-in alatt
   ne villanjanak be a teljesen latszo allapotban. Csak ha az offcanvas .show,
   futnak az animaciok. */
#offcanvasNavbar.mck-offcanvas .mck-nav > ul > li {
	opacity: 0;
	transform: translateX(16px);
}

#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li {
	animation: mck-nav-enter 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(1) { animation-delay: 100ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(2) { animation-delay: 140ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(3) { animation-delay: 180ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(4) { animation-delay: 220ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(5) { animation-delay: 260ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(6) { animation-delay: 300ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(7) { animation-delay: 340ms; }
#offcanvasNavbar.mck-offcanvas.show .mck-nav > ul > li:nth-child(n+8) { animation-delay: 380ms; }

@keyframes mck-nav-enter {
	to { opacity: 1; transform: translateX(0); }
}

/* "Hivasunk vissza" SVG belso korenek pulzalasa + a hullamok vastagabbra es
   nagyobbra hangolasa. A hullamokat az SVGator player vezérli, az `r`/`stroke-width`
   atrribútumokat NEM allitja, igy CSS-szel felulirhatjuk. */
#eibxfctt6w4p2 {
	transform-origin: 46px 46px;
	animation: mck-call-pulse 1.4s ease-in-out infinite;
}

@keyframes mck-call-pulse {
	0%, 100% { r: 31; }
	50%      { r: 38; }
}

/* Vastagabb es nagyobb hullamok */
#eibxfctt6w4p3 { r: 42; stroke-width: 4; }
#eibxfctt6w4p4 { r: 52; stroke-width: 3; }

/* A megnovelt sugar tulnyulhat a viewBox-on, ezert overflow: visible az SVG-en */
#eibxfctt6w4p1 { overflow: visible; }


/* ============================================================
   "Hivasunk vissza" #callup buborek-panel
   - Asztalin: jobb-also sarok, csorrel a triggergettouch fele
   - Mobilon: kozepen, gomb felett, falaktol 3rem
   - Toggle: a meglevo `.active` osztaly (toggleGetTouch JS)
   - Minden meret/padding/szin valtozoban tarolva
   ============================================================ */
#callup {
	/* === MATERIAL 3 SURFACE / SHAPE / ELEVATION === */
	--callup-bg:           #fff;
	--callup-color:        #1C1B1F;                         /* on-surface */
	--callup-color-muted:  rgba(28, 27, 31, 0.65);          /* on-surface-variant */
	--callup-divider:      rgba(28, 27, 31, 0.10);
	--callup-radius:       1rem;
	--callup-padding-y:    1.5rem;
	--callup-padding-x:    1.5rem;
	--callup-gap:          1rem;
	/* MD3 elevation level 3 */
	--callup-shadow:
		0 6px 10px 4px rgba(0, 0, 0, 0.07),
		0 2px 3px 0   rgba(0, 0, 0, 0.10);
	--callup-tail-size:    0.75rem;

	/* === TYPOGRAPHY (MD3 typescale) === */
	--callup-title-size:   1rem;       /* title-medium 16/24 */
	--callup-title-weight: 500;
	--callup-title-tracking: 0.15px;
	--callup-sub-size:     0.875rem;   /* body-medium 14/20 */
	--callup-sub-tracking: 0.25px;

	/* === BUTTONS (MD3 spec) === */
	--callup-btn-radius:   999px;       /* full-rounded */
	--callup-btn-padding:  0 1.5rem;    /* 24dp horizontal */
	--callup-btn-height:   2.5rem;      /* 40dp standard */
	--callup-btn-font:     0.9rem;
	--callup-btn-weight:   500;
	--callup-btn-tracking: 0.1px;
	--callup-btn-gap:      0.5rem;      /* 8dp icon→label */
	--callup-btn-icon:     18px;        /* MD3 icon-button: 18dp */

	/* Pozicionalas — gomb teteje folott + 1rem gap */
	--callup-offset:       calc(var(--trigger-bottom, 5px) + var(--trigger-size, 80px) + 1rem);

	/* Alap allapot — rejtve, alul keszul a megjelenes */
	position: fixed !important;
	width: auto !important;
	height: auto !important;
	background: var(--callup-bg) !important;
	color: var(--callup-color);
	border-radius: var(--callup-radius) !important;
	box-shadow: var(--callup-shadow) !important;
	padding: var(--callup-padding-y) var(--callup-padding-x) !important;
	z-index: 300;

	display: flex !important;
	flex-direction: column;
	gap: var(--callup-gap);

	opacity: 0;
	pointer-events: none;
	transform: translateY(8px) scale(0.96);
	transition:
		opacity 0.18s ease-out,
		transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Asztali nezet: jobb-also sarokba pozicionalva, csor jobbra-lent
   (a triggergettouch tetejehez kozeli) — mintha onnan nyilna ki */
@media (min-width: 769px) {
	#callup {
		right: var(--trigger-right, 40px) !important;
		bottom: var(--callup-offset) !important;
		left: auto !important;
		top: auto !important;
		width: max-content;
		max-width: 600px;
		transform-origin: bottom right;
	}
	#callup::after {
		content: "";
		position: absolute;
		right: calc(var(--trigger-size, 92px) / 2 - var(--callup-tail-size) / 2);
		bottom: calc(-1 * var(--callup-tail-size) / 2);
		width: var(--callup-tail-size);
		height: var(--callup-tail-size);
		background: var(--callup-bg);
		transform: rotate(45deg);
		box-shadow: 6px 6px 12px -2px rgba(0, 0, 0, 0.07);
		z-index: -1;
	}
}

/* Mobil nezet: kozepen, falaktol 3rem, gomb felett, csor kozepen lent */
@media (max-width: 768px) {
	#callup {
		--callup-padding-y:   2rem;
		--callup-padding-x:   2rem;
		--callup-radius:      1rem;
		--callup-gap:         1.25rem;
		--callup-title-size:  1.25rem;     /* title-large mobilon */
		--callup-title-weight: 500;
		--callup-sub-size:    0.9375rem;
		--callup-btn-font:    1rem;
		--callup-btn-height:  3rem;        /* 48dp tappable mobilon */
		--callup-btn-icon:    20px;
		--callup-btn-padding: 0 1.5rem;

		left: 3rem !important;
		right: 3rem !important;
		bottom: var(--callup-offset) !important;
		top: auto !important;
		max-width: none;
		transform-origin: bottom center;
	}
	#callup::after {
		content: "";
		position: absolute;
		right: 16px;
		left: auto;
		bottom: calc(-1 * var(--callup-tail-size) / 2);
		width: var(--callup-tail-size);
		height: var(--callup-tail-size);
		background: var(--callup-bg);
		transform: rotate(45deg);
		box-shadow: 4px 4px 10px -2px rgba(0, 0, 0, 0.07);
		z-index: -1;
	}
}

/* Aktiv allapot — a JS toggleGetTouch teszi `.active`-ra */
#callup.active {
	opacity: 1 !important;
	pointer-events: all !important;
	transform: translateY(0) scale(1);
}

/* Header — MD3 typescale, cim alatt subtle alcim */
#callup .callup-header {
	padding: 0;
	margin-bottom: 0.25rem;
}
#callup .callup-title {
	margin: 0;
	font-size: var(--callup-title-size);
	font-weight: var(--callup-title-weight);
	letter-spacing: var(--callup-title-tracking);
	color: var(--callup-color);
	line-height: 1.5;
}
#callup .callup-subtitle {
	margin: 0.125rem 0 0 0;
	font-size: var(--callup-sub-size);
	letter-spacing: var(--callup-sub-tracking);
	color: var(--callup-color-muted);
	line-height: 1.43;
}

/* Gomb sor — MD3 vertical action group */
#callup .callup-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* === MATERIAL 3 BUTTONS ===
   Filled / Outlined valtozat, MD3 spec szerint:
   - height 40dp (asztali) / 48dp (mobil)
   - padding 0 24dp
   - icon 18dp (asztali) / 20dp (mobil), gap 8dp
   - state layer hover-on (12% saját szín) */
#callup .callup-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--callup-btn-gap);
	height: var(--callup-btn-height);
	padding: var(--callup-btn-padding);
	border-radius: var(--callup-btn-radius);
	font-size: var(--callup-btn-font);
	font-weight: var(--callup-btn-weight);
	letter-spacing: var(--callup-btn-tracking);
	text-decoration: none;
	transition:
		background-color 180ms cubic-bezier(0.2, 0, 0, 1),
		box-shadow 180ms cubic-bezier(0.2, 0, 0, 1),
		color 180ms ease;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
}
#callup .callup-btn svg {
	width: var(--callup-btn-icon);
	height: var(--callup-btn-icon);
	flex-shrink: 0;
}

/* === MATERIAL RIPPLE (CSS-only) ===
   `::before` egy radial-gradient-bol indul a gomb kozepebol, ami `:active`
   allapotban kifelé skalalodik. Filled gombnal feher, outlined-nal sotet. */
#callup .callup-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), currentColor 0%, currentColor 25%, transparent 30%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0% 0%;
	opacity: 0;
	pointer-events: none;
	transition: background-size 600ms ease-out, opacity 800ms ease-out;
}
#callup .callup-btn:active::before {
	background-size: 250% 250%;
	opacity: 0.18;
	transition: background-size 0s, opacity 0s;
}
#callup .callup-btn-filled::before {
	color: #fff;
}
#callup .callup-btn-filled:active::before {
	opacity: 0.35;
}
#callup .callup-btn-outlined::before {
	color: var(--callup-color);
}

/* Filled — MD3 primary container szín, elevation level 0 alapból, level 1 hoverre */
#callup .callup-btn-filled {
	background-color: var(--bs-accent, #d62828);
	color: #fff;
	box-shadow: none;
}
#callup .callup-btn-filled:hover {
	color: #fff;
	box-shadow:
		0 1px 2px 0 rgba(0, 0, 0, 0.30),
		0 1px 3px 1px rgba(0, 0, 0, 0.15);
	background-image: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08));
}
#callup .callup-btn-filled:active {
	background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12));
}

/* Outlined — 1dp outline, no fill, hover state layer 8% on-surface */
#callup .callup-btn-outlined {
	background-color: transparent;
	color: var(--callup-color);
	border: 1px solid var(--callup-divider);
}
#callup .callup-btn-outlined:hover {
	background-color: rgba(28, 27, 31, 0.08);
	color: var(--callup-color);
	border-color: var(--callup-divider);
}
#callup .callup-btn-outlined:active {
	background-color: rgba(28, 27, 31, 0.12);
}

/* === CHATBOT (AI asszisztens) ===
   A 3 gomb UTAN megjelenik egy chat-felulet ami a /chatbot.php endpoint-ot
   hivja Claude Haiku 4.5-tel, system prompt-kent a /chatbot.txt-tol. */
#callup .callup-chat {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.5rem;
	min-width: 280px;
	padding: 0;
}
#callup .callup-chat-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	color: var(--callup-color-muted);
	letter-spacing: 0.4px;
}
#callup .callup-chat-divider::before,
#callup .callup-chat-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--callup-divider);
}
#callup .callup-chat-messages {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	max-height: 260px;
	overflow-y: auto;
	font-size: 0.875rem;
	line-height: 1.4;
	scrollbar-width: thin;
}
#callup .callup-chat-messages:empty { display: none; }
#callup .callup-chat-msg {
	padding: 0.5rem 0.75rem;
	border-radius: 1rem;
	max-width: 85%;
	white-space: pre-wrap;
	word-wrap: break-word;
}
#callup .callup-chat-msg-user {
	align-self: flex-end;
	background: var(--bs-accent, #d62828);
	color: #fff;
	border-bottom-right-radius: 0.25rem;
}
#callup .callup-chat-msg-bot {
	align-self: flex-start;
	background: rgba(28, 27, 31, 0.06);
	color: var(--callup-color);
	border-bottom-left-radius: 0.25rem;
}
#callup .callup-chat-msg-bot.is-loading::after {
	content: "•••";
	display: inline-block;
	letter-spacing: 0.1em;
	animation: callup-typing 1.4s steps(3, end) infinite;
}
@keyframes callup-typing {
	0%   { content: "•"; }
	33%  { content: "••"; }
	66%  { content: "•••"; }
	100% { content: "•"; }
}
#callup .callup-chat-form {
	display: flex;
	gap: 0.5rem;
	margin: 0;
}
#callup .callup-chat-input {
	flex: 1;
	min-width: 0;
	height: 2.5rem;
	padding: 0 1rem;
	border: 1px solid var(--callup-divider);
	border-radius: 999px;
	font-size: 0.9rem;
	color: var(--callup-color);
	background: #fff;
	outline: none;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
#callup .callup-chat-input::placeholder { color: var(--callup-color-muted); }
#callup .callup-chat-input:focus {
	border-color: var(--bs-accent, #d62828);
	box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.15);
}
#callup .callup-chat-send {
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border: 0;
	border-radius: 999px;
	background: var(--bs-accent, #d62828);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 180ms ease, opacity 180ms ease;
}
#callup .callup-chat-send svg { width: 18px; height: 18px; }
#callup .callup-chat-send:hover { background: color-mix(in srgb, var(--bs-accent, #d62828) 90%, #000 10%); }
#callup .callup-chat-send:disabled { opacity: 0.5; cursor: wait; }

#callup .callup-chat-msg a { color: inherit; text-decoration: underline; }
#callup .callup-chat-msg h4 { font-size: 1.05rem; font-weight: 600; margin: 0.6rem 0 0.3rem; line-height: 1.3; }
#callup .callup-chat-msg h5 { font-size: 1rem; font-weight: 600; margin: 0.5rem 0 0.25rem; line-height: 1.3; }
#callup .callup-chat-msg h6 { font-size: 0.95rem; font-weight: 600; margin: 0.4rem 0 0.2rem; line-height: 1.3; }
#callup .callup-chat-msg h4:first-child,
#callup .callup-chat-msg h5:first-child,
#callup .callup-chat-msg h6:first-child { margin-top: 0; }
#callup .callup-chat-msg ul,
#callup .callup-chat-msg ol { margin: 0.35rem 0; padding-left: 1.25rem; }
#callup .callup-chat-msg li { margin: 0.1rem 0; }
#callup .callup-chat-msg hr { border: 0; border-top: 1px solid var(--callup-divider); margin: 0.6rem 0; }
#callup .callup-chat-msg p { margin: 0.35rem 0; }
#callup .callup-chat-msg p:first-child { margin-top: 0; }
#callup .callup-chat-msg p:last-child { margin-bottom: 0; }

/* Asztali felbontason is ugyanazok a gombok mint mobilon: a mobile-link/felirat
   variansok mindenhol latszanak, a desktop-only variansok mindenhol rejtve. */
#callup .callup-label-desktop  { display: none; }
#callup .callup-action-desktop { display: none !important; }

/* Chat-szekcio fejlec — "Kérdezze a chatbotunkat!".
   Mint a callup-title, csak szurkebb (muted). A divider-vonalakat eltuntetjuk,
   helyette flex layout: szoveg balra, expand-gomb jobbra. */
#callup .callup-chat-divider {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.25rem 0;
	font-size: var(--callup-title-size);
	font-weight: var(--callup-title-weight);
	letter-spacing: var(--callup-title-tracking);
	color: var(--callup-color-muted);
	line-height: 1.5;
	text-transform: none;
}
#callup .callup-chat-divider::before,
#callup .callup-chat-divider::after { content: none !important; }
#callup .callup-chat-divider span { color: inherit; }

/* Expand + close (X) gomb wrapper a divider jobb szelen.
   Asztalon mind a 2 lathato; mobilon a wrapper teljes egesze rejtve (a mobil-X
   a callup-header-be megy). */
#callup .callup-chat-divider-actions {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}
#callup .callup-chat-expand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--callup-color-muted);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
	padding: 0;
	flex-shrink: 0;
}
#callup .callup-chat-expand:hover { background: rgba(28, 27, 31, 0.08); color: var(--callup-color); }
#callup .callup-chat-expand svg { width: 18px; height: 18px; }

@media (max-width: 768px) {
	/* Mobilon a divider-wrapper rejtve — a header-X kezeli a bezarast */
	#callup .callup-chat-divider-actions { display: none; }
}
@media (min-width: 769px) {
	/* Asztalon a header-X rejtve (a divider-wrapper-ben van mar) */
	#callup .callup-header .callup-close { display: none; }
}

/* Asztal: kibovitett allapot — szelesebb es magasabb, kozepre helyezve.
   Csak asztali gepen mukodik (a min-width: 769px scope alatt). */
@media (min-width: 769px) {
	#callup.expanded {
		width: 90vw !important;
		max-width: 1400px !important;
		height: 80vh !important;
		max-height: 800px !important;
		right: 5vw !important;
		bottom: 5vh !important;
		left: auto !important;
		top: auto !important;
	}
	#callup.expanded::after { display: none; }
	#callup.expanded .callup-chat {
		max-width: none;
	}
	#callup.expanded .callup-chat-messages {
		max-height: calc(80vh - 220px);
	}
}

/* Chat felulet wrapper (`callup-chat` mar tarsul a meglevo CSS-szel) — width-cap */
#callup .callup-chat {
	min-width: 280px;
}

/* Asztal: 2-oszlopos rács — bal: header+actions, jobb: callup-chat (~fél monitor)
   A `#callup` alap max-width 600px-jet override-oljuk hogy a 800px chat is elferjen. */
@media (min-width: 769px) {
	#callup {
		display: grid !important;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto 1fr;
		column-gap: 1.5rem;
		row-gap: 0.5rem;
		align-items: stretch;
		max-width: min(1100px, 95vw) !important;
	}
	#callup .callup-header  { grid-column: 1; grid-row: 1; }
	#callup .callup-actions { grid-column: 1; grid-row: 2; align-self: start; }
	#callup .callup-chat {
		grid-column: 2;
		grid-row: 1 / span 2;
		min-width: 480px;
		max-width: 800px;
		margin-top: 0;
	}
	#callup .callup-chat-messages { max-height: 360px; }
}

/* Mobil: column flex (default), kartya magassaga 100svh - 210px (a trigger-gomb es
   margok felett), chat alulra igazitva (margin-top: auto a flex-tracton). */
@media (max-width: 768px) {
	#callup {
		/* Mobilon teljes-kepernyos chat */
		height: 100svh !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		min-height: 0 !important;
		width: 100vw !important;
		max-width: none !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		border-radius: 0 !important;
	}
	#callup::after { display: none !important; }
	#callup .callup-chat {
		flex-grow: 1;
		min-width: 0;
		max-width: none;
		min-height: 0;
	}
	#callup .callup-chat-messages {
		flex-grow: 1;
		max-height: none;
		min-height: 0;
	}
}

/* z-index fix: a #callup mindig a #triggergettouch (es altalaban a fixed UI) folott
   legyen, kulonben a trigger-gomb takarja a (mobil-fullscreen) chat tetejet. */
#callup { z-index: 2000 !important; }
#callup.active { z-index: 2000 !important; }

/* ============================================================
   #triggerprompt — idoszakos chat-buborek a trigger-gomb mellett.
   ============================================================ */
#triggerprompt {
	position: fixed;
	z-index: 290;        /* trigger-gomb alatt vagy mellette, callup alatt */
	background: #fff;
	color: var(--callup-color, #1C1B1F);
	padding: 10px 14px;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.08);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	max-width: 200px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 350ms ease, transform 350ms ease;
	white-space: nowrap;
}
#triggerprompt.visible { opacity: 1; }

@media (min-width: 769px) {
	#triggerprompt {
		right: calc(var(--trigger-right, 30px) + var(--trigger-size, 88px) + 14px);
		bottom: calc(var(--trigger-bottom, 30px) + var(--trigger-size, 88px) / 2 - 22px);
		transform: translateX(8px);
	}
	#triggerprompt.visible { transform: translateX(0); }
	#triggerprompt::after {
		content: "";
		position: absolute;
		right: -6px;
		top: 50%;
		margin-top: -6px;
		border: 6px solid transparent;
		border-left-color: #fff;
		filter: drop-shadow(2px 0 1px rgba(0,0,0,0.06));
	}
}

@media (max-width: 768px) {
	#triggerprompt {
		right: calc(var(--trigger-right, 15px) + 4px);
		bottom: calc(var(--trigger-bottom, 15px) + var(--trigger-size, 80px) + 14px);
		transform: translateY(8px);
	}
	#triggerprompt.visible { transform: translateY(0); }
	#triggerprompt::after {
		content: "";
		position: absolute;
		right: 22px;
		bottom: -6px;
		border: 6px solid transparent;
		border-top-color: #fff;
		filter: drop-shadow(0 2px 1px rgba(0,0,0,0.06));
	}
}

/* Header layout: cim balra, X gomb jobbra (a `Miben segithetunk?` mellett) */
#callup .callup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
#callup .callup-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--callup-color-muted);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
	padding: 0;
	flex-shrink: 0;
}
#callup .callup-close:hover { background: rgba(28, 27, 31, 0.08); color: var(--callup-color); }
#callup .callup-close svg { width: 22px; height: 22px; }

/* Asztalin a telefonszam keret nelkuli accent felirat (nem gomb) —
   ikonnal egyutt egy sima sorba, mintha "kontakt info" lenne kiirva. */
#callup .callup-phone-display {
	display: inline-flex;
	align-items: center;
	gap: var(--callup-btn-gap);
	height: var(--callup-btn-height);
	padding: var(--callup-btn-padding);
	color: var(--bs-accent, #d62828);
	font-size: var(--callup-btn-font);
	font-weight: 600;
	letter-spacing: var(--callup-btn-tracking);
	user-select: text;
	cursor: text;
}
#callup .callup-phone-display svg {
	width: var(--callup-btn-icon);
	height: var(--callup-btn-icon);
	flex-shrink: 0;
}

/* Mobil: a hívás-gomb körül enyhe pulzáló glow ami "csengetve" hívja a figyelmet */
@media (max-width: 768px) {
	#callup.active .callup-action-mobile {
		animation: callup-pulse 2s ease-out infinite;
	}
}
@keyframes callup-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(214, 40, 40, 0.55); }
	70%  { box-shadow: 0 0 0 7px rgba(214, 40, 40, 0); }
	100% { box-shadow: 0 0 0 0   rgba(214, 40, 40, 0); }
}

/* Trigger ikon (gettouch / chat-buborek) — fehér színű */
.trigger-icon {
	color: #fff;
}

/* Hand-wave (integetes) ikon mindenhol fehér — barhova teszi a HTML, automatikusan
   egyezik a path-d kezdetével. */
svg path[d^="M23 17C23 20.31 20.31 23 17 23"] { fill: #fff !important; }