/**
 * Shomer Shabbat Commerce — front-end styles.
 * RTL-first; themeable via --ssc-brand / --ssc-accent custom properties.
 */

.ssc-banner {
	--ssc-brand: #1f2a44;
	--ssc-accent: #c9a24b;
	position: sticky;
	top: 0;
	z-index: 9999;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding: 10px 18px;
	background: linear-gradient(90deg, var(--ssc-brand), color-mix(in srgb, var(--ssc-brand) 78%, #000));
	color: #fff;
	font: 500 15px/1.5 -apple-system, "Segoe UI", Rubik, Arial, sans-serif;
	text-align: center;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

.ssc-banner span {
	max-width: 90ch;
}

/* The permanent (all-week) banner is NOT sticky by default, so it can't fight
   a theme's own sticky header. Opt in with the "stick to top" setting. */
.ssc-banner--always {
	position: static;
}
.ssc-banner--always.is-sticky {
	position: sticky;
	top: 0;
}

/* --- Rotating messages: fade / slide --- */
.ssc-banner--always.ssc-anim-fade,
.ssc-banner--always.ssc-anim-slide {
	flex-wrap: nowrap;
}
.ssc-banner .ssc-rot {
	position: relative;
	flex: 1 1 auto;
	min-height: 1.5em;
}
.ssc-banner .ssc-rot__msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.ssc-anim-fade .ssc-rot__msg { opacity: 0; transition: opacity .5s ease; }
.ssc-anim-fade .ssc-rot__msg.is-active { opacity: 1; }
.ssc-anim-slide .ssc-rot__msg { opacity: 0; transform: translateY(120%); transition: opacity .45s ease, transform .45s ease; }
.ssc-anim-slide .ssc-rot__msg.is-active { opacity: 1; transform: translateY(0); }

/* --- Continuous ticker (marquee) --- */
.ssc-banner--always.ssc-anim-marquee {
	display: block;
	overflow: hidden;
	padding-inline: 0;
	white-space: nowrap;
	/* Anchor the strip to the left edge even on RTL pages, so scrolling left
	   never pulls it away from the right edge and opens a gap. */
	direction: ltr;
}
/* Lay the strip out left-to-right whatever the page direction, so the scroll
   maths is the same everywhere; each message keeps its own text direction. */
.ssc-anim-marquee .ssc-tick {
	display: flex;
	width: max-content;
	direction: ltr;
	animation: ssc-tick-scroll var(--ssc-tick-dur, 20s) linear infinite;
	will-change: transform;
}
.ssc-anim-marquee .ssc-tick__track { display: flex; flex: 0 0 auto; }
.ssc-anim-marquee .ssc-tick__item { padding: 0 2rem; unicode-bidi: plaintext; }
.ssc-anim-marquee:hover .ssc-tick { animation-play-state: paused; }
.ssc-anim-marquee.is-dir-right .ssc-tick { animation-direction: reverse; }
@keyframes ssc-tick-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-1 * var(--ssc-tick-shift, 50%))); }
}

@media (prefers-reduced-motion: reduce) {
	.ssc-anim-fade .ssc-rot__msg,
	.ssc-anim-slide .ssc-rot__msg { transition: none; }
	.ssc-anim-marquee .ssc-tick { animation: none; }
}

.ssc-notice {
	--ssc-brand: #1f2a44;
	--ssc-accent: #c9a24b;
	position: relative;
	margin: 16px 0;
	padding: 18px 20px 18px 20px;
	border: 1px solid color-mix(in srgb, var(--ssc-accent) 45%, transparent);
	border-inline-start: 4px solid var(--ssc-accent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--ssc-accent) 8%, #fff);
	color: var(--ssc-brand);
	font: 500 16px/1.6 -apple-system, "Segoe UI", Rubik, Arial, sans-serif;
}

.ssc-shabbat-button {
	cursor: not-allowed !important;
	opacity: 0.75;
	pointer-events: none;
	background: #e9e6df !important;
	color: #6b6357 !important;
	border: 1px dashed #c9a24b !important;
	box-shadow: none !important;
}

.ssc-countdown {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
	/* Always show units left-to-right (days, hours, minutes, seconds) even on
	   an RTL page. Isolated so it doesn't affect surrounding Hebrew text. */
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-flex;
	gap: 2px;
}

/* Countdown pills (used inside notices/splash when JS is active). */
.ssc-countdown .ssc-unit {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 2.4em;
	margin: 0 2px;
	padding: 4px 6px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--ssc-accent, #c9a24b) 18%, transparent);
	line-height: 1.1;
}

.ssc-countdown .ssc-unit b {
	font-size: 1.15em;
}

.ssc-countdown .ssc-unit small {
	font-size: 0.62em;
	font-weight: 600;
	opacity: 0.7;
}