/* ============================================================
   Reel Slider — Public Styles v1.9
   - Video slider width matches the product slider container
   - Arrow buttons match product slider style (white circle, outside viewport)
   - Always loops / repeats videos infinitely
   ============================================================ */

/* ── CSS Custom Properties ───────────────────────────────── */
.reel-slider-wrap {
	--reel-video-w:     405px;
	--reel-video-h:     720px;
	--reel-gap:         16px;
	--reel-radius:      16px;
	--reel-ctrl-bg:     rgba(0, 0, 0, .60);
	--reel-ctrl-hover:  rgba(0, 0, 0, .85);
	--reel-ctrl-size:   40px;
	--reel-transition:  340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--reel-nav-size:    48px;
	--reel-dot-active:  #ffffff;
	--reel-dot-idle:    rgba(255,255,255,.38);

	position: relative;
	width: 100%;
	/* FIX: allow arrows to sit outside viewport edges, matching product slider */
	overflow: visible;
	padding: 0 0 28px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ── Viewport & Track ────────────────────────────────────── */
.reel-slider-viewport {
	overflow: hidden;
	width: 100%;
}

.reel-slider-track {
	display: flex;
	gap: var(--reel-gap);
	transition: transform var(--reel-transition);
	will-change: transform;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	user-select: none;
	-webkit-user-select: none;
}

/* ── Slides ──────────────────────────────────────────────── */
.reel-slide {
	flex: 0 0 var(--reel-video-w);
	width: var(--reel-video-w);
	transition: opacity .25s, transform .25s;
	will-change: opacity;
}
.reel-slide:not(.is-active) { opacity: 1; }
.reel-slide.is-active       { opacity: 1; }

.reel-slide-inner {
	position: relative;
	width: 100%;
	height: var(--reel-video-h);
	aspect-ratio: 9 / 16;
	border-radius: var(--reel-radius);
	overflow: hidden;
	background: #0d0d0d;
	box-shadow: 0 6px 28px rgba(0,0,0,.55);
	transition: box-shadow .25s;
}
.reel-slide.is-active .reel-slide-inner {
	box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.20);
}

/* ── Video ───────────────────────────────────────────────── */
.reel-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Gradient overlay ────────────────────────────────────── */
.reel-slide-inner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0,0,0,.70) 0%,
		rgba(0,0,0,.15) 40%,
		transparent 68%
	);
	pointer-events: none;
	border-radius: inherit;
	z-index: 1;
}

/* ── Title ───────────────────────────────────────────────── */
.reel-title {
	position: absolute;
	bottom: 62px;
	left: 0;
	right: 0;
	padding: 0 14px;
	font-size: clamp(12px, 1.5vw, 14px);
	font-weight: 600;
	color: #fff;
	letter-spacing: .01em;
	line-height: 1.4;
	z-index: 4;
	text-shadow: 0 1px 6px rgba(0,0,0,.8);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s, transform .25s;
}
.reel-slide.is-active .reel-title {
	opacity: 1;
	transform: translateY(0);
}

/* ── Fullscreen button — top-left ────────────────────────── */
.reel-btn-fullscreen {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 6;
}
@media ( max-width: 768px ) {
	.reel-btn-fullscreen {
		top: auto;
		bottom: 14px;
		left: 12px;
	}
	.reel-title {
		bottom: 64px;
	}
}

/* ── Controls row — top RIGHT ────────────────────────────── */
.reel-controls {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	gap: 8px;
	z-index: 6;
}

/* ── All circular overlay buttons ────────────────────────── */
.reel-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width:  var(--reel-ctrl-size);
	height: var(--reel-ctrl-size);
	min-width:  var(--reel-ctrl-size);
	min-height: var(--reel-ctrl-size);
	border-radius: 50%;
	background: var(--reel-ctrl-bg);
	border: none;
	cursor: pointer;
	padding: 0;
	color: #fff;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background .18s, transform .12s;
	line-height: 1;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.reel-btn:hover  { background: var(--reel-ctrl-hover); transform: scale(1.08); }
.reel-btn:active { transform: scale(.92); }
.reel-btn svg {
	width:  18px;
	height: 18px;
	fill: currentColor;
	pointer-events: none;
	flex-shrink: 0;
}

/* ── Navigation Arrows — match product slider style ──────── */
/*
 * KEY CHANGE: arrows sit outside the viewport (overflow:visible on wrap),
 * positioned identically to the product slider's prev/next buttons.
 * They always show on desktop and never disable (always loops).
 */
.reel-nav {
	position: absolute;
	top: 50%;
	/* offset upward by half the bottom padding so arrows center on the video strip */
	transform: translateY( calc(-50% - 14px) );
	z-index: 10;
	width:  var(--reel-nav-size);
	height: var(--reel-nav-size);
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0,0,0,.28);
	transition: background .18s, transform .12s, box-shadow .18s;
	color: #111;
	padding: 0;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.reel-nav svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	pointer-events: none;
}
.reel-nav:hover {
	background: #fff;
	box-shadow: 0 6px 20px rgba(0,0,0,.35);
	transform: translateY( calc(-50% - 14px) ) scale(1.08);
}
.reel-nav:active {
	transform: translateY( calc(-50% - 14px) ) scale(.94);
}
/* Place arrows just outside the viewport, same as product slider */
.reel-nav--prev { left:  -24px; }
.reel-nav--next { right: -24px; }

/* Arrows never disabled when looping */
.reel-nav.is-disabled { opacity: .30; pointer-events: none; }

/* ── Dot Pagination ──────────────────────────────────────── */
.reel-dots {
	position: absolute;
	bottom: 4px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 4px 0;
}
.reel-dot {
	width: 8px; height: 8px;
	border-radius: 4px;
	border: none; padding: 0;
	background: var(--reel-dot-idle);
	cursor: pointer;
	transition: background .22s, width .22s, transform .18s;
	touch-action: manipulation;
}
.reel-dot.is-active { background: var(--reel-dot-active); width: 22px; }
.reel-dot:hover:not(.is-active) { background: rgba(255,255,255,.65); transform: scale(1.25); }

/* ── Shimmer skeleton ────────────────────────────────────── */
.reel-slide-inner.is-loading::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
	background-size: 200% 100%;
	animation: reel-shimmer 1.4s infinite;
	z-index: 2;
}
@keyframes reel-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ── Big play pulse indicator ────────────────────────────── */
.reel-play-indicator {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 6;
	pointer-events: none;
	opacity: 0;
}
.reel-play-indicator.is-visible {
	animation: reel-pulse .38s ease-out forwards;
}
.reel-play-indicator svg {
	width: 60px; height: 60px;
	fill: rgba(255,255,255,.88);
	filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
@keyframes reel-pulse {
	0%   { opacity: 0; transform: scale(.65); }
	50%  { opacity: 1; transform: scale(1.05); }
	100% { opacity: 0; transform: scale(1.25); }
}

/* ── Empty notice ────────────────────────────────────────── */
.reel-empty-notice {
	padding: 12px 18px;
	background: #fff3cd;
	border: 1px solid #f0c36d;
	border-radius: 6px;
	font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   FULLSCREEN MODAL
   ═══════════════════════════════════════════════════════════ */
.reel-fs-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, .96);
	align-items: center;
	justify-content: center;
	animation: reel-fs-in .22s ease-out forwards;
	padding: env(safe-area-inset-top, 0px)
	         env(safe-area-inset-right, 0px)
	         env(safe-area-inset-bottom, 0px)
	         env(safe-area-inset-left, 0px);
}
.reel-fs-overlay.is-open { display: flex; }
@keyframes reel-fs-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.reel-fs-inner {
	position: relative;
	height: min(100dvh, 100vh);
	width:  min(calc((100dvh) * 9 / 16), 100vw, 520px);
	max-height: 100%;
	background: #000;
	border-radius: 0;
	overflow: hidden;
	animation: reel-fs-scale .22s cubic-bezier(0.34, 1.26, 0.64, 1) forwards;
}
@keyframes reel-fs-scale {
	from { transform: scale(.92); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}

.reel-fs-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

.reel-fs-inner::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 30%;
	background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
	pointer-events: none;
	z-index: 1;
}

.reel-fs-title {
	position: absolute;
	bottom: 56px;
	left: 0; right: 0;
	padding: 0 20px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0,0,0,.8);
	z-index: 2;
	line-height: 1.4;
}

.reel-fs-bar {
	position: absolute;
	top: 0; left: 0; right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 14px;
	padding-top: max(14px, env(safe-area-inset-top, 14px));
	z-index: 3;
	background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
}

.reel-fs-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width:  48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0,0,0,.60);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0;
	transition: background .15s, transform .12s;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.reel-fs-btn:hover  { background: rgba(0,0,0,.85); transform: scale(1.08); }
.reel-fs-btn:active { transform: scale(.92); }
.reel-fs-btn svg {
	width: 22px; height: 22px;
	fill: currentColor;
	pointer-events: none;
}

/* ── Responsive ──────────────────────────────────────────── */
@media ( max-width: 768px ) {
	.reel-slider-wrap { --reel-nav-size: 40px; --reel-ctrl-size: 38px; }
	/* On mobile keep arrows visible (moved inside so they don't clip) */
	.reel-nav--prev { left:  4px; }
	.reel-nav--next { right: 4px; }
	.reel-slider-wrap { overflow: hidden; }
}
@media ( max-width: 480px ) {
	.reel-title  { font-size: 12px; bottom: 44px; }
	.reel-btn    { --reel-ctrl-size: 36px; }
	.reel-fs-inner { border-radius: 0; }
}

@media ( max-height: 500px ) and ( orientation: landscape ) {
	.reel-fs-inner {
		height: 100vh;
		width:  auto;
		aspect-ratio: auto;
		border-radius: 0;
	}
	.reel-fs-video { object-fit: contain; }
}