/* ===========================================================
   RewardRace — Trusted Brands
   Slim full-width social-proof bar: left label + row of muted
   brand wordmarks. All rules scoped under .rrTrust to avoid
   leaking into other widgets.
   =========================================================== */

.rrTrust {
	/* Defaults; the widget overrides these via inline custom props. */
	--rrtrust-max:        1280px;
	--rrtrust-py:         38px;
	--rrtrust-gap:        56px;
	--rrtrust-logo-h:     26px;
	--rrtrust-logo-op:    .72;
	--rrtrust-label-fs:   15px;
	--rrtrust-label-fw:   800;

	/* Solid surface matching the middle stop of the Hero gradient
	   (#FAF8FF) — keeps the lavender tint but reads much airier. */
	--rrtrust-bg:         none;
	--rrtrust-bg-color:   #FAF8FF;
	--rrtrust-glow-1:     rgba(139, 115, 255, .14);
	--rrtrust-glow-2:     rgba(233, 213, 255, .28);

	--rrtrust-text:       var(--rr-heading);

	width: 100%;
	background-color: var(--rrtrust-bg-color);
	background-image: var(--rrtrust-bg);
	color: var(--rrtrust-text);
	font-family: var(--rr-font-sans);
	box-sizing: border-box;
	position: relative;
	overflow: hidden;

	/* Borderless on every edge. The `!important` and `-1px` margin together
	   defeat (a) any global `border-*: 1px solid var(--rr-divider)` rule from
	   base.css and (b) the **next section's** top hairline that paints right
	   against this widget's lower edge and reads as a "bottom border". */
	border: 0 !important;
	margin-bottom: -1px;
}

/* Belt-and-suspenders: also nuke the top border of the widget that immediately
   follows trusted-brands in the same Elementor column / inner section. */
.elementor-widget-rrew_trusted_brands + .elementor-widget > .elementor-widget-container > * {
	border-top: 0 !important;
}

/* ----- Soft background glows (twin purple/lavender, like the hero) ----- */
.rrTrust::before,
.rrTrust::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(88px);
	pointer-events: none;
	z-index: 0;
}
.rrTrust::before {
	width: 460px; height: 460px;
	top: -260px; left: -180px;
	background: radial-gradient(circle at center, var(--rrtrust-glow-1) 0%, transparent 70%);
}
.rrTrust::after {
	width: 420px; height: 420px;
	bottom: -240px; right: -160px;
	background: radial-gradient(circle at center, var(--rrtrust-glow-2) 0%, transparent 70%);
}

/* ----- Background variants ----- */
.rrTrust--bg-transparent {
	--rrtrust-bg:        none;
	--rrtrust-bg-color:  transparent;
	--rrtrust-glow-1:    transparent;
	--rrtrust-glow-2:    transparent;
}
.rrTrust--bg-surface {
	/* keeps the hero-matched gradient default — controlled by base rule */
}
.rrTrust--bg-white {
	--rrtrust-bg:        none;
	--rrtrust-bg-color:  #FFFFFF;
	--rrtrust-glow-1:    rgba(139, 115, 255, .10);
	--rrtrust-glow-2:    rgba(233, 213, 255, .20);
}

/* Dark theme — same hero formula */
html[data-theme="dark"] .rrTrust:not(.rrTrust--bg-transparent):not(.rrTrust--bg-white) {
	--rrtrust-bg:        linear-gradient(180deg, #14102B 0%, #0E0B22 50%, #0A0912 100%);
	--rrtrust-bg-color:  #0F0C22;
	--rrtrust-glow-1:    rgba(139, 115, 255, .14);
	--rrtrust-glow-2:    rgba(87, 63, 211, .12);
}
html[data-theme="dark"] .rrTrust--bg-white {
	--rrtrust-bg-color:  var(--rr-surface);
	--rrtrust-glow-1:    rgba(139, 115, 255, .08);
	--rrtrust-glow-2:    rgba(87, 63, 211, .07);
}

/* ----- Forced color modes (override site auto-theme) ----- */
.rrTrust--light { --rrtrust-text: #0B0A14; }
.rrTrust--dark  { --rrtrust-text: #FFFFFF; }

/* Border toggles intentionally render nothing — the design is borderless.
   The PHP controls are kept for backwards compatibility but no longer paint. */
.rrTrust--bt,
.rrTrust--bb { border: 0 !important; }

/* ----- Container ----- */
.rrTrust__wrap {
	position: relative;
	z-index: 1; /* sit above the ::before/::after glow blobs */
	max-width: var(--rrtrust-max);
	margin: 0 auto;
	padding: var(--rrtrust-py) var(--rr-section-x);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 48px);
}

/* ----- Label ----- */
.rrTrust__label {
	margin: 0;
	font-size: var(--rrtrust-label-fs);
	font-weight: var(--rrtrust-label-fw);
	line-height: 1.25;
	letter-spacing: -.018em;
	color: var(--rrtrust-text);
	white-space: nowrap;
	flex: 0 0 auto;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* ----- Logo row ----- */
.rrTrust__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--rrtrust-gap);
	flex: 1 1 auto;
	min-width: 0;
}

.rrTrust__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.rrTrust__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
	border-radius: 4px;
	outline: none;
}

.rrTrust__link:focus-visible {
	box-shadow: var(--rr-ring);
}

.rrTrust__img {
	display: block;
	height: var(--rrtrust-logo-h);
	max-height: var(--rrtrust-logo-h);
	width: auto;
	max-width: var(--rrtrust-logo-max-w, 100%);
	object-fit: contain;
	opacity: var(--rrtrust-logo-op);
	transition:
		opacity   var(--rr-dur-base) var(--rr-ease-out),
		filter    var(--rr-dur-base) var(--rr-ease-out),
		transform var(--rr-dur-fast) var(--rr-ease-out);
}

/* Fallback wordmark used when no image is uploaded — keeps layout intact
   and preserves the muted-logo visual hierarchy. */
.rrTrust__wordmark {
	display: inline-block;
	font-family: var(--rr-font-sans);
	font-weight: 800;
	font-size: calc(var(--rrtrust-logo-h) * .58);
	line-height: var(--rrtrust-logo-h);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rrtrust-text);
	opacity: var(--rrtrust-logo-op);
	transition:
		opacity var(--rr-dur-base) var(--rr-ease-out),
		color   var(--rr-dur-base) var(--rr-ease-out);
}

/* ----- Grayscale treatment (matches the muted look in the design) ----- */
.rrTrust--grayscale .rrTrust__img {
	filter: grayscale(1) contrast(1.08);
}

/* On the dark theme, invert the muted logos so they read on a deep bg */
html[data-theme="dark"] .rrTrust--grayscale .rrTrust__img {
	filter: grayscale(1) brightness(1.6) invert(1);
}

/* ----- Hover: reveal full color, full opacity ----- */
.rrTrust__link:hover .rrTrust__img,
.rrTrust__link:focus-visible .rrTrust__img,
.rrTrust__logo:hover .rrTrust__img {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-1px);
}

.rrTrust__link:hover .rrTrust__wordmark,
.rrTrust__logo:hover .rrTrust__wordmark {
	opacity: 1;
	color: var(--rr-brand);
}

/* ===========================================================
   Responsive
   =========================================================== */

/* Tablet — stack the label above the logo row, both centered */
@media (max-width: 960px) {
	.rrTrust__wrap {
		flex-direction: column;
		gap: 18px;
		text-align: center;
	}
	.rrTrust__label {
		white-space: normal;
	}
	.rrTrust__logos {
		gap: clamp(28px, 5vw, 48px);
	}
}

/* Mobile — tighter row, allow logos to wrap into multiple rows */
@media (max-width: 600px) {
	.rrTrust {
		--rrtrust-py:        24px;
		--rrtrust-logo-h:    20px;
		--rrtrust-label-fs:  14px;
	}
	.rrTrust__wrap {
		padding-left:  var(--rr-space-4);
		padding-right: var(--rr-space-4);
	}
	.rrTrust__logos {
		gap: 22px 28px;
		row-gap: 18px;
	}
}

/* Reduced motion: keep transforms still but allow color/opacity to ease */
@media (prefers-reduced-motion: reduce) {
	.rrTrust__img,
	.rrTrust__wordmark {
		transition: none;
	}
	.rrTrust__link:hover .rrTrust__img,
	.rrTrust__logo:hover .rrTrust__img {
		transform: none;
	}
}