/**
 * VIP Sales Pop Frontend Styles (Extended version)
 */

/* Main Popup Container */
.vsp-popup-container {
	position: fixed;
	z-index: 999999;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 380px;
	max-width: calc(100% - 32px);
	background: var(--vsp-bg, #ffffff);
	color: var(--vsp-text, #1e293b);
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
	opacity: 0;
	pointer-events: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	border: 1px solid rgba(226, 232, 240, 0.8);
}

/* Glassmorphism backing blur style */
.vsp-popup-container.vsp-glass {
	background: rgba(255, 255, 255, 0.75) !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
	border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Dark mode compatibility adaptation for Glassmorphism */
@media (prefers-color-scheme: dark) {
	.vsp-popup-container.vsp-glass {
		background: rgba(15, 23, 42, 0.8) !important;
		border-color: rgba(255, 255, 255, 0.1) !important;
	}
}

/* Active Show State */
.vsp-popup-container.vsp-show {
	opacity: 1;
	transform: translate3d(0, 0, 0) !important;
	pointer-events: auto;
}

/* --- Positioning Styles & Slide-in Animation Offsets --- */

/* Corner Positions */
.vsp-popup-container.vsp-bottom-left {
	bottom: 24px;
	left: 24px;
	transform: translate3d(-50px, 0, 0);
}

.vsp-popup-container.vsp-bottom-right {
	bottom: 24px;
	right: 24px;
	transform: translate3d(50px, 0, 0);
}

.vsp-popup-container.vsp-top-left {
	top: 24px;
	left: 24px;
	transform: translate3d(-50px, 0, 0);
}

.vsp-popup-container.vsp-top-right {
	top: 24px;
	right: 24px;
	transform: translate3d(50px, 0, 0);
}

/* Center Positions */
.vsp-popup-container.vsp-bottom-center {
	bottom: 24px;
	left: 50%;
	transform: translate3d(-50%, 50px, 0);
}
.vsp-popup-container.vsp-bottom-center.vsp-show {
	transform: translate3d(-50%, 0, 0) !important;
}

.vsp-popup-container.vsp-top-center {
	top: 24px;
	left: 50%;
	transform: translate3d(-50%, -50px, 0);
}
.vsp-popup-container.vsp-top-center.vsp-show {
	transform: translate3d(-50%, 0, 0) !important;
}

/* Full Width positions (Banner Bar style) */
.vsp-popup-container.vsp-full-width-top {
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	border-radius: 0;
	border-left: none;
	border-right: none;
	border-top: none;
	transform: translate3d(0, -100%, 0);
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.vsp-popup-container.vsp-full-width-bottom {
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	border-radius: 0;
	border-left: none;
	border-right: none;
	border-bottom: none;
	transform: translate3d(0, 100%, 0);
	box-shadow: 0 -4px 15px rgba(0,0,0,0.05);
}

/* Layout Elements - Default styling (Classic) */
.vsp-image-column {
	flex-shrink: 0;
	margin-right: 14px;
	display: flex;
	align-items: center;
}

.vsp-product-image {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	object-fit: cover;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.05);
	background: #f1f5f9;
	transition: all 0.3s ease;
}

.vsp-content-column {
	flex-grow: 1;
	padding-right: 16px;
	min-width: 0;
}

/* Typography styles */
.vsp-title-row {
	font-size: 13px;
	line-height: 1.4;
	margin-bottom: 2px;
	color: #64748b;
}

.vsp-buyer-name {
	font-weight: 700;
	color: var(--vsp-text, #1e293b);
}

.vsp-action-text {
	color: #64748b;
	margin-left: 3px;
	opacity: 0.85;
}

.vsp-product-link {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--vsp-link, #2563eb);
	text-decoration: none;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity 0.15s ease;
}

.vsp-product-link:hover {
	opacity: 0.85;
	text-decoration: underline;
}

/* Meta Bottom Row */
.vsp-meta-row {
	display: flex;
	align-items: center;
	font-size: 11px;
	color: #94a3b8;
	gap: 8px;
}

.vsp-verified-badge {
	display: inline-flex;
	align-items: center;
	color: var(--vsp-accent, #16a34a);
	font-weight: 600;
	gap: 3px;
}

.vsp-verified-icon {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex-shrink: 0;
}

/* Close button */
.vsp-close-btn {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #94a3b8;
	transition: color 0.15s ease, background 0.15s ease;
	border-radius: 50%;
	background: transparent;
	border: none;
	padding: 0;
}

.vsp-close-btn:hover {
	color: #475569;
	background: rgba(0, 0, 0, 0.05);
}

.vsp-close-btn svg {
	width: 10px;
	height: 10px;
	fill: currentColor;
}

/* ==========================================
   POPUP DESIGN FORMAT TEMPLATES (LAYOUTS)
   ========================================== */

/* 1. Classic Layout (Default styling is classic, no changes needed) */

/* 2. Compact Sleek Layout */
.vsp-popup-container.vsp-layout-compact {
	padding: 10px 14px;
	border-radius: 10px;
	width: 350px;
}
.vsp-popup-container.vsp-layout-compact .vsp-product-image {
	width: 46px;
	height: 46px;
	border-radius: 6px;
}
.vsp-popup-container.vsp-layout-compact .vsp-product-link {
	font-size: 12px;
	margin-bottom: 2px;
}
.vsp-popup-container.vsp-layout-compact .vsp-title-row {
	font-size: 11px;
}
.vsp-popup-container.vsp-layout-compact .vsp-close-btn {
	top: 6px;
	right: 8px;
}

/* 3. Vertical Card Layout (Top Image) */
.vsp-popup-container.vsp-layout-vertical {
	flex-direction: column;
	width: 290px;
	padding: 0 0 16px 0 !important;
	overflow: hidden;
	text-align: center;
}
.vsp-popup-container.vsp-layout-vertical .vsp-image-column {
	margin-right: 0;
	width: 100%;
}
.vsp-popup-container.vsp-layout-vertical .vsp-product-image {
	width: 100%;
	height: 160px;
	border-radius: 16px 16px 0 0;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.vsp-popup-container.vsp-layout-vertical .vsp-content-column {
	padding: 14px 16px 0 16px;
	width: 100%;
	box-sizing: border-box;
}
.vsp-popup-container.vsp-layout-vertical .vsp-meta-row {
	justify-content: center;
}
.vsp-popup-container.vsp-layout-vertical .vsp-close-btn {
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.05);
	top: 10px;
	right: 10px;
	color: #475569;
}
.vsp-popup-container.vsp-layout-vertical.vsp-theme-minimal-dark .vsp-close-btn {
	background: rgba(15, 23, 42, 0.9);
	color: #cbd5e1;
	border-color: rgba(255,255,255,0.1);
}

/* 4. Minimal Layout (Text Only) */
.vsp-popup-container.vsp-layout-text-only {
	padding: 16px 24px;
	text-align: center;
	justify-content: center;
}
.vsp-popup-container.vsp-layout-text-only .vsp-image-column {
	display: none;
}
.vsp-popup-container.vsp-layout-text-only .vsp-content-column {
	padding-right: 0;
}
.vsp-popup-container.vsp-layout-text-only .vsp-meta-row {
	justify-content: center;
}

/* 5. Split Box Layout (Split half-half) */
.vsp-popup-container.vsp-layout-split {
	padding: 0 !important;
	overflow: hidden;
	height: 90px;
}
.vsp-popup-container.vsp-layout-split .vsp-image-column {
	margin-right: 0;
	height: 100%;
	width: 90px;
}
.vsp-popup-container.vsp-layout-split .vsp-product-image {
	width: 100%;
	height: 100%;
	border-radius: 0;
	border: none;
}
.vsp-popup-container.vsp-layout-split .vsp-content-column {
	padding: 12px 16px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	border-left: 1px solid rgba(0,0,0,0.06);
}
.vsp-popup-container.vsp-layout-split.vsp-theme-minimal-dark .vsp-content-column {
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================
   THEMES SELECTORS & PRESET GLOW STYLING
   ========================================== */

/* 1. Minimalist Light (Default) */
.vsp-theme-minimal-light {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
	border: 1px solid #e2e8f0;
}

/* 2. Minimalist Dark */
.vsp-theme-minimal-dark {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	border: 1px solid #334155;
}
.vsp-theme-minimal-dark .vsp-action-text {
	color: #94a3b8;
}

/* 3. Glassmorphism Frost */
.vsp-theme-glass-frost {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.45);
}

/* 4. Glassmorphism Obsidian */
.vsp-theme-glass-obsidian {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 5. Luxury Emerald & Gold */
.vsp-theme-luxury-emerald {
	border: 1.5px solid #d97706;
	box-shadow: 0 8px 25px rgba(2, 44, 34, 0.2), inset 0 0 10px rgba(217, 119, 6, 0.1);
}
.vsp-theme-luxury-emerald .vsp-action-text {
	color: #a7f3d0;
}

/* 6. Royal Velvet Blue */
.vsp-theme-royal-blue {
	border: 1px solid #2563eb;
	box-shadow: 0 8px 25px rgba(30, 58, 138, 0.2);
}
.vsp-theme-royal-blue .vsp-action-text {
	color: #93c5fd;
}

/* 7. Rose Gold Elegance */
.vsp-theme-rose-gold {
	border: 1px solid #fbcfe8;
	box-shadow: 0 8px 25px rgba(219, 39, 119, 0.05);
}
.vsp-theme-rose-gold .vsp-action-text {
	color: #f472b6;
}

/* 8. Forest Sage Green */
.vsp-theme-sage-green {
	border: 1px solid #bbf7d0;
	box-shadow: 0 8px 25px rgba(20, 83, 45, 0.04);
}
.vsp-theme-sage-green .vsp-action-text {
	color: #166534;
}

/* 9. Sunset Orange Glow */
.vsp-theme-sunset-orange {
	border: 1px solid #fed7aa;
	box-shadow: 0 8px 25px rgba(234, 88, 12, 0.05);
}
.vsp-theme-sunset-orange .vsp-action-text {
	color: #ea580c;
}

/* 10. Retro Terminal */
.vsp-theme-retro-terminal {
	border: 1px solid #22c55e;
	box-shadow: 0 0 12px rgba(34, 197, 94, 0.25), inset 0 0 4px rgba(34, 197, 94, 0.1);
	font-family: Consolas, Monaco, "Courier New", monospace !important;
}
.vsp-theme-retro-terminal .vsp-action-text {
	color: #22c55e;
	opacity: 0.7;
}
.vsp-theme-retro-terminal .vsp-verified-icon {
	fill: #22c55e;
}
.vsp-theme-retro-terminal .vsp-close-btn {
	color: #22c55e;
}
.vsp-theme-retro-terminal .vsp-product-image {
	border-color: #22c55e;
	border-radius: 4px;
}

/* 11. Cyberpunk Glow */
.vsp-theme-cyberpunk {
	border: 2px solid #ec4899;
	box-shadow: 0 0 15px rgba(236, 72, 153, 0.25), 0 0 5px rgba(6, 182, 212, 0.15);
	font-family: Consolas, Monaco, monospace;
}
.vsp-theme-cyberpunk .vsp-action-text {
	color: #64748b;
}
.vsp-theme-cyberpunk .vsp-close-btn {
	color: #ec4899;
}
.vsp-theme-cyberpunk .vsp-product-image {
	border: 1.5px solid #06b6d4;
}

/* 12. Midnight Purple */
.vsp-theme-midnight-purple {
	border: 1px solid #4338ca;
	box-shadow: 0 8px 25px rgba(129, 140, 248, 0.15);
}
.vsp-theme-midnight-purple .vsp-action-text {
	color: #c7d2fe;
}

/* 13. Warm Vanilla Coffee */
.vsp-theme-warm-vanilla {
	border: 1px solid #e6dfd5;
	box-shadow: 0 6px 20px rgba(74, 55, 40, 0.04);
}
.vsp-theme-warm-vanilla .vsp-action-text {
	color: #8c7866;
}

/* 14. Sweet Peach */
.vsp-theme-sweet-peach {
	border: 1px solid #ffedd5;
	box-shadow: 0 6px 20px rgba(249, 115, 22, 0.04);
}
.vsp-theme-sweet-peach .vsp-action-text {
	color: #ea580c;
}

/* 15. Cyber Gothic */
.vsp-theme-cyber-gothic {
	border: 1.5px solid #dc2626;
	box-shadow: 0 0 12px rgba(220, 38, 38, 0.25);
}
.vsp-theme-cyber-gothic .vsp-action-text {
	color: #a1a1aa;
}
.vsp-theme-cyber-gothic .vsp-product-image {
	border-color: #dc2626;
}

/* 16. Autumn Woods */
.vsp-theme-autumn-woods {
	border: 1px solid #e7d8c9;
	box-shadow: 0 6px 20px rgba(92, 61, 46, 0.04);
}
.vsp-theme-autumn-woods .vsp-action-text {
	color: #a18276;
}

/* 17. Classic WooCommerce */
.vsp-theme-classic-wc {
	border: 1px solid #7f54b3;
	box-shadow: 0 8px 25px rgba(127, 84, 179, 0.15);
}
.vsp-theme-classic-wc .vsp-action-text {
	color: #e8d8fc;
}

/* 18. Clean Corporate */
.vsp-theme-clean-corp {
	border: 1px solid #dbeafe;
	box-shadow: 0 8px 25px rgba(29, 78, 216, 0.05);
}

/* 19. Cherry Blossom */
.vsp-theme-cherry-blossom {
	border: 1px solid #ffe4e6;
	box-shadow: 0 6px 20px rgba(244, 63, 94, 0.03);
}
.vsp-theme-cherry-blossom .vsp-action-text {
	color: #a27c7c;
}

/* 20. Minty Fresh */
.vsp-theme-minty-fresh {
	border: 1px solid #ccfbf1;
	box-shadow: 0 6px 20px rgba(13, 148, 136, 0.03);
}
.vsp-theme-minty-fresh .vsp-action-text {
	color: #0d9488;
}

/* Responsive Scaling for Mobile Screens */
@media (max-width: 480px) {
	.vsp-popup-container {
		width: calc(100% - 24px) !important;
		max-width: 400px;
		margin: 0 auto;
	}
	
	/* Reset coordinates for screen bottom-anchoring on mobile */
	.vsp-popup-container.vsp-bottom-left,
	.vsp-popup-container.vsp-bottom-right,
	.vsp-popup-container.vsp-bottom-center,
	.vsp-popup-container.vsp-full-width-bottom {
		bottom: 16px !important;
		left: 12px !important;
		right: 12px !important;
		top: auto !important;
		transform: translate3d(0, 30px, 0) !important;
	}
	
	/* Reset coordinates for screen top-anchoring on mobile */
	.vsp-popup-container.vsp-top-left,
	.vsp-popup-container.vsp-top-right,
	.vsp-popup-container.vsp-top-center,
	.vsp-popup-container.vsp-full-width-top {
		top: 16px !important;
		left: 12px !important;
		right: 12px !important;
		bottom: auto !important;
		transform: translate3d(0, -30px, 0) !important;
	}

	.vsp-popup-container.vsp-show {
		transform: translate3d(0, 0, 0) !important;
	}
}