/* Trust Badges Fan — frontend styles */

.tbf-widget-wrap {
	--tbf-color-a: #DCEEFF;
	--tbf-color-b: #FFF3D1;
	--tbf-accent: #F5A623;
	--tbf-radius: 16px;

	width: 100%;
	box-sizing: border-box;
}

.tbf-badges-row {
	--tbf-cols: 4;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: 24px;
	width: 100%;
}

.tbf-badge {
	flex: 0 0 calc((100% / var(--tbf-cols)) - 24px);
	max-width: calc((100% / var(--tbf-cols)) - 24px);
	box-sizing: border-box;
}

/* Fan / arc placement (desktop only — see media query below) */
.tbf-layout-fan .tbf-badge {
	transform: rotate(var(--tbf-rotate, 0deg)) translateY(var(--tbf-shift, 0px));
	transition: transform 0.3s ease;
}

.tbf-card {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--tbf-card-bg, var(--tbf-color-a));
	border-radius: var(--tbf-radius);
	padding: 22px 18px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tbf-badge.tbf-color-1 .tbf-card {
	background: var(--tbf-card-bg, var(--tbf-color-b));
}

.tbf-number {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: #161616;
}

.tbf-description {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #5B5B5B;
}

/* -------- Entry animations --------
   Initial (pre-animate) state set per animation type; JS adds
   .tbf-in-view (with a per-item transition-delay) to trigger it. */
.tbf-badge[data-anim-ready="1"] {
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.tbf-badges-row[data-animation="fade-up"] .tbf-badge[data-anim-ready="1"] {
	opacity: 0;
	transform: translateY(28px) rotate(var(--tbf-rotate, 0deg)) translateY(var(--tbf-shift, 0px));
}
.tbf-badges-row[data-animation="fade-up"] .tbf-badge.tbf-in-view {
	opacity: 1;
	transform: rotate(var(--tbf-rotate, 0deg)) translateY(var(--tbf-shift, 0px));
}

.tbf-badges-row[data-animation="fade-in"] .tbf-badge[data-anim-ready="1"] {
	opacity: 0;
}
.tbf-badges-row[data-animation="fade-in"] .tbf-badge.tbf-in-view {
	opacity: 1;
}

.tbf-badges-row[data-animation="zoom-in"] .tbf-badge[data-anim-ready="1"] {
	opacity: 0;
	transform: scale(0.75) rotate(var(--tbf-rotate, 0deg)) translateY(var(--tbf-shift, 0px));
}
.tbf-badges-row[data-animation="zoom-in"] .tbf-badge.tbf-in-view {
	opacity: 1;
	transform: scale(1) rotate(var(--tbf-rotate, 0deg)) translateY(var(--tbf-shift, 0px));
}

.tbf-badges-row[data-animation="slide-left"] .tbf-badge[data-anim-ready="1"] {
	opacity: 0;
	transform: translateX(60px) rotate(var(--tbf-rotate, 0deg)) translateY(var(--tbf-shift, 0px));
}
.tbf-badges-row[data-animation="slide-left"] .tbf-badge.tbf-in-view {
	opacity: 1;
	transform: rotate(var(--tbf-rotate, 0deg)) translateY(var(--tbf-shift, 0px));
}

.tbf-badges-row[data-animation="slide-right"] .tbf-badge[data-anim-ready="1"] {
	opacity: 0;
	transform: translateX(-60px) rotate(var(--tbf-rotate, 0deg)) translateY(var(--tbf-shift, 0px));
}
.tbf-badges-row[data-animation="slide-right"] .tbf-badge.tbf-in-view {
	opacity: 1;
	transform: rotate(var(--tbf-rotate, 0deg)) translateY(var(--tbf-shift, 0px));
}

/* Responsive: collapse fan into a clean stacked/grid layout */
@media (max-width: 1024px) {
	.tbf-layout-fan .tbf-badge {
		transform: none !important;
	}
	.tbf-badges-row[data-animation] .tbf-badge[data-anim-ready="1"] {
		transform: translateY(20px);
	}
	.tbf-badges-row[data-animation] .tbf-badge.tbf-in-view {
		transform: none;
	}
}

@media (max-width: 767px) {
	.tbf-card { padding: 18px 16px; }
}