/**
 * OM Product Page Essentials - Trust Badges Module Styles
 */

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

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

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

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

.om-ppe-badge-item.has-link {
	cursor: pointer;
}

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

.om-ppe-badge-link:hover {
	transform: scale(1.05);
}

.om-ppe-badge-link:hover .om-ppe-badge-text {
	color: var(--om-ppe-tb-text-color, #212121);
	text-decoration: underline;
}

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

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

.om-ppe-badge-item:hover img.om-ppe-default-badge {
	transform: scale(1.05);
}

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

.om-ppe-badge-item:hover img.om-ppe-custom-badge {
	transform: scale(1.05);
}

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

/* Responsive */
@media (max-width: 768px) {
	.om-ppe-trust-badges {
		padding: 12px 15px;
	}

	.om-ppe-trust-badges-images {
		flex-wrap: wrap;
		gap: 10px;
	}

	.om-ppe-trust-badges-images img {
		max-width: 50px;
		max-height: 50px;
	}

	.om-ppe-badge-item {
		max-width: calc(50px + 15px);
	}

	.om-ppe-badge-text {
		font-size: 11px;
		margin-top: 5px;
	}

	/* Mobile: 1 badge per row */
	.om-ppe-trust-badges[data-mobile-cols="1"] .om-ppe-trust-badges-images {
		flex-direction: column;
		align-items: center;
	}

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

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

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

	/* Mobile: 2 badges per row */
	.om-ppe-trust-badges[data-mobile-cols="2"] .om-ppe-trust-badges-images {
		justify-content: center;
	}

	.om-ppe-trust-badges[data-mobile-cols="2"] .om-ppe-badge-item {
		flex: 0 0 calc(50% - 10px);
		max-width: calc(50% - 10px);
	}

	/* Center last badge when odd total with 2 columns */
	.om-ppe-trust-badges[data-mobile-cols="2"][data-total-odd="true"] .om-ppe-badge-item:last-child {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

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

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

/* Alignment fixes for title to match badge alignment */
.om-ppe-trust-badges[style*="--om-ppe-tb-align: flex-start"] .om-ppe-trust-badges-title,
.om-ppe-trust-badges[style*="--om-ppe-tb-align:flex-start"] .om-ppe-trust-badges-title {
	text-align: left;
}

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