/* ==========================================================================
   ST Dollar Shop - Bundles & Lookbooks Ultra-Premium UI Stylesheet
   Version 2.0.0 - Modular Distributed Standalone Showcase & Theming
   ========================================================================== */

:root {
	--stdollar-bundle-primary: #0f172a;
	--stdollar-bundle-accent: #2563eb;
	--stdollar-bundle-success: #16a34a;
	--stdollar-bundle-bg: #f8fafc;
	--stdollar-bundle-card-bg: #ffffff;
	--stdollar-bundle-border: #e2e8f0;
	--stdollar-bundle-radius: 22px;
	--stdollar-bundle-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
	--stdollar-bundle-shadow-hover: 0 20px 40px -10px rgba(15, 23, 42, 0.14);
}

/* ==========================================================================
   1. STANDALONE SINGLE BUNDLE SECTION (Distributed Homepage Showcase)
   ========================================================================== */
.stdollar-single-bundle-section {
	padding: 24px 0;
	margin: 18px 0;
	direction: rtl;
	text-align: right;
	font-family: inherit;
	box-sizing: border-box;
	position: relative;
}

.stdollar-single-bundle-section *, 
.stdollar-single-bundle-section *::before, 
.stdollar-single-bundle-section *::after {
	box-sizing: border-box;
}

.stdollar-single-bundle-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 16px;
}

.stdollar-bundle-showcase-card {
	background: #ffffff;
	border: 1px solid var(--stdollar-bundle-border);
	border-radius: var(--stdollar-bundle-radius);
	box-shadow: var(--stdollar-bundle-shadow);
	padding: 24px 28px;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.stdollar-bundle-showcase-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--stdollar-bundle-shadow-hover);
}

/* ==========================================================================
   2. THEMED BACKGROUNDS (Custom Palette for Each Bundle Type)
   ========================================================================== */

/* Theme: Travel & Elegance (Warm Sand & Amber) */
.stdollar-theme-travel .stdollar-bundle-showcase-card {
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 45%, #fff7ed 100%) !important;
	border-color: rgba(245, 158, 11, 0.3) !important;
	box-shadow: 0 10px 30px -5px rgba(217, 119, 6, 0.12) !important;
}
.stdollar-theme-travel .stdollar-bundle-badge-pill {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
	box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
}
.stdollar-theme-travel .stdollar-bundle-savings-pill {
	background: #fef3c7 !important;
	color: #92400e !important;
	border-color: #fde68a !important;
}
.stdollar-theme-travel .stdollar-bundle-visual-showcase {
	background: rgba(255, 255, 255, 0.82) !important;
	border-color: rgba(253, 230, 138, 0.7) !important;
	backdrop-filter: blur(8px);
}
.stdollar-theme-travel .stdollar-add-bundle-btn {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
	box-shadow: 0 6px 18px rgba(217, 119, 6, 0.3) !important;
}

/* Theme: Luxury & Royal Fragrances (Royal Purple & Indigo) */
.stdollar-theme-luxury .stdollar-bundle-showcase-card {
	background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 45%, #faf5ff 100%) !important;
	border-color: rgba(139, 92, 246, 0.3) !important;
	box-shadow: 0 10px 30px -5px rgba(109, 40, 217, 0.12) !important;
}
.stdollar-theme-luxury .stdollar-bundle-badge-pill {
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}
.stdollar-theme-luxury .stdollar-bundle-savings-pill {
	background: #ede9fe !important;
	color: #5b21b6 !important;
	border-color: #ddd6fe !important;
}
.stdollar-theme-luxury .stdollar-bundle-visual-showcase {
	background: rgba(255, 255, 255, 0.82) !important;
	border-color: rgba(221, 214, 254, 0.7) !important;
	backdrop-filter: blur(8px);
}
.stdollar-theme-luxury .stdollar-add-bundle-btn {
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
	box-shadow: 0 6px 18px rgba(124, 58, 237, 0.3) !important;
}

/* Theme: Tech & Smart Gadgets (Icy Tech Blue & Cyan) */
.stdollar-theme-tech .stdollar-bundle-showcase-card {
	background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 45%, #f8fafc 100%) !important;
	border-color: rgba(14, 165, 233, 0.3) !important;
	box-shadow: 0 10px 30px -5px rgba(3, 105, 161, 0.12) !important;
}
.stdollar-theme-tech .stdollar-bundle-badge-pill {
	background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
	box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}
.stdollar-theme-tech .stdollar-bundle-savings-pill {
	background: #e0f2fe !important;
	color: #075985 !important;
	border-color: #bae6fd !important;
}
.stdollar-theme-tech .stdollar-bundle-visual-showcase {
	background: rgba(255, 255, 255, 0.82) !important;
	border-color: rgba(186, 230, 253, 0.7) !important;
	backdrop-filter: blur(8px);
}
.stdollar-theme-tech .stdollar-add-bundle-btn {
	background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
	box-shadow: 0 6px 18px rgba(2, 132, 199, 0.3) !important;
}

/* Theme: Home & Kitchen Living (Fresh Mint Sage) */
.stdollar-theme-home .stdollar-bundle-showcase-card {
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 45%, #f8fafc 100%) !important;
	border-color: rgba(34, 197, 94, 0.3) !important;
	box-shadow: 0 10px 30px -5px rgba(21, 128, 61, 0.12) !important;
}
.stdollar-theme-home .stdollar-bundle-badge-pill {
	background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
	box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
}
.stdollar-theme-home .stdollar-bundle-savings-pill {
	background: #dcfce7 !important;
	color: #166534 !important;
	border-color: #bbf7d0 !important;
}
.stdollar-theme-home .stdollar-bundle-visual-showcase {
	background: rgba(255, 255, 255, 0.82) !important;
	border-color: rgba(187, 247, 208, 0.7) !important;
	backdrop-filter: blur(8px);
}
.stdollar-theme-home .stdollar-add-bundle-btn {
	background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
	box-shadow: 0 6px 18px rgba(22, 163, 74, 0.3) !important;
}


/* ==========================================================================
   3. BUNDLE TOP HEADER (Title & Description in TOP Position)
   ========================================================================== */
.stdollar-bundle-top-header {
	margin-bottom: 20px;
	position: relative;
}

.stdollar-bundle-badges-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.stdollar-bundle-badge-pill {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	color: #ffffff;
	font-size: 12.5px;
	font-weight: 800;
	padding: 5px 14px;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.stdollar-bundle-savings-pill {
	background: #dcfce7;
	color: #15803d;
	font-weight: 900;
	font-size: 13px;
	padding: 5px 14px;
	border-radius: 20px;
	border: 1px solid #bbf7d0;
	display: inline-flex;
	align-items: center;
}

.stdollar-bundle-name {
	font-size: 21px !important;
	font-weight: 900 !important;
	color: #0f172a !important;
	margin: 0 0 6px 0 !important;
	line-height: 1.35 !important;
}

.stdollar-bundle-summary {
	font-size: 13.5px !important;
	color: #475569 !important;
	margin: 0 !important;
	line-height: 1.55 !important;
	font-weight: 500 !important;
}


/* ==========================================================================
   4. VISUAL BUNDLED ITEMS SHOWCASE (Horizontal with + connectors)
   ========================================================================== */
.stdollar-bundle-visual-showcase {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 18px;
	margin-bottom: 20px;
}

.stdollar-bundle-items-flex {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.stdollar-bundle-product-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 140px;
	flex: 1 1 0;
	min-width: 85px;
}

.product-node-img-wrap {
	width: 80px;
	height: 80px;
	border-radius: 16px;
	background: #ffffff;
	border: 2px solid #e2e8f0;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	text-decoration: none;
}

.product-node-img-wrap:hover {
	border-color: #2563eb;
	transform: scale(1.06);
	box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
}

.product-node-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-node-name {
	font-size: 11.5px;
	font-weight: 800;
	color: #1e293b;
	margin-top: 8px;
	line-height: 1.25;
	height: 28px;
	overflow: hidden;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.product-node-name:hover {
	color: #2563eb;
}

.product-node-price {
	font-size: 12px;
	font-weight: 900;
	color: #64748b;
	margin-top: 3px;
}

.stdollar-bundle-plus-connector {
	font-size: 22px;
	font-weight: 900;
	color: #94a3b8;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}


/* ==========================================================================
   5. PRICING & ACTION BUTTON
   ========================================================================== */
.stdollar-bundle-pricing-matrix {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(226, 232, 240, 0.8);
	border-radius: 14px;
	padding: 12px 18px;
	margin-bottom: 16px;
}

.pricing-matrix-col {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pricing-matrix-col.align-left {
	text-align: left;
	align-items: flex-end;
}

.pricing-label {
	font-size: 11.5px;
	font-weight: 700;
	color: #64748b;
}

.pricing-original {
	font-size: 14px;
	color: #94a3b8;
	text-decoration: line-through;
	font-weight: 700;
}

.pricing-deal {
	font-size: 19px;
	font-weight: 900;
	color: #dc2626;
	line-height: 1.1;
}

.pricing-deal .woocommerce-Price-amount {
	color: inherit;
}

.stdollar-bundle-action-wrap {
	width: 100%;
}

.stdollar-add-bundle-btn {
	width: 100%;
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	color: #ffffff;
	border: none;
	border-radius: 12px;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 900;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.stdollar-add-bundle-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
	filter: brightness(1.05);
}

.stdollar-add-bundle-btn:active {
	transform: translateY(0);
}

.stdollar-add-bundle-btn.loading {
	pointer-events: none;
	opacity: 0.85;
}

.stdollar-add-bundle-btn.added {
	background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
	box-shadow: 0 4px 15px rgba(22, 163, 74, 0.35) !important;
}


/* ==========================================================================
   6. RESPONSIVE OPTIMIZATIONS (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 768px) {
	.stdollar-single-bundle-section {
		padding: 16px 0;
		margin: 14px 0;
	}

	.stdollar-bundle-showcase-card {
		padding: 16px 14px;
		border-radius: 18px;
	}

	.stdollar-bundle-name {
		font-size: 17px !important;
	}

	.stdollar-bundle-summary {
		font-size: 12px !important;
		line-height: 1.45 !important;
	}

	.stdollar-bundle-visual-showcase {
		padding: 12px 10px;
		border-radius: 14px;
	}

	.stdollar-bundle-items-flex {
		gap: 8px;
	}

	.product-node-img-wrap {
		width: 64px;
		height: 64px;
		border-radius: 12px;
	}

	.stdollar-bundle-product-node {
		max-width: 80px;
		min-width: 65px;
	}

	.product-node-name {
		font-size: 10.5px;
		height: 24px;
		margin-top: 4px;
	}

	.product-node-price {
		font-size: 10.5px;
	}

	.stdollar-bundle-plus-connector {
		font-size: 16px;
		width: 24px;
		height: 24px;
	}

	.stdollar-bundle-pricing-matrix {
		padding: 10px 12px;
	}

	.pricing-label {
		font-size: 10.5px;
	}

	.pricing-original {
		font-size: 12px;
	}

	.pricing-deal {
		font-size: 16px;
	}

	.stdollar-add-bundle-btn {
		height: 44px;
		font-size: 13.5px;
		padding: 10px 14px;
	}
}