/**
 * Harmonizált szavatossági értesítés – frontend alapstílus.
 * Testreszabás: a beállítási oldal „Egyedi CSS” mezőjében (ez a fájl után töltődik be),
 * elsősorban az alábbi változók felülírásával, pl. :root{--hn-bar-bg:#2f4f2f;--hn-bar-color:#fff;}
 */

:root {
	/* Betűtípusok – alapból a téma betűtípusát öröklik */
	--hn-font-family: inherit;
	--hn-dialog-font-family: inherit;
	--hn-bar-font-size: 14px;
	--hn-bar-font-weight: inherit;
	--hn-link-font-size: 15px;
	--hn-close-font-size: 32px;

	/* Színek – a currentColor az adott elem (téma) szövegszínét jelenti */
	--hn-bar-bg: #f5f5f5;
	--hn-bar-color: currentColor;
	--hn-trigger-color: currentColor;
	--hn-trigger-hover-color: currentColor;
	--hn-focus-color: currentColor;
	--hn-dialog-bg: #fff;
	--hn-dialog-color: #1a1a1a;
	--hn-close-color: currentColor;
	--hn-link-color: currentColor;
	--hn-backdrop: rgba(0, 0, 0, .6);
	--hn-dialog-shadow: 0 10px 40px rgba(0, 0, 0, .3);

	/* Méretek */
	--hn-dialog-width: 820px;
	--hn-radius: 8px;
	--hn-badge-width: 225px;

	/* Igazítás */
	--hn-meta-align: left;
}

/* Sáv / trigger */
.hn-bar {
	text-align: center;
	margin: 1.5em 0;
	font-family: var(--hn-font-family);
}

.hn-bar--header,
.hn-bar--footer {
	margin: 0;
	padding: 10px 16px;
	background: var(--hn-bar-bg);
	color: var(--hn-bar-color);
	font-size: var(--hn-bar-font-size);
	font-weight: var(--hn-bar-font-weight);
}

/* Termékoldal, a meta mezők után: az összefoglaló oszlophoz igazodik */
.hn-bar--product_meta {
	text-align: var(--hn-meta-align);
	margin: 1em 0;
}

.hn-bar .hn-trigger {
	display: inline;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	font: inherit;
	line-height: inherit;
	text-transform: none;
	letter-spacing: inherit;
	color: var(--hn-trigger-color);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.hn-bar .hn-trigger:hover {
	text-decoration-thickness: 2px;
	background: none;
	color: var(--hn-trigger-hover-color);
}

.hn-bar .hn-trigger:focus-visible {
	outline: 2px solid var(--hn-focus-color);
	outline-offset: 3px;
}

/* Képes trigger (jogszabalyi-szavatossag.png, csak magyarul) */
.hn-bar .hn-trigger--image {
	display: inline-block;
	text-decoration: none;
	line-height: 0;
	vertical-align: middle;
}

.hn-bar .hn-trigger--image:hover {
	opacity: .9;
}

.hn-bar .hn-trigger--image img {
	display: block;
	width: var(--hn-badge-width);
	max-width: 100%;
	height: auto;
	margin: 0;
	border: 0;
}

/* Felugró ablak */
.hn-dialog {
	padding: 0;
	border: 0;
	border-radius: var(--hn-radius);
	width: min(92vw, var(--hn-dialog-width));
	max-width: none;
	max-height: 92vh;
	background: var(--hn-dialog-bg);
	color: var(--hn-dialog-color);
	font-family: var(--hn-dialog-font-family);
	box-shadow: var(--hn-dialog-shadow);
}

.hn-dialog:not([open]) {
	display: none;
}

.hn-dialog::backdrop {
	background: var(--hn-backdrop);
}

.hn-dialog__inner {
	position: relative;
	padding: 48px 16px 16px;
}

.hn-dialog__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.hn-dialog__close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: 0;
	padding: 4px 10px;
	font-size: var(--hn-close-font-size);
	line-height: 1;
	color: var(--hn-close-color);
	cursor: pointer;
}

.hn-dialog__image,
.hn-dialog__image img {
	display: block;
}

.hn-dialog__image img {
	width: 100%;
	height: auto;
	max-width: none;
}

.hn-dialog__link {
	text-align: center;
	margin: 12px 0 0;
	font-size: var(--hn-link-font-size);
}

.hn-dialog__link a {
	color: var(--hn-link-color);
	text-decoration: underline;
}