/**
 * JT Why Shop With Us widget styles.
 *
 * Ported verbatim from the original "trust badges grid" markup, scoped by
 * the widget's stable wrapper class (.jt-wsu-wrap). Colors/sizes are
 * Elementor-control-driven custom properties (--jt-wsu-*).
 *
 * Defaults are never declared directly on .jt-wsu-wrap itself - only as the
 * var(--x, fallback) argument at each usage site. A custom property
 * declared directly on an element always wins over one inherited from an
 * ancestor (regardless of source order), which would otherwise silently
 * cancel every Elementor color/size control.
 */

.jt-wsu-wrap { max-width: 1300px; margin: 0 auto; padding: 0 20px; font-family: 'Poppins', sans-serif; }

.jt-wsu-bar { position: relative; padding: 10px 0; }

.jt-wsu-header { text-align: center; margin-bottom: 36px; position: relative; z-index: 1; }

.jt-wsu-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var( --jt-wsu-accent, #FD317E );
	margin-bottom: 11px;
}
.jt-wsu-eyebrow::before, .jt-wsu-eyebrow::after {
	content: "";
	width: 24px;
	height: 1.5px;
	background: linear-gradient( 90deg, transparent, var( --jt-wsu-accent, #FD317E ) );
}
.jt-wsu-eyebrow::after { background: linear-gradient( 90deg, var( --jt-wsu-accent, #FD317E ), transparent ); }

.jt-wsu-title { font-size: 28px; font-weight: 700; color: var( --jt-wsu-title-color, #1a1a1a ); margin: 0; letter-spacing: -0.4px; }
.jt-wsu-subtitle { font-size: 13.5px; color: var( --jt-wsu-subtitle-color, #9a9aa5 ); margin: 10px 0 0; font-weight: 400; }

.jt-wsu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var( --jt-wsu-gap, 22px ); position: relative; z-index: 1; }

.jt-wsu-item {
	position: relative;
	background: var( --jt-wsu-item-bg, #ffffff );
	border: 1px solid var( --jt-wsu-item-border, #f0f0f0 );
	border-radius: var( --jt-wsu-item-radius, 20px );
	padding: 28px 22px;
	text-align: center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}
.jt-wsu-item::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient( 90deg, var( --jt-wsu-accent, #FD317E ), var( --jt-wsu-accent-bar-end, #ff7fae ) );
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}
.jt-wsu-item:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(253, 49, 126, 0.16);
	border-color: var( --jt-wsu-item-border-hover, #ffd6e6 );
}
.jt-wsu-item:hover::before { transform: scaleX(1); }

.jt-wsu-icon {
	position: relative;
	width: var( --jt-wsu-icon-size, 60px );
	height: var( --jt-wsu-icon-size, 60px );
	margin: 0 auto 18px;
	background: linear-gradient( 135deg, var( --jt-wsu-accent, #FD317E ), var( --jt-wsu-accent-icon-end, #ff5c96 ) );
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 22px rgba(253, 49, 126, 0.32);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	color: var( --jt-wsu-icon-glyph, #ffffff );
}
.jt-wsu-item:hover .jt-wsu-icon { transform: rotate(-8deg) scale(1.08); }
.jt-wsu-icon::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 20px;
	border: 1.5px dashed rgba(253, 49, 126, 0.3);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.jt-wsu-item:hover .jt-wsu-icon::after { opacity: 1; }
.jt-wsu-icon svg { width: 27px; height: 27px; }
.jt-wsu-icon i { font-size: 27px; line-height: 1; }

.jt-wsu-item-title { font-size: 15.5px; font-weight: 700; color: var( --jt-wsu-item-title-color, #1a1a1a ); margin: 0 0 7px; letter-spacing: -0.1px; }
.jt-wsu-item-text { font-size: 12.5px; color: var( --jt-wsu-item-text-color, #909099 ); margin: 0; line-height: 1.55; }

.jt-wsu-badge-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
	position: relative;
	z-index: 1;
}
.jt-wsu-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var( --jt-wsu-accent, #FD317E ); }
.jt-wsu-badge-text { font-size: 11.5px; color: var( --jt-wsu-badge-text-color, #a86882 ); font-weight: 500; }

/* Tablet */
@media (max-width: 992px) {
	.jt-wsu-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 576px) {
	.jt-wsu-wrap { padding: 0 14px; }
	.jt-wsu-bar { padding: 6px 0; }
	.jt-wsu-header { margin-bottom: 24px; }
	.jt-wsu-eyebrow { font-size: 9px; letter-spacing: 2px; }
	.jt-wsu-eyebrow::before, .jt-wsu-eyebrow::after { width: 14px; }
	.jt-wsu-title { font-size: 19px; }
	.jt-wsu-subtitle { font-size: 11.5px; margin-top: 7px; }
	.jt-wsu-grid { grid-template-columns: repeat(2, 1fr); }
	.jt-wsu-item { padding: 19px 12px; }
	.jt-wsu-item-title { font-size: 12.5px; margin-bottom: 4px; }
	.jt-wsu-item-text { font-size: 10.5px; line-height: 1.45; }
	.jt-wsu-badge-row { margin-top: 20px; }
	.jt-wsu-badge-text { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.jt-wsu-item, .jt-wsu-icon, .jt-wsu-item::before, .jt-wsu-icon::after {
		transition: none !important;
	}
}