/**
 * WooCommerce Order Counter Pro - Frontend styles.
 *
 * Colors and position are applied inline via JavaScript using the saved
 * settings; this file handles layout, structure, responsiveness and animation.
 */

.wc-ocp-widget {
	position: fixed;
	z-index: 99990;
	max-width: 320px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-left-width: 4px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.25 );
	-webkit-font-smoothing: antialiased;

	/*
	 * Size handling.
	 * JS sets --wc-ocp-scale-desktop and --wc-ocp-scale-mobile inline.
	 * --wc-ocp-scale is resolved here (and overridden in the mobile media
	 * query) so the scale survives the transform-based entrance animations,
	 * which all end on scale( var( --wc-ocp-scale ) ).
	 */
	--wc-ocp-scale: var( --wc-ocp-scale-desktop, 1 );
	transform: scale( var( --wc-ocp-scale ) );
}

/* ---- Position variants ---- */
/* transform-origin keeps the box pinned to its corner when scaled. */
.wc-ocp-widget.wc-ocp-top-left {
	top: 20px;
	left: 20px;
	transform-origin: top left;
}
.wc-ocp-widget.wc-ocp-top-right {
	top: 20px;
	right: 20px;
	transform-origin: top right;
}
.wc-ocp-widget.wc-ocp-bottom-left {
	bottom: 20px;
	left: 20px;
	transform-origin: bottom left;
}
.wc-ocp-widget.wc-ocp-bottom-right {
	bottom: 20px;
	right: 20px;
	transform-origin: bottom right;
}

/* ---- Inner elements ---- */
.wc-ocp-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.12 );
	font-size: 18px;
}

.wc-ocp-content {
	flex: 1 1 auto;
	min-width: 0;
}

.wc-ocp-message {
	margin: 0;
	font-weight: 600;
}

.wc-ocp-message .wc-ocp-count {
	font-weight: 800;
}

.wc-ocp-sub {
	margin: 2px 0 0;
	font-size: 12px;
	opacity: 0.7;
}

.wc-ocp-close {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-left: 4px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.wc-ocp-close:hover,
.wc-ocp-close:focus {
	opacity: 1;
	background: rgba( 255, 255, 255, 0.15 );
	outline: none;
}

/* ---- Animations ---- */
.wc-ocp-widget.wc-ocp-anim-fade {
	animation: wc-ocp-fade 0.5s ease both;
}

.wc-ocp-widget.wc-ocp-anim-slide-up {
	animation: wc-ocp-slide-up 0.5s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

.wc-ocp-widget.wc-ocp-anim-bounce {
	animation: wc-ocp-bounce 0.7s cubic-bezier( 0.28, 0.84, 0.42, 1 ) both;
}

/* Exit animation when closing. */
.wc-ocp-widget.wc-ocp-leaving {
	animation: wc-ocp-fade-out 0.3s ease forwards;
}

@keyframes wc-ocp-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wc-ocp-fade-out {
	from { opacity: 1; transform: translateY( 0 ) scale( var( --wc-ocp-scale ) ); }
	to   { opacity: 0; transform: translateY( 8px ) scale( var( --wc-ocp-scale ) ); }
}

@keyframes wc-ocp-slide-up {
	from { opacity: 0; transform: translateY( 24px ) scale( var( --wc-ocp-scale ) ); }
	to   { opacity: 1; transform: translateY( 0 ) scale( var( --wc-ocp-scale ) ); }
}

@keyframes wc-ocp-bounce {
	0%   { opacity: 0; transform: translateY( 30px ) scale( calc( var( --wc-ocp-scale ) * 0.95 ) ); }
	60%  { opacity: 1; transform: translateY( -6px ) scale( calc( var( --wc-ocp-scale ) * 1.02 ) ); }
	100% { opacity: 1; transform: translateY( 0 ) scale( var( --wc-ocp-scale ) ); }
}

/* ---- Responsive ---- */
@media ( max-width: 480px ) {
	.wc-ocp-widget {
		/* Swap to the mobile scale (default 60%). */
		--wc-ocp-scale: var( --wc-ocp-scale-mobile, 0.6 );
		max-width: calc( 100vw - 24px );
		left: 12px !important;
		right: 12px !important;
		font-size: 14px;
		padding: 12px 14px;
	}

	.wc-ocp-widget.wc-ocp-top-left,
	.wc-ocp-widget.wc-ocp-top-right {
		top: 12px;
	}

	.wc-ocp-widget.wc-ocp-bottom-left,
	.wc-ocp-widget.wc-ocp-bottom-right {
		bottom: 12px;
	}
}

/* Respect reduced-motion preferences. */
@media ( prefers-reduced-motion: reduce ) {
	.wc-ocp-widget,
	.wc-ocp-widget.wc-ocp-anim-fade,
	.wc-ocp-widget.wc-ocp-anim-slide-up,
	.wc-ocp-widget.wc-ocp-anim-bounce {
		animation: none !important;
	}
}