/**
 * Mootab Wonder Deals - Digikala Style CSS (v1.3.0)
 * Bulletproof horizontal flex layout & Swiper integration
 */

/* ==========================================
   1. CORE SWIPER ESSENTIAL INLINE STYLES
   ========================================== */
.mootab-wonder-swiper.swiper {
	margin-left: auto !important;
	margin-right: auto !important;
	position: relative !important;
	overflow: hidden !important;
	list-style: none !important;
	padding: 0 !important;
	z-index: 1 !important;
	display: block !important;
	width: 100% !important;
}

.mootab-wonder-swiper .swiper-wrapper {
	position: relative !important;
	width: max-content !important;
	min-width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	box-sizing: border-box !important;
	transition-property: transform !important;
}

.mootab-wonder-swiper .swiper-slide:not(:last-child) {
	margin-left: 4px;
}

.mootab-wonder-swiper .swiper-slide {
	flex-shrink: 0 !important;
	flex: 0 0 var(--wonder-slide-w, 176px) !important;
	width: var(--wonder-slide-w, 176px) !important;
	min-width: var(--wonder-slide-w, 176px) !important;
	max-width: var(--wonder-slide-w, 176px) !important;
	height: auto !important;
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	box-sizing: border-box !important;
	transition-property: transform !important;
}

/* ==========================================
   2. MAIN WONDER CONTAINER
   ========================================== */
.mootab-wonder-wrap {
	width: 100% !important;
	max-width: var(--wonder-wrap-max-w, 100%) !important;
	margin: 15px auto !important;
	box-sizing: border-box !important;
	direction: rtl !important;
	font-family: Shabnam, Vazirmatn, IRANSans, Tahoma, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.mootab-wonder-container {
	background: #ef394e !important;
	border-radius: 16px !important;
	padding: 16px 14px !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 14px !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 4px 22px rgba(239, 57, 78, 0.22) !important;
	box-sizing: border-box !important;
}

/* ==========================================
   3. RIGHT PROMO / BADGE COLUMN
   ========================================== */
.mootab-wonder-badge-col {
	flex: 0 0 165px !important;
	width: 165px !important;
	min-width: 165px !important;
	max-width: 165px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding: 10px 4px !important;
	color: #ffffff !important;
	z-index: 2 !important;
	box-sizing: border-box !important;
}

.mootab-wonder-icon-wrap {
	width: 50px !important;
	height: 50px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.22) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 8px !important;
	backdrop-filter: blur(4px) !important;
}

.mootab-wonder-icon-wrap svg {
	width: 26px !important;
	height: 26px !important;
	fill: #ffffff !important;
}

.mootab-wonder-title {
	font-size: 18px !important;
	font-weight: 900 !important;
	margin: 0 0 10px 0 !important;
	color: #ffffff !important;
	line-height: 1.3 !important;
	letter-spacing: -0.3px !important;
}

/* Countdown Timer */
.mootab-wonder-timer {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	margin-bottom: 12px !important;
	direction: ltr !important;
}

.mootab-timer-days-wrap {
	display: none !important;
}

.mootab-timer-box {
	background: #ffffff !important;
	color: #0c0c0c !important;
	font-weight: 800 !important;
	font-size: 13px !important;
	min-width: 26px !important;
	height: 26px !important;
	border-radius: 6px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 3px !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.mootab-timer-colon {
	color: #ffffff !important;
	font-weight: bold !important;
	font-size: 13px !important;
}

.mootab-timer-days-wrap {
	display: none;
	align-items: center !important;
	gap: 3px !important;
}

.mootab-timer-unit {
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	margin: 0 2px !important;
}

/* ==========================================
   SINGLE PRODUCT PAGE DEAL BANNER (Digikala Style)
   ========================================== */
.mootab-single-deal-banner {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	background: #fff1f2 !important;
	border: 1px solid #ffd1d7 !important;
	border-radius: 10px !important;
	padding: 10px 14px !important;
	margin: 16px 0 !important;
	box-sizing: border-box !important;
	direction: rtl !important;
	font-family: Shabnam, Vazirmatn, IRANSans, Tahoma, -apple-system, sans-serif !important;
}

.mootab-single-deal-right {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.mootab-single-deal-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #ef394e !important;
	color: #ffffff !important;
	padding: 4px 10px !important;
	border-radius: 6px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
}

.mootab-single-deal-pct {
	background: #ef394e !important;
	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	padding: 3px 8px !important;
	border-radius: 12px !important;
}

.mootab-single-deal-timer-wrap {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.mootab-single-deal-timer-wrap .mootab-timer-label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #424750 !important;
}

.mootab-single-deal-timer-wrap .mootab-wonder-timer {
	margin-bottom: 0 !important;
}

.mootab-single-deal-timer-wrap .mootab-timer-box {
	background: #ef394e !important;
	color: #ffffff !important;
	min-width: 24px !important;
	height: 24px !important;
	font-size: 12px !important;
	border-radius: 4px !important;
}

.mootab-single-deal-timer-wrap .mootab-timer-colon {
	color: #ef394e !important;
}

.mootab-single-deal-timer-wrap .mootab-timer-unit {
	color: #ef394e !important;
}

/* ==========================================
   HIDE WOODMART DUPLICATE TIMER ON SINGLE PRODUCT
   ========================================== */
.single-product .wd-product-countdown,
.single-product .woodmart-product-countdown,
.single-product .wd-countdown-timer.wd-product-countdown,
.single-product .wd-timer.wd-style-standard {
	display: none !important;
}

.mootab-wonder-all-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #ffffff !important;
	color: #0c0c0c !important;
	text-decoration: none !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	padding: 6px 14px !important;
	border-radius: 20px !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	white-space: nowrap !important;
}

.mootab-wonder-all-btn:empty {
	display: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	visibility: hidden !important;
}

.mootab-wonder-all-btn:hover {
	background: #f7f7f7 !important;
	transform: translateY(-2px) !important;
	color: #0c0c0c !important;
}

/* ==========================================
   4. SLIDER CAROUSEL AREA
   ========================================== */
.mootab-wonder-slider-col {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	position: relative !important;
	overflow: hidden !important;
}

.mootab-wonder-swiper {
	width: 100% !important;
	padding: 4px 2px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
}

.mootab-wonder-swiper::-webkit-scrollbar {
	display: none !important;
}

/* ==========================================
   5. PRODUCT CARD (WHITE RECTANGLE)
   ========================================== */
.mootab-wonder-card {
	background: #ffffff !important;
	border-radius: 12px !important;
	padding: 12px 10px !important;
	width: 100% !important;
	height: 100% !important;
	min-height: var(--wonder-card-min-h, 250px) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	text-decoration: none !important;
	color: inherit !important;
	box-sizing: border-box !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
	position: relative !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.mootab-wonder-card:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

.mootab-wonder-img-wrap {
	width: 100% !important;
	height: var(--wonder-img-h, auto) !important;
	aspect-ratio: var(--wonder-img-aspect, 1 / 1) !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 8px !important;
}

.mootab-wonder-img-wrap img {
	width: 100% !important;
	height: 100% !important;
	max-height: var(--wonder-img-max-h, 100%) !important;
	object-fit: contain !important;
	display: block !important;
	transition: transform 0.35s ease !important;
}

.mootab-wonder-card:hover .mootab-wonder-img-wrap img {
	transform: scale(1.05) !important;
}

.mootab-wonder-prod-title {
	font-size: 12px !important;
	line-height: 1.6 !important;
	font-weight: 600 !important;
	color: #3f4064 !important;
	margin: 0 0 10px 0 !important;
	height: 38px !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	text-overflow: ellipsis !important;
	text-align: right !important;
}

.mootab-wonder-price-row {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	margin-top: auto !important;
}

.mootab-wonder-top-price {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.mootab-wonder-pct {
	background: #ef394e !important;
	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	padding: 2px 7px !important;
	border-radius: 10px !important;
	line-height: 1.3 !important;
}

.mootab-wonder-regular-price {
	color: #8c8c8c !important;
	font-size: 11px !important;
	text-decoration: line-through !important;
}

.mootab-wonder-sale-price {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 4px !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	color: #0c0c0c !important;
}

.mootab-wonder-currency {
	font-size: 10px !important;
	font-weight: normal !important;
	color: #555555 !important;
}

/* ==========================================
   6. NAVIGATION BUTTONS (ARROWS)
   ========================================== */
.mootab-wonder-nav-btn {
	width: 40px !important;
	height: 40px !important;
	background: #ffffff !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 25 !important;
	cursor: pointer !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
	transition: all 0.2s ease !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	padding: 0 !important;
	outline: none !important;
}

.mootab-wonder-nav-btn:hover {
	transform: translateY(-50%) scale(1.12) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
	background: #ffffff !important;
}

.mootab-wonder-nav-btn svg {
	width: 22px !important;
	height: 22px !important;
	display: block !important;
}

.mootab-wonder-nav-prev {
	right: 6px !important;
}

.mootab-wonder-nav-next {
	left: 6px !important;
}

/* ==========================================
   7. RESPONSIVE MOBILE STYLES
   ========================================== */
@media (max-width: 820px) {
	.mootab-wonder-container {
		flex-direction: column !important;
		padding: 14px 10px !important;
		gap: 10px !important;
		align-items: stretch !important;
	}

	.mootab-wonder-badge-col {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 0 4px 6px 4px !important;
	}

	.mootab-wonder-icon-wrap {
		width: 34px !important;
		height: 34px !important;
		margin-bottom: 0 !important;
	}

	.mootab-wonder-icon-wrap svg {
		width: 20px !important;
		height: 20px !important;
	}

	.mootab-wonder-title {
		font-size: 15px !important;
		margin: 0 !important;
	}

	.mootab-wonder-timer {
		margin-bottom: 0 !important;
	}

	.mootab-wonder-nav-btn {
		display: none !important;
	}

	.mootab-wonder-swiper .swiper-slide {
		flex: 0 0 var(--wonder-slide-w, 145px) !important;
		width: var(--wonder-slide-w, 145px) !important;
		min-width: var(--wonder-slide-w, 145px) !important;
		max-width: var(--wonder-slide-w, 145px) !important;
	}

	.mootab-wonder-card {
		padding: 10px 8px !important;
		min-height: var(--wonder-card-min-h, 220px) !important;
	}
}