/* Shorts-style feed overrides — scoped to slides we actually took over.
 *
 * IMPORTANT: every rule here is gated behind `.shorts-ready`, the class the JS
 * adds to any slide it takes over (YouTube, Vimeo, Player.js providers like
 * Streamable, native <video>, and the generic iframe fallback). Slides the JS
 * doesn't control keep the parent theme's original structure untouched.
 */

/* Reveal the embed player and hide the tap-to-play overlays for embeds we control. */
.swiper-video-slide.shorts-ready .embed-content { opacity: 1 !important; }
.swiper-video-slide.shorts-ready .embed-play-button,
.swiper-video-slide.shorts-ready .playvideo,
.swiper-video-slide.shorts-ready .embed-thumbnail { display: none !important; }

/* Make the iframe fill the slide like a Short — only on shorts-ready slides, so
   generic embeds keep their original (hidden-until-tap) positioning/z-index. */
.swiper-video-slide.shorts-ready .embed-content {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.swiper-video-slide.shorts-ready .embed-content iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
/* Native <video> embeds (Imgur, and providers we resolve to a direct MP4 like
   RedGifs) render at their intrinsic pixel size unless constrained — which
   overflows the slide and shows a cropped, "zoomed-in" center. Pin to the slide
   and `contain` so the whole frame is visible (letterboxed if the aspect ratio
   doesn't match), never zoomed. Black fill behind the letterbox. */
.swiper-video-slide.shorts-ready .embed-content video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	border: 0;
	display: block;
}

/* Catches mouse-wheel/scroll over the video (the cross-origin iframe would
   otherwise swallow it) and routes taps to play/pause. The overlay is inserted by
   the JS for every iframe-based embed it controls (native <video> is left bare so
   taps reach the Video.js control bar). */
.swiper-video-slide.shorts-ready .embed-content .shorts-overlay {
	position: absolute;
	inset: 0;
	z-index: 4;
	cursor: pointer;
	background: transparent;
}

/* ---- Custom right-side action rail -------------------------------------
 * Replaces the parent slide chrome with a minimal TikTok-style rail:
 * view count · volume · like · more(⋯ → share + comment). Transparent with a
 * faint tint (so white icons stay legible on bright video) + 1px white border.
 * The JS reorganizes the parent's existing .swiper-side in place, so the
 * favorite/share/comment handlers (delegated on document) keep working. */

/* Hide the parent chrome that was "taking over" the video. The view count is
   relocated into the rail by JS before this hides its old container. */
.swiper-slide.shorts-ready .single-content-infos,
.swiper-slide.shorts-ready .swiper-side .enlight-content,
.swiper-slide.shorts-ready .swiper-side .avatar-img {
	display: none !important;
}

/* Swiper's prev/next nav arrows ("swipe controls") — redundant in a scroll feed
   (we navigate via wheel/keyboard/touch). Not slide-scoped: they're siblings of
   the wrapper, and this stylesheet only loads on the feed. */
.swiper-button-prev,
.swiper-button-next {
	display: none !important;
}

.swiper-slide.shorts-ready .swiper-side {
	position: absolute;
	right: 10px;
	bottom: 92px; /* clear the mobile bottom bar */
	top: auto;
	left: auto;
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	transition: opacity 0.3s ease;
}

/* Circular, transparent, white-bordered buttons (rail + flyout items). */
.swiper-slide.shorts-ready .swiper-side a,
.swiper-slide.shorts-ready .swiper-side .shorts-rail-btn {
	box-sizing: border-box;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.20);
	border: 1px solid rgba(255, 255, 255, 0.9);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	font-size: 20px;
	line-height: 1;
}
.swiper-slide.shorts-ready .swiper-side a:hover,
.swiper-slide.shorts-ready .swiper-side .shorts-rail-btn:hover {
	background: rgba(0, 0, 0, 0.42);
}
.swiper-slide.shorts-ready .swiper-side svg {
	width: 24px;
	height: 24px;
}
/* Favorite/comment counters that the parent appends inside the <a>. */
.swiper-slide.shorts-ready .swiper-side a span,
.swiper-slide.shorts-ready .swiper-side a small {
	display: none;
}

/* View count: text label (no circle), stacked icon + number. */
.swiper-slide.shorts-ready .swiper-side .shorts-views {
	border: none;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.swiper-slide.shorts-ready .swiper-side .shorts-views svg {
	width: 22px;
	height: 22px;
	margin: 0 0 2px;
}

/* "More" (⋯) flyout: share + comment, anchored left of the button. */
.swiper-slide.shorts-ready .swiper-side .shorts-more {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.swiper-slide.shorts-ready .swiper-side .shorts-more-menu {
	position: absolute;
	right: 56px;
	bottom: 0;
	display: none;
	flex-direction: column;
	gap: 12px;
}
.swiper-slide.shorts-ready .swiper-side .shorts-more.open .shorts-more-menu {
	display: flex;
}

/* Auto-hide the whole rail after idle (revealed again on tap/scroll by JS). */
body.shorts-chrome-hidden .swiper-slide.shorts-ready .swiper-side {
	opacity: 0;
	pointer-events: none;
}

/* ---- Age-disclaimer (WPS Disclaimer) overrides --------------------------
 * The plugin's backdrop only blurs (blur(10px)) with no tint, so the feed is
 * still visible behind the 18+ prompt. Darken + blur harder so the content is
 * properly obscured. !important because the plugin's stylesheet is enqueued
 * after ours, so it would otherwise win on equal (#id) specificity. */
#dclm_modal_screen {
	background: rgba(0, 0, 0, 0.62) !important;
	-webkit-backdrop-filter: blur(22px) !important;
	backdrop-filter: blur(22px) !important;
}

/* While the disclaimer is up, freeze the page so the feed can't be scrolled
   behind it. Toggled by shorts-feed.js (.shorts-age-locked) on the gate state.
   Covers wheel, touch, and rubber-band/overscroll. */
html.shorts-age-locked,
body.shorts-age-locked {
	overflow: hidden !important;
	height: 100% !important;
	touch-action: none !important;
	overscroll-behavior: none !important;
}