/* =========================================================
 * WooPlus Notice Bar — Front-end Styles (v5.14.18)
 * =========================================================
 * Supports 5 bar types:
 *   - .bar-type-static
 *   - .bar-type-marquee
 *   - .bar-type-rotator
 *   - .bar-type-progress
 *   - .bar-type-countdown
 *
 * All styles are scoped under .wooplus-notice-bar to avoid
 * leaking into the storefront theme.
 * ========================================================= */

/* ---------------------------------------------------------
 * Base bar
 * --------------------------------------------------------- */
.wooplus-notice-bar {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999999;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, .1 );
	font-family: inherit;
}

.wooplus-notice-bar * { box-sizing: border-box; }

.wooplus-notice-top    { top: 0; }
.wooplus-notice-bottom { bottom: 0; }

.wooplus-notice-message {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.wooplus-notice-icon {
	display: inline-flex;
	align-items: center;
	font-size: 18px;
	flex: 0 0 auto;
}

.wooplus-notice-button {
	display: inline-block;
	padding: 6px 16px;
	border: none;
	border-radius: 6px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none !important;
	white-space: nowrap;
	transition: transform .12s ease, box-shadow .12s ease;
	flex: 0 0 auto;
}

.wooplus-notice-button:hover {
	transform: translateY( -1px );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, .15 );
}

.wooplus-notice-close {
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	padding: 0 4px;
	opacity: .8;
	transition: opacity .15s ease;
	flex: 0 0 auto;
}

.wooplus-notice-close:hover,
.wooplus-notice-close:focus {
	opacity: 1;
	outline: none;
}

/* ---------------------------------------------------------
 * Bar type: MARQUEE (CSS-driven, no JS animation loop)
 * --------------------------------------------------------- */
.wooplus-notice-bar.bar-type-marquee {
	overflow: hidden;
	padding-top: 8px;
	padding-bottom: 8px;
}

.wn-marquee-wrap {
	overflow: hidden;
	width: 100%;
}

.wn-marquee-track {
	display: inline-flex;
	white-space: nowrap;
	gap: 18px;
	align-items: center;
	will-change: transform;
	animation: wn-marquee-rtl 30s linear infinite;
}

.wn-marquee-track.speed-slow   { animation-duration: 50s; }
.wn-marquee-track.speed-normal { animation-duration: 30s; }
.wn-marquee-track.speed-fast   { animation-duration: 16s; }

.wn-marquee-item {
	display: inline-block;
	font-weight: 600;
}

.wn-marquee-sep {
	display: inline-block;
	opacity: .7;
	font-size: 12px;
}

@keyframes wn-marquee-rtl {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( 50% ); }
}

/* Reduced motion — pause marquee */
@media ( prefers-reduced-motion: reduce ) {
	.wn-marquee-track {
		animation: none !important;
	}
}

/* ---------------------------------------------------------
 * Bar type: ROTATOR (fade between messages)
 * --------------------------------------------------------- */
.wn-rotator-text {
	display: inline-block;
	transition: opacity .25s ease;
}

/* ---------------------------------------------------------
 * Bar type: PROGRESS (free shipping)
 * --------------------------------------------------------- */
.wn-progress-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.wn-progress-label {
	font-weight: 600;
	font-size: 13px;
}

.wn-progress-track {
	width: 100%;
	height: 8px;
	background: rgba( 255, 255, 255, .25 );
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}

.wn-progress-fill {
	height: 100%;
	border-radius: 999px;
	transition: width .6s cubic-bezier( .25, .8, .25, 1 );
	background: #FBBF24;
}

.wn-progress-fill.is-complete {
	animation: wn-progress-pulse 1.2s ease-out infinite;
}

@keyframes wn-progress-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 255, 255, 255, .6 ); }
	50%      { box-shadow: 0 0 0 6px rgba( 255, 255, 255, 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.wn-progress-fill.is-complete { animation: none; }
}

/* ---------------------------------------------------------
 * Bar type: COUNTDOWN
 * --------------------------------------------------------- */
.wn-countdown-wrap {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.wn-cd-text {
	font-weight: 600;
}

.wn-cd-timer {
	display: inline-flex;
	gap: 6px;
}

.wn-cd-block {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
	padding: 4px 8px;
	background: rgba( 0, 0, 0, .25 );
	border-radius: 6px;
	line-height: 1;
}

.wn-cd-block b {
	font-size: 16px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
}

.wn-cd-block i {
	font-size: 9px;
	font-style: normal;
	margin-top: 2px;
	opacity: .8;
	letter-spacing: .5px;
}

.wooplus-notice-bar.wn-expired .wn-cd-timer {
	opacity: .5;
}

/* ---------------------------------------------------------
 * Animations (entrance — applied to .wooplus-notice-bar)
 * --------------------------------------------------------- */
.wooplus-notice-bar.anim-fade   { animation: wn-anim-fade   .55s ease-out both; }
.wooplus-notice-bar.anim-slide  { animation: wn-anim-slide  .55s cubic-bezier( .22, 1, .36, 1 ) both; }
.wooplus-notice-bar.anim-bounce { animation: wn-anim-bounce .8s  cubic-bezier( .68, -.55, .27, 1.55 ) both; }
.wooplus-notice-bar.anim-pulse  { animation: wn-anim-pulse  1.8s ease-in-out infinite; }
.wooplus-notice-bar.anim-jello  { animation: wn-anim-jello  .85s ease-out both; }

@keyframes wn-anim-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wn-anim-slide {
	from { transform: translateY( -100% ); opacity: 0; }
	to   { transform: translateY( 0 );      opacity: 1; }
}

.wooplus-notice-bottom.anim-slide {
	animation: wn-anim-slide-bottom .55s cubic-bezier( .22, 1, .36, 1 ) both;
}

@keyframes wn-anim-slide-bottom {
	from { transform: translateY( 100% ); opacity: 0; }
	to   { transform: translateY( 0 );    opacity: 1; }
}

@keyframes wn-anim-bounce {
	0%   { transform: translateY( -100% ); opacity: 0; }
	60%  { transform: translateY( 8px );   opacity: 1; }
	80%  { transform: translateY( -3px ); }
	100% { transform: translateY( 0 ); }
}

@keyframes wn-anim-pulse {
	0%, 100% { box-shadow: 0 2px 6px rgba( 0, 0, 0, .1 ); }
	50%      { box-shadow: 0 4px 16px rgba( 220, 38, 38, .35 ); }
}

@keyframes wn-anim-jello {
	0%, 100% { transform: scale( 1 ); }
	30%      { transform: scale( 1.04, .96 ); }
	40%      { transform: scale( .96, 1.04 ); }
	50%      { transform: scale( 1.02, .98 ); }
	60%      { transform: scale( 1 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.wooplus-notice-bar.anim-fade,
	.wooplus-notice-bar.anim-slide,
	.wooplus-notice-bar.anim-bounce,
	.wooplus-notice-bar.anim-pulse,
	.wooplus-notice-bar.anim-jello {
		animation: none !important;
	}
}

/* ---------------------------------------------------------
 * Responsive
 * --------------------------------------------------------- */
@media ( max-width: 640px ) {
	.wooplus-notice-bar {
		font-size: 13px;
		padding: 8px 12px;
		gap: 8px;
	}
	.wooplus-notice-button {
		padding: 5px 12px;
		font-size: 12px;
	}
	.wn-cd-block {
		min-width: 36px;
		padding: 3px 6px;
	}
	.wn-cd-block b { font-size: 14px; }
	.wn-cd-block i { font-size: 8px; }
}

/* ---------------------------------------------------------
 * RTL polish (Persian first)
 * --------------------------------------------------------- */
.wooplus-notice-bar {
	direction: rtl;
	text-align: right;
}

.wn-marquee-track {
	/* Persian RTL — marquee should scroll RTL → LTR */
	direction: ltr;
}

/* ---------------------------------------------------------
 * Accessibility
 * --------------------------------------------------------- */
.wooplus-notice-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

.wooplus-notice-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}