/**
 * EcoVG TV Restricted Video Access
 * Improved scrollable subscription modal
 */

/* =========================================================
   PLAYER
   ========================================================= */

.ecovg-tv-restricted-player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 420px;
	overflow: hidden;

	background-color: #050912;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	border-radius: 6px;
	box-sizing: border-box;
	isolation: isolate;
}

/*
 * Logged-in restricted player.
 * Keep video-player proportion instead of
 * making page unnecessarily tall.
 */
.ecovg-tv-restricted-player-with-plans {
	min-height: 620px;
}

.ecovg-tv-restricted-player::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background: inherit;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	filter: blur(2.5px);
	transform: scale(1.02);
}

.ecovg-tv-restricted-player-shade {
	position: absolute;
	inset: 0;
	z-index: 2;

	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.54) 0%,
			rgba(0, 0, 0, 0.68) 100%
		);
}


/* =========================================================
   MAIN RESTRICTED MODAL
   ========================================================= */

.ecovg-tv-restricted-card {
	position: absolute;

	top: 50%;
	left: 50%;
	z-index: 5;

	width: min(
		530px,
		calc(100% - 40px)
	);

	padding:
		26px
		30px
		28px;

	color: #ffffff;
	text-align: center;

	background:
		linear-gradient(
			145deg,
			rgba(5, 9, 18, 0.96),
			rgba(12, 16, 24, 0.96)
		);

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.32
		);

	border-radius: 14px;

	box-shadow:
		0 24px 70px
		rgba(
			0,
			0,
			0,
			0.48
		);

	backdrop-filter:
		blur(10px);

	-webkit-backdrop-filter:
		blur(10px);

	transform:
		translate(
			-50%,
			-50%
		);

	box-sizing:
		border-box;
}


/* =========================================================
   EXPANDED / PLAN MODAL
   ========================================================= */

.ecovg-tv-restricted-card-expanded {
	width: min(
		920px,
		calc(100% - 50px)
	);

	/*
	 * Main fix:
	 * Never allow modal to go outside video area.
	 */
	max-height:
		calc(
			100% - 36px
		);

	overflow-x: hidden;
	overflow-y: auto;

	padding:
		22px
		26px
		26px;

	scrollbar-width: thin;

	scrollbar-color:
		rgba(
			255,
			255,
			255,
			0.30
		)
		rgba(
			255,
			255,
			255,
			0.06
		);

	overscroll-behavior:
		contain;
}


/* Chrome / Edge scrollbar */

.ecovg-tv-restricted-card-expanded::-webkit-scrollbar {
	width: 7px;
}

.ecovg-tv-restricted-card-expanded::-webkit-scrollbar-track {
	background:
		rgba(
			255,
			255,
			255,
			0.04
		);

	border-radius:
		20px;
}

.ecovg-tv-restricted-card-expanded::-webkit-scrollbar-thumb {
	background:
		rgba(
			255,
			255,
			255,
			0.26
		);

	border-radius:
		20px;
}

.ecovg-tv-restricted-card-expanded::-webkit-scrollbar-thumb:hover {
	background:
		rgba(
			255,
			255,
			255,
			0.40
		);
}


/* =========================================================
   HEADER
   ========================================================= */

.ecovg-tv-restricted-header {
	display: flex;

	align-items: center;
	justify-content: center;

	flex-direction: column;

	gap: 7px;

	margin-bottom: 13px;
}


/* =========================================================
   LOCK ICON
   ========================================================= */

.ecovg-tv-restricted-lock {
	position: static;

	width: 43px;
	height: 43px;

	display: flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	border:
		2px solid
		rgba(
			255,
			255,
			255,
			0.90
		);

	border-radius: 50%;

	background:
		rgba(
			17,
			22,
			32,
			0.96
		);

	box-shadow:
		0 6px 18px
		rgba(
			0,
			0,
			0,
			0.32
		);

	transform: none;
}

.ecovg-tv-restricted-lock svg {
	width: 20px;
	height: 20px;

	fill: none;

	stroke: #ffffff;
	stroke-width: 1.8;

	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================================================
   ACCESS RESTRICTED HEADING
   ========================================================= */

.ecovg-tv-restricted-header h2 {
	margin: 0;
	padding: 0;

	color: #ffffff;

	font-size: 24px;
	font-weight: 700;

	line-height: 1.2;
}


/* =========================================================
   GUEST DESCRIPTION
   ========================================================= */

.ecovg-tv-restricted-description {
	max-width: 410px;

	margin:
		0
		auto
		22px;

	color:
		rgba(
			255,
			255,
			255,
			0.80
		);

	font-size: 14px;

	line-height: 1.55;
}


/* =========================================================
   GUEST BUTTONS
   ========================================================= */

.ecovg-tv-restricted-actions {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 12px;

	flex-wrap: wrap;
}

.ecovg-tv-overlay-button {
	min-width: 110px;
	min-height: 40px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	padding:
		9px
		17px;

	border:
		1px solid transparent;

	border-radius: 5px;

	color:
		#ffffff !important;

	font-size: 13px;
	font-weight: 700;

	line-height: 1;

	text-align: center;

	text-decoration:
		none !important;

	box-sizing:
		border-box;

	transition:
		transform 0.18s ease,
		filter 0.18s ease;
}

a.ecovg-tv-overlay-button:hover {
	color:
		#ffffff !important;

	text-decoration:
		none !important;

	filter:
		brightness(1.08);

	transform:
		translateY(-1px);
}

.ecovg-tv-overlay-login {
	background:
		#1268db;

	border-color:
		#2689ff;
}

.ecovg-tv-overlay-subscribe {
	background:
		#079431;

	border-color:
		#25bc50;
}

.ecovg-tv-overlay-buy {
	background:
		linear-gradient(
			180deg,
			#9044db 0%,
			#7028b6 100%
		);

	border-color:
		#aa66e9;
}

.ecovg-tv-overlay-placeholder,
.ecovg-tv-plan-button-placeholder {
	cursor: default;
}


/* =========================================================
   SUBSCRIPTION STATUS
   ========================================================= */

.ecovg-tv-access-status {
	max-width: 560px;

	margin:
		0
		auto
		17px;

	padding:
		9px
		14px;

	color:
		rgba(
			255,
			255,
			255,
			0.82
		);

	font-size: 12px;

	line-height: 1.45;

	background:
		rgba(
			255,
			255,
			255,
			0.055
		);

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.12
		);

	border-radius: 6px;
}


/* Expired */

.ecovg-tv-access-status-expired {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	color:
		#ffd8d8;

	background:
		rgba(
			145,
			28,
			28,
			0.25
		);

	border-color:
		rgba(
			255,
			93,
			93,
			0.38
		);
}

.ecovg-tv-status-icon {
	width: 18px;
	height: 18px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	border:
		1px solid
		#ff7474;

	border-radius: 50%;

	color:
		#ff7474;

	font-size: 10px;
	font-weight: 800;
}


/* =========================================================
   CURRENT PLAN
   ========================================================= */

.ecovg-tv-current-plan-box {
	max-width: 560px;

	display: flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	flex-wrap: wrap;

	margin:
		0
		auto
		17px;

	padding:
		9px
		14px;

	background:
		rgba(
			19,
			106,
			219,
			0.13
		);

	border:
		1px solid
		rgba(
			70,
			147,
			244,
			0.28
		);

	border-radius: 6px;
}

.ecovg-tv-current-plan-box > span {
	color:
		#7fb8ff;

	font-size: 11px;
	font-weight: 700;

	text-transform:
		uppercase;
}

.ecovg-tv-current-plan-box > strong {
	font-size: 14px;
}

.ecovg-tv-current-plan-box > small {
	width: 100%;

	color:
		rgba(
			255,
			255,
			255,
			0.67
		);

	font-size: 11px;
}


/* =========================================================
   CHOOSE PLAN HEADING
   ========================================================= */

.ecovg-tv-plans-heading {
	margin:
		3px
		0
		16px;

	text-align: center;
}

.ecovg-tv-plans-heading h3 {
	margin: 0;

	color: #ffffff;

	font-size: 19px;
	font-weight: 700;

	line-height: 1.3;
}


/* =========================================================
   PLAN GRID
   ========================================================= */

.ecovg-tv-plan-grid {
	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(
				0,
				1fr
			)
		);

	gap: 12px;

	align-items: stretch;

	padding-top: 2px;
}


/* =========================================================
   PLAN CARDS
   ========================================================= */

.ecovg-tv-plan-card {
	position: relative;

	min-width: 0;

	display: flex;

	flex-direction: column;

	padding:
		21px
		17px
		15px;

	text-align: left;

	background:
		linear-gradient(
			145deg,
			#003C97 0%,
			#003C97 100%
		);

	border:
		1px solid
		rgba(
			93,
			153,
			224,
			0.42
		);

	border-radius:
		9px;

	box-sizing:
		border-box;
}

.ecovg-tv-plan-card-featured {
	border-color:
		#18c8f5;

	box-shadow:
		0 0 0 1px
		rgba(
			24,
			200,
			245,
			0.18
		);
}


/* =========================================================
   PLAN BADGES
   ========================================================= */

.ecovg-tv-plan-badge {
	position: absolute;

	top: -9px;
	left: 50%;

	min-width: 95px;

	padding:
		4px
		11px;

	border-radius:
		999px;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	text-align: center;

	white-space: nowrap;

	transform:
		translateX(-50%);
}

.ecovg-tv-plan-badge-popular {
	color:
		#043652;

	background:
		#18c8f5;
}

.ecovg-tv-plan-badge-elite {
	color:
		#0b3f8d;

	background:
		#ffffff;
}


/* =========================================================
   PLAN TITLE + DESCRIPTION
   ========================================================= */

.ecovg-tv-plan-card-header {
	min-height: 74px;
}

.ecovg-tv-plan-card-header h3 {
	margin:
		0
		0
		8px;

	color:
		#ffffff;

	font-size: 17px;
	font-weight: 700;

	line-height: 1.2;
}

.ecovg-tv-plan-card-header p {
	margin: 0;

	color:
		rgba(
			255,
			255,
			255,
			0.84
		);

	font-size: 9.5px;

	line-height: 1.45;
}


/* =========================================================
   PRICE
   ========================================================= */

.ecovg-tv-plan-price {
	display: flex;

	align-items: flex-end;

	gap: 4px;

	margin-top: 11px;
}

.ecovg-tv-plan-price strong {
	color:
		#ffffff;

	font-size: 27px;
	font-weight: 700;

	line-height: 1;

	letter-spacing:
		-0.02em;
}

.ecovg-tv-plan-price span {
	padding-bottom: 2px;

	color:
		rgba(
			255,
			255,
			255,
			0.72
		);

	font-size: 8.5px;
}


/* =========================================================
   PLAN DIVIDER
   ========================================================= */

.ecovg-tv-plan-divider {
	width: 100%;
	height: 1px;

	margin:
		15px
		0
		12px;

	background:
		rgba(
			255,
			255,
			255,
			0.30
		);
}


/* =========================================================
   PLAN FEATURES
   ========================================================= */

.ecovg-tv-plan-features {
	flex:
		1
		1
		auto;

	margin: 0;
	padding: 0;

	list-style: none;
}

.ecovg-tv-plan-features li {
	display: flex;

	align-items: flex-start;

	gap: 8px;

	margin:
		0
		0
		8px;

	padding: 0;

	color:
		#ffffff;

	font-size: 9px;

	line-height: 1.35;
}

.ecovg-tv-plan-feature-dot {
	width: 6px;
	height: 6px;

	flex:
		0
		0
		6px;

	margin-top: 3px;

	background:
		#18c8f5;

	border-radius:
		50%;
}

.ecovg-tv-plan-features-empty {
	flex:
		1
		1
		auto;

	color:
		rgba(
			255,
			255,
			255,
			0.65
		);

	font-size: 10px;
}


/* =========================================================
   SUBSCRIBE BUTTON
   ========================================================= */

.ecovg-tv-plan-card-action {
	margin-top: 13px;
}

.ecovg-tv-plan-button {
	width: 100%;
	min-height: 34px;

	display: flex;

	align-items: center;
	justify-content: center;

	padding:
		7px
		10px;

	color:
		#ffffff !important;

	background:
		linear-gradient(
			180deg,
			#0db23e 0%,
			#078b2e 100%
		);

	border:
		1px solid
		#25c656;

	border-radius:
		5px;

	font-size: 10px;
	font-weight: 700;

	line-height: 1;

	text-align: center;

	text-decoration:
		none !important;

	box-sizing:
		border-box;
}

a.ecovg-tv-plan-button:hover {
	color:
		#ffffff !important;

	text-decoration:
		none !important;

	filter:
		brightness(1.08);
}


/* =========================================================
   OR DIVIDER
   ========================================================= */

.ecovg-tv-access-divider {
	display: flex;

	align-items: center;

	gap: 14px;

	margin:
		19px
		0
		13px;
}

.ecovg-tv-access-divider span {
	height: 1px;

	flex: 1;

	background:
		rgba(
			255,
			255,
			255,
			0.18
		);
}

.ecovg-tv-access-divider strong {
	color:
		rgba(
			255,
			255,
			255,
			0.62
		);

	font-size: 9px;
	font-weight: 700;
}


/* =========================================================
   PPV CARD
   ========================================================= */

.ecovg-tv-ppv-card {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 20px;

	padding:
		12px
		15px;

	text-align: left;

	background:
		linear-gradient(
			90deg,
			rgba(
				54,
				22,
				79,
				0.38
			),
			rgba(
				28,
				19,
				56,
				0.58
			)
		);

	border:
		1px solid
		rgba(
			156,
			82,
			218,
			0.50
		);

	border-radius:
		8px;
}

.ecovg-tv-ppv-content {
	min-width: 0;
}

.ecovg-tv-ppv-content strong {
	display: block;

	margin-bottom: 3px;

	color:
		#ffffff;

	font-size: 13px;
	font-weight: 700;
}

.ecovg-tv-ppv-content span {
	display: block;

	color:
		rgba(
			255,
			255,
			255,
			0.68
		);

	font-size: 10px;
}

.ecovg-tv-ppv-action {
	flex:
		0
		0
		auto;
}

.ecovg-tv-ppv-action
.ecovg-tv-overlay-button {
	min-width: 125px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

	.ecovg-tv-restricted-player-with-plans {
		min-height: 650px;
	}

	.ecovg-tv-restricted-card-expanded {
		width:
			calc(
				100% - 34px
			);

		max-height:
			calc(
				100% - 30px
			);
	}

	.ecovg-tv-plan-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(
					0,
					1fr
				)
			);
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

	.ecovg-tv-restricted-player {
		aspect-ratio: auto;

		min-height: 560px;
	}

	.ecovg-tv-restricted-player-with-plans {
		min-height: 650px;
	}

	.ecovg-tv-restricted-card {
		width:
			calc(
				100% - 20px
			);

		padding:
			19px
			13px
			18px;

		border-radius:
			10px;
	}

	.ecovg-tv-restricted-card-expanded {
		width:
			calc(
				100% - 18px
			);

		max-height:
			calc(
				100% - 24px
			);

		padding:
			18px
			13px
			18px;
	}

	.ecovg-tv-restricted-lock {
		width: 39px;
		height: 39px;
	}

	.ecovg-tv-restricted-lock svg {
		width: 18px;
		height: 18px;
	}

	.ecovg-tv-restricted-header h2 {
		font-size: 20px;
	}

	.ecovg-tv-plans-heading h3 {
		font-size: 16px;
	}

	.ecovg-tv-plan-grid {
		grid-template-columns:
			1fr;

		gap: 18px;
	}

	.ecovg-tv-plan-card {
		padding:
			21px
			17px
			15px;
	}

	.ecovg-tv-plan-card-header {
		min-height: 0;
	}

	.ecovg-tv-plan-price strong {
		font-size: 27px;
	}

	.ecovg-tv-plan-features li {
		font-size: 10px;
	}

	.ecovg-tv-ppv-card {
		align-items: stretch;

		flex-direction: column;

		gap: 12px;
	}

	.ecovg-tv-ppv-action {
		width: 100%;
	}

	.ecovg-tv-ppv-action
	.ecovg-tv-overlay-button {
		width: 100%;
	}

	.ecovg-tv-restricted-actions {
		gap: 7px;
	}

	.ecovg-tv-overlay-button {
		min-width: auto;

		padding:
			8px
			11px;

		font-size: 11px;
	}
}