/* ==========================================================================
   Player polish
   --------------------------------------------------------------------------
   Three things changed here.

   1. Corners. Every radius in the player was set to 0 in an earlier pass, which
      left the frame, the aspect placeholder and the mount as hard rectangles.
      The frame now carries a real radius and clips to it, while the mount and
      the custom player surface stay square so the video itself is never
      letterboxed inside a rounded hole.

   2. Glass. The control bar already used backdrop-filter, but a single flat
      rgba() with one blur reads as a grey slab. The treatment below layers a
      vertical tint, a hairline top highlight and a wide soft drop, which is what
      gives the frosted-panel look on a dark video frame.

   3. Icons. The player ships its own inline sprite (filled glyphs, 24x24) rather
      than the site's stroked .icon set, so at 21px the filled shapes filled the
      box and the bar looked heavier than the rest of the UI. They are now sized
      off a single variable, optically centred, and given a pressed state so the
      controls read as tactile.
   ========================================================================== */

.vs-player__frame {
	position: relative;
	padding: 14px;
	border-radius: 20px;
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-lg);
	overflow: hidden;
}

.vs-player__frame::before {
	content: "";
	display: block;
	padding-top: 56.25%;
	border-radius: 16px;
	background-color: var(--n-bg);
	box-shadow: var(--n-inset);
}

/* Square mount for local video */
.vs-player__mount {
	border-radius: 0;
	overflow: hidden;
	background-color: var(--n-bg);
	box-shadow: var(--n-inset);
}

/* ==========================================================================
   Dreams Player Integration & Styling
   ========================================================================== */

.vs-player--vendor .vs-player__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--n-r, 16px);
}

.vs-player--vendor .video-wrapper {
	position: absolute;
	inset: 14px;
	border-radius: inherit;
	overflow: hidden;
	background: #000;
}

@media only screen and (max-width: 576px) {
	.vs-player--vendor .video-wrapper {
		inset: 8px;
	}
}

.vs-player .dreams-player {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: inherit;
	overflow: hidden;
	background: #000 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #fff;
}

.vs-player .dreams-player > * {
	max-width: 100%;
}

.vs-player .dreams-player .plyr,
.vs-player .dreams-player .plyr__video-wrapper,
.vs-player .dreams-player video {
	width: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	min-height: 100% !important;
	background: #000 !important;
	display: block;
}

/* Dreams Player Plyr Styling (matching Vstream cinema theme) */
:root {
	--plyr-color-main: #5b6cff;
	--plyr-video-control-color: #ffffff;
	--plyr-control-radius: 8px;
	--plyr-range-fill-background: #5b6cff;
}

/* Big center play button */
.vs-player .dreams-player button.plyr__control--overlaid {
	background: #5b6cff !important;
	color: #fff !important;
	border-radius: 50% !important;
	box-shadow: 0 8px 26px rgba(91, 108, 255, 0.45) !important;
	padding: 18px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.vs-player .dreams-player button.plyr__control--overlaid:hover {
	transform: translate(-50%, -50%) scale(1.08) !important;
	box-shadow: 0 12px 34px rgba(91, 108, 255, 0.6) !important;
}

/* Title at top */
.vs-player .dreams-player .plyr-video-title {
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
	padding: 14px 18px;
}

/* Seasons / episodes select controls */
.vs-player .dreams-player .plyr-video-seasons {
	padding: 10px 14px;
}

.vs-player .dreams-player select#dc-season-select,
.vs-player .dreams-player select#dc-episode-select {
	background: rgba(18, 22, 30, 0.88) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 8px !important;
	padding: 6px 12px !important;
	font-size: 13px !important;
	font-family: inherit !important;
	outline: none !important;
	cursor: pointer;
	backdrop-filter: blur(10px);
	transition: border-color 0.2s ease;
}

.vs-player .dreams-player select#dc-season-select:hover,
.vs-player .dreams-player select#dc-episode-select:hover {
	border-color: rgba(91, 108, 255, 0.8) !important;
}

/* Custom progress bar in Dreams player */
.custom-progress-wrapper .custom-progress-fill {
	background: #5b6cff !important;
}

/* Overlay & registration popup styling */
#dcoverlay {
	z-index: 99999 !important;
}

#dcoverlay #dialog-form,
#dcoverlay .dialog {
	background: rgba(18, 22, 30, 0.96) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
	backdrop-filter: blur(16px);
}

#dcoverlay input#dialog-phone {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 10px !important;
	color: #fff !important;
}

#dcoverlay input#dialog-phone:focus {
	border-color: #5b6cff !important;
	outline: none !important;
}

#dcoverlay #dialog-cta-btn,
#dcoverlay .dialog-cta {
	background: #5b6cff !important;
	color: #fff !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	transition: background 0.2s ease;
}

#dcoverlay #dialog-cta-btn:hover:not(:disabled),
#dcoverlay .dialog-cta:hover {
	background: #4656e6 !important;
}

.vp {
	position: absolute;
	inset: 14px;
	border-radius: 0;
	overflow: hidden;
	background-color: #06080d;
	color: #fff;
	outline: none;
}

.vp.is-fullscreen {
	border-radius: 0;
}

/* ------------------------------------------------------------- glass bar --- */

.vp__bar {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 58px;
	padding: 0 14px;
	border-radius: 29px;
	/* Layered rather than one flat fill: a vertical tint so the top edge is
	   lighter, a translucent white wash, then the frost. Over a bright frame a
	   single rgba(16,20,28,.58) turned the bar into an opaque grey block. */
	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .14) 0%,
			rgba(255, 255, 255, .05) 38%,
			rgba(255, 255, 255, .02) 100%
		),
		rgba(18, 22, 30, .42);
	backdrop-filter: blur(22px) saturate(160%);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	/* The hairline is the detail that reads as "glass" rather than "translucent
	   rectangle"; it also keeps the bar legible on a white video frame. */
	border: 1px solid rgba(255, 255, 255, .10);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		0 12px 34px rgba(0, 0, 0, .38);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
}

/* Fallback for engines without backdrop-filter: a solid-enough tint so the
   controls stay readable rather than floating on the video. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.vp__bar {
		background: rgba(18, 22, 30, .88);
	}
}

/* ------------------------------------------------------------ big play --- */

.vp__bigplay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background:
		linear-gradient(to bottom, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)),
		rgba(255, 255, 255, .10);
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .30),
		0 16px 40px rgba(0, 0, 0, .40);
	color: #fff;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.vp__bigplay:hover {
	transform: scale(1.06);
	background:
		linear-gradient(to bottom, rgba(255, 255, 255, .26), rgba(255, 255, 255, .10)),
		rgba(255, 255, 255, .14);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .38),
		0 20px 48px rgba(0, 0, 0, .48);
}

.vp__bigplay:active {
	transform: scale(.97);
}

/* --------------------------------------------------------------- icons --- */

.vp-ico {
	width: var(--vp-ico, 22px);
	height: var(--vp-ico, 22px);
	display: block;
	fill: currentColor;
	/* The sprite is filled 24x24 glyphs, so a pure geometric box looks optically
	   heavy and slightly off-centre. Slightly under nominal size plus a nudge
	   reads as centred at this weight. */
	transform: scale(.92);
	transform-origin: center;
	transition: transform .18s ease, color .18s ease, opacity .18s ease;
}

.vp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Transparent at rest: a filled circle on every control made the bar look
	   like a row of chips. The surface appears on hover, like the site header. */
	background-color: transparent;
	color: rgba(255, 255, 255, .90);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.vp__btn:hover {
	background-color: rgba(255, 255, 255, .14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
	color: #fff;
}

.vp__btn:active {
	background-color: rgba(255, 255, 255, .08);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .30);
}

.vp__btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .90);
	outline-offset: 2px;
}

/* The play button carries the accent so the primary action is findable. */
.vp__play {
	background-color: rgba(91, 108, 255, .90);
	color: #fff;
	box-shadow: 0 4px 14px rgba(91, 108, 255, .40);
}

.vp__play:hover {
	background-color: rgba(91, 108, 255, 1);
	box-shadow: 0 6px 20px rgba(91, 108, 255, .52);
}

.vp__time {
	color: rgba(255, 255, 255, .86);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .40);
}

/* The seek track is the one child that must absorb the slack; without this the
   fixed-size buttons get squeezed and the icons sit at inconsistent sizes. */
.vp__seek {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------------------------------------------------------- fullscreen --- */

/* In fullscreen the bar was still left:16px / right:16px, so on a wide display
   it stretched edge to edge and its eight children drifted to the far corners -
   the seek track ballooned, the timecodes and the icon buttons ended up at
   opposite ends, and the row read as a jumble. The bar is capped and centred
   instead, and the controls are scaled a little so they are still reachable on
   a 4K screen at normal viewing distance. */
.vp.is-fullscreen .vp__bar {
	/* Centred with auto margins, not translateX(-50%). The transform was being
	   dropped, which left the bar pinned at left:50% and running off the right
	   edge: measured left 952px on a 1920px viewport with the controls ending at
	   x=2112. left:0 + right:0 + margin:auto centres reliably. */
	left: 0;
	right: 0;
	margin: 0 auto;
	transform: none;
	bottom: 26px;
	width: min(1180px, calc(100% - 96px));
	height: 68px;
	padding: 0 20px;
	gap: 12px;
	border-radius: 34px;
}

.vp.is-fullscreen .vp__btn {
	width: 50px;
	height: 50px;
}

.vp.is-fullscreen .vp-ico {
	--vp-ico: 26px;
}

.vp.is-fullscreen .vp__time {
	font-size: 15px;
	min-width: 52px;
}

.vp.is-fullscreen .vp__bigplay {
	width: 92px;
	height: 92px;
}

.vp.is-fullscreen .vp__headline {
	padding: 28px 34px 0;
}

.vp.is-fullscreen .vp__title {
	font-size: 24px;
}

/* Short viewports (a laptop in fullscreen, or a phone held sideways) cannot
   afford a 68px bar plus a 92px play button. Shrink rather than clip. */
@media (max-height: 560px) {
	.vp.is-fullscreen .vp__bar {
		bottom: 14px;
		height: 58px;
	}

	.vp.is-fullscreen .vp__btn {
		width: 42px;
		height: 42px;
	}

	.vp.is-fullscreen .vp-ico {
		--vp-ico: 22px;
	}

	.vp.is-fullscreen .vp__bigplay {
		width: 66px;
		height: 66px;
	}
}