/**
 * Reactive sticky CTA system.
 *
 * One shell (#pkgc-sticky-cta), rendered once via
 * template-parts/global/sticky-cta.php and shown/hidden by context via
 * body classes added server-side (pkgc_body_class filter, see
 * inc/whatsapp-order.php / inc/setup.php) — see the component comments
 * below for exact selectors. JS (sticky-cta.js) only toggles visibility
 * on scroll and handles the general-page cluster's expand/collapse; it
 * never duplicates add-to-cart, filter, or order-creation logic.
 *
 * Visible and usable with no JS and no scroll: default position is
 * static-in-flow-hidden via `hidden` attribute removed by PHP per
 * context, so a JS failure never removes an already-useful CTA — it
 * just won't animate in/out with scroll.
 *
 * @package PackagingCommerce
 */

#pkgc-sticky-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--brand-z-fixed);
	display: flex;
	justify-content: center;
	padding: var(--brand-space-3) var(--brand-space-4);
	padding-bottom: max(var(--brand-space-3), env(safe-area-inset-bottom));
	pointer-events: none;
	transform: translateY(100%);
	opacity: 0;
	transition: transform var(--brand-motion-base) var(--brand-motion-ease),
		opacity var(--brand-motion-base) var(--brand-motion-ease);
}

#pkgc-sticky-cta.pkgc-sticky-cta--visible {
	transform: translateY(0);
	opacity: 1;
}

/* Near-footer compression: shrink out of the way instead of overlapping
   footer content, restored once scrolled back up. */
#pkgc-sticky-cta.pkgc-sticky-cta--near-footer {
	transform: translateY(100%);
	opacity: 0;
}

/* Desktop: the mobile bottom bar becomes a small floating cluster,
   anchored to a corner instead of spanning full width. */
@media (min-width: 62rem) {
	#pkgc-sticky-cta {
		justify-content: flex-end;
		padding-inline-end: var(--brand-space-6);
		padding-bottom: var(--brand-space-6);
	}
}

/* ── Shared bar/pill shell ────────────────────────────────────────── */

.pkgc-sticky-cta__bar {
	display: flex;
	align-items: center;
	gap: var(--brand-space-2);
	width: 100%;
	max-width: 32rem;
	padding: var(--brand-space-2);
	border-radius: var(--brand-radius-full);
	background-color: rgb(255 255 255 / 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgb(255 255 255 / 0.6);
	box-shadow: var(--brand-shadow-lg);
	pointer-events: auto;
}

@media (min-width: 62rem) {
	.pkgc-sticky-cta__bar {
		width: auto;
	}
}

.pkgc-sticky-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--brand-space-2);
	flex: 1 1 auto;
	min-height: 48px;
	min-width: 48px;
	padding-inline: var(--brand-space-5);
	border: none;
	border-radius: var(--brand-radius-full);
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-weight-semibold);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--brand-transition-fast), background-color var(--brand-transition-fast);
}

.pkgc-sticky-cta__btn:hover,
.pkgc-sticky-cta__btn:focus-visible {
	transform: translateY(-1px);
}

.pkgc-sticky-cta__btn:active {
	transform: translateY(0) scale(0.98);
}

.pkgc-sticky-cta__btn:focus-visible {
	outline: 3px solid var(--brand-color-primary);
	outline-offset: 2px;
}

.pkgc-sticky-cta__btn svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.pkgc-sticky-cta__btn--primary {
	flex: 1 1 auto;
	background-color: var(--brand-color-primary);
	color: #fff;
}

.pkgc-sticky-cta__btn--primary:hover,
.pkgc-sticky-cta__btn--primary:focus-visible {
	background-color: var(--brand-color-primary-dark);
}

.pkgc-sticky-cta__btn--whatsapp {
	background-color: var(--brand-color-whatsapp);
	color: #fff;
}

.pkgc-sticky-cta__btn--whatsapp:hover,
.pkgc-sticky-cta__btn--whatsapp:focus-visible {
	background-color: var(--brand-color-whatsapp-dark);
}

.pkgc-sticky-cta__btn--icon {
	flex: 0 0 auto;
	padding-inline: 0;
	background-color: var(--brand-color-surface-alt);
	color: var(--brand-color-ink);
}

.pkgc-sticky-cta__btn--icon:hover,
.pkgc-sticky-cta__btn--icon:focus-visible {
	background-color: var(--brand-color-border);
}

.pkgc-sticky-cta__btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.pkgc-sticky-cta__price {
	display: flex;
	flex-direction: column;
	padding-inline-start: var(--brand-space-3);
	line-height: var(--brand-leading-tight);
}

.pkgc-sticky-cta__price-label {
	font-size: var(--brand-text-xs);
	color: var(--brand-color-muted);
}

.pkgc-sticky-cta__price-value {
	font-size: var(--brand-text-md);
	font-weight: var(--brand-weight-bold);
	color: var(--brand-color-ink);
}

.pkgc-sticky-cta__badge {
	position: absolute;
	top: -4px;
	inset-inline-end: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: var(--brand-radius-full);
	background-color: var(--brand-color-accent);
	color: #fff;
	font-size: 10px;
	font-weight: var(--brand-weight-bold);
	line-height: 1;
}

/* ── General-page floating cluster ────────────────────────────────── */

.pkgc-sticky-cta__cluster {
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: var(--brand-space-3);
	pointer-events: auto;
}

.pkgc-sticky-cta__cluster-main {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: none;
	border-radius: 50%;
	background-color: var(--brand-color-primary);
	color: #fff;
	box-shadow: var(--brand-shadow-lg);
	cursor: pointer;
	transition: transform var(--brand-transition-fast), background-color var(--brand-transition-fast);
}

.pkgc-sticky-cta__cluster-main:hover,
.pkgc-sticky-cta__cluster-main:focus-visible {
	background-color: var(--brand-color-primary-dark);
	transform: scale(1.05);
}

.pkgc-sticky-cta__cluster-main:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.pkgc-sticky-cta__cluster-main svg {
	width: 24px;
	height: 24px;
	transition: transform var(--brand-transition-base);
}

.pkgc-sticky-cta__cluster.pkgc-sticky-cta__cluster--open .pkgc-sticky-cta__cluster-main svg {
	transform: rotate(135deg);
}

.pkgc-sticky-cta__cluster-items {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--brand-space-2);
}

/* Collapsed by default; JS toggles visibility. Kept in the DOM (not
   `hidden`) so the links remain reachable/crawlable even if JS never
   runs — they are just visually stacked under the main button without
   the open state's spacing until `--open` is toggled. */
.pkgc-sticky-cta__cluster:not(.pkgc-sticky-cta__cluster--open) .pkgc-sticky-cta__cluster-items {
	position: absolute;
	bottom: 0;
	inset-inline-end: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity var(--brand-motion-fast) var(--brand-motion-ease),
		transform var(--brand-motion-fast) var(--brand-motion-ease);
}

.pkgc-sticky-cta__cluster--open .pkgc-sticky-cta__cluster-items {
	opacity: 1;
	transform: translateY(0);
}

.pkgc-sticky-cta__cluster-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--brand-space-2);
	height: 44px;
	padding-inline: var(--brand-space-4);
	border-radius: var(--brand-radius-full);
	background-color: rgb(255 255 255 / 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: var(--brand-shadow-md);
	color: var(--brand-color-ink);
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-weight-medium);
	text-decoration: none;
	white-space: nowrap;
}

.pkgc-sticky-cta__cluster-item svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.pkgc-sticky-cta__cluster-item--whatsapp svg {
	color: var(--brand-color-whatsapp-dark);
}

.pkgc-sticky-cta__cluster-item--phone svg {
	color: var(--brand-color-primary);
}

.pkgc-sticky-cta__cluster-item--cart {
	position: relative;
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.pkgc-sticky-cta__cluster-main:hover,
	.pkgc-sticky-cta__cluster-main:focus-visible {
		transform: none;
	}
}