/* CloudMellow Sticky Side — front end */

.cmss-item {
	position: fixed;
	z-index: var(--cmss-z, 9999);
	line-height: 0;
	pointer-events: none;
}

.cmss-item .cmss-inner,
.cmss-item .cmss-link {
	pointer-events: auto;
}

/* --- Side --- */
.cmss-side-left  { left:  var(--cmss-side, 0px); }
.cmss-side-right { right: var(--cmss-side, 0px); }

/* --- Vertical position --- */
.cmss-pos-top    { top:    var(--cmss-vert, 20px); }
.cmss-pos-bottom { bottom: var(--cmss-vert, 20px); }
.cmss-pos-middle {
	top: 50%;
	transform: translateY(calc(-50% + var(--cmss-mid, 0px)));
}

/* --- Inner wrapper (owns transforms so it never fights the centring) --- */
.cmss-inner {
	position: relative;
	display: inline-block;
	line-height: 0;
	transition: transform .25s ease;
}

.cmss-shadow { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .22)); }
.cmss-grow:hover { transform: scale(1.06); }

.cmss-link {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}

.cmss-img {
	display: block;
	max-width: 100%;
	height: auto;
}

.cmss-text {
	display: inline-block;
	line-height: 1.2;
	white-space: nowrap;
	font-family: inherit;
	letter-spacing: .02em;
}

/* Rotated text running along the edge */
.cmss-vertical {
	writing-mode: vertical-rl;
	text-orientation: mixed;
}
.cmss-side-left .cmss-vertical { transform: rotate(180deg); }

/* Corner radius follows the edge for flush (0 gap) elements */
.cmss-html { line-height: normal; }

/* --- Close button --- */
.cmss-close {
	position: absolute;
	top: -9px;
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #111;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s ease;
	z-index: 2;
}
.cmss-close:hover,
.cmss-close:focus { opacity: 1; }
.cmss-side-right .cmss-close { left: -9px; }
.cmss-side-left  .cmss-close { right: -9px; }

.cmss-link:focus-visible,
.cmss-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- Animations --- */
@keyframes cmss-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}
@keyframes cmss-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
@keyframes cmss-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-12px); }
	60% { transform: translateY(-6px); }
}
@keyframes cmss-slide-right {
	from { transform: translateX(120%); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}
@keyframes cmss-slide-left {
	from { transform: translateX(-120%); opacity: 0; }
	to   { transform: translateX(0);     opacity: 1; }
}

.cmss-anim-pulse  { animation: cmss-pulse 2s ease-in-out infinite; }
.cmss-anim-float  { animation: cmss-float 3s ease-in-out infinite; }
.cmss-anim-bounce { animation: cmss-bounce 2.4s ease-in-out infinite; }
.cmss-side-right .cmss-anim-slide { animation: cmss-slide-right .5s cubic-bezier(.22, 1, .36, 1) both; }
.cmss-side-left  .cmss-anim-slide { animation: cmss-slide-left  .5s cubic-bezier(.22, 1, .36, 1) both; }

/* Hover scale wins over a looping animation */
.cmss-grow:hover[class*="cmss-anim-"] { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.cmss-inner,
	.cmss-grow:hover {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

/* --- Device visibility --- */
@media (min-width: 1025px) {
	.cmss-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.cmss-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
	.cmss-hide-mobile { display: none !important; }
}

/* --- Dismissed --- */
.cmss-item.cmss-dismissed { display: none !important; }