/* Styles for realtime collections row */
#collections-carousel { position: relative; }

#collections-row-wrapper-cp {
	display: flex;
	overflow-x: auto;
  position: sticky;
	gap: 4px;
	padding: 8px 0% 0 0;
	scroll-behavior: smooth;
	align-items: flex-start;
  margin: 0%;
}

/* Hide scrollbar by default (cross-browser) */
#collections-row-wrapper-cp {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

#collections-row-wrapper-cp::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
	width: 0;
	height: 0;
}

/*  */

/* Floating nav buttons (left/right) - hidden on small screens */
.collections-nav-left-cp,
.collections-nav-right-cp {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 44px;
  background-color: #ffffff7a;
	border-radius: 100%;
	color: #43149c; /* deep purple */
	border: 2px solid rgba(67,20,156,0.5); /* deeppurple with 0.5 opacity */
	cursor: pointer;
	transition: background-color 200ms ease, transform 180ms ease, box-shadow 300ms ease, border-color 200ms ease, color 200ms ease, opacity 180ms ease;
	transform-origin: center;
}

/* initial visual state: circular with colored border */
.collections-nav-left-cp,
.collections-nav-right-cp { display: none; }

.collections-nav-left-cp { left: 0%; }
.collections-nav-right-cp { right: 0%; }

.collections-nav-left-cp:hover,
.collections-nav-right-cp:hover { background: rgba(0,0,0,0.6); }

@media (min-width: 900px) {
	.collections-nav-left-cp,
	.collections-nav-right-cp { display: flex; }
}

/* faded/disabled state for nav buttons */
.collections-nav-left-cp[disabled],
.collections-nav-right-cp[disabled] {
	opacity: 0.35;
	pointer-events: none;
	cursor: default;
}

/* FontAwesome icon sizing inside nav buttons */
.collections-nav-left-cp i,
.collections-nav-right-cp i {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}

/* Ensure icon color follows button color */
.collections-nav-left-cp i,
.collections-nav-right-cp i { color: inherit; }

/* Rocket launch animation on hover to simulate realtime scroll */
.collections-nav-left-cp,
.collections-nav-right-cp { overflow: visible; }

/* small particle that flies out to the side/up on hover */
.collections-nav-left-cp:not([disabled])::after,
.collections-nav-right-cp:not([disabled])::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.95);
	box-shadow: 0 0 10px rgba(67,20,156,0.9);
	opacity: 0;
	pointer-events: none;
}

.collections-nav-left-cp:not([disabled])::after {
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.collections-nav-right-cp:not([disabled])::after {
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.collections-nav-left-cp:not([disabled]):hover::after {
	animation: cp-rocket-left 700ms cubic-bezier(.22,.9,.35,1) forwards;
}

.collections-nav-right-cp:not([disabled]):hover::after {
	animation: cp-rocket-right 700ms cubic-bezier(.22,.9,.35,1) forwards;
}

@keyframes cp-rocket-right {
	0% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
	30% { transform: translateY(-70%) translateX(18px) scale(1.05); }
	70% { transform: translateY(-120%) translateX(60px) scale(0.7); opacity: 0.6; }
	100% { transform: translateY(-140%) translateX(90px) scale(0.45); opacity: 0; }
}

@keyframes cp-rocket-left {
	0% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
	30% { transform: translateY(-70%) translateX(-18px) scale(1.05); }
	70% { transform: translateY(-120%) translateX(-60px) scale(0.7); opacity: 0.6; }
	100% { transform: translateY(-140%) translateX(-90px) scale(0.45); opacity: 0; }
}

/* subtle icon thrust while hover */
.collections-nav-right-cp:not([disabled]):hover i { transform: translateX(6px) translateY(-4px) rotate(8deg); transition: transform 220ms ease; }
.collections-nav-left-cp:not([disabled]):hover i { transform: translateX(-6px) translateY(-4px) rotate(-8deg); transition: transform 220ms ease; }


/* Hover/active state: filled deep purple, white icon, subtle sparkle */
.collections-nav-left-cp:not([disabled]):hover,
.collections-nav-right-cp:not([disabled]):hover {
	border: none;
	background: #43149c;
	color: #ffffff;
	transform: translateY(-50%) scale(1.06);
	box-shadow: 0 8px 20px rgba(67,20,156,0.22), 0 0 0 rgba(67,20,156,0.0);
	animation: cp-sparkle 900ms ease-in-out;
}

@keyframes cp-sparkle {
	0% { box-shadow: 0 6px 12px rgba(67,20,156,0.10); }
	50% { box-shadow: 0 12px 30px rgba(67,20,156,0.28); }
	100% { box-shadow: 0 6px 12px rgba(67,20,156,0.10); }
}