/* Claire's — Barre Squishy : styles front-end */

.csb-bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999999;
	font-family: 'Fredoka', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, transform .4s cubic-bezier(.22,1,.36,1);
	--csb-from: #6B34D6;
	--csb-to: #E6007E;
}
.csb-pos-top { top: 0; transform: translateY(-100%); box-shadow: 0 6px 24px rgba(36,18,71,.14); }
.csb-pos-bottom { bottom: 0; transform: translateY(100%); box-shadow: 0 -6px 24px rgba(36,18,71,.14); }
.csb-bar.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

body.admin-bar .csb-pos-top { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .csb-pos-top { top: 46px; }
}

.csb-gradient-edge {
	position: absolute;
	left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--csb-from), var(--csb-to));
}
.csb-pos-top .csb-gradient-edge { top: 0; }
.csb-pos-bottom .csb-gradient-edge { bottom: 0; }

.csb-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 56px 14px 24px;
	flex-wrap: wrap;
}

.csb-avatars { display: flex; flex: 0 0 auto; }
.csb-avatar {
	width: 46px; height: 46px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(36,18,71,.2);
	margin-left: -14px;
	background: #f1ecfa;
	animation: csb-float 2.6s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
.csb-avatar:first-child { margin-left: 0; }
.csb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes csb-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.csb-copy { flex: 1 1 220px; min-width: 180px; }
.csb-prices { margin: 0; font-weight: 700; color: #241247; font-size: 1.05rem; line-height: 1.3; }
.csb-sep { margin: 0 8px; color: #c9b8ea; }
.csb-savings { margin: 3px 0 0; font-size: .85rem; font-weight: 600; color: #6b4a91; }

.csb-cta {
	flex: 0 0 auto;
	background: linear-gradient(90deg, var(--csb-from), var(--csb-to));
	color: #fff !important;
	font-weight: 700;
	font-size: .95rem;
	padding: 12px 26px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(107,52,214,.35);
	transition: transform .15s ease, box-shadow .15s ease;
}
.csb-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(107,52,214,.45); }

.csb-close {
	position: absolute;
	top: 8px; right: 10px;
	width: 28px; height: 28px;
	border: none;
	background: rgba(36,18,71,.07);
	border-radius: 50%;
	font-size: 18px;
	line-height: 26px;
	text-align: center;
	color: #6b4a91;
	cursor: pointer;
	padding: 0;
}
.csb-close:hover { background: rgba(36,18,71,.14); }

body.csb-has-top-bar { transition: padding-top .35s ease; padding-top: var(--csb-bar-h, 0px); }

@media (max-width: 640px) {
	.csb-inner { padding: 10px 42px 10px 14px; gap: 10px; }
	.csb-prices { font-size: .88rem; }
	.csb-sep { margin: 0 5px; }
	.csb-savings { font-size: .72rem; }
	.csb-cta { padding: 10px 16px; font-size: .82rem; }
}
@media (max-width: 480px) {
	.csb-avatars { display: none; }
}
@media print {
	.csb-bar { display: none !important; }
}