/* =========================================================================
   OCG Floating Cart — interactive cart icon + particle animations
   Loaded by includes/floating-cart.php for the [ocg_floating_cart] shortcode.
   ========================================================================= */

:root {
	--ocg-fc-gold:        #d4af37;
	--ocg-fc-gold-bright: #f6d57a;
	--ocg-fc-dark:        #161616;
	--ocg-fc-shadow:      0 10px 30px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .15);
}

/* ---------- Base button ---------- */
.ocg-fc {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 999px;
	color: var(--ocg-fc-dark);
	background: linear-gradient(135deg, var(--ocg-fc-gold-bright) 0%, var(--ocg-fc-gold) 100%);
	text-decoration: none;
	box-shadow: var(--ocg-fc-shadow);
	z-index: 9998;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
	will-change: transform;
}

.ocg-fc:hover,
.ocg-fc:focus {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 14px 38px rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .18);
	color: var(--ocg-fc-dark);
	text-decoration: none;
}

.ocg-fc:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ---------- Theme: dark ---------- */
.ocg-fc--theme-dark {
	background: linear-gradient(135deg, #2a2a2a 0%, var(--ocg-fc-dark) 100%);
	color: var(--ocg-fc-gold-bright);
}
.ocg-fc--theme-dark:hover { color: var(--ocg-fc-gold-bright); }

/* ---------- With label (auto-grow pill) ---------- */
.ocg-fc:has(.ocg-fc__label) {
	width: auto;
	min-width: 56px;
	padding: 0 22px 0 18px;
	border-radius: 999px;
}

.ocg-fc__label {
	font: 600 14px/1 'Inter', system-ui, -apple-system, sans-serif;
	letter-spacing: .02em;
}

/* ---------- Icon ---------- */
.ocg-fc__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
}
.ocg-fc__svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- Count badge ---------- */
.ocg-fc__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #d92626;
	color: #fff;
	font: 700 12px/22px 'Inter', system-ui, -apple-system, sans-serif;
	text-align: center;
	box-shadow: 0 2px 6px rgba(217, 38, 38, .45), 0 0 0 2px #fff;
	transform: scale(0);
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
	pointer-events: none;
}

.ocg-fc__count.has-items {
	transform: scale(1);
}

/* Subtle pulse when the badge content changes */
.ocg-fc__count.is-pulsing {
	animation: ocg-fc-count-pulse .55s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes ocg-fc-count-pulse {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.45); background: #ff3b3b; }
	100% { transform: scale(1); }
}

/* ---------- Cart "bump" when a particle arrives ---------- */
.ocg-fc.is-bumping {
	animation: ocg-fc-bump .55s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes ocg-fc-bump {
	0%   { transform: scale(1); }
	25%  { transform: scale(1.18) rotate(-5deg); }
	60%  { transform: scale(.95) rotate(3deg); }
	100% { transform: scale(1); }
}

/* ---------- Fixed-position variants ---------- */
.ocg-fc--fixed { position: fixed; }

.ocg-fc--corner-br { right: 22px; bottom: 22px; }
.ocg-fc--corner-bl { left:  22px; bottom: 22px; }
.ocg-fc--corner-tr { right: 22px; top:    22px; }
.ocg-fc--corner-tl { left:  22px; top:    22px; }

@media (max-width: 600px) {
	.ocg-fc--corner-br,
	.ocg-fc--corner-bl { bottom: 14px; }
	.ocg-fc--corner-tr,
	.ocg-fc--corner-tl { top:    14px; }
	.ocg-fc--corner-br,
	.ocg-fc--corner-tr { right:  14px; }
	.ocg-fc--corner-bl,
	.ocg-fc--corner-tl { left:   14px; }
}

/* ---------- Particle (the thing that flies to the cart) ---------- */
.ocg-fc-particle {
	position: fixed;
	left: 0;
	top: 0;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, var(--ocg-fc-gold-bright), var(--ocg-fc-gold) 60%, #b8861f 100%);
	box-shadow: 0 0 18px rgba(212, 175, 55, .9), 0 0 38px rgba(212, 175, 55, .55);
	pointer-events: none;
	z-index: 9999;
	will-change: transform, opacity;
}

.ocg-fc-particle::after {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 4px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35));
	box-shadow: 0 0 4px rgba(255, 255, 255, .8);
}

/* Reduced-motion users get a quick fade instead of an arc */
@media (prefers-reduced-motion: reduce) {
	.ocg-fc-particle { transition: opacity .25s ease-out; opacity: 0 !important; }
	.ocg-fc.is-bumping { animation: none; }
	.ocg-fc__count.is-pulsing { animation: none; }
}