/* ============================================================
 * io-kenos-child v1.2 — Trust bar (Phase 3 B5)
 * ------------------------------------------------------------
 * Playful trust strip sitting between the header and hero.
 * Niche-colored background (purple for party rental, green
 * for tents, etc.), white text, orange/gold accents — reads
 * as a celebration of credentials rather than a compliance
 * notice. Wraps gracefully on narrow screens.
 * ============================================================ */

.wdz-trust-bar {
	margin: 0;
	padding: 0;
	background: var(--wdz-primary, #6B46C1);
	color: #fff;
	position: relative;
	overflow: hidden;
}

/* Party-rental niche only — subtle confetti dot pattern,
 * matches the footer treatment so the trust bar feels like
 * part of the same family of playful surfaces. */
body.wdz-niche-party-rental .wdz-trust-bar {
	background-image:
		radial-gradient(circle at 8% 30%,  rgba(255,255,255,0.10) 0 1.5px, transparent 2px),
		radial-gradient(circle at 30% 70%, rgba(255,255,255,0.08) 0 2px,   transparent 2.5px),
		radial-gradient(circle at 64% 25%, rgba(255,255,255,0.10) 0 1.5px, transparent 2px),
		radial-gradient(circle at 88% 60%, rgba(255,255,255,0.08) 0 2px,   transparent 2.5px);
	background-size: 280px 280px;
	background-position: 0 0, 60px 30px, 140px 90px, 220px 60px;
}

.wdz-trust-bar__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 28px;
	font-size: 15px;
	line-height: 1.3;
	position: relative;
	z-index: 1;
}

/* ============================================================
 * Badge — icon + label, separated by thin vertical dividers
 * (rendered via ::after on every badge except the last)
 * ============================================================ */

.wdz-trust-bar__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	color: #fff;
	font-family: var(--wdz-font-body);
	position: relative;
}

/* Vertical separator between badges on wider screens */
@media (min-width: 721px) {
	.wdz-trust-bar__badge:not(:last-child)::after {
		content: '';
		position: absolute;
		right: -14px;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 22px;
		background: rgba(255, 255, 255, 0.22);
	}
}

.wdz-trust-bar__badge strong {
	font-family: 'Fredoka One', 'Lilita One', var(--wdz-font-heading, inherit);
	font-weight: 400;
	font-size: 20px;
	color: var(--wdz-accent, #F59E0B);
	letter-spacing: 0.01em;
}

/* ============================================================
 * Icons — bigger, with subtle "pop" treatment
 * ============================================================ */

.wdz-trust-bar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}

/* Reviews badge — gold star on a white ring */
.wdz-trust-bar__badge--reviews .wdz-trust-bar__icon {
	background: var(--wdz-accent, #F59E0B);
	color: #fff;
	font-size: 18px;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

/* BBB shield — solid white, niche-color symbol */
.wdz-trust-bar__badge--bbb .wdz-trust-bar__icon {
	background: #fff;
	color: var(--wdz-primary, #6B46C1);
	font-size: 14px;
}

/* Insured / Licensed checkmarks */
.wdz-trust-bar__badge--insured .wdz-trust-bar__icon,
.wdz-trust-bar__badge--licensed .wdz-trust-bar__icon {
	background: var(--wdz-accent, #F59E0B);
	color: #fff;
	font-weight: 700;
}

.wdz-trust-bar__label {
	white-space: nowrap;
}

/* ============================================================
 * Mobile: horizontal scroll snap — all badges stay accessible
 * in one row that the user can swipe through, instead of
 * wrapping into 2-3 cramped rows. Matches the pill-nav UX.
 * A right-edge fade gradient signals "more to scroll" so
 * users don't miss the badges past the visible edge.
 * ============================================================ */

@media (max-width: 720px) {
	/* Fade-edge scroll affordance — sits on top of the scrolling
	 * inner row, blending the last visible badge into the niche
	 * background. Pointer-events:none keeps swipes passing through. */
	.wdz-trust-bar::after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 40px;
		pointer-events: none;
		background: linear-gradient(
			to right,
			rgba(255, 255, 255, 0) 0%,
			var(--wdz-primary, #6B46C1) 100%
		);
		z-index: 2;
	}

	.wdz-trust-bar__inner {
		padding: 12px 16px;
		gap: 0;
		font-size: 13px;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		/* Hide scrollbar but keep functionality */
		scrollbar-width: none;
	}
	.wdz-trust-bar__inner::-webkit-scrollbar {
		display: none;
	}

	.wdz-trust-bar__badge {
		scroll-snap-align: start;
		flex: 0 0 auto;
		padding: 4px 14px 4px 0;
		margin-right: 14px;
		gap: 8px;
		white-space: nowrap;
	}

	/* Replace the vertical separator with a chip-style background
	 * on every badge so each one reads as a distinct "pill" while
	 * scrolling. */
	.wdz-trust-bar__badge:not(:last-child) {
		border-right: 1px solid rgba(255, 255, 255, 0.18);
	}

	.wdz-trust-bar__badge strong {
		font-size: 17px;
	}
	.wdz-trust-bar__icon {
		width: 26px;
		height: 26px;
		font-size: 14px;
	}
	.wdz-trust-bar__label {
		white-space: nowrap;
	}
}