/* ============================= */
/* QUICK VIEW MODAL – MODERN     */
/* ============================= */
#dr1007ecomquickviewmodal {
	display: none;
	position: fixed;
	inset: 0;
	background: radial-gradient(circle at top, rgba(99, 102, 241, 0.25),
		rgba(0, 0, 0, 0.75));
	backdrop-filter: blur(6px);
	justify-content: center;
	align-items: center;
	z-index: 2000;
}

#dr1007ecomquickviewmodal.show {
	display: flex;
}

/* ============================= */
/* MODAL CARD                    */
/* ============================= */
#dr1007ecomquickviewmodal .content {
	background: linear-gradient(180deg, #ffffff, #f8fafc);
	border-radius: 22px;
	max-width: 420px;
	width: 92%;
	padding: 18px 18px 24px;
	position: relative;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 1px
		rgba(255, 255, 255, 0.6);
	transform: scale(0.9) translateY(20px);
	transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}

#dr1007ecomquickviewmodal.show .content {
	transform: scale(1) translateY(0);
}

/* ============================= */
/* MEDIA WRAPPER (KEY FIX)       */
/* ============================= */
#dr1007quickViewImages {
	position: relative;
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 8px 6px 14px;
	margin-bottom: 10px;
	-webkit-overflow-scrolling: touch;
}

#dr1007quickViewImages::-webkit-scrollbar {
	height: 6px;
}

#dr1007quickViewImages::-webkit-scrollbar-thumb {
	background: linear-gradient(90deg, #22d3ee, #6366f1);
	border-radius: 999px;
}

/* ============================= */
/* CLOSE BADGE (IMAGE + VIDEO)   */
/* ============================= */
#dr1007ecomquickviewmodal .close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: linear-gradient(135deg, #ef4444, #f97316);
	color: #ffffff;
	font-size: 18px;
	font-weight: 900;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20; /* ABOVE video */
	pointer-events: auto;
	box-shadow: 0 6px 18px rgba(239, 68, 68, 0.55), inset 0 0 0 1px
		rgba(255, 255, 255, 0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#dr1007ecomquickviewmodal .close:hover {
	transform: scale(1.15);
	box-shadow: 0 10px 26px rgba(239, 68, 68, 0.75);
}

/* ============================= */
/* MEDIA (IMAGE + VIDEO)         */
/* ============================= */
#dr1007quickViewImages .quick-view-media {
	flex-shrink: 0;
	width: 82vw;
	max-width: 260px;
	height: 170px;
	object-fit: contain;
	border-radius: 16px;
	scroll-snap-align: center;
	background: linear-gradient(180deg, #f1f5f9, #ffffff);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	z-index: 1;
}

/* Video specific */
#dr1007quickViewImages video.quick-view-media {
	background: #000;
	z-index: 1;
}

#dr1007quickViewImages .quick-view-media:hover {
	transform: scale(1.06);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
}

/* ============================= */
/* TEXT CONTENT                  */
/* ============================= */
#dr1007ecomquickviewmodal #quickViewTitle {
	font-size: 18px;
	font-weight: 800;
	margin-top: 12px;
	margin-bottom: 6px;
	color: #0f172a;
}

#dr1007ecomquickviewmodal #quickViewDesc {
	font-size: 14px;
	color: #475569;
	line-height: 1.5;
}

/* ============================= */
/* PRICE                         */
/* ============================= */
#dr1007ecomquickviewmodal #quickViewPrice {
	margin-top: 10px;
	font-size: 18px;
	font-weight: 900;
	background: linear-gradient(90deg, #22d3ee, #6366f1);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}