/**
 * Frontend styles for Trust Badges and Icons.
 */

.tbi-widget {
	--tbi-bg: var(--tbi-mobile-bg, #fff);
	--tbi-title-color: var(--tbi-mobile-title-color, #111827);
	--tbi-text-color: var(--tbi-mobile-text-color, #4b5563);
	--tbi-icon-color: var(--tbi-mobile-icon-color, #111827);
	--tbi-accent-color: var(--tbi-mobile-accent-color, #84cc16);
	--tbi-border-color: var(--tbi-mobile-border-color, #e5e7eb);
	--tbi-border-width: var(--tbi-mobile-border-width, 1px);
	--tbi-radius: var(--tbi-mobile-radius, 8px);
	--tbi-padding-y: var(--tbi-mobile-padding-y, 16px);
	--tbi-padding-x: var(--tbi-mobile-padding-x, 16px);
	--tbi-margin-y: var(--tbi-mobile-margin-y, 16px);
	--tbi-gap: var(--tbi-mobile-gap, 16px);
	--tbi-max-width: var(--tbi-mobile-max-width, 0px);
	--tbi-alignment: var(--tbi-mobile-alignment, center);
	--tbi-item-justify: var(--tbi-mobile-item-justify, center);
	--tbi-item-direction: var(--tbi-mobile-item-direction, column);
	--tbi-item-copy-align: var(--tbi-mobile-item-copy-align, var(--tbi-alignment));
	--tbi-widget-margin-left: var(--tbi-mobile-margin-left, auto);
	--tbi-widget-margin-right: var(--tbi-mobile-margin-right, auto);
	--tbi-columns: var(--tbi-mobile-columns, 1);
	--tbi-font-family: var(--tbi-mobile-font-family, inherit);
	--tbi-title-size: var(--tbi-mobile-title-size, 16px);
	--tbi-text-size: var(--tbi-mobile-text-size, 13px);
	--tbi-shadow: var(--tbi-mobile-shadow, none);
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--tbi-max-width);
	margin: var(--tbi-margin-y) var(--tbi-widget-margin-right) var(--tbi-margin-y) var(--tbi-widget-margin-left);
	padding: var(--tbi-padding-y) var(--tbi-padding-x);
	color: var(--tbi-text-color);
	font-family: var(--tbi-font-family);
	text-align: var(--tbi-alignment);
	background: var(--tbi-bg);
	border: var(--tbi-border-width) solid var(--tbi-border-color);
	border-radius: var(--tbi-radius);
	box-shadow: var(--tbi-shadow);
}

.tbi-widget[style*="--tbi-mobile-max-width:0px"] {
	max-width: none;
}

.tbi-widget,
.tbi-widget * {
	box-sizing: border-box;
}

.tbi-widget__items {
	display: grid;
	gap: var(--tbi-gap);
	grid-template-columns: repeat(var(--tbi-columns), minmax(0, 1fr));
	align-items: stretch;
}

.tbi-widget__items--row {
	grid-template-columns: repeat(var(--tbi-row-columns, var(--tbi-columns)), minmax(0, 1fr));
}

.tbi-widget__items--stacked {
	grid-template-columns: minmax(0, 1fr);
}

.tbi-widget__item,
.tbi-widget__message,
.tbi-widget__single,
.tbi-widget__upsell,
.tbi-widget__payment-pill {
	display: flex;
	gap: calc(var(--tbi-gap) * 0.75);
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.tbi-widget__item {
	flex-direction: var(--tbi-item-direction);
	justify-content: var(--tbi-item-justify);
	min-width: 0;
	text-align: var(--tbi-item-copy-align);
}

.tbi-widget__items--stacked .tbi-widget__item,
.tbi-widget__message,
.tbi-widget__upsell {
	justify-content: flex-start;
	text-align: left;
}

.tbi-widget__visual,
.tbi-widget__single-visual,
.tbi-widget__upsell-visual {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--tbi-icon-color);
}

.tbi-widget__single-visual,
.tbi-widget__upsell-visual {
	width: 48px;
	height: 48px;
}

.tbi-widget__visual svg,
.tbi-widget__single-visual svg,
.tbi-widget__upsell-visual svg {
	width: 100%;
	height: 100%;
}

.tbi-widget__visual img,
.tbi-widget__single-visual img,
.tbi-widget__upsell-visual img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	border-radius: calc(var(--tbi-radius) * 0.5);
	object-fit: contain;
}

.tbi-widget__item-copy,
.tbi-widget__message-copy,
.tbi-widget__single-copy,
.tbi-widget__upsell-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.tbi-widget__item-copy {
	text-align: var(--tbi-item-copy-align);
}

.tbi-widget__item-title,
.tbi-widget__title {
	color: var(--tbi-title-color);
	font-size: var(--tbi-title-size);
	font-weight: 700;
	line-height: 1.25;
}

.tbi-widget__item-text,
.tbi-widget__text,
.tbi-widget__eyebrow {
	color: var(--tbi-text-color);
	font-size: var(--tbi-text-size);
	line-height: 1.35;
}

.tbi-widget__checkout-strip {
	display: flex;
	flex-direction: column;
	gap: calc(var(--tbi-gap) * 0.65);
	align-items: center;
}

.tbi-widget__payment-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.tbi-widget__payment-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--tbi-border-color);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--tbi-title-color);
}

.tbi-widget__payment-pill--logo-only {
	justify-content: center;
	padding: 8px 12px;
}

.tbi-widget__payment-pill .tbi-widget__visual {
	width: 20px;
	height: 20px;
}

.tbi-widget__payment-pill--logo-only .tbi-widget__visual {
	width: 42px;
	height: 16px;
}

.tbi-widget__coupon {
	margin-left: auto;
	padding: 4px 8px;
	color: var(--tbi-accent-color);
	background: rgba(255, 255, 255, 0.8);
	border-radius: 4px;
	font-weight: 700;
}

.tbi-widget__button {
	margin-left: auto;
	padding: 8px 12px;
	color: #fff;
	background: var(--tbi-accent-color);
	border-radius: calc(var(--tbi-radius) * 0.7);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.tbi-widget__single {
	justify-content: var(--tbi-item-justify);
}

.tbi-widget--single-icon-banner:has(.tbi-widget__single--image-only),
.tbi-widget--single-image-banner:has(.tbi-widget__single--image-only) {
	padding: 0;
	overflow: hidden;
}

.tbi-widget--single-icon-banner .tbi-widget__single--image-only,
.tbi-widget--single-image-banner .tbi-widget__single--image-only {
	display: block;
	width: 100%;
}

.tbi-widget--single-icon-banner .tbi-widget__single--image-only .tbi-widget__single-visual,
.tbi-widget--single-image-banner .tbi-widget__single--image-only .tbi-widget__single-visual {
	display: block;
	width: 100%;
	height: auto;
}

.tbi-widget--single-icon-banner .tbi-widget__single--image-only .tbi-widget__single-visual img,
.tbi-widget--single-image-banner .tbi-widget__single--image-only .tbi-widget__single-visual img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	border-radius: 0;
	object-fit: cover;
}

.tbi-widget--single-image-banner .tbi-widget__single--image-with-copy {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.tbi-widget--single-image-banner .tbi-widget__single--image-with-copy .tbi-widget__single-visual {
	display: block;
	width: 100%;
	height: auto;
}

.tbi-widget--single-image-banner .tbi-widget__single--image-with-copy .tbi-widget__single-visual img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	border-radius: 0;
	object-fit: cover;
}

.tbi-widget--single-image-banner .tbi-widget__single--image-with-copy .tbi-widget__single-copy {
	padding: var(--tbi-padding-y) var(--tbi-padding-x);
	text-align: var(--tbi-alignment);
}

.tbi-widget__cover-link {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

@media (min-width: 641px) {
	.tbi-widget {
		--tbi-bg: var(--tbi-tablet-bg, var(--tbi-mobile-bg, #fff));
		--tbi-title-color: var(--tbi-tablet-title-color, var(--tbi-mobile-title-color, #111827));
		--tbi-text-color: var(--tbi-tablet-text-color, var(--tbi-mobile-text-color, #4b5563));
		--tbi-icon-color: var(--tbi-tablet-icon-color, var(--tbi-mobile-icon-color, #111827));
		--tbi-accent-color: var(--tbi-tablet-accent-color, var(--tbi-mobile-accent-color, #84cc16));
		--tbi-border-color: var(--tbi-tablet-border-color, var(--tbi-mobile-border-color, #e5e7eb));
		--tbi-border-width: var(--tbi-tablet-border-width, var(--tbi-mobile-border-width, 1px));
		--tbi-radius: var(--tbi-tablet-radius, var(--tbi-mobile-radius, 8px));
		--tbi-padding-y: var(--tbi-tablet-padding-y, var(--tbi-mobile-padding-y, 16px));
		--tbi-padding-x: var(--tbi-tablet-padding-x, var(--tbi-mobile-padding-x, 16px));
		--tbi-margin-y: var(--tbi-tablet-margin-y, var(--tbi-mobile-margin-y, 16px));
		--tbi-gap: var(--tbi-tablet-gap, var(--tbi-mobile-gap, 16px));
		--tbi-max-width: var(--tbi-tablet-max-width, var(--tbi-mobile-max-width, 0px));
		--tbi-alignment: var(--tbi-tablet-alignment, var(--tbi-mobile-alignment, center));
		--tbi-item-justify: var(--tbi-tablet-item-justify, var(--tbi-mobile-item-justify, center));
		--tbi-item-direction: var(--tbi-tablet-item-direction, var(--tbi-mobile-item-direction, column));
		--tbi-item-copy-align: var(--tbi-tablet-item-copy-align, var(--tbi-mobile-item-copy-align, var(--tbi-alignment)));
		--tbi-widget-margin-left: var(--tbi-tablet-margin-left, var(--tbi-mobile-margin-left, auto));
		--tbi-widget-margin-right: var(--tbi-tablet-margin-right, var(--tbi-mobile-margin-right, auto));
		--tbi-columns: var(--tbi-tablet-columns, var(--tbi-mobile-columns, 1));
		--tbi-font-family: var(--tbi-tablet-font-family, var(--tbi-mobile-font-family, inherit));
		--tbi-title-size: var(--tbi-tablet-title-size, var(--tbi-mobile-title-size, 16px));
		--tbi-text-size: var(--tbi-tablet-text-size, var(--tbi-mobile-text-size, 13px));
		--tbi-shadow: var(--tbi-tablet-shadow, var(--tbi-mobile-shadow, none));
	}

	.tbi-widget[style*="--tbi-tablet-max-width:0px"] {
		max-width: none;
	}
}

@media (min-width: 1024px) {
	.tbi-widget {
		--tbi-bg: var(--tbi-desktop-bg, var(--tbi-tablet-bg, #fff));
		--tbi-title-color: var(--tbi-desktop-title-color, var(--tbi-tablet-title-color, #111827));
		--tbi-text-color: var(--tbi-desktop-text-color, var(--tbi-tablet-text-color, #4b5563));
		--tbi-icon-color: var(--tbi-desktop-icon-color, var(--tbi-tablet-icon-color, #111827));
		--tbi-accent-color: var(--tbi-desktop-accent-color, var(--tbi-tablet-accent-color, #84cc16));
		--tbi-border-color: var(--tbi-desktop-border-color, var(--tbi-tablet-border-color, #e5e7eb));
		--tbi-border-width: var(--tbi-desktop-border-width, var(--tbi-tablet-border-width, 1px));
		--tbi-radius: var(--tbi-desktop-radius, var(--tbi-tablet-radius, 8px));
		--tbi-padding-y: var(--tbi-desktop-padding-y, var(--tbi-tablet-padding-y, 16px));
		--tbi-padding-x: var(--tbi-desktop-padding-x, var(--tbi-tablet-padding-x, 16px));
		--tbi-margin-y: var(--tbi-desktop-margin-y, var(--tbi-tablet-margin-y, 16px));
		--tbi-gap: var(--tbi-desktop-gap, var(--tbi-tablet-gap, 16px));
		--tbi-max-width: var(--tbi-desktop-max-width, var(--tbi-tablet-max-width, 0px));
		--tbi-alignment: var(--tbi-desktop-alignment, var(--tbi-tablet-alignment, center));
		--tbi-item-justify: var(--tbi-desktop-item-justify, var(--tbi-tablet-item-justify, center));
		--tbi-item-direction: var(--tbi-desktop-item-direction, var(--tbi-tablet-item-direction, column));
		--tbi-item-copy-align: var(--tbi-desktop-item-copy-align, var(--tbi-tablet-item-copy-align, var(--tbi-alignment)));
		--tbi-widget-margin-left: var(--tbi-desktop-margin-left, var(--tbi-tablet-margin-left, auto));
		--tbi-widget-margin-right: var(--tbi-desktop-margin-right, var(--tbi-tablet-margin-right, auto));
		--tbi-columns: var(--tbi-desktop-columns, var(--tbi-tablet-columns, 3));
		--tbi-font-family: var(--tbi-desktop-font-family, var(--tbi-tablet-font-family, inherit));
		--tbi-title-size: var(--tbi-desktop-title-size, var(--tbi-tablet-title-size, 16px));
		--tbi-text-size: var(--tbi-desktop-text-size, var(--tbi-tablet-text-size, 13px));
		--tbi-shadow: var(--tbi-desktop-shadow, var(--tbi-tablet-shadow, none));
	}

	.tbi-widget[style*="--tbi-desktop-max-width:0px"] {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.tbi-widget__upsell,
	.tbi-widget__message {
		align-items: flex-start;
	}

	.tbi-widget__button,
	.tbi-widget__coupon {
		margin-left: 0;
	}
}