/* Vikingo WooCommerce – igényes értesítések.
   A klasszikus WooCommerce értesítések (hiba, siker, infó) egységes kártya-
   megjelenést kapnak ikonos jelvénnyel. A !important a sablonok saját
   notice-stílusait (színes csíkok, sápadt hátterek) írja felül.

   Kétféle elrendezés: a div-es értesítések (siker, infó) flexszel függőlegesen
   középre igazítják a szöveget és a gombot is; a lista alakú (ul) hibáknál az
   ikon az első sor közepéhez áll, ami egyetlen sornál a kártya közepe is. */

body .woocommerce-error,
body .woocommerce-message,
body .woocommerce-info {
	--vk-ntc-radius: var(--vk-radius, 12px);
	--vk-ntc-text: #23262b;

	position: relative;
	box-sizing: border-box;
	margin: 0 0 1.5em !important;
	padding: 1.05em 1.35em 1.05em 4.35em !important;
	background: var(--vk-ntc-tint) !important;
	border: 1px solid var(--vk-ntc-line) !important;
	border-radius: var(--vk-ntc-radius) !important;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	color: var(--vk-ntc-text) !important;
	font-size: 0.98em;
	line-height: 1.55;
	list-style: none !important;
	text-align: left;
}

/* Div alakú értesítés: a szöveg és a gomb egy tengelyen, függőlegesen középen.
   A gomb a forrásban elöl áll, az order teszi a sor végére. */
body div.woocommerce-error,
body div.woocommerce-message,
body div.woocommerce-info {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em 1em;
}

/* Lista alakú értesítés: blokk, a flow-root a belső úsztatásokat is befogja. */
body ul.woocommerce-error,
body ul.woocommerce-message,
body ul.woocommerce-info {
	display: flow-root !important;
}

/* Típusszínek: sötétebb hangsúly + halvány háttér/keret esésértékekkel. */
body .woocommerce-error {
	--vk-ntc-accent: #c23a3a;
	--vk-ntc-tint: #fdf5f5;
	--vk-ntc-line: #f0cfcf;
	--vk-ntc-badge: #f7e0e0;
}

body .woocommerce-message {
	--vk-ntc-accent: #1e7f4c;
	--vk-ntc-tint: #f3faf6;
	--vk-ntc-line: #c8e6d6;
	--vk-ntc-badge: #ddf0e5;
}

body .woocommerce-info {
	--vk-ntc-accent: #2e69c8;
	--vk-ntc-tint: #f4f8fd;
	--vk-ntc-line: #cdddf4;
	--vk-ntc-badge: #dfeafa;
}

@supports (color: color-mix(in srgb, red, blue)) {
	body .woocommerce-error,
	body .woocommerce-message,
	body .woocommerce-info {
		--vk-ntc-tint: color-mix(in srgb, var(--vk-ntc-accent) 4%, #fff);
		--vk-ntc-line: color-mix(in srgb, var(--vk-ntc-accent) 24%, #fff);
		--vk-ntc-badge: color-mix(in srgb, var(--vk-ntc-accent) 12%, #fff);
	}
}

/* Ikon-jelvény: színezett kör (::before) és benne vonalas ikon (::after,
   maszkként, így a színe a típusszínből jön). Alapban a kártya függőleges
   közepén ül; a lista alakú hibáknál az első sor közepéhez igazítjuk. */
body .woocommerce-error::before,
body .woocommerce-message::before,
body .woocommerce-info::before {
	content: "" !important;
	position: absolute;
	left: 1.15em;
	top: 50%;
	transform: translateY(-50%);
	width: 2.15em;
	height: 2.15em;
	border-radius: 50%;
	background: var(--vk-ntc-badge);
	display: block;
	margin: 0;
	font-size: inherit;
}

body .woocommerce-error::after,
body .woocommerce-message::after,
body .woocommerce-info::after {
	content: "" !important;
	position: absolute;
	left: 1.15em;
	top: 50%;
	transform: translateY(-50%);
	width: 2.15em;
	height: 2.15em;
	background-color: var(--vk-ntc-accent);
	-webkit-mask: var(--vk-ntc-icon) no-repeat center / 1.2em 1.2em;
	mask: var(--vk-ntc-icon) no-repeat center / 1.2em 1.2em;
	display: block;
	clear: none;
}

/* Első sorhoz igazítás a listáknál: 1.05em felső padding mellett a 1.55em-es
   sor közepe 1.825em-nél van, a 2.15em-es jelvényé így 0.75em-nél kezdődik.
   Egyetlen sornál ez pont a kártya függőleges közepe is. */
body ul.woocommerce-error::before,
body ul.woocommerce-message::before,
body ul.woocommerce-info::before,
body ul.woocommerce-error::after,
body ul.woocommerce-message::after,
body ul.woocommerce-info::after {
	top: 0.75em;
	transform: none;
}

body .woocommerce-error {
	--vk-ntc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}

body .woocommerce-message {
	--vk-ntc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

body .woocommerce-info {
	--vk-ntc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* Több hibaüzenet egy listában: tagolt sorok, felsorolásjel nélkül. */
body ul.woocommerce-error li,
body ul.woocommerce-message li,
body ul.woocommerce-info li {
	margin: 0 0 0.55em !important;
	padding: 0 !important;
	list-style: none !important;
}

body ul.woocommerce-error li:last-child,
body ul.woocommerce-message li:last-child,
body ul.woocommerce-info li:last-child {
	margin-bottom: 0 !important;
}

body .woocommerce-error a:not(.button),
body .woocommerce-message a:not(.button),
body .woocommerce-info a:not(.button) {
	color: var(--vk-ntc-accent) !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* A pénztári hibalista tételeit a WooCommerce teljes egészében linkbe
   csomagolja (kattintásra a mezőhöz ugrik) – ezek normál szövegként
   jelenjenek meg, ne aláhúzott linkként. A mezőnév a <strong>-tól hangsúlyos. */
body ul.woocommerce-error li a:not(.button),
body ul.woocommerce-message li a:not(.button),
body ul.woocommerce-info li a:not(.button) {
	color: inherit !important;
	font-weight: inherit;
	text-decoration: none;
}

body ul.woocommerce-error li a:not(.button):hover,
body ul.woocommerce-message li a:not(.button):hover,
body ul.woocommerce-info li a:not(.button):hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Az értesítésbe ágyazott gomb (pl. „Kosár”): visszafogott, körvonalas gomb
   a típus színében, a sor végén. */
body .woocommerce-error .button,
body .woocommerce-message .button,
body .woocommerce-info .button {
	padding: 0.4em 1em !important;
	background: transparent !important;
	border: 1px solid var(--vk-ntc-line) !important;
	border-radius: calc(var(--vk-ntc-radius) - 4px) !important;
	box-shadow: none !important;
	color: var(--vk-ntc-accent) !important;
	font-size: 0.92em !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Flex-es értesítésben a gomb a sor végére kerül és nem nyúlik meg. Az
   ingyenes szállítás értesítés gombja (.vk-fsn__button) kivétel: azt a saját
   .vk-fsn elrendezése pozicionálja, az order itt a folyamatjelző mögé lökné. */
body div.woocommerce-error .button:not(.vk-fsn__button),
body div.woocommerce-message .button:not(.vk-fsn__button),
body div.woocommerce-info .button:not(.vk-fsn__button) {
	order: 99;
	float: none;
	margin: 0 0 0 auto !important;
	align-self: center;
}

/* Lista alakúnál marad az úsztatás. */
body ul.woocommerce-error .button,
body ul.woocommerce-message .button,
body ul.woocommerce-info .button {
	float: right;
	margin: -0.15em 0 0.35em 1em !important;
}

body .woocommerce-error .button:hover,
body .woocommerce-message .button:hover,
body .woocommerce-info .button:hover {
	background: var(--vk-ntc-badge) !important;
	border-color: var(--vk-ntc-accent) !important;
	color: var(--vk-ntc-accent) !important;
}

@media (max-width: 600px) {
	/* Mobilon a gomb a szöveg alá kerül, az ikon az első sorhoz igazodik. */
	body div.woocommerce-error,
	body div.woocommerce-message,
	body div.woocommerce-info {
		flex-direction: column;
		align-items: flex-start;
	}

	body div.woocommerce-error::before,
	body div.woocommerce-message::before,
	body div.woocommerce-info::before,
	body div.woocommerce-error::after,
	body div.woocommerce-message::after,
	body div.woocommerce-info::after {
		top: 0.75em;
		transform: none;
	}

	body div.woocommerce-error .button:not(.vk-fsn__button),
	body div.woocommerce-message .button:not(.vk-fsn__button),
	body div.woocommerce-info .button:not(.vk-fsn__button) {
		margin: 0.2em 0 0 !important;
		align-self: flex-start;
	}

	body ul.woocommerce-error .button,
	body ul.woocommerce-message .button,
	body ul.woocommerce-info .button {
		float: none;
		display: block;
		width: fit-content;
		margin: 0.75em 0 0 !important;
	}
}

/* A blokkos (Store API-s) értesítés-sávok lekerekítése, hogy passzoljanak. */
body .wc-block-components-notice-banner {
	border-radius: var(--vk-radius, 12px) !important;
}