/* ==========================================================================
   Callux Interactive Spring Theme UX — v1.0.0
   Styles for Scroll Vine, Blooming Buttons & Ladybug Hunt.
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root{
	--callux-green:#8cc084;
	--callux-green-dark:#5a9e50;
	--callux-green-pastel:#d4edda;
	--callux-pink:#f5c6d0;
	--callux-red:#e53935;
	--callux-gold:#f0e68c;
	--callux-text:#333;
	--callux-white:#fff;
	--callux-radius:12px;
	--callux-shadow:0 8px 32px rgba(0,0,0,.18);
}

/* ==========================================================================
   1. SCROLL VINE
   ========================================================================== */
#callux-scroll-vine{
	position:fixed;
	left:0;
	top:0;
	width:60px;
	height:100vh;
	z-index:9990;
	pointer-events:none;
	opacity:.75;
}
#callux-scroll-vine svg{
	width:100%;
	height:100%;
}
.callux-vine-leaves{
	transition:opacity .6s ease;
}

/* ==========================================================================
   2. BLOOMING BUTTONS
   ========================================================================== */
.add_to_cart_button,
.single_add_to_cart_button{
	position:relative;
	overflow:hidden;
	z-index:1;
	transition:box-shadow .3s ease,transform .3s ease;
}
.add_to_cart_button::before,
.add_to_cart_button::after,
.single_add_to_cart_button::before,
.single_add_to_cart_button::after{
	content:"";
	position:absolute;
	width:22px;
	height:22px;
	background:radial-gradient(circle,var(--callux-pink) 35%,transparent 70%);
	border-radius:50%;
	opacity:0;
	transform:scale(0);
	transition:opacity .4s ease,transform .4s ease;
	pointer-events:none;
	z-index:-1;
}
.add_to_cart_button::before,
.single_add_to_cart_button::before{
	top:-6px;
	left:-6px;
}
.add_to_cart_button::after,
.single_add_to_cart_button::after{
	bottom:-6px;
	right:-6px;
}
.add_to_cart_button:hover::before,
.add_to_cart_button:hover::after,
.single_add_to_cart_button:hover::before,
.single_add_to_cart_button:hover::after{
	opacity:.85;
	transform:scale(1);
}
.add_to_cart_button:hover,
.single_add_to_cart_button:hover{
	box-shadow:0 0 0 3px var(--callux-green-pastel);
	transform:translateY(-1px);
}

/* ==========================================================================
   3. LADYBUG HUNT
   ========================================================================== */

/* --- Ladybug element --- */
#callux-ladybug{
	position:absolute;
	z-index:9991;
	cursor:pointer;
	animation:callux-ladybug-idle 3s ease-in-out infinite;
	transition:filter .3s ease;
	line-height:0;
}
#callux-ladybug:hover{
	filter:drop-shadow(0 0 6px var(--callux-red));
}

/* Idle bobbing animation */
@keyframes callux-ladybug-idle{
	0%,100%{transform:translateY(0) rotate(-3deg)}
	50%{transform:translateY(-6px) rotate(3deg)}
}

/* Fly-away animation */
@keyframes callux-ladybug-flyaway{
	0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
	40%{opacity:1;transform:translate(-30px,-60px) rotate(-20deg) scale(1.15)}
	100%{opacity:0;transform:translate(80px,-220px) rotate(40deg) scale(.4)}
}
#callux-ladybug.callux-flyaway{
	animation:callux-ladybug-flyaway .8s ease-in forwards;
	pointer-events:none;
}

/* --- Modal --- */
.callux-modal-hidden{
	display:none!important;
}
#callux-ladybug-modal{
	position:fixed;
	inset:0;
	z-index:99999;
	display:flex;
	align-items:center;
	justify-content:center;
}
.callux-modal-overlay{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.45);
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
}
.callux-modal-content{
	position:relative;
	background:var(--callux-white);
	border-radius:var(--callux-radius);
	padding:36px 32px 28px;
	max-width:420px;
	width:90%;
	box-shadow:var(--callux-shadow);
	text-align:center;
	animation:callux-modal-appear .35s ease-out;
}
@keyframes callux-modal-appear{
	from{opacity:0;transform:translateY(24px) scale(.95)}
	to{opacity:1;transform:translateY(0) scale(1)}
}
.callux-modal-icon{
	font-size:48px;
	margin-bottom:8px;
}
.callux-modal-content h2{
	margin:0 0 8px;
	color:var(--callux-green-dark);
	font-size:1.5em;
}
.callux-modal-content p{
	margin:0 0 12px;
	color:var(--callux-text);
	font-size:.95em;
	line-height:1.5;
}
.callux-btn-copy{
	display:inline-block;
	margin-top:14px;
	padding:10px 28px;
	border:none;
	border-radius:8px;
	background:var(--callux-green);
	color:var(--callux-white);
	font-size:.95em;
	font-weight:600;
	cursor:pointer;
	transition:background .25s ease,transform .15s ease;
}
.callux-btn-copy:hover{
	background:var(--callux-green-dark);
	transform:translateY(-1px);
}
.callux-btn-copy.callux-copied{
	background:var(--callux-green-dark);
}
.callux-modal-close-btn{
	position:absolute;
	top:10px;
	right:14px;
	background:none;
	border:none;
	font-size:1.6em;
	color:#999;
	cursor:pointer;
	line-height:1;
	transition:color .2s ease;
}
.callux-modal-close-btn:hover{
	color:var(--callux-text);
}

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */
@media(max-width:768px){
	#callux-scroll-vine{
		width:36px;
		opacity:.55;
	}
	#callux-ladybug svg{
		width:36px;
		height:36px;
	}
}
@media(max-width:480px){
	#callux-scroll-vine{
		display:none;
	}
}

/* ==========================================================================
   Ladybug Discounted Product Highlight
   ========================================================================== */
.callux-ladybug-discounted{
	box-shadow:0 0 0 2px var(--callux-green),0 4px 16px rgba(140,192,132,.35);
	border-radius:var(--callux-radius);
	transition:box-shadow .4s ease;
}
.callux-ladybug-discounted .price del{
	opacity:.55;
}
.callux-ladybug-discounted .price ins{
	color:var(--callux-red);
	font-weight:700;
	text-decoration:none;
}