/* Top Strip — patli chalti hui announcement strip, "Deliver to" bar ke upar.
   Ye #occ-delivery-bar-root (position: fixed) ke ANDAR rehti hai, isliye position,
   z-index, drawer khulne par chhupna aur body top-padding delivery bar ke hi hain. */
.occ-top-strip {
	--ts-bg: #1f5f43;
	--ts-fg: #fff;
	--ts-dot: #d9b36c;
	--ts-h: var( --ts-hd, 26px );
	--ts-fs: var( --ts-fsd, 12px );
	--ts-dur: 30s;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: var( --ts-h );
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var( --ts-bg );
	color: var( --ts-fg );
	font-family: inherit;
	font-size: var( --ts-fs );
	font-weight: 500;
	line-height: var( --ts-h );
	white-space: nowrap;
}
.occ-top-strip .occ-top-strip-track {
	display: flex;
	width: max-content;
	height: 100%;
	animation: occ-ts-scroll var( --ts-dur ) linear infinite;
	will-change: transform;
}
.occ-top-strip .occ-top-strip-group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
}
.occ-top-strip .occ-ts-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var( --ts-h );
	padding: 0;
	color: var( --ts-fg );
}
/* Ek message = dot + icon + text + dot (dot text ke paas); do messages ke beech ka gap. */
.occ-top-strip .occ-ts-m {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	height: var( --ts-h );
	padding-right: 40px;
}
.occ-top-strip .occ-ts-ico img {
	display: block;
	width: auto;
	height: calc( var( --ts-fs ) + 4px );
	margin: 0;
	border: 0;
}
.occ-top-strip .occ-ts-dot {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var( --ts-dot );
}
@keyframes occ-ts-scroll {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}
@media ( hover: hover ) {
	.occ-top-strip:hover .occ-top-strip-track {
		animation-play-state: paused;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.occ-top-strip .occ-top-strip-track {
		animation: none;
	}
}

/* ===== Mobile: ek time par ek message, beech mein, dono taraf dot; upar slide hokar badalta hai ===== */
.occ-top-strip .occ-ts-rotor {
	display: none;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.occ-top-strip .occ-ts-ri {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 10px;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY( 100% );
}
.occ-top-strip .occ-ts-ri .occ-ts-item {
	min-width: 0;
	padding: 0;
}
.occ-top-strip .occ-ts-ri .occ-ts-txt {
	overflow: hidden;
	text-overflow: ellipsis;
}
.occ-top-strip .occ-ts-ri.is-active {
	opacity: 1;
	transform: translateY( 0 );
	transition: transform 0.45s ease, opacity 0.45s ease;
}
.occ-top-strip .occ-ts-ri.is-prev {
	opacity: 0;
	transform: translateY( -100% );
	transition: transform 0.45s ease, opacity 0.45s ease;
}
@media ( max-width: 782px ) {
	.occ-top-strip.occ-ts-has-rotor .occ-top-strip-track { display: none; }
	.occ-top-strip.occ-ts-has-rotor .occ-ts-rotor { display: block; }
}
.occ-top-strip.occ-ts-has-rotor.occ-ts-force-mobile .occ-top-strip-track { display: none; }
.occ-top-strip.occ-ts-has-rotor.occ-ts-force-mobile .occ-ts-rotor { display: block; }
@media ( prefers-reduced-motion: reduce ) {
	.occ-top-strip .occ-ts-ri.is-active,
	.occ-top-strip .occ-ts-ri.is-prev { transition: none; }
}

/* Emoji / icon animation */
.occ-top-strip .occ-ts-ico { display: inline-flex; align-items: center; }
.occ-top-strip .occ-ts-emo { display: inline-block; line-height: 1; }
.occ-top-strip.occ-ts-anim-flip .occ-ts-emo { animation: occ-ts-flip 2.2s linear infinite; }
.occ-top-strip.occ-ts-anim-bounce .occ-ts-emo { animation: occ-ts-bounce 1.2s ease-in-out infinite; }
.occ-top-strip.occ-ts-anim-pulse .occ-ts-emo { animation: occ-ts-pulse 1.4s ease-in-out infinite; }
.occ-top-strip.occ-ts-anim-wiggle .occ-ts-emo { animation: occ-ts-wiggle 1.1s ease-in-out infinite; }
@keyframes occ-ts-flip { from { transform: rotateY( 0deg ); } to { transform: rotateY( 360deg ); } }
@keyframes occ-ts-bounce { 0%, 100% { transform: translateY( 0 ); } 50% { transform: translateY( -3px ); } }
@keyframes occ-ts-pulse { 0%, 100% { transform: scale( 1 ); } 50% { transform: scale( 1.3 ); } }
@keyframes occ-ts-wiggle { 0%, 100% { transform: rotate( 0deg ); } 25% { transform: rotate( -14deg ); } 75% { transform: rotate( 14deg ); } }
@media ( prefers-reduced-motion: reduce ) {
	.occ-top-strip .occ-ts-emo { animation: none !important; }
}

/* Height / font: desktop-tablet aur mobile ki alag values (inline vars: --ts-hd/--ts-fsd aur --ts-hm/--ts-fsm). */
@media ( max-width: 782px ) {
	.occ-top-strip {
		--ts-h: var( --ts-hm, 26px );
		--ts-fs: var( --ts-fsm, 12px );
	}
}
.occ-top-strip.occ-ts-force-mobile {
	--ts-h: var( --ts-hm, 26px );
	--ts-fs: var( --ts-fsm, 12px );
}