/**
 * AIEO Trust Badges — reassurance icons on single product pages.
 * Migrated from om-product-page-essentials; selectors renamed to the
 * aieo-trust-badges-* namespace. The wrapper also keeps the legacy
 * `.om-ppe-trust-badges` class so any existing theme/site CSS that
 * targets the old name keeps working until it's audited away.
 */

.aieo-trust-badges {
	display: flex;
	flex-direction: column;
	align-items: var(--aieo-tb-align, center);
	margin-top: var(--aieo-tb-margin-top, 20px);
	margin-bottom: var(--aieo-tb-margin-bottom, 20px);
	padding: 15px 20px;
	border: 1px solid var(--aieo-tb-border-color, #e5e5e5);
	border-radius: 4px;
}

.aieo-trust-badges-title {
	margin: 0 0 15px 0;
	padding: 0 10px;
	font-size: var(--aieo-tb-font-size, 15px);
	font-weight: 600;
	color: var(--aieo-tb-text-color, #212121);
	text-align: center;
	background: #fff;
}

.aieo-trust-badges-images {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: var(--aieo-tb-align, center);
	gap: 15px;
}

/* Badge item container — flex column for icon + text */
.aieo-trust-badges-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: calc(var(--aieo-tb-image-max-width, 70px) + 20px);
}

.aieo-trust-badges-item.has-link {
	cursor: pointer;
}

/* Badge link wrapper */
.aieo-trust-badges-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.aieo-trust-badges-link:hover {
	transform: scale(1.05);
}

.aieo-trust-badges-link:hover .aieo-trust-badges-text {
	color: var(--aieo-tb-text-color, #212121);
	text-decoration: underline;
}

/* Badge images */
.aieo-trust-badges-images img {
	max-width: var(--aieo-tb-image-max-width, 70px);
	max-height: var(--aieo-tb-image-max-height, 70px);
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Default badge styling */
.aieo-trust-badges-images img.aieo-trust-badges-default {
	filter: grayscale(0);
	transition: filter 0.3s ease, transform 0.3s ease;
}

.aieo-trust-badges-item:hover img.aieo-trust-badges-default {
	transform: scale(1.05);
}

/* Custom badge styling */
.aieo-trust-badges-images img.aieo-trust-badges-custom {
	border-radius: 4px;
	transition: transform 0.3s ease;
}

.aieo-trust-badges-item:hover img.aieo-trust-badges-custom {
	transform: scale(1.05);
}

/* Badge text label */
.aieo-trust-badges-text {
	display: block;
	margin-top: 8px;
	font-size: calc(var(--aieo-tb-font-size, 15px) - 3px);
	font-weight: 500;
	line-height: 1.3;
	color: var(--aieo-tb-text-color, #212121);
	text-align: center;
	word-wrap: break-word;
	max-width: 100%;
}

/* Responsive — mobile */
@media (max-width: 768px) {
	.aieo-trust-badges {
		padding: 14px 16px;
	}

	.aieo-trust-badges-images {
		flex-wrap: wrap;
		gap: 16px 12px;          /* row-gap (vertical) larger than column-gap so 2x3 grids breathe */
		justify-content: center;
	}

	.aieo-trust-badges-images img {
		max-width: 60px;
		max-height: 60px;
	}

	.aieo-trust-badges-text {
		font-size: 12px;
		margin-top: 6px;
	}

	/* DEFAULT mobile layout = 2 columns. Matches the typical use case
	   (6 trust badges → 2×3 grid). The data-mobile-cols attribute lets
	   admins override: "1" stacked / row-oriented · "3" or "4" denser. */
	.aieo-trust-badges-item {
		flex: 0 0 calc(50% - 6px);
		max-width: calc(50% - 6px);
	}

	/* Mobile: 1 badge per row (stacked, icon + text side-by-side) */
	.aieo-trust-badges[data-mobile-cols="1"] .aieo-trust-badges-images {
		flex-direction: column;
		align-items: center;
	}

	.aieo-trust-badges[data-mobile-cols="1"] .aieo-trust-badges-item {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		flex-direction: row;
		justify-content: center;
		gap: 10px;
	}

	.aieo-trust-badges[data-mobile-cols="1"] .aieo-trust-badges-item .aieo-trust-badges-link {
		flex-direction: row;
		gap: 10px;
	}

	.aieo-trust-badges[data-mobile-cols="1"] .aieo-trust-badges-text {
		margin-top: 0;
	}

	/* Mobile: 3 badges per row */
	.aieo-trust-badges[data-mobile-cols="3"] .aieo-trust-badges-item {
		flex: 0 0 calc(33.333% - 8px);
		max-width: calc(33.333% - 8px);
	}

	/* Mobile: 4 badges per row */
	.aieo-trust-badges[data-mobile-cols="4"] .aieo-trust-badges-item {
		flex: 0 0 calc(25% - 9px);
		max-width: calc(25% - 9px);
	}

	/* Center last badge when total is odd in a 2-column grid so the
	   trailing item doesn't sit alone in the left column. */
	.aieo-trust-badges:not([data-mobile-cols="1"]):not([data-mobile-cols="3"]):not([data-mobile-cols="4"])[data-total-odd="true"] .aieo-trust-badges-item:last-child,
	.aieo-trust-badges[data-mobile-cols="2"][data-total-odd="true"] .aieo-trust-badges-item:last-child {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Theme Compatibility — Flatsome */
.single-product.flavor-flavor .aieo-trust-badges {
	margin-top: 15px;
}

/* Theme Compatibility — Storefront */
.storefront .aieo-trust-badges {
	border-radius: 0;
}

/* Alignment fixes — title alignment follows the badge alignment */
.aieo-trust-badges[style*="--aieo-tb-align: flex-start"] .aieo-trust-badges-title,
.aieo-trust-badges[style*="--aieo-tb-align:flex-start"] .aieo-trust-badges-title {
	text-align: left;
}

.aieo-trust-badges[style*="--aieo-tb-align: flex-end"] .aieo-trust-badges-title,
.aieo-trust-badges[style*="--aieo-tb-align:flex-end"] .aieo-trust-badges-title {
	text-align: right;
}