/* HighPony Balíčky — chooser popup + pack cards.
   House look: dark navy liquid glass, pink gradient action, no :has(). */

.hp-pack-buy { margin: 10px 0; }
.hp-pack-note { margin: 0 0 10px; opacity: .85; }

.hp-pack-buy .hp-pack-open,
.hp-pack-card .hp-pack-open {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	display: inline-block;
	border: 0;
	cursor: pointer;
	padding: .85em 1.6em;
	border-radius: 14px;
	font-weight: 800;
	font-size: 1em;
	color: #fff;
	/* background-color SEPARATE from the gradient: Elementor's lazy-load
	   blanks background-image with !important below the fold, and the
	   shorthand alone would leave white text on the card (documented trap) */
	background-color: #8b5cf6;
	background-image: linear-gradient(90deg, #8b5cf6, #ff7ad9);
	box-shadow: 0 10px 26px rgba(139, 92, 246, .35);
	transition: transform .12s ease, filter .15s ease;
}
.hp-pack-buy .hp-pack-open:hover,
.hp-pack-card .hp-pack-open:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }

/* cards for [hp_packs] */
.hp-packs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin: 8px 0; }
.hp-pack-card {
	background: rgba(20, 18, 48, .55);
	border: 1px solid rgba(255, 122, 217, .35);
	border-radius: 18px;
	overflow: hidden;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	display: flex; flex-direction: column;
}
.hp-pack-card-media img { width: 100%; height: auto; display: block; }
.hp-pack-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.hp-pack-card-body h3 { margin: 0; font-size: 1.05em; }
.hp-pack-card-meta { margin: 0; opacity: .75; font-size: .88em; }
.hp-pack-card-price { margin: 0 0 6px; font-weight: 800; font-size: 1.15em; }

/* ---------------- popup ---------------- */
.hp-pack-modal { position: fixed; inset: 0; z-index: 2147481000; display: flex; align-items: center; justify-content: center; padding: 18px; }
.hp-pack-backdrop {
	position: absolute; inset: 0;
	background: rgba(11, 27, 58, .8);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0; transition: opacity .25s ease;
}
.hp-pack-modal.is-open .hp-pack-backdrop { opacity: 1; }
.hp-pack-panel {
	position: relative;
	width: min(680px, 100%);
	max-height: min(84vh, 760px);
	display: flex; flex-direction: column;
	background: rgba(20, 18, 48, .92);
	border: 1px solid rgba(255, 122, 217, .4);
	border-radius: 20px;
	color: #fff;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
	opacity: 0; transform: scale(.92) translateY(14px);
	transition: opacity .26s ease, transform .34s cubic-bezier(.2, .8, .25, 1);
}
.hp-pack-modal.is-open .hp-pack-panel { opacity: 1; transform: none; }

.hp-pack-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hp-pack-head h3 { margin: 0; flex: 1; font-size: 1.1em; color: #fff; }
/* Scoped under .hp-pack-head/.hp-pack-step on purpose: the theme reset styles
   [type="button"] with the SAME specificity as a bare class and wins on load
   order — the close button came out as a pink-bordered square (documented
   trap). Two-class selectors outrank it; the glyphs are flex-centered because
   baseline text never sits optically centered in a circle. */
.hp-pack-head .hp-pack-x {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	margin: 0;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	box-shadow: none;
}
.hp-pack-head .hp-pack-x:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.hp-pack-list {
	overflow-y: auto;
	scrollbar-gutter: stable;
	padding: 12px 18px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.hp-pack-list::-webkit-scrollbar { width: 8px; }
.hp-pack-list::-webkit-scrollbar-thumb { background: rgba(255, 122, 217, .35); border-radius: 99px; }
.hp-pack-list::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 560px) { .hp-pack-list { grid-template-columns: 1fr; } }

.hp-pack-item {
	display: flex; align-items: center; gap: 10px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	padding: 8px 10px;
	transition: border-color .15s ease, background .15s ease;
}
.hp-pack-item.is-picked { border-color: #ff7ad9; background: rgba(255, 122, 217, .1); }
.hp-pack-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; background: rgba(255,255,255,.9); flex: none; }
.hp-pack-item-name { flex: 1; min-width: 0; font-size: .84em; line-height: 1.3; overflow-wrap: anywhere; }

.hp-pack-step { display: flex; align-items: center; gap: 6px; flex: none; }
.hp-pack-step button {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(255, 122, 217, .6);
	padding: 0;
	margin: 0;
	background: transparent;
	background-image: none;
	color: #ff7ad9;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	box-shadow: none;
	transition: background .12s ease, color .12s ease;
}
.hp-pack-step button:hover:not(:disabled) { background: #ff7ad9; color: #14142b; }
.hp-pack-step button:disabled { opacity: .3; cursor: default; }
.hp-pack-step output { min-width: 18px; text-align: center; font-weight: 800; font-size: .95em; }

.hp-pack-foot { padding: 12px 18px 16px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hp-pack-progress { flex: 1; min-width: 140px; }
.hp-pack-progress-label { font-size: .85em; opacity: .85; margin-bottom: 5px; }
.hp-pack-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.hp-pack-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #8b5cf6, #ff7ad9); transition: width .25s ease; }

.hp-pack-foot .hp-pack-confirm {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	cursor: pointer;
	padding: .8em 1.5em; border-radius: 14px;
	font-weight: 800; color: #fff; font-size: .95em;
	background-color: #8b5cf6;
	background-image: linear-gradient(90deg, #8b5cf6, #ff7ad9);
	box-shadow: 0 10px 26px rgba(139, 92, 246, .35);
	transition: filter .15s ease, opacity .15s ease;
}
.hp-pack-foot .hp-pack-confirm:disabled { opacity: .35; cursor: default; box-shadow: none; }
.hp-pack-foot .hp-pack-confirm:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }

.hp-pack-msg { width: 100%; margin: 0; font-size: .88em; min-height: 1.2em; }
.hp-pack-msg.is-ok { color: #7dffb0; }
.hp-pack-msg.is-err { color: #ff9d9d; }

.hp-pack-loading { padding: 40px; text-align: center; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
	.hp-pack-panel, .hp-pack-backdrop, .hp-pack-bar span { transition: none; }
}

/* Shop grid: the pack's "Zložiť balíček" link wears the same Arkáda gold
   slab as every other grid action, so a pack does not look like a poor
   relative. Colours pinned here because the drawer.css gold group targets
   Woo's own button classes, which this link deliberately does not carry
   (product_type_variable would trigger the drawer's quick-add hijack). */
ul.products li.product a.button.hp-pack-grid-link,
ul.products li.product button.button.hp-pack-grid-link {
	background-color: #f5b301;
	background-image: linear-gradient(180deg, #ffd23f, #f5b301);
	color: #1a1400 !important;
	font-weight: 800;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 5px 0 #9c6b00;
	transition: transform .08s ease, box-shadow .08s ease;
}
ul.products li.product a.button.hp-pack-grid-link:active,
ul.products li.product button.button.hp-pack-grid-link:active {
	transform: translateY(4px);
	box-shadow: 0 1px 0 #9c6b00;
}

/* ==========================================================================
   0.3.1 — Michal's staging review.
   Two DIFFERENT buttons on purpose, each matching the reference he pointed at:
   the product page keeps the violet→pink invitation (his 3ss), the popup
   footer wears the shop's gold Arkáda slab (his 6ss). Both selectors are
   two classes deep so they beat the base rules earlier in this file — the
   earlier attempt lost on specificity and left the confirm violet.
   ========================================================================== */

/* ---- product page: the invitation box (2ss → 3ss) ---- */
.hp-pack-buy {
	margin: 14px 0;
	padding: 22px 24px 26px;
	border-radius: 20px;
	background-color: rgba(20, 18, 48, .55);
	background-image: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
	border: 1px solid rgba(255, 122, 217, .35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 34px rgba(0, 0, 0, .35);
	text-align: center;
}
.hp-pack-buy-kicker {
	margin: 0 0 4px;
	font-size: .8em;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #ff7ad9;
}
.hp-pack-note { margin: 0 0 16px; opacity: 1; color: #f4f2ff; }
.hp-pack-note strong { color: #ffd75e; }
/* GOLD, like every other action on this shop — the Arkáda slab with its
   hard zero-blur edge. (An earlier pass read Michal's reference as the
   violet gradient; the reference was the gold "Pridať do košíka" in its
   box.) background-color separate from the gradient: Elementor's lazy-load
   blanks background-image with !important below the fold. */
.hp-pack-buy .hp-pack-open {
	font-size: 1.12em;
	padding: .95em 2.4em;
	background-color: #f5b301;
	background-image: linear-gradient(180deg, #ffd23f, #f5b301);
	color: #1a1400;
	box-shadow: 0 6px 0 #9c6b00, 0 14px 30px rgba(0, 0, 0, .35);
	transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.hp-pack-buy .hp-pack-open:hover {
	filter: brightness(1.06);
	color: #1a1400;
	transform: translateY(-2px);
	box-shadow: 0 8px 0 #9c6b00, 0 18px 36px rgba(0, 0, 0, .4);
}
.hp-pack-buy .hp-pack-open:active {
	transform: translateY(5px);
	box-shadow: 0 1px 0 #9c6b00, 0 6px 14px rgba(0, 0, 0, .3);
	filter: none;
}

/* the legal disclaimer above it was dark-gold italic on navy — unreadable.
   Pack pages only; ordinary products keep their global styling. */
body.hp-pack-single .woocommerce-product-details__short-description,
body.hp-pack-single .woocommerce-product-details__short-description p,
body.hp-pack-single .elementor-widget-woocommerce-product-short-description p {
	color: rgba(244, 242, 255, .82) !important;
}

/* ---- popup footer (6ss): gold slab + gold→pink fill ---- */
.hp-pack-foot .hp-pack-confirm {
	background-color: #f5b301;
	background-image: linear-gradient(180deg, #ffd23f, #f5b301);
	color: #1a1400;
	border: 0;
	border-radius: 14px;
	font-weight: 800;
	box-shadow: 0 5px 0 #9c6b00;
	transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.hp-pack-foot .hp-pack-confirm:hover:not(:disabled) {
	filter: brightness(1.06);
	color: #1a1400;
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #9c6b00;
}
.hp-pack-foot .hp-pack-confirm:active:not(:disabled) {
	transform: translateY(4px);
	box-shadow: 0 1px 0 #9c6b00;
	filter: none;
}
.hp-pack-foot .hp-pack-confirm:disabled {
	opacity: .45;
	box-shadow: 0 5px 0 rgba(156, 107, 0, .5);
	color: rgba(26, 20, 0, .7);
}
.hp-pack-bar span {
	background-color: #ffc200;
	background-image: linear-gradient(90deg, #ffd75e, #ffc200 45%, #ff7ad9);
}

/* ---- gallery card (1ss): the pack's square artwork pushed its title lower
   than the neighbours'. Measured on staging: sibling packshots render
   270x324, so pack media adopts the same 5:6 box and every title in the row
   sits on one line. ---- */
ul.products li.product.hp-pack-product img {
	aspect-ratio: 5 / 6;
	object-fit: cover;
	height: auto;
}
ul.products li.product.hp-pack-product { cursor: pointer; }

/* ---- popup rows (5ss): theme-toned tile, product zoomed to fill, price ----
   No blend mode: multiply on a dark card darkens the PRODUCT too and the
   thumbnails came out muddy. Cropping does the real work instead — these
   packshots are centred with a wide white margin, so cover + a modest scale
   throws the margin away and leaves the product filling the tile. */
.hp-pack-item { cursor: pointer; }
.hp-pack-item-imgbox {
	width: 62px;
	height: 62px;
	border-radius: 12px;
	overflow: hidden;
	flex: none;
	background: rgba(255, 255, 255, .06);
	display: block;
}
.hp-pack-item .hp-pack-item-imgbox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.5);
	border-radius: 0;
	background: transparent;
	display: block;
}
.hp-pack-item-name { display: flex; flex-direction: column; gap: 3px; }
.hp-pack-item-price { font-size: .95em; font-weight: 800; color: #ffd75e; }

/* ==========================================================================
   0.3.2 — premium opening + locked page behind
   ========================================================================== */

/* The panel grows out of the pressed button (JS sets transform-origin to the
   button's centre in panel coordinates) on the house easing. */
.hp-pack-panel {
	transform: scale(.86) translateY(18px);
	transition:
		opacity .3s ease,
		transform .42s cubic-bezier(.22, 1, .36, 1);
	will-change: transform, opacity;
}
.hp-pack-modal.is-open .hp-pack-panel { opacity: 1; transform: scale(1) translateY(0); }
.hp-pack-modal.is-closing .hp-pack-panel {
	opacity: 0;
	transform: scale(.94) translateY(8px);
	transition: opacity .18s ease, transform .2s ease;
}
.hp-pack-backdrop { transition: opacity .3s ease; }

/* Rows rise in a cascade once the panel has arrived (delay set inline). */
.hp-pack-list .hp-pack-item {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity .32s ease,
		transform .32s cubic-bezier(.22, 1, .36, 1),
		border-color .15s ease,
		background .15s ease;
}
.hp-pack-list .hp-pack-item.is-in { opacity: 1; transform: none; }

/* pressing a row should feel like a button */
.hp-pack-list .hp-pack-item:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
	.hp-pack-panel,
	.hp-pack-list .hp-pack-item { transition: opacity .18s ease; transform: none !important; }
}

/* The veil answers the click at once; the panel waits until it has content
   to grow with (see open()/reveal() in packs.js). */
.hp-pack-modal.is-veiled .hp-pack-backdrop { opacity: 1; }

/* ---- pack spec table (the "cena za kus" overview) ---- */
.hp-pack-spec {
	list-style: none;
	margin: 18px 0 10px;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.hp-pack-spec li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 11px 2px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.hp-pack-spec li::before { content: none; }   /* theme list bullets */
.hp-pack-spec span {
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(244, 242, 255, .62);
}
/* The theme colours .woocommerce-Price-amount itself, so the value inside
   these rows arrived muted grey. Pin the amount, not just the wrapper. */
.hp-pack-spec strong,
.hp-pack-spec strong .woocommerce-Price-amount,
.hp-pack-spec strong .woocommerce-Price-currencySymbol {
	font-size: 1.05em;
	font-weight: 800;
	color: #f4f2ff;
	text-align: right;
	letter-spacing: 0;
}
.hp-pack-spec .hp-pack-spec-save strong,
.hp-pack-spec .hp-pack-spec-save strong .woocommerce-Price-amount,
.hp-pack-spec .hp-pack-spec-save strong .woocommerce-Price-currencySymbol { color: #5ce0a0; }
.hp-pack-compare .woocommerce-Price-amount { color: #ffd75e; font-weight: 700; }
.hp-pack-compare {
	margin: 0 0 4px;
	font-size: .9em;
	line-height: 1.55;
	color: rgba(244, 242, 255, .72);
}

/* ---- refusal feedback: bubble at the top, shake on the offending card ---- */
.hp-pack-panel { position: relative; }
.hp-pack-toast {
	position: absolute;
	top: 66px;   /* JS re-measures the header and overrides this */
	left: 50%;
	z-index: 5;
	max-width: min(88%, 420px);
	padding: 10px 16px;
	border-radius: 999px;
	font-size: .84em;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	color: #2a1200;
	background-color: #ffd23f;
	background-image: linear-gradient(180deg, #ffe07a, #ffc200);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
	opacity: 0;
	transform: translate(-50%, -14px) scale(.94);
	pointer-events: none;
	transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.hp-pack-toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }

@keyframes hp-pack-shake {
	0%, 100% { transform: translateX(0); }
	15% { transform: translateX(-7px); }
	30% { transform: translateX(6px); }
	45% { transform: translateX(-4px); }
	60% { transform: translateX(3px); }
	80% { transform: translateX(-2px); }
}
.hp-pack-list .hp-pack-item.is-shake {
	animation: hp-pack-shake .48s ease;
	border-color: #ff6f8d;
	background: rgba(255, 111, 141, .12);
}

/* a maxed-out stepper reads as unavailable but stays clickable, so it can
   explain itself instead of swallowing the tap */
.hp-pack-step button.is-maxed { opacity: .3; }
.hp-pack-step button.is-maxed:hover { background: transparent; color: #ff7ad9; }

@media (prefers-reduced-motion: reduce) {
	.hp-pack-list .hp-pack-item.is-shake { animation: none; }
	.hp-pack-toast { transition: opacity .15s ease; transform: translate(-50%, 0); }
}