/* =========================================================
   Capital Gain
   Password Protected Page
   ========================================================= */


:root {
	--cg-password-bg: #050814;

	--cg-password-panel:
		rgba(10, 15, 29, 0.78);

	--cg-password-text: #ffffff;

	--cg-password-muted:
		rgba(224, 231, 244, 0.68);

	--cg-password-border:
		rgba(255, 255, 255, 0.10);

	--cg-password-field:
		rgba(255, 255, 255, 0.055);

	--cg-password-cyan: #23e6dc;
	--cg-password-purple: #9468ff;
}


/* =========================================================
   Reset WordPress login styling
   ========================================================= */

html {
	min-height: 100%;
	background: var(--cg-password-bg);
}


body.login-password-protected {
	box-sizing: border-box;

	min-height: 100vh;
	margin: 0;
	padding: 0;

	background: var(--cg-password-bg);

	color: var(--cg-password-text);

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;
}


body.login-password-protected * {
	box-sizing: border-box;
}


body.login-password-protected a {
	color: inherit;
}


/* =========================================================
   Background
   ========================================================= */

.cg-password-background {
	position: fixed;
	z-index: 0;
	inset: 0;

	overflow: hidden;

	background:
		radial-gradient(
			ellipse at 18% -10%,
			rgba(32, 228, 218, 0.16) 0%,
			rgba(32, 228, 218, 0.055) 30%,
			transparent 58%
		),

		radial-gradient(
			ellipse at 88% 4%,
			rgba(142, 96, 255, 0.16) 0%,
			rgba(142, 96, 255, 0.045) 28%,
			transparent 52%
		),

		linear-gradient(
			180deg,
			#151822 0%,
			#080b18 28%,
			#050814 65%,
			#03050d 100%
		);
}


.cg-password-background::before {
	content: "";

	position: absolute;
	inset: 0;

	pointer-events: none;

	background-image:
		linear-gradient(
			rgba(255, 255, 255, 0.012) 1px,
			transparent 1px
		),

		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.012) 1px,
			transparent 1px
		);

	background-size: 70px 70px;

	-webkit-mask-image:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.7),
			transparent 70%
		);

	mask-image:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.7),
			transparent 70%
		);
}


/* =========================================================
   Main layout
   ========================================================= */

.cg-password-layout {
	position: relative;
	z-index: 1;

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

	width: 100%;
	min-height: 100vh;

	padding: 60px 24px;
}


.cg-password-container {
	width: 100%;
	max-width: 460px;
}


/* =========================================================
   Logo
   ========================================================= */

.cg-password-logo {
	display: block;

	width: 295px;
	max-width: 78%;

	margin: 0 auto 44px;

	text-decoration: none;
}


.cg-password-logo svg {
	display: block;

	width: 100%;
	height: auto;
}


/* Logo text */

.cg-password-logo .logo-text path {
	fill: #ffffff;
}


/* Outer icon */

.cg-password-logo .logo-icon-outer-1,
.cg-password-logo .logo-icon-outer-2 {
	fill: rgba(255, 255, 255, 0.92);
}


/* Inner icon accents */

.cg-password-logo .logo-icon-inner-top {
	fill: rgba(255, 255, 255, 0.92);
}


.cg-password-logo .logo-icon-inner-bottom {
	fill: rgba(255, 255, 255, 0.92);
}


/* =========================================================
   Card
   ========================================================= */

.cg-password-card {
	position: relative;

	padding: 38px;

	border: 1px solid var(--cg-password-border);
	border-radius: 18px;

	background: var(--cg-password-panel);

	box-shadow:
		0 30px 90px rgba(0, 0, 0, 0.38),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);

	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}


/* very subtle top highlight */

.cg-password-card::before {
	content: "";

	position: absolute;

	top: 0;
	left: 40px;
	right: 40px;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(35, 230, 220, 0.40),
			rgba(148, 104, 255, 0.30),
			transparent
		);
}


/* =========================================================
   Heading
   ========================================================= */

.cg-password-header {
	margin-bottom: 30px;
	text-align: center;
}


.cg-password-eyebrow {
	display: inline-block;

	margin-bottom: 13px;

	color: var(--cg-password-cyan);

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

	line-height: 1;

	letter-spacing: 0.15em;

	text-transform: uppercase;
}


.cg-password-header h1 {
	margin: 0 0 12px;
	padding: 0;

	color: #ffffff;

	font-size: clamp(25px, 4vw, 30px);
	font-weight: 600;

	line-height: 1.2;

	letter-spacing: -0.025em;
}


.cg-password-header p {
	max-width: 350px;

	margin: 0 auto;

	color: var(--cg-password-muted);

	font-size: 14px;
	font-weight: 400;

	line-height: 1.65;
}


/* =========================================================
   Plugin messages / errors
   ========================================================= */

.cg-password-messages:empty {
	display: none;
}


body.login-password-protected #login_error,
body.login-password-protected .message,
body.login-password-protected .success {
	margin: 0 0 24px;
	padding: 14px 16px;

	border: 1px solid rgba(255, 255, 255, 0.10);
	border-left: 3px solid var(--cg-password-cyan);
	border-radius: 9px;

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

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

	font-size: 13px;
	line-height: 1.5;

	box-shadow: none;
}


body.login-password-protected #login_error {
	border-left-color: #ff6f75;

	background: rgba(255, 77, 86, 0.07);
}


body.login-password-protected #login_error a,
body.login-password-protected .message a {
	color: #ffffff;
}


/* =========================================================
   Form
   ========================================================= */

body.login-password-protected #loginform {
	width: 100%;

	margin: 0;
	padding: 0;

	border: 0;

	background: none;

	box-shadow: none;
}


.cg-password-above-field:empty,
.cg-password-below-field:empty {
	display: none;
}


/* =========================================================
   Password field
   ========================================================= */

.cg-password-field {
	margin: 0;
}


.cg-password-field > label {
	display: block;

	margin: 0 0 9px;

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

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

	line-height: 1.4;
}


.cg-password-input-wrap.wp-pwd {
	position: relative;

	display: block;
}


body.login-password-protected
#password_protected_pass {
	display: block;

	width: 100%;
	min-height: 52px;

	margin: 0;

	padding:
		12px
		52px
		12px
		15px;

	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 9px;

	outline: none;

	background: var(--cg-password-field);

	color: #ffffff;

	font-family: inherit;
	font-size: 16px;
	font-weight: 400;

	line-height: 1.4;

	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.12);

	transition:
		border-color 160ms ease,
		background-color 160ms ease,
		box-shadow 160ms ease;
}


body.login-password-protected
#password_protected_pass:hover {
	border-color:
		rgba(255, 255, 255, 0.24);
}


body.login-password-protected
#password_protected_pass:focus {
	border-color:
		rgba(35, 230, 220, 0.60);

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

	box-shadow:
		0 0 0 3px rgba(35, 230, 220, 0.08),
		0 0 24px rgba(35, 230, 220, 0.05);
}


/* =========================================================
   Show/hide password
   ========================================================= */

body.login-password-protected
#pp-hide-show-password {
	position: absolute;

	top: 50%;
	right: 8px;

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

	width: 38px;
	height: 38px;

	margin: 0;
	padding: 0;

	transform: translateY(-50%);

	border: 0;
	border-radius: 6px;

	background: transparent;

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

	box-shadow: none;

	cursor: pointer;
}


body.login-password-protected
#pp-hide-show-password:hover {
	background:
		rgba(255, 255, 255, 0.045);

	color: #ffffff;
}


body.login-password-protected
#pp-hide-show-password:focus {
	outline: none;

	box-shadow:
		0 0 0 2px
		rgba(35, 230, 220, 0.18);
}


/* =========================================================
   Remember me
   ========================================================= */

.cg-password-remember {
	margin: 17px 0 0;
}


.cg-password-remember label {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	margin: 0;

	color: var(--cg-password-muted);

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

	line-height: 1.4;

	cursor: pointer;
}


.cg-password-remember input {
	width: 15px;
	height: 15px;

	margin: 0;

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

	border-radius: 3px;

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

	box-shadow: none;
}


.cg-password-remember input:checked {
	border-color:
		var(--cg-password-cyan);

	background:
		var(--cg-password-cyan);
}


/* =========================================================
   Submit
   ========================================================= */

.cg-password-submit {
	margin: 23px 0 0;
	padding: 0;
}


body.login-password-protected
#wp-submit {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 50px;

	margin: 0;
	padding: 12px 20px;

	border: 0;
	border-radius: 9px;

	background:
		linear-gradient(
			135deg,
			#23e6dc 0%,
			#41d7e4 100%
		);

	color: #051015;

	font-family: inherit;
	font-size: 14px;
	font-weight: 700;

	line-height: 1;

	text-shadow: none;

	box-shadow:
		0 10px 30px rgba(35, 230, 220, 0.12);

	cursor: pointer;

	transition:
		transform 150ms ease,
		filter 150ms ease,
		box-shadow 150ms ease;
}


body.login-password-protected
#wp-submit:hover {
	filter: brightness(1.06);

	box-shadow:
		0 13px 34px
		rgba(35, 230, 220, 0.20);
}


body.login-password-protected
#wp-submit:active {
	transform: translateY(1px);
}


/* =========================================================
   Plugin-injected content
   ========================================================= */

.password-protected-text-above,
.password-protected-text-below {
	color: var(--cg-password-muted);

	font-size: 13px;

	line-height: 1.55;
}


.password-protected-text-above {
	margin: 0 0 18px;

	text-align: center;
}


.password-protected-text-below {
	display: block;

	margin: 22px 0 0;

	text-align: center;
}


/* =========================================================
   Footer
   ========================================================= */

.cg-password-footer {
	margin: 22px 0 0;

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

	font-size: 11px;

	line-height: 1.5;

	letter-spacing: 0.03em;

	text-align: center;
}


/* =========================================================
   Remove leftover WP login elements
   ========================================================= */

body.login-password-protected #nav,
body.login-password-protected #backtoblog,
body.login-password-protected .privacy-policy-page-link {
	display: none;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 560px) {

	.cg-password-layout {
		padding:
			38px
			18px;
	}


	.cg-password-container {
		max-width: 420px;
	}


	.cg-password-logo {
		width: 255px;

		margin-bottom: 34px;
	}


	.cg-password-card {
		padding:
			30px
			24px;

		border-radius: 15px;
	}


	.cg-password-header {
		margin-bottom: 26px;
	}


	.cg-password-header h1 {
		font-size: 25px;
	}

}