/* Shopable Reel by DevSazzad — Floating Single-Product Video */

.sr-floating-reel {
	position: absolute !important;
	z-index: 999 !important;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
	background-color: #000;
	transition: width .4s cubic-bezier(.25, .8, .25, 1),
		height .4s cubic-bezier(.25, .8, .25, 1),
		top .4s ease, left .4s ease, bottom .4s ease, right .4s ease;
}

.sr-floating-reel.is-dragging {
	transition: none !important;
}

/* --- Minimized State --- */
.sr-floating-reel.minimized {
	aspect-ratio: 9/16 !important;
}

.sr-floating-reel.minimized.sr-pos-bottom-right {
	bottom: 15px !important;
	right: 15px !important;
	top: auto !important;
	left: auto !important;
}

.sr-floating-reel.minimized.sr-pos-bottom-left {
	bottom: 15px !important;
	left: 15px !important;
	top: auto !important;
	right: auto !important;
}

.sr-floating-reel.minimized.sr-pos-top-right {
	top: 15px !important;
	right: 15px !important;
	bottom: auto !important;
	left: auto !important;
}

.sr-floating-reel.minimized.sr-pos-top-left {
	top: 15px !important;
	left: 15px !important;
	bottom: auto !important;
	right: auto !important;
}

button.sr-floating-btn.sr-floating-close.sr-pos-top-right,
button.sr-floating-btn.sr-floating-expand.sr-pos-bottom-right {
	opacity: 0;
	transition-duration: 0.5s ease;
}

div#sr-floating-1:hover button.sr-floating-btn.sr-floating-close.sr-pos-top-right,
div#sr-floating-1:hover button.sr-floating-btn.sr-floating-expand.sr-pos-bottom-right {
	opacity: 1 !important;
}


@media (min-width: 769px) {
	.sr-floating-reel.minimized {
		width: var(--sr-floating-desktop-w, 160px) !important;
		height: auto !important;
	}
}

@media (max-width: 768px) {
	.sr-floating-reel.minimized {
		width: var(--sr-floating-mobile-w, 120px) !important;
		height: auto !important;
	}
}

.sr-floating-reel.minimized iframe {
	pointer-events: none !important;
}

/* --- Expanded State (fullscreen centered) --- */
.sr-floating-reel.expanded {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	bottom: auto !important;
	right: auto !important;
	transform: translate(-50%, -50%) !important;
	border-radius: 16px;
	height: 85vh !important;
	width: auto !important;
	aspect-ratio: 9/16 !important;
	max-width: 90vw !important;
	max-height: calc(90vw * 16 / 9) !important;
	box-shadow: 0 20px 80px rgba(0, 0, 0, .8);
	z-index: 999999 !important;
}

.sr-floating-reel.expanded iframe {
	pointer-events: auto !important;
}

.sr-floating-reel-media,
.sr-floating-reel-media iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	border: 0;
	display: block;
}

/* --- Drag overlay --- */
.sr-floating-drag-overlay {
	position: absolute;
	inset: 0;
	z-index: 100;
	cursor: grab;
}

.sr-floating-drag-overlay:active {
	cursor: grabbing;
}

.sr-floating-reel.expanded .sr-floating-drag-overlay {
	display: none;
}

/* --- Action buttons --- */
.sr-floating-btn {
	position: absolute !important;
	width: 40px !important;
	height: 30px !important;
	border: none !important;
	color: #000000 !important;
	background: rgba(255, 255, 255, .16) !important;
	backdrop-filter: blur(6px) !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	z-index: 102;
	padding: 0 !important;
	margin: 0 !important;
	transition: background .25s ease, transform .18s ease !important;
	user-select: none;
}

.sr-floating-btn:hover {
	transform: scale(0.9) !important;
	width: 37px !important;
	background: rgba(255, 255, 255, .16) !important;
	backdrop-filter: blur(9px) !important;
}

/* Circle style: solid round background behind the glyph, always visible */
.sr-floating-reel.sr-floating-style-circle .sr-floating-btn {
	background: color-mix(in srgb, var(--sr-floating-icon-bg, #141414) 82%, transparent);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

/* Minimal style (default): bare glyph at rest, with a proper small circle
   fading in only on hover/focus/touch for a tiny, professional look. */
.sr-floating-reel.sr-floating-style-minimal .sr-floating-btn {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .85));
}

.sr-floating-reel.sr-floating-style-minimal .sr-floating-btn:focus-visible {
	background: color-mix(in srgb, var(--sr-floating-icon-bg, #141414) 78%, transparent);
	filter: none;
}

/* No hover on touch devices — keep a faint permanent circle instead so the
   buttons stay discoverable without a pointer. */
@media (hover: none) {
	.sr-floating-reel.sr-floating-style-minimal .sr-floating-btn {
		background: color-mix(in srgb, var(--sr-floating-icon-bg, #141414) 55%, transparent);
	}
}

/* Icon glyph — plain text/character, never an SVG or icon font, so no theme
   CSS reset targeting <svg> or icon-font classes can ever hide it. Small and
   tiny by default; --sr-floating-icon-size (Settings) scales it directly. */
.sr-floating-icon-glyph {
	display: block;
	line-height: 1;
	font-size: var(--sr-floating-icon-size, 13px);
	color: var(--sr-floating-icon-color, #fff);
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 600;
}

/* Independent corner placement for each button */
.sr-floating-btn.sr-pos-top-left {
	top: 6px;
	left: 6px;
	bottom: auto;
	right: auto;
}

.sr-floating-btn.sr-pos-top-right {
	top: 6px;
	right: 6px;
	bottom: auto;
	left: auto;
}

.sr-floating-btn.sr-pos-bottom-left {
	bottom: 6px;
	left: 6px;
	top: auto;
	right: auto;
}

.sr-floating-btn.sr-pos-bottom-right {
	bottom: 6px;
	right: 6px;
	top: auto;
	left: auto;
}

.sr-floating-reel.expanded .sr-floating-expand {
	display: none;
}