/* ---- Currency switcher ----------------------------------------------
   Inherits the surrounding header font. White-on-dark by default; the
   ACTIVE currency is bold with an underline, the inactive one is dimmed
   and brightens on hover. !important beats theme menu-link colors. */
.highpony-currency-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font: inherit;
	color: #fff;
	white-space: nowrap;
	margin-right: 1.1em; /* breathing room before the search icon */
}
.highpony-currency-option {
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 500;
	font-size: 1em;
	display: inline-flex;
	align-items: center;
	gap: 0.26em;
}
/* Flags: bigger, ALWAYS full opacity. */
.highpony-flag {
	font-size: 1.45em;
	line-height: 1;
}
/* Only the currency CODE of the unselected option is dimmed. */
.highpony-code {
	opacity: 0.45;
	transition: opacity 0.15s ease;
}
a.highpony-currency-option:hover .highpony-code {
	opacity: 0.9;
}
.highpony-currency-option.is-active .highpony-code {
	opacity: 1;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}
.highpony-currency-sep {
	opacity: 0.25;
	color: #fff;
}

/* ---- "Doručenie aj do ČR" badge -------------------------------------
   Base pill look, overlaid on the product-card image top-left (mirror of
   the theme's VYPREDANÉ tag top-right). Product cards are made positioned
   so the absolute badge anchors to the card. */
.highpony-cz-badge {
	display: inline-block;
	font-size: 0.72em;
	line-height: 1;
	padding: 0.45em 0.7em;
	border-radius: 99px;
	background: #eef4ff;
	color: #1d4ed8;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
ul.products li.product {
	position: relative;
}
ul.products li.product .highpony-cz-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	margin: 0;
}

/* ---- "Items removed" glass modal ------------------------------------ */
.highpony-cz-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(8, 8, 20, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: highpony-fade 0.25s ease;
}
.highpony-cz-modal {
	position: relative;
	max-width: 430px;
	width: 100%;
	padding: 30px 28px 26px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.13);
	backdrop-filter: blur(24px) saturate(1.5);
	-webkit-backdrop-filter: blur(24px) saturate(1.5);
	border: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
	color: #fff;
	text-align: center;
	font: inherit;
}
.highpony-cz-modal h3 {
	color: #fff;
	margin: 0 0 10px;
	font-size: 1.3em;
	line-height: 1.3;
}
.highpony-cz-modal p {
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 14px;
	font-size: 0.95em;
	line-height: 1.55;
}
.highpony-cz-modal ul {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	font-size: 0.92em;
}
.highpony-cz-modal li {
	padding: 0.25em 0;
	opacity: 0.92;
}
.highpony-cz-modal-btn {
	display: inline-block;
	padding: 0.85em 1.6em;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.94);
	color: #14142b !important;
	font-weight: 700;
	text-decoration: none !important;
	font-size: 0.95em;
}
.highpony-cz-modal-close {
	position: absolute;
	top: 10px;
	right: 16px;
	color: rgba(255, 255, 255, 0.6) !important;
	text-decoration: none !important;
	font-size: 1.3em;
	line-height: 1;
}
@keyframes highpony-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.highpony-cz-modal-overlay { animation: none; }
}

/* ---- CZ address guard (checkout order review) ------------------------ */
.hpczk-guard {
	border-radius: 16px;
	padding: 16px;
	background: linear-gradient(160deg, rgba(30, 25, 60, 0.72), rgba(15, 12, 35, 0.8));
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	border: 1px solid rgba(215, 20, 26, 0.55);
	color: #fff;
	margin: 6px 0;
}
.hpczk-guard-title {
	font-weight: 800;
	margin-bottom: 6px;
	color: #ff9c9c;
}
.hpczk-guard-body {
	font-size: 0.9em;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
	margin-bottom: 12px;
}
.hpczk-guard-btn {
	display: inline-block;
	background: rgba(255, 255, 255, 0.94);
	color: #14142b !important;
	border-radius: 99px;
	padding: 0.6em 1.3em;
	font-weight: 700;
	font-size: 0.85em;
	text-decoration: none !important;
}
.hpczk-guard-hint {
	display: inline-block;
	margin-left: 0.8em;
	font-size: 0.8em;
	color: rgba(255, 255, 255, 0.6);
}

/* ---- phone: tighter, properly centred flag + code pairs ---- */
.highpony-currency-option,
.highpony-flag {
	line-height: 1;
}
.highpony-flag {
	display: inline-flex;
	align-items: center;
}
@media (max-width: 782px) {
	.highpony-currency-switcher {
		gap: 0.3em;
		margin-right: 0.55em;
		font-size: 0.95em;
	}
	.highpony-currency-option {
		gap: 0.24em;
	}
	.highpony-flag {
		font-size: 1.15em;
	}
	.highpony-currency-option.is-active .highpony-code {
		text-underline-offset: 0.22em;
		text-decoration-thickness: 1.5px;
	}
	.highpony-currency-sep {
		margin: 0 0.05em;
	}
}

/* ---- phone header layout ------------------------------------------------
   Two clean rows on a phone:

       row 1:  🇸🇰 EUR | 🇨🇿 CZK
       row 2:  🔍   🛒 150,88 €

   so the switcher gets a full-width line and search sits on the cart's line,
   with the amount to the RIGHT of the trolley, hard against the screen edge.

   Each rule is pinned THREE ways, because two of them have already failed
   silently in production and a header that only works on one site is worth
   less than one that is ugly but reliable:
     1. .hp-hdr-group / .hp-hdr-switcher — classes added by our own JS
     2. the live element ids — exact, but site-specific
     3. :has() on widget type — generic, but the first thing an engine or a
        minifier drops
   If any single mechanism survives, the layout lands.

   NOTE on the ids below: they are highpony.sk's. They are a belt-and-braces
   pin, never the only hook — The shortcode
   widget holding the switcher is added by hand per site, so it gets a
   different id on every install (staging 20b5bfe, live 6cf0da2), and an
   earlier version of this block silently did nothing on live for exactly
   that reason. Match on widget TYPE classes, which Elementor always emits
   and which are identical everywhere, and identify the header group as
   "the container that holds our switcher".                                */

@media (max-width: 782px) {
	.hp-hdr-group,
	.elementor-element-7c342f8,
	.e-con:has(> .elementor-widget-shortcode .highpony-currency-switcher) {
		flex-wrap: wrap !important;
		justify-content: flex-end;
		align-items: center;
		row-gap: 2px;
		column-gap: 0.3em;
	}

	/* row 1 — currency switcher alone, aligned to the right edge */
	.hp-hdr-switcher,
	.elementor-element-6cf0da2,
	.elementor-widget-shortcode:has(.highpony-currency-switcher) {
		order: 1;
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		display: flex;
		justify-content: flex-end;
	}

	/* row 2 — search, then cart */
	.hp-hdr-group > .elementor-widget-fibosearch,
	.elementor-element-7c342f8 > .elementor-widget-fibosearch,
	.e-con:has(> .elementor-widget-shortcode .highpony-currency-switcher) > .elementor-widget-fibosearch {
		order: 2;
		margin-right: 0.9em;
	}
	.hp-hdr-group > .elementor-widget-woocommerce-menu-cart,
	.elementor-element-7c342f8 > .elementor-widget-woocommerce-menu-cart,
	.e-con:has(> .elementor-widget-shortcode .highpony-currency-switcher) > .elementor-widget-woocommerce-menu-cart {
		order: 3;
		margin-right: 10px !important;
	}

	/* amount to the right of the trolley, and slim enough that both fit the
	   ~148px the header row allows next to the logo and hamburger */
	.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button {
		flex-direction: row-reverse !important;
		gap: 0.35em;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button .elementor-button-icon {
		margin: 0 !important;
	}
	.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button .elementor-button-text {
		font-size: 1em;
	}

	/* legibility within the trimmed group */
	.highpony-currency-switcher {
		font-size: 0.95em;
		margin-right: 10px !important;
	}
	.highpony-flag {
		font-size: 1.3em;
	}
}