/**
 * Top Trust Bar Widget Styles
 *
 * @package CartNexa_Premium_Store_Widgets
 */

.cnxpsw-trust-bar {
	width: 100%;
	background-color: var(--cnxpsw-primary-dark, #0B1F33);
	color: #FFFFFF;
	font-size: 12.5px;
	line-height: 1.2;
	min-height: 34px;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 10;
	box-sizing: border-box;
	overflow: hidden;
	max-width: 100vw;
}

.cnxpsw-trust-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 0 20px;
}

.cnxpsw-trust-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #FFFFFF;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: color 0.2s ease, opacity 0.2s ease;
	white-space: nowrap;
	position: relative;
	border-radius: 4px;
}

.cnxpsw-trust-bar__item a,
a.cnxpsw-trust-bar__item {
	cursor: pointer;
}

.cnxpsw-trust-bar__item:hover {
	color: var(--cnxpsw-primary-blue, #1677D2);
}

.cnxpsw-trust-bar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: #E5E7EB;
	flex-shrink: 0;
}

.cnxpsw-trust-bar__icon svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	display: block;
}

/* Elementor Font Awesome inline SVG icons are solid glyphs: fill them, never stroke them. */
.cnxpsw-trust-bar__icon svg.e-font-icon-svg,
.cnxpsw-trust-bar__icon svg.e-font-icon-svg path {
	fill: currentColor;
	stroke: none;
}

.cnxpsw-trust-bar__icon i {
	font-size: 14px;
}

.cnxpsw-trust-bar__title {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Optional Item Dividers */
.cnxpsw-trust-bar--has-dividers .cnxpsw-trust-bar__item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 14px;
	background-color: rgba(255, 255, 255, 0.15);
}

/* Tablet Breakpoint (768px - 1024px) */
@media (max-width: 1024px) {
	.cnxpsw-trust-bar__inner {
		gap: 16px;
		padding: 0 16px;
	}

	.cnxpsw-trust-bar__item {
		font-size: 11.5px;
		gap: 6px;
	}

	.cnxpsw-trust-bar__icon svg,
	.cnxpsw-trust-bar__icon i {
		width: 13px;
		height: 13px;
		font-size: 13px;
	}
}

/* Mobile Breakpoint (< 768px) */
@media (max-width: 767px) {
	/* 1. Horizontal Scroll mode (clean, swipeable, no visible scrollbars) */
	.cnxpsw-trust-bar-mobile--scroll .cnxpsw-trust-bar__inner {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE/Edge */
		justify-content: flex-start;
		gap: 20px;
		padding: 6px 16px;
		width: 100%;
	}

	.cnxpsw-trust-bar-mobile--scroll .cnxpsw-trust-bar__inner::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Opera */
	}

	.cnxpsw-trust-bar-mobile--scroll .cnxpsw-trust-bar__item {
		flex-shrink: 0;
	}

	/* 2. Compact multi-item mode */
	.cnxpsw-trust-bar-mobile--compact .cnxpsw-trust-bar__inner {
		justify-content: space-around;
		gap: 8px;
		padding: 4px 8px;
	}

	.cnxpsw-trust-bar-mobile--compact .cnxpsw-trust-bar__item {
		font-size: 10px;
		gap: 4px;
	}

	.cnxpsw-trust-bar-mobile--compact .cnxpsw-trust-bar__icon svg,
	.cnxpsw-trust-bar-mobile--compact .cnxpsw-trust-bar__icon i {
		width: 11px;
		height: 11px;
		font-size: 11px;
	}

	/* 3. Hide on mobile */
	.cnxpsw-trust-bar-mobile--hide {
		display: none !important;
	}
}