/* ─────────────────────────────────────────
   MealApp Announcement Bar
   ───────────────────────────────────────── */

.mab-bar {
	position:    relative;
	width:       100%;
	overflow:    hidden;
	background:  var(--mab-bg, #1FE689);
	color:       var(--mab-fg, #06210F);
	font-family: 'Inter', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	z-index:     99999;
}

.mab-bar.mab-hidden { display: none; }

/* ── The sliding/holding track ── */
.mab-track {
	display:     flex;
	align-items: center;
	white-space: nowrap;
	width:       max-content;
}

/* Marquee: two identical halves scroll left, looping seamlessly at -50% */
.mab-marquee .mab-track {
	animation: mab-scroll var(--mab-speed, 30s) linear infinite;
}
.mab-marquee:hover .mab-track { animation-play-state: paused; }

@keyframes mab-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Static: single centered unit */
.mab-static .mab-track {
	width:           100%;
	justify-content: center;
}

/* ── One announcement unit ── */
.mab-item {
	display:     inline-flex;
	align-items: center;
	gap:         18px;
	padding:     9px 30px;
	font-size:   14px;
	font-weight: 600;
	line-height: 1.3;
}

.mab-emoji { font-size: 15px; line-height: 1; }

.mab-text { letter-spacing: 0.1px; }

.mab-sep {
	opacity:     0.45;
	font-size:   10px;
	line-height: 1;
}

/* ── CTA button ── */
.mab-cta {
	display:         inline-flex;
	align-items:     center;
	margin-left:     4px;
	padding:         4px 14px;
	border-radius:   100px;
	background:      #0D1B2F;
	color:          #ffffff !important;
	font-size:       12px;
	font-weight:     700;
	text-decoration: none !important;
	white-space:     nowrap;
	transition:      transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.mab-cta:hover {
	transform:  translateY(-1px);
	box-shadow: 0 4px 14px rgba(13, 27, 47, 0.35);
	opacity:    0.95;
}

/* ── Dismiss button ── */
.mab-close {
	position:    absolute;
	top:         50%;
	right:       10px;
	transform:   translateY(-50%);
	width:       26px;
	height:      26px;
	display:     flex;
	align-items: center;
	justify-content: center;
	padding:     0;
	border:      none;
	border-radius: 50%;
	background:  rgba(0, 0, 0, 0.12);
	color:       inherit;
	font-size:   18px;
	line-height: 1;
	cursor:      pointer;
	opacity:     0.75;
	transition:  opacity 0.2s ease, background 0.2s ease;
	z-index:     2;
}
.mab-close:hover {
	opacity:    1;
	background: rgba(0, 0, 0, 0.22);
}

/* Fade out the right edge a touch under the close button (marquee only) */
.mab-marquee.mab-dismiss-pad .mab-track { padding-right: 36px; }

@media (max-width: 600px) {
	.mab-item  { padding: 8px 20px; font-size: 13px; gap: 12px; }
	.mab-cta   { padding: 3px 11px; font-size: 11px; }

	.mab-close { width: 36px; height: 36px; right: 4px; font-size: 20px; }

	.mab-marquee.mab-dismiss-pad .mab-track { padding-right: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.mab-marquee .mab-track {
		animation:       none;
		width:           100%;
		justify-content: center;
	}
	/* Show only the first unit when motion is reduced */
	.mab-marquee .mab-item:not(:first-child) { display: none; }
}