/* ==========================================================================
   Beck Ticker Ribbon – Styles
   ========================================================================== */

/* Wrapper ------------------------------------------------------------------ */
.beck-ticker-ribbon {
	overflow: hidden;
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
}

/* Prevent the ribbon from overflowing the page horizontally */
.beck-ticker-ribbon * {
	box-sizing: border-box;
}

/* Track – the moving container --------------------------------------------- */
.beck-ticker-track {
	display: flex;
	width: 100%;
	overflow: hidden;
}

/* List – flex row of items ------------------------------------------------- */
.beck-ticker-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	/* animation is applied inline via JS */
}

/* Individual item ---------------------------------------------------------- */
.beck-ticker-item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	/* gap between icon and text is controlled by Elementor control */
	gap: 10px;
}

/* Text --------------------------------------------------------------------- */
.beck-ticker-item__text {
	display: inline;
	white-space: nowrap;
}

/* Keep inline formatting intact */
.beck-ticker-item__text strong,
.beck-ticker-item__text b {
	font-weight: 700;
}

.beck-ticker-item__text em,
.beck-ticker-item__text i {
	font-style: italic;
}

/* Icon --------------------------------------------------------------------- */
.beck-ticker-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}

.beck-ticker-item__icon svg,
.beck-ticker-item__icon img {
	display: block;
	width: 1em;
	height: 1em;
	object-fit: contain;
}

/*
 * For single-color SVGs (plain shape / monochrome logo) we inherit the icon
 * color set in Elementor via currentColor.  We do NOT force-fill every child
 * element because compound icons (e.g. a play-button: circle + arrow cutout)
 * rely on their own internal fill values to stay visible.
 *
 * If the SVG has no explicit fill attributes on its children it will naturally
 * inherit currentColor from the parent <svg>.  If it DOES have explicit fills
 * (multi-colour or cutout icons) we respect them.
 */
.beck-ticker-item__icon svg {
	fill: currentColor;          /* default for simple single-path SVGs */
}

/* Let child elements that carry their OWN fill attribute keep it. ---------- */
.beck-ticker-item__icon svg [fill]:not([fill="none"]):not([fill="currentColor"]) {
	fill: inherit;               /* re-inherit only unset children */
}

/* Pause on hover ----------------------------------------------------------- */
.beck-ticker-ribbon[data-pause="true"]:hover .beck-ticker-list {
	animation-play-state: paused !important;
}

/* Keyframes ---------------------------------------------------------------- */
@keyframes beck-scroll-left {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes beck-scroll-right {
	0%   { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}