/**
 * MA Payment Slider — "Porcelain Light" v3.3 (original light-premium design).
 * Soft porcelain-white section, champagne accents, brand-red whisper, dual
 * opposing CSS-only marquees built from per-logo porcelain tiles.
 * Perf discipline: no JS, no backdrop-filter, no filters, no new requests;
 * animation is transform-only. The style-mode classes match the classes
 * Elementor actually emits from the widget's prefix_class
 * (`.ma-pms-style-premium` / `.ma-pms-style-light` on the widget wrapper).
 * Base (.ma-pms) = Porcelain (light premium). No black background anywhere.
 *
 * Lazyload immunity: Elementor emits `.e-con.e-parent:not(.e-lazyloaded) *
 * { background-image: none !important }` which would kill every gradient
 * here before its JS marks ancestors `.e-lazyloaded`. Therefore all core
 * surfaces use background-color (not image), decorative gradients live on
 * ::before (pseudo-elements are not matched by `*`), and the heading uses
 * a solid color instead of background-clip:text (which needs an image).
 */

.ma-pms {
	/* Fallback (and porcelain defaults) — overridden per widget wrapper */
	--ma-accent: #d43737;
	--ma-card-bg: #ffffff;
	--ma-heading-color: #14161f;
	--ma-text-color: #6a6f7b;
	--ma-h: 46px;
	--ma-w: 150px;
	--ma-gap: 48px;
	--ma-speed: 22s;
	--ma-radius: 22px;

	--ma-champagne: #d8b26e;
	--ma-champagne-ink: #a8813f;
	--ma-champagne-soft: #f6e27a;
	--ma-line: rgba(216, 178, 110, 0.55);

	--ma-sec-radius: 24px;
	--ma-sec-border-w: 1px;
	--ma-sec-border-color: #e4e6eb;

	position: relative;
	overflow: hidden;
	direction: ltr;
	padding: 46px 18px 44px;
	border-radius: var(--ma-sec-radius);
	border: var(--ma-sec-border-w) solid var(--ma-sec-border-color);
	/* Solid only — survives Elementor's background-image:none!important lazyload rule. */
	background-color: #f4f5f7;
}

/* Quiet porcelain backdrop: one soft vertical gradient + a barely-there warm
   halo at the top. No texture, no red bloom, no frame (pseudo-layer, exempt
   from Elementor's lazyload `*` background-image kill). */
.ma-pms::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1000px 220px at 50% -130px, rgba(216, 178, 110, 0.14), transparent 74%),
		linear-gradient(180deg, #fcfcfd 0%, #f3f4f7 58%, #f6f7f9 100%);
	pointer-events: none;
}

.ma-pms__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

/* ---------- Porcelain chip (badge) ---------- */
.ma-pms__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	/* Solid: gradients (background-image) are nulled by Elementor's lazyload rule. */
	background-color: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(20, 22, 31, 0.1);
	box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(20, 22, 31, 0.08);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ma-heading-color);
	margin-bottom: 16px;
	line-height: 1;
}

.ma-pms__chip .ma-pms__ic {
	color: var(--ma-champagne-ink);
	transform: translateY(-1px);
}

/* ---------- Typography ---------- */
.ma-pms__heading {
	margin: 2px 0 8px;
	font-size: clamp(22px, 3.4vw, 32px);
	font-weight: 800;
	letter-spacing: -0.4px;
	line-height: 1.25;
	/* Solid color: background-clip:text needs background-image, which Elementor's
	   lazyload rule nulls with !important (invisible-text risk otherwise). */
	color: var(--ma-heading-color);
}

.ma-pms__sub {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ma-text-color);
}

/* ---------- Dual opposing marquees ---------- */
.ma-pms__rows {
	display: grid;
	gap: 16px;
	margin: 0 0 26px;
}

.ma-pms__marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.ma-pms__marquee--rev .ma-pms__track {
	animation-direction: reverse;
	animation-duration: calc(var(--ma-speed) * 1.18);
}

.ma-pms__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: ma-pms-scroll var(--ma-speed) linear infinite;
}

.ma-pms__marquee:hover .ma-pms__track {
	animation-play-state: paused;
}

.ma-pms__seq {
	display: flex;
	align-items: stretch;
}

.ma-pms__tile {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: calc(var(--ma-w) * 0.92);
	min-height: 78px;
	margin-right: calc(var(--ma-gap) * 0.62);
	padding: 16px calc(var(--ma-gap) * 0.38);
	border-radius: var(--ma-radius);
	/* Solid: gradients (background-image) are nulled by Elementor's lazyload rule. */
	background-color: var(--ma-card-bg);
	border: 1px solid rgba(20, 22, 31, 0.09);
	box-shadow:
		inset 0 1px 0 #ffffff,
		0 10px 22px rgba(20, 22, 31, 0.08);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ma-pms__tile:hover {
	transform: translateY(-3px);
	border-color: rgba(216, 178, 110, 0.55);
	box-shadow:
		inset 0 1px 0 #ffffff,
		0 14px 28px rgba(20, 22, 31, 0.12),
		0 0 16px rgba(216, 178, 110, 0.12);
}

.ma-pms__tile img {
	height: var(--ma-h);
	max-width: calc(var(--ma-w) * 0.82);
	width: auto;
	object-fit: contain;
	display: block;
}

.ma-pms__empty {
	color: #9aa0ad;
	font-size: 13px;
	white-space: nowrap;
	padding: 26px 34px;
}

/* ---------- Footer note (engraved) ---------- */
.ma-pms__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--ma-text-color);
	font-size: 13px;
	line-height: 1.5;
}

.ma-pms__line {
	flex: 1;
	height: 1px;
	/* Solid champagne hairline: gradient lines get nulled by the lazyload rule. */
	background-color: rgba(216, 178, 110, 0.6);
}

.ma-pms__footwrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.ma-pms__foot .ma-pms__ic {
	color: var(--ma-champagne-ink);
	flex: 0 0 auto;
}

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

/* ---------- Minimal (white) mode: airier, flatter, glow-free ---------- */
.ma-pms-style-light .ma-pms {
	background-color: #ffffff;
	--ma-sec-border-color: rgba(20, 22, 31, 0.06);
}

.ma-pms-style-light .ma-pms::before {
	background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%);
}

.ma-pms-style-light .ma-pms__tile {
	box-shadow:
		inset 0 1px 0 #ffffff,
		0 4px 12px rgba(20, 22, 31, 0.06);
}

.ma-pms-style-light .ma-pms__tile:hover {
	box-shadow:
		inset 0 1px 0 #ffffff,
		0 10px 20px rgba(20, 22, 31, 0.1),
		0 0 12px rgba(216, 178, 110, 0.1);
}

.ma-pms-style-light .ma-pms__chip {
	box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(20, 22, 31, 0.06);
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
	.ma-pms {
		padding: 34px 12px 34px;
	}

	.ma-pms__rows {
		gap: 12px;
	}

	.ma-pms__tile {
		min-height: 62px;
		padding: 12px 18px;
	}

	.ma-pms__tile img {
		height: calc(var(--ma-h) * 0.74);
		max-width: calc(var(--ma-w) * 0.68);
	}

	.ma-pms__sub {
		margin-bottom: 18px;
		font-size: 12.5px;
	}

	.ma-pms__foot {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ma-pms__track {
		animation: none;
	}

	.ma-pms__marquee {
		overflow-x: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Compact mode (single instance on the single-product layout).
 * Applied via Elementor's standard `_css_classes` field set to `ma-pms-compact`
 * on the widget — the homepage slider does not carry the class, so nothing
 * there changes. Goal: homepage-style dual marquee at roughly the height of
 * the small logos-only strip (~110-130px total).
 * ------------------------------------------------------------------------ */
.ma-pms-compact .ma-pms {
	padding: 16px 14px 14px;
}

.ma-pms-compact .ma-pms__tile {
	min-height: 40px;
	padding: 7px 12px;
}

.ma-pms-compact .ma-pms__rows {
	gap: 8px;
	margin-bottom: 0;
}

.ma-pms-compact .ma-pms__marquee {
	/* keep the dual opposing scroll; nothing else to change */
	min-height: 0;
}