/* ==================================================
   DDALSHOP CUSTOM QUICK VIEW v1.5
   Fokus revisi:
   1. Tombol X dipindahkan ke dalam modal.
   2. Panah kiri/kanan bulat sempurna dan lebih kecil.
   3. Thumbnail kiri lebih besar, rapat, dan padat.
   4. Stok duplikat dan trust section tetap disembunyikan.
================================================== */

.mfp-bg {
	background: rgba(18, 24, 34, 0.72) !important;
	opacity: 1 !important;
}

.mfp-content .product-lightbox,
.product-lightbox {
	position: relative !important;
	width: 1140px !important;
	max-width: 94vw !important;
	padding: 0 !important;
	overflow: hidden !important;
	border-radius: 18px !important;
	background: #ffffff !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24) !important;
}

/* Tombol X final v1.5
   mix-blend-mode bawaan Flatsome dinetralkan agar lingkaran tidak berubah hitam */
html body .mfp-wrap .mfp-content .product-lightbox > button.mfp-close,
html body .mfp-wrap .mfp-content .product-lightbox > .mfp-close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	left: auto !important;
	z-index: 1000 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	margin: 0 !important;
	padding: 0 0 2px !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	color: #4b5563 !important;
	font-size: 30px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	opacity: 1 !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
	text-shadow: none !important;
	transform: none !important;
	filter: none !important;
	mix-blend-mode: normal !important;
	isolation: isolate !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

html body .mfp-wrap .mfp-content .product-lightbox > button.mfp-close:hover,
html body .mfp-wrap .mfp-content .product-lightbox > .mfp-close:hover {
	background: #f8fafc !important;
	background-color: #f8fafc !important;
	color: #1f2937 !important;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16) !important;
	filter: none !important;
	mix-blend-mode: normal !important;
}

/* Cegah style tombol close lama di luar modal */
html body .mfp-wrap > .mfp-close,
html body .mfp-container > .mfp-close,
html body .mfp-content > .mfp-close:not(.product-lightbox > .mfp-close) {
	display: none !important;
}

.ddal-qv__layout {
	display: grid !important;
	grid-template-columns: minmax(0, 1.62fr) minmax(360px, 1fr) !important;
	margin: 0 !important;
}

.ddal-qv__gallery {
	position: relative !important;
	display: grid !important;
	grid-template-columns: 104px minmax(0, 1fr) !important;
	gap: 9px !important;
	min-width: 0 !important;
	padding: 18px 18px 20px !important;
	background: #ffffff !important;
}

.ddal-qv__sale-badge {
	position: absolute !important;
	top: 14px !important;
	left: 18px !important;
	z-index: 4 !important;
	display: inline-flex !important;
	align-items: center !important;
	min-height: 34px !important;
	padding: 0 14px !important;
	border-radius: 999px !important;
	background: #1f5fe0 !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(31, 95, 224, 0.2) !important;
}

/* Thumbnail kiri: lebih besar, lebih rapat, dan padat */
.ddal-qv .ddal-qv__thumbs {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	width: 104px !important;
	max-height: 552px !important;
	margin: 0 !important;
	padding: 40px 0 0 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	scrollbar-width: none !important;
}

.ddal-qv .ddal-qv__thumbs::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.ddal-qv .ddal-qv__thumb {
	display: block !important;
	flex: 0 0 82px !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 104px !important;
	height: 82px !important;
	min-height: 82px !important;
	max-height: 82px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 1px solid #e1e6ed !important;
	border-radius: 9px !important;
	background: #f7f8fa !important;
	line-height: 0 !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.ddal-qv .ddal-qv__thumb:hover {
	transform: translateY(-1px) !important;
	border-color: #8ab0ff !important;
}

.ddal-qv .ddal-qv__thumb.is-active {
	border: 2px solid #1f5fe0 !important;
	box-shadow: 0 0 0 2px rgba(31, 95, 224, 0.12) !important;
}

.ddal-qv .ddal-qv__thumb img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.ddal-qv__stage {
	position: relative !important;
	min-width: 0 !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	border-radius: 15px !important;
	background: #f5f6f8 !important;
}

.ddal-qv__main-image {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: opacity 0.18s ease !important;
}

.ddal-qv__main-image.is-changing {
	opacity: 0.45 !important;
}

/* Panah final: putih, bulat, soft, dan sedikit masuk ke dalam gambar */
.ddal-qv .ddal-qv__nav {
	position: absolute !important;
	top: 50% !important;
	z-index: 5 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 46px !important;
	min-width: 46px !important;
	max-width: 46px !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.98) !important;
	color: #6b7280 !important;
	font-size: 30px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
	transform: translateY(-50%) !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.ddal-qv .ddal-qv__nav:hover {
	background: #ffffff !important;
	color: #374151 !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
}

.ddal-qv .ddal-qv__nav span {
	display: block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 0 2px !important;
	font-size: 30px !important;
	line-height: 1 !important;
	transform: none !important;
}

.ddal-qv .ddal-qv__nav--prev {
	left: 16px !important;
	right: auto !important;
}

.ddal-qv .ddal-qv__nav--next {
	right: 16px !important;
	left: auto !important;
}

.ddal-qv__zoom-btn {
	position: absolute !important;
	left: 16px !important;
	bottom: 16px !important;
	z-index: 3 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	min-height: 38px !important;
	padding: 0 13px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.96) !important;
	color: #343b46 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1) !important;
	cursor: pointer !important;
}

.ddal-qv__zoom-btn svg {
	width: 18px !important;
	height: 18px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
}

.ddal-qv__summary {
	min-width: 0 !important;
	border-left: 1px solid #e9edf2 !important;
	background: #ffffff !important;
}

.ddal-qv__summary-inner {
	display: flex !important;
	flex-direction: column !important;
	min-height: 100% !important;
	padding: 38px 34px 28px !important;
}

.ddal-qv__title-link {
	color: inherit !important;
	text-decoration: none !important;
}

.ddal-qv__title-link .product-title {
	margin: 0 46px 14px 0 !important;
	color: #252c35 !important;
	font-size: 27px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.ddal-qv__divider {
	width: 38px !important;
	height: 3px !important;
	margin-bottom: 18px !important;
	background: #dfe3e8 !important;
}

.ddal-qv__price .price {
	display: flex !important;
	align-items: baseline !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 0 0 8px !important;
	line-height: 1.2 !important;
}

.ddal-qv__price .price del {
	color: #8d939c !important;
	font-size: 19px !important;
	opacity: 1 !important;
}

.ddal-qv__price .price ins,
.ddal-qv__price .price > .amount,
.ddal-qv__price .price ins .amount {
	color: #1f5fe0 !important;
	font-size: 29px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.ddal-qv__stock {
	margin-bottom: 18px !important;
}

.ddal-qv__stock .stock {
	margin: 0 !important;
	color: #31984a !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.ddal-qv__stock .stock::before {
	content: "✓" !important;
	display: inline-block !important;
	margin-right: 5px !important;
}

/* Sembunyikan stok duplikat dari form keranjang */
.ddal-qv__cart p.stock,
.ddal-qv__cart .stock {
	display: none !important;
}

.ddal-qv__cart {
	padding-top: 18px !important;
	border-top: 1px solid #e9edf2 !important;
}

.ddal-qv__cart form.cart {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 0 14px !important;
	flex-wrap: wrap !important;
}

.ddal-qv__cart .quantity {
	margin: 0 !important;
}

.ddal-qv__cart .quantity .minus,
.ddal-qv__cart .quantity .plus,
.ddal-qv__cart .quantity input.qty {
	height: 48px !important;
	min-height: 48px !important;
	border-color: #d8dde5 !important;
	background: #ffffff !important;
}

.ddal-qv__cart .quantity input.qty {
	width: 46px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

.ddal-qv__cart .single_add_to_cart_button {
	flex: 1 1 190px !important;
	height: 48px !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #1f5fe0 !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}

.ddal-qv__cart .single_add_to_cart_button:hover {
	background: #184fbd !important;
}

.ddal-qv__detail-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	min-height: 48px !important;
	margin-bottom: 0 !important;
	border: 2px solid #1f5fe0 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	color: #1f5fe0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.ddal-qv__detail-btn:hover {
	background: #f4f8ff !important;
	color: #184fbd !important;
}

/* Sembunyikan 3 logo dan teks bagian bawah */
.ddal-qv__trust {
	display: none !important;
}

/* Zoom overlay */
.ddal-qv-zoom-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	display: grid !important;
	place-items: center !important;
	padding: 28px !important;
	background: rgba(10, 14, 22, 0.92) !important;
}

.ddal-qv-zoom-overlay img {
	display: block !important;
	max-width: min(92vw, 1400px) !important;
	max-height: 90vh !important;
	object-fit: contain !important;
	border-radius: 12px !important;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4) !important;
}

.ddal-qv-zoom-close {
	position: fixed !important;
	top: 22px !important;
	right: 22px !important;
	display: grid !important;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: #202733 !important;
	font-size: 28px !important;
	cursor: pointer !important;
}

/* Tablet dan mobile */
@media screen and (max-width: 849px) {
	.mfp-content .product-lightbox,
	.product-lightbox {
		width: 96vw !important;
		max-height: 92vh !important;
		overflow-y: auto !important;
		border-radius: 14px !important;
	}

	.ddal-qv__layout {
		display: block !important;
	}

	.ddal-qv__gallery {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		padding: 14px !important;
	}

	.ddal-qv .ddal-qv__thumbs {
		order: 2 !important;
		flex-direction: row !important;
		gap: 7px !important;
		width: 100% !important;
		max-height: none !important;
		padding: 0 0 2px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
	}

	.ddal-qv .ddal-qv__thumb {
		flex: 0 0 78px !important;
		width: 78px !important;
		max-width: 78px !important;
		height: 78px !important;
		min-height: 78px !important;
		max-height: 78px !important;
	}

	.ddal-qv__stage {
		order: 1 !important;
	}

	.ddal-qv__sale-badge {
		top: 24px !important;
		left: 24px !important;
	}

	.ddal-qv__summary {
		border-top: 1px solid #e9edf2 !important;
		border-left: 0 !important;
	}

	.ddal-qv__summary-inner {
		padding: 22px 18px 24px !important;
	}

	.ddal-qv__title-link .product-title {
		margin-right: 36px !important;
		font-size: 22px !important;
	}

	.ddal-qv__price .price del {
		font-size: 16px !important;
	}

	.ddal-qv__price .price ins,
	.ddal-qv__price .price > .amount,
	.ddal-qv__price .price ins .amount {
		font-size: 24px !important;
	}
}

@media screen and (max-width: 549px) {
	html body .mfp-wrap .mfp-content .product-lightbox > button.mfp-close,
	html body .mfp-wrap .mfp-content .product-lightbox > .mfp-close {
		top: 10px !important;
		right: 10px !important;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		font-size: 28px !important;
	}

	.ddal-qv .ddal-qv__nav {
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		font-size: 28px !important;
	}

	.ddal-qv .ddal-qv__nav--prev {
		left: 10px !important;
	}

	.ddal-qv .ddal-qv__nav--next {
		right: 10px !important;
	}

.ddal-qv__zoom-btn {
		left: 10px !important;
		bottom: 10px !important;
	}

	.ddal-qv__cart form.cart {
		align-items: stretch !important;
	}

	.ddal-qv__cart .single_add_to_cart_button {
		flex-basis: 100% !important;
	}
}