/*!
 * Sentio for Elementor - wc-store-notice widget
 * Extracted from frontend.css during WC Batch 1 sub-batch 1 mechanical extraction (2026-04-20).
 * Tier 3 mechanical extraction — body verbatim from monolith (WC-18 section).
 */

.sentio-sn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 20px;
	font-size: 14px;
	position: relative;
}

.sentio-sn--info { background: #e3f2fd; color: #1565c0; }
.sentio-sn--success { background: #e8f5e9; color: #2e7d32; }
.sentio-sn--warning { background: #fff3e0; color: #e65100; }
.sentio-sn--promo { background: #333; color: #fff; }

.sentio-sn__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	justify-content: center;
	overflow: hidden;
}

.sentio-sn__text {
	font-weight: 500;
}

/* Marquee */
.sentio-sn--marquee .sentio-sn__inner {
	overflow: hidden;
	white-space: nowrap;
}

.sentio-sn__marquee {
	display: inline-flex;
	gap: 80px;
	animation: sentio-sn-marquee 15s linear infinite;
	white-space: nowrap;
}

@keyframes sentio-sn-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Countdown inline */
.sentio-sn__countdown {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* CTA */
.sentio-sn__cta {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	background: #fff;
	color: #333;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease;
	flex-shrink: 0;
}

.sentio-sn__cta:hover {
	background: #f0f0f0;
}

/* Close */
.sentio-sn__close {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: inherit;
	opacity: 0.6;
	cursor: pointer;
	padding: 4px;
	transition: opacity 0.2s ease;
}

.sentio-sn__close:hover {
	opacity: 1;
}

/* Entrance */
.sentio-sn--entrance-slide {
	animation: sentio-sn-slideIn 0.4s ease;
}

@keyframes sentio-sn-slideIn {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.sentio-sn--entrance-fade {
	animation: sentio-sn-fadeIn 0.5s ease;
}

@keyframes sentio-sn-fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}