/**
 * VibeShift Boost
 *
 * Frontend Base Styles
 *
 * File:
 * assets/css/frontend.css
 *
 * Responsibility:
 * - Shared frontend/storefront styling.
 * - VibeShift Boost frontend containers.
 * - Shared frontend badges.
 * - Shared frontend notices.
 * - Frontend product information areas.
 * - Frontend utility states.
 * - Responsive storefront behavior.
 *
 * Feature-specific styling belongs in:
 * - countdown.css
 * - visitors.css
 * - analytics.css
 * - ai.css
 *
 * This file contains PRESENTATION ONLY.
 */


/* ==========================================================================
   FRONTEND ROOT
   ========================================================================== */

.vibeshiftboost-frontend {

	--vibeshiftboost-frontend-primary: #2563eb;
	--vibeshiftboost-frontend-primary-hover: #1d4ed8;

	--vibeshiftboost-frontend-success: #16a34a;
	--vibeshiftboost-frontend-warning: #d97706;
	--vibeshiftboost-frontend-danger: #dc2626;
	--vibeshiftboost-frontend-info: #0891b2;

	--vibeshiftboost-frontend-text: #1e293b;
	--vibeshiftboost-frontend-muted: #64748b;
	--vibeshiftboost-frontend-light-text: #94a3b8;

	--vibeshiftboost-frontend-border: #e2e8f0;
	--vibeshiftboost-frontend-border-light: #f1f5f9;

	--vibeshiftboost-frontend-background: #f8fafc;
	--vibeshiftboost-frontend-card: #ffffff;

	--vibeshiftboost-frontend-radius: 16px;
	--vibeshiftboost-frontend-radius-small: 10px;
	--vibeshiftboost-frontend-radius-large: 22px;

	--vibeshiftboost-frontend-shadow:
		0 4px 16px rgba(15, 23, 42, 0.06);

	--vibeshiftboost-frontend-shadow-hover:
		0 10px 28px rgba(15, 23, 42, 0.11);

	--vibeshiftboost-frontend-transition:
		all 0.2s ease;

	position: relative;

	width: 100%;

	min-width: 0;

	color: var(--vibeshiftboost-frontend-text);

	font-size: 14px;

	line-height: 1.6;

	box-sizing: border-box;
}


/* ==========================================================================
   BOX SIZING
   ========================================================================== */

.vibeshiftboost-frontend *,
.vibeshiftboost-frontend *::before,
.vibeshiftboost-frontend *::after {

	box-sizing: border-box;
}


/* ==========================================================================
   GENERIC CONTAINER
   ========================================================================== */

.vibeshiftboost-frontend-container {

	width: 100%;

	max-width: 100%;

	margin: 0 auto;

	padding: 0;
}


/* ==========================================================================
   FRONTEND SECTION
   ========================================================================== */

.vibeshiftboost-frontend-section {

	position: relative;

	width: 100%;

	margin: 0 0 20px;
}

.vibeshiftboost-frontend-section:last-child {

	margin-bottom: 0;
}


/* ==========================================================================
   FRONTEND CARD
   ========================================================================== */

.vibeshiftboost-frontend-card {

	position: relative;

	width: 100%;

	min-width: 0;

	padding: 18px;

	border:
		1px solid
		var(--vibeshiftboost-frontend-border);

	border-radius:
		var(--vibeshiftboost-frontend-radius);

	background:
		var(--vibeshiftboost-frontend-card);

	box-shadow:
		var(--vibeshiftboost-frontend-shadow);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.vibeshiftboost-frontend-card:hover {

	box-shadow:
		var(--vibeshiftboost-frontend-shadow-hover);
}

.vibeshiftboost-frontend-card-header {

	display: flex;

	align-items: flex-start;

	justify-content: space-between;

	gap: 14px;

	margin-bottom: 14px;
}

.vibeshiftboost-frontend-card-title {

	margin: 0;

	color:
		var(--vibeshiftboost-frontend-text);

	font-size: 16px;

	font-weight: 700;

	line-height: 1.4;
}

.vibeshiftboost-frontend-card-description {

	margin: 4px 0 0;

	color:
		var(--vibeshiftboost-frontend-muted);

	font-size: 12px;

	line-height: 1.5;
}

.vibeshiftboost-frontend-card-body {

	position: relative;

	min-width: 0;
}

.vibeshiftboost-frontend-card-footer {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 10px;

	margin-top: 15px;

	padding-top: 13px;

	border-top:
		1px solid
		var(--vibeshiftboost-frontend-border-light);
}


/* ==========================================================================
   FRONTEND GRID
   ========================================================================== */

.vibeshiftboost-frontend-grid {

	display: grid;

	width: 100%;

	gap: 16px;
}

.vibeshiftboost-frontend-grid-2 {

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);
}

.vibeshiftboost-frontend-grid-3 {

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);
}

.vibeshiftboost-frontend-grid-4 {

	grid-template-columns:
		repeat(
			4,
			minmax(0, 1fr)
		);
}


/* ==========================================================================
   FRONTEND FLEX
   ========================================================================== */

.vibeshiftboost-frontend-flex {

	display: flex;
}

.vibeshiftboost-frontend-flex-center {

	display: flex;

	align-items: center;

	justify-content: center;
}

.vibeshiftboost-frontend-flex-between {

	display: flex;

	align-items: center;

	justify-content: space-between;
}

.vibeshiftboost-frontend-flex-wrap {

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 8px;
}


/* ==========================================================================
   FRONTEND BADGES
   ========================================================================== */

.vibeshiftboost-frontend-badge {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 5px;

	min-height: 24px;

	padding: 4px 9px;

	border:
		1px solid transparent;

	border-radius: 999px;

	font-size: 10px;

	font-weight: 700;

	line-height: 1.2;

	white-space: nowrap;
}

.vibeshiftboost-frontend-badge-primary {

	background:
		#eff6ff;

	border-color:
		#dbeafe;

	color:
		#1d4ed8;
}

.vibeshiftboost-frontend-badge-success {

	background:
		#f0fdf4;

	border-color:
		#dcfce7;

	color:
		#15803d;
}

.vibeshiftboost-frontend-badge-warning {

	background:
		#fffbeb;

	border-color:
		#fef3c7;

	color:
		#b45309;
}

.vibeshiftboost-frontend-badge-danger {

	background:
		#fef2f2;

	border-color:
		#fee2e2;

	color:
		#b91c1c;
}

.vibeshiftboost-frontend-badge-info {

	background:
		#ecfeff;

	border-color:
		#cffafe;

	color:
		#0e7490;
}

.vibeshiftboost-frontend-badge-muted {

	background:
		#f8fafc;

	border-color:
		#e2e8f0;

	color:
		#64748b;
}


/* ==========================================================================
   STATUS
   ========================================================================== */

.vibeshiftboost-frontend-status {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	font-size: 11px;

	font-weight: 600;
}

.vibeshiftboost-frontend-status-dot {

	width: 7px;

	height: 7px;

	flex: 0 0 7px;

	border-radius: 50%;

	background:
		#94a3b8;
}

.vibeshiftboost-frontend-status-active
.vibeshiftboost-frontend-status-dot {

	background:
		var(--vibeshiftboost-frontend-success);
}

.vibeshiftboost-frontend-status-warning
.vibeshiftboost-frontend-status-dot {

	background:
		var(--vibeshiftboost-frontend-warning);
}

.vibeshiftboost-frontend-status-danger
.vibeshiftboost-frontend-status-dot {

	background:
		var(--vibeshiftboost-frontend-danger);
}


/* ==========================================================================
   PRODUCT INFORMATION
   ========================================================================== */

.vibeshiftboost-frontend-product {

	position: relative;

	width: 100%;

	min-width: 0;
}

.vibeshiftboost-frontend-product-info {

	display: flex;

	flex-direction: column;

	gap: 10px;

	width: 100%;
}

.vibeshiftboost-frontend-product-title {

	margin: 0;

	color:
		var(--vibeshiftboost-frontend-text);

	font-size: 17px;

	font-weight: 700;

	line-height: 1.35;
}

.vibeshiftboost-frontend-product-subtitle {

	margin: 0;

	color:
		var(--vibeshiftboost-frontend-muted);

	font-size: 12px;

	line-height: 1.5;
}

.vibeshiftboost-frontend-product-price {

	color:
		var(--vibeshiftboost-frontend-text);

	font-size: 18px;

	font-weight: 750;

	line-height: 1.25;
}

.vibeshiftboost-frontend-product-price-old {

	margin-right: 6px;

	color:
		var(--vibeshiftboost-frontend-light-text);

	font-size: 13px;

	font-weight: 500;

	text-decoration: line-through;
}

.vibeshiftboost-frontend-product-price-sale {

	color:
		var(--vibeshiftboost-frontend-danger);

	font-weight: 750;
}


/* ==========================================================================
   PRODUCT META
   ========================================================================== */

.vibeshiftboost-frontend-product-meta {

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 8px 14px;

	color:
		var(--vibeshiftboost-frontend-muted);

	font-size: 11px;
}

.vibeshiftboost-frontend-product-meta-item {

	display: inline-flex;

	align-items: center;

	gap: 5px;

	min-width: 0;
}


/* ==========================================================================
   FRONTEND STATS
   ========================================================================== */

.vibeshiftboost-frontend-stats {

	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	gap: 8px;

	width: 100%;
}

.vibeshiftboost-frontend-stat {

	min-width: 0;

	padding: 10px;

	border:
		1px solid
		var(--vibeshiftboost-frontend-border-light);

	border-radius:
		var(--vibeshiftboost-frontend-radius-small);

	background:
		#f8fafc;

	text-align: center;
}

.vibeshiftboost-frontend-stat-value {

	display: block;

	color:
		var(--vibeshiftboost-frontend-text);

	font-size: 15px;

	font-weight: 750;

	line-height: 1.25;
}

.vibeshiftboost-frontend-stat-label {

	display: block;

	margin-top: 3px;

	overflow: hidden;

	color:
		var(--vibeshiftboost-frontend-muted);

	font-size: 9px;

	font-weight: 700;

	line-height: 1.2;

	text-overflow: ellipsis;

	text-transform: uppercase;

	white-space: nowrap;
}


/* ==========================================================================
   FRONTEND ACTIONS
   ========================================================================== */

.vibeshiftboost-frontend-actions {

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 8px;

	margin-top: 14px;
}

.vibeshiftboost-frontend-actions a,
.vibeshiftboost-frontend-actions button {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 6px;

	min-height: 36px;

	padding: 7px 13px;

	border:
		1px solid
		var(--vibeshiftboost-frontend-border);

	border-radius:
		var(--vibeshiftboost-frontend-radius-small);

	background:
		#fff;

	color:
		var(--vibeshiftboost-frontend-text);

	font-size: 12px;

	font-weight: 600;

	line-height: 1.3;

	text-decoration: none;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.vibeshiftboost-frontend-actions a:hover,
.vibeshiftboost-frontend-actions button:hover {

	border-color:
		#cbd5e1;

	background:
		#f8fafc;

	color:
		var(--vibeshiftboost-frontend-text);

	transform:
		translateY(-1px);
}

.vibeshiftboost-frontend-action-primary {

	border-color:
		var(--vibeshiftboost-frontend-primary) !important;

	background:
		var(--vibeshiftboost-frontend-primary) !important;

	color:
		#fff !important;
}

.vibeshiftboost-frontend-action-primary:hover {

	border-color:
		var(--vibeshiftboost-frontend-primary-hover) !important;

	background:
		var(--vibeshiftboost-frontend-primary-hover) !important;

	color:
		#fff !important;
}

.vibeshiftboost-frontend-action-danger {

	border-color:
		var(--vibeshiftboost-frontend-danger) !important;

	background:
		var(--vibeshiftboost-frontend-danger) !important;

	color:
		#fff !important;
}


/* ==========================================================================
   FRONTEND NOTICE
   ========================================================================== */

.vibeshiftboost-frontend-notice {

	display: flex;

	align-items: flex-start;

	gap: 10px;

	width: 100%;

	margin: 0 0 14px;

	padding: 11px 13px;

	border:
		1px solid
		var(--vibeshiftboost-frontend-border);

	border-radius:
		var(--vibeshiftboost-frontend-radius-small);

	background:
		#fff;

	color:
		var(--vibeshiftboost-frontend-text);

	font-size: 12px;

	line-height: 1.5;
}

.vibeshiftboost-frontend-notice:last-child {

	margin-bottom: 0;
}

.vibeshiftboost-frontend-notice-success {

	border-color:
		#bbf7d0;

	background:
		#f0fdf4;

	color:
		#166534;
}

.vibeshiftboost-frontend-notice-warning {

	border-color:
		#fde68a;

	background:
		#fffbeb;

	color:
		#92400e;
}

.vibeshiftboost-frontend-notice-danger {

	border-color:
		#fecaca;

	background:
		#fef2f2;

	color:
		#991b1b;
}

.vibeshiftboost-frontend-notice-info {

	border-color:
		#bfdbfe;

	background:
		#eff6ff;

	color:
		#1e40af;
}


/* ==========================================================================
   FRONTEND HIGHLIGHT
   ========================================================================== */

.vibeshiftboost-frontend-highlight {

	position: relative;

	padding: 13px 15px;

	border:
		1px solid
		#dbeafe;

	border-radius:
		var(--vibeshiftboost-frontend-radius-small);

	background:
		#eff6ff;

	color:
		#1e40af;

	font-size: 12px;

	line-height: 1.5;
}

.vibeshiftboost-frontend-highlight-title {

	display: block;

	margin-bottom: 3px;

	font-weight: 750;
}


/* ==========================================================================
   FRONTEND PROGRESS
   ========================================================================== */

.vibeshiftboost-frontend-progress {

	width: 100%;

	height: 7px;

	overflow: hidden;

	border-radius: 999px;

	background:
		#e2e8f0;
}

.vibeshiftboost-frontend-progress-bar {

	display: block;

	width: 0;

	height: 100%;

	border-radius: inherit;

	background:
		var(--vibeshiftboost-frontend-primary);

	transition:
		width 0.35s ease;
}

.vibeshiftboost-frontend-progress-success {

	background:
		var(--vibeshiftboost-frontend-success);
}

.vibeshiftboost-frontend-progress-warning {

	background:
		var(--vibeshiftboost-frontend-warning);
}

.vibeshiftboost-frontend-progress-danger {

	background:
		var(--vibeshiftboost-frontend-danger);
}


/* ==========================================================================
   FRONTEND LOADING
   ========================================================================== */

.vibeshiftboost-frontend-loading {

	position: relative;

	pointer-events: none;
}

.vibeshiftboost-frontend-loading::after {

	content: "";

	position: absolute;

	inset: 0;

	z-index: 20;

	border-radius:
		inherit;

	background:
		rgba(
			255,
			255,
			255,
			0.72
		);
}

.vibeshiftboost-frontend-spinner {

	display: inline-block;

	width: 18px;

	height: 18px;

	border:
		2px solid
		#cbd5e1;

	border-top-color:
		var(--vibeshiftboost-frontend-primary);

	border-radius: 50%;

	animation:
		vibeshiftboost-frontend-spin
		0.75s linear infinite;
}

@keyframes vibeshiftboost-frontend-spin {

	to {

		transform:
			rotate(360deg);
	}
}


/* ==========================================================================
   FRONTEND SKELETON
   ========================================================================== */

.vibeshiftboost-frontend-skeleton {

	position: relative;

	overflow: hidden;

	background:
		#e2e8f0;

	border-radius:
		6px;

	color: transparent !important;

	user-select: none;
}

.vibeshiftboost-frontend-skeleton::after {

	content: "";

	position: absolute;

	inset: 0;

	transform:
		translateX(-100%);

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(
				255,
				255,
				255,
				0.65
			),
			transparent
		);

	animation:
		vibeshiftboost-frontend-skeleton
		1.4s infinite;
}

@keyframes vibeshiftboost-frontend-skeleton {

	100% {

		transform:
			translateX(100%);
	}
}


/* ==========================================================================
   FRONTEND EMPTY STATE
   ========================================================================== */

.vibeshiftboost-frontend-empty {

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	width: 100%;

	min-height: 150px;

	padding: 24px;

	border:
		1px dashed
		var(--vibeshiftboost-frontend-border);

	border-radius:
		var(--vibeshiftboost-frontend-radius);

	background:
		#fff;

	text-align: center;
}

.vibeshiftboost-frontend-empty-icon {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 44px;

	height: 44px;

	margin-bottom: 10px;

	border-radius: 50%;

	background:
		#f1f5f9;

	color:
		var(--vibeshiftboost-frontend-muted);
}

.vibeshiftboost-frontend-empty-title {

	margin: 0;

	color:
		var(--vibeshiftboost-frontend-text);

	font-size: 14px;

	font-weight: 700;
}

.vibeshiftboost-frontend-empty-description {

	max-width: 480px;

	margin: 5px 0 0;

	color:
		var(--vibeshiftboost-frontend-muted);

	font-size: 11px;

	line-height: 1.5;
}


/* ==========================================================================
   FRONTEND TOOLBAR
   ========================================================================== */

.vibeshiftboost-frontend-toolbar {

	display: flex;

	align-items: center;

	justify-content: space-between;

	flex-wrap: wrap;

	gap: 10px;

	width: 100%;

	margin-bottom: 14px;
}

.vibeshiftboost-frontend-toolbar-left,
.vibeshiftboost-frontend-toolbar-right {

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 7px;
}


/* ==========================================================================
   FRONTEND DIVIDER
   ========================================================================== */

.vibeshiftboost-frontend-divider {

	width: 100%;

	height: 1px;

	margin: 16px 0;

	border: 0;

	background:
		var(--vibeshiftboost-frontend-border-light);
}


/* ==========================================================================
   TEXT UTILITIES
   ========================================================================== */

.vibeshiftboost-frontend-text-muted {

	color:
		var(--vibeshiftboost-frontend-muted) !important;
}

.vibeshiftboost-frontend-text-primary {

	color:
		var(--vibeshiftboost-frontend-primary) !important;
}

.vibeshiftboost-frontend-text-success {

	color:
		var(--vibeshiftboost-frontend-success) !important;
}

.vibeshiftboost-frontend-text-warning {

	color:
		var(--vibeshiftboost-frontend-warning) !important;
}

.vibeshiftboost-frontend-text-danger {

	color:
		var(--vibeshiftboost-frontend-danger) !important;
}

.vibeshiftboost-frontend-text-small {

	font-size: 11px !important;
}

.vibeshiftboost-frontend-text-center {

	text-align: center !important;
}


/* ==========================================================================
   VISIBILITY
   ========================================================================== */

.vibeshiftboost-frontend-hidden {

	display: none !important;
}

.vibeshiftboost-frontend-visible {

	display: block !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 900px) {

	.vibeshiftboost-frontend-grid-4 {

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}

	.vibeshiftboost-frontend-grid-3 {

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}
}


@media screen and (max-width: 650px) {

	.vibeshiftboost-frontend-grid-2,
	.vibeshiftboost-frontend-grid-3,
	.vibeshiftboost-frontend-grid-4 {

		grid-template-columns:
			1fr;
	}

	.vibeshiftboost-frontend-card {

		padding: 15px;

		border-radius:
			var(--vibeshiftboost-frontend-radius-small);
	}

	.vibeshiftboost-frontend-card-header {

		align-items: flex-start;

		flex-direction: column;
	}

	.vibeshiftboost-frontend-card-footer {

		align-items: flex-start;

		flex-direction: column;
	}

	.vibeshiftboost-frontend-toolbar {

		align-items: flex-start;

		flex-direction: column;
	}

	.vibeshiftboost-frontend-toolbar-left,
	.vibeshiftboost-frontend-toolbar-right {

		width: 100%;
	}

	.vibeshiftboost-frontend-actions {

		flex-direction: column;

		align-items: stretch;
	}

	.vibeshiftboost-frontend-actions a,
	.vibeshiftboost-frontend-actions button {

		width: 100%;
	}

	.vibeshiftboost-frontend-stats {

		grid-template-columns:
			repeat(
				3,
				minmax(0, 1fr)
			);
	}
}


@media screen and (max-width: 420px) {

	.vibeshiftboost-frontend {

		font-size: 13px;
	}

	.vibeshiftboost-frontend-product-title {

		font-size: 15px;
	}

	.vibeshiftboost-frontend-product-price {

		font-size: 16px;
	}

	.vibeshiftboost-frontend-stats {

		gap: 5px;
	}

	.vibeshiftboost-frontend-stat {

		padding: 8px 5px;
	}

	.vibeshiftboost-frontend-stat-value {

		font-size: 13px;
	}

	.vibeshiftboost-frontend-stat-label {

		font-size: 8px;
	}
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.vibeshiftboost-frontend a:focus-visible,
.vibeshiftboost-frontend button:focus-visible,
.vibeshiftboost-frontend input:focus-visible,
.vibeshiftboost-frontend select:focus-visible,
.vibeshiftboost-frontend textarea:focus-visible {

	outline:
		2px solid
		var(--vibeshiftboost-frontend-primary);

	outline-offset: 2px;
}


@media (prefers-reduced-motion: reduce) {

	.vibeshiftboost-frontend *,
	.vibeshiftboost-frontend *::before,
	.vibeshiftboost-frontend *::after {

		animation-duration:
			0.01ms !important;

		animation-iteration-count:
			1 !important;

		scroll-behavior:
			auto !important;

		transition-duration:
			0.01ms !important;
	}
}


/* ==========================================================================
   WORDPRESS / WOOCOMMERCE COMPATIBILITY
   ========================================================================== */

.vibeshiftboost-frontend img {

	max-width: 100%;

	height: auto;
}

.vibeshiftboost-frontend button {

	font-family: inherit;
}

.vibeshiftboost-frontend input,
.vibeshiftboost-frontend select,
.vibeshiftboost-frontend textarea {

	font-family: inherit;
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {

	.vibeshiftboost-frontend-actions,
	.vibeshiftboost-frontend-toolbar {

		display: none !important;
	}

	.vibeshiftboost-frontend-card {

		box-shadow: none;

		break-inside: avoid;
	}
}

/* VibeShift Boost frontend conversion bar */
.vibeshiftboost-frontend-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px;padding:12px 16px;border:1px solid rgba(37,99,235,.18);border-radius:12px;background:#f8fbff;font-size:14px;line-height:1.4}
.vibeshiftboost-frontend-bar span{display:inline-flex;align-items:center;gap:5px}
.vibeshiftboost-frontend-timer strong{font-variant-numeric:tabular-nums}

/* VibeShift Boost appearance settings are scoped to the plugin bar. */
.vibeshiftboost-frontend-bar{background:var(--vibeshiftboost-visitor-bg,#2563eb);color:var(--vibeshiftboost-visitor-text,#fff);border-color:color-mix(in srgb,var(--vibeshiftboost-visitor-bg,#2563eb) 75%,#000 25%)}
.vibeshiftboost-frontend-bar span{color:var(--vibeshiftboost-visitor-text,#fff)}
.vibeshiftboost-frontend-bar strong{color:var(--vibeshiftboost-visitor-text,#fff)}

/* Configurable visitor/warning presentation */
.vibeshiftboost-frontend-bar .vibeshiftboost-bar-warning{background:var(--vibeshiftboost-warning-bg,#fff7ed);color:var(--vibeshiftboost-warning-text,#9a3412);padding:7px 11px;border-radius:8px}
.vibeshiftboost-frontend-bar .vibeshiftboost-bar-countdown{background:var(--vibeshiftboost-countdown-bg,#0f172a);color:var(--vibeshiftboost-countdown-text,#fff);padding:7px 11px;border-radius:8px}
.vibeshiftboost-frontend-bar .vibeshiftboost-bar-countdown strong,.vibeshiftboost-frontend-bar .vibeshiftboost-bar-countdown b{color:var(--vibeshiftboost-countdown-text,#fff)}
.vibeshiftboost-frontend-bar .vibeshiftboost-bar-warning strong,.vibeshiftboost-frontend-bar .vibeshiftboost-bar-warning b{color:var(--vibeshiftboost-warning-text,#9a3412)}
.vibeshiftboost-frontend-bar .vibeshiftboost-bar-visitors{background:var(--vibeshiftboost-visitor-bg,#2563eb);color:var(--vibeshiftboost-visitor-text,#fff);padding:7px 11px;border-radius:8px}
.vibeshiftboost-frontend-bar .vibeshiftboost-bar-visitors{color:var(--vibeshiftboost-visitor-text,#fff)}


/* ==========================================================================
   SHOP / PRODUCT LOOP OFFER + VISITOR STRIP
   ========================================================================== */

.vibeshiftboost-shop-loop-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 10px;
    width: 100%;
    margin: 10px 0 4px;
    padding: 8px 10px;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 9px;
    background: #f8fbff;
    font-size: 12px;
    line-height: 1.35;
}

.vibeshiftboost-shop-loop-countdown,
.vibeshiftboost-shop-loop-visitors {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.vibeshiftboost-shop-loop-countdown {
    font-weight: 700;
    color: var(--vibeshiftboost-loop-countdown-text, #ffffff);
    background: var(--vibeshiftboost-loop-countdown-bg, #0f172a);
    padding: 5px 8px;
    border-radius: 7px;
}

.vibeshiftboost-shop-loop-countdown strong {
    color: var(--vibeshiftboost-loop-countdown-text, #ffffff);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vibeshiftboost-shop-loop-icon {
    flex: 0 0 auto;
}

.vibeshiftboost-shop-loop-label {
    font-weight: 800;
    white-space: nowrap;
}

.vibeshiftboost-shop-loop-final {
    padding: 5px 7px;
    border-radius: 7px;
    background: var(--vibeshiftboost-loop-warning-bg, #fff7ed);
    color: var(--vibeshiftboost-loop-warning-text, #9a3412);
}

.vibeshiftboost-shop-loop-final strong {
    color: var(--vibeshiftboost-loop-warning-text, #9a3412);
}

.vibeshiftboost-shop-loop-visitors {
    color: var(--vibeshiftboost-loop-visitor-text, #fff);
    background: var(--vibeshiftboost-loop-visitor-bg, #2563eb);
    padding: 5px 8px;
    border-radius: 7px;
    font-weight: 700;
}

@media (max-width: 480px) {
    .vibeshiftboost-shop-loop-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* VibeShift Boost 3.0.27 — configurable storefront loop colors. */
.vibeshiftboost-shop-loop-bar{background:transparent;border-color:color-mix(in srgb,var(--vibeshiftboost-loop-visitor-bg,#2563eb) 20%,#fff 80%)}
.vibeshiftboost-shop-loop-visitors{background:var(--vibeshiftboost-loop-visitor-bg,#2563eb)!important;color:var(--vibeshiftboost-loop-visitor-text,#fff)!important}
.vibeshiftboost-shop-loop-visitors *{color:inherit!important}
.vibeshiftboost-shop-loop-countdown{background:var(--vibeshiftboost-loop-countdown-bg,#0f172a)!important;color:var(--vibeshiftboost-loop-countdown-text,#fff)!important}
.vibeshiftboost-shop-loop-countdown *{color:inherit!important}
.vibeshiftboost-shop-loop-final{background:var(--vibeshiftboost-loop-warning-bg,#fff7ed)!important;color:var(--vibeshiftboost-loop-warning-text,#9a3412)!important}
.vibeshiftboost-shop-loop-final *{color:inherit!important}
.vibeshiftboost-shop-loop-bar strong{font-variant-numeric:tabular-nums}