body {
    background-color: #fff;
    color: #000;
	font-family: 'Signika', sans-serif;
	line-height: 22px;
	font-size: 14px;
	width: 100%;
}

.auth-main{
	min-height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 25px 10px;
}

input.form-control {
	width: 100%;
	height: 40px;
	-webkit-border-radius: 500px;
	border-radius: 500px;
}

.form-control {
    color: #fff;
    background-color: #212121;
    border-color: #444;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

a {
    color: #535353;
}

a:hover, a:focus {
	color: #6e6e6e;
    text-decoration: none;
}

.no-padding {
    padding: 0;
}

.fitxt-center {
	z-index:1;
	text-align: center;
}

.img-hol-p {
	padding-bottom: 22px;
}

/* image area */
.image-area {
	background: url('../image/sidebox.jpg');
	background-position: center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	height: 600px;
	border-radius: 12px;
	z-index: 1;
	position: relative;
	overflow: hidden;
}

.image-area:before {
	position: absolute;
	content: '';
	z-index: -1;
	border-radius: 12px;
	height: 100%;
	width: 100%;
	background: #e4173b;
    background: -webkit-linear-gradient(left, #5061ab, #f51414);
    background: -o-linear-gradient(left, #5061ab, #f51414);
    background: -moz-linear-gradient(left, #5061ab, #f51414);
    background: linear-gradient(left, #5061ab, #f51414);
	opacity: .80;
	top: 0;
	left: 0;
}

.image-area .content{
	height: 100px;
	padding: 170px 0;
}

.image-area .image-hader {
	padding-bottom: 22px;
}

.image-area .image-hader h2{
	color: #fff;
	text-transform: uppercase;
	position: relative;
}

.image-area .image-hader h2:before {
	content: '';
	background: #fff;
	width: 85px;
	height: 2px;
	position: absolute;
	bottom: -6px;
}

.content .address p{
	color: #fff;
	font-size: 13px;
	font-weight: normal;
	padding-bottom: 10px;
}

.f-social-links a span {
    font-size: 16px;
    color: #fff;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 38px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-right: 5px;
    border: 1px solid #437df3;
	-moz-box-shadow: 5px 7px 10px #482c2c;
	-webkit-box-shadow: 5px 7px 10px #482c2c;
	box-shadow: 5px 7px 10px #482c2c;
}

.f-social-links a span:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background: #320f4b;
    z-index: -1;
}

.f-social-links a span:hover:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background: #320f4b;
}

/* sign area */
.sign-area {
    z-index: 1;
    background: #212121;
    position: relative;
    color: #fff;
    width: 100%;
    height: 566px;
    -webkit-border-top-right-radius: 12px;
    -webkit-border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 3.5em 6em;
    margin-top: 17px;
}

.sign-area::before {
    border-right: 60px solid #212121;
    border-top: 70px solid transparent;
    border-bottom: 70px solid transparent;
    content: '';
    height: 0;
    left: -59px;
    width: 0;
    position: absolute;
    pointer-events: none;
    top: 213px;
}

.sign-area .sign-hader {
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
}

/* btn round */
.btn-round {
	background-color: #212121;
	border-color: #444;
	margin-top: 25px;
	height: 42px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	-moz-box-shadow: 2px 3px 6px #2c2c2c;
	-webkit-box-shadow: 2px 3px 6px #2c2c2c;
	box-shadow: 2px 3px 6px #2c2c2c;
}

.btn-round:hover,
.btn-round:focus,
.btn-round:active {
    background-color: #2d2c2c;
    color: #fff;
    border-color: #3a3939;
    outline: none !important;

}

.forgot-text {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
}

.sign-footer p {
	color: #444;
	text-align: center;
	margin-top: 30px !important;
}

.forgot-header {
	color: #545454;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #444;
    border-radius: 4px;
	background: #212121;
	text-align: center;
}

.forgot-header h4 {
	color:#fff;
	margin-top:0;
	margin-bottom:6px;
}

.alert-msg {
	color: #6ca115;
    padding: 8px;
	margin-top: -8px;
    margin-bottom: 12px;
    border: 1px solid #6ca115;
    border-radius: 4px;
	background: #212121;
	text-align: center;
}
			
.alert-msg.danger {
	color: #de1313;
    border-color: #de1313;
}

/* form - input icon */
.input-group-icon {
	width: 100%;
	table-layout: fixed;
}

.input-group-icon input.form-control {
	font-size: 1.2rem;
	padding-right: 36px;
}

.input-group-icon input.form-control:first-child,
.input-group-icon input.form-control:last-child {
	-webkit-border-radius: 500px;
	border-radius: 500px;
}

.input-group-icon .input-group-addon {
	position: relative;
	padding: 0;
	border: 0 none;
	width: 0;
}

.input-group-icon .input-group-addon span.icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	border: 0;
	z-index: 4;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	padding: 11px 16px;
	background: transparent;
	line-height: 1.42857143;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	pointer-events: none;
}

.input-group-icon .input-group-addon:last-child span.icon {
	left: auto;
	right: 0;
}

.input-group-icon .input-group-addon + input.form-control {
	padding-right: 12px;
	padding-left: 38px;
}

/* Form - Custom Checkbox */
.checkbox-replace .i-checks {
	padding-left: 20px;
	cursor: pointer;
	margin-bottom: 0;
}

.checkbox-replace .i-checks input {
	position: absolute;
	margin-left: -20px;
	opacity: 0;
}

.checkbox-replace .i-checks input:checked + span .active {
	display: inherit;
}

.checkbox-replace .i-checks > span {
	margin-left: -20px;
}

.checkbox-replace .i-checks > span .active {
	display: none;
}

.checkbox-replace .i-checks > i {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-top: -2px;
	margin-right: 4px;
	margin-left: -20px;
	line-height: 1;
	vertical-align: middle;
	background-color: transparent;
	border: 1px solid #444;
	-webkit-transition: all .2s;
	transition: all .2s;
}

html.dark .checkbox-replace .i-checks > i {
	border-color: #535353;
}

.checkbox-replace .i-checks > i:before {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 10px;
	height: 10px;
	background-color: #ffbd2e;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all .2s;
	transition: all .2s;
}

.checkbox-replace .i-checks input:checked + i {
	border-color: #ffbd2e;
}

html.dark .checkbox-replace .i-checks input:checked + i{
	border-color: #ff685c;
}

.checkbox-replace .i-checks input:checked + i:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

html.dark .checkbox-replace .i-checks input:checked + i:before {
	background-color: #ff685c;
}

.checkbox-replace .i-checks input:disabled + i {
	border-color: #dee5e7;
}

.checkbox-replace .i-checks input:disabled + i:before{
	background-color: #dee5e7;
}

html.dark .checkbox-replace .i-checks input:disabled + i{
	border-color: #4c4c4d;
}

html.dark .checkbox-replace .i-checks input:disabled + i:before{
	background-color: #4c4c4d;
}

/* Forms Validations */
label.valid {
	display: inline-block;
	text-indent: -9999px;
}

span.error {
	color: #C10000;
	font-size: 0.9em;
	font-weight: normal;
	margin-top: -5px;
	margin-bottom: 0;
	padding: 0;
}

/* animation */
.slideIn {
	-webkit-animation-name: slideIn;
	-moz-animation-name: slideIn;
	-o-animation-name: slideIn;
	animation-name: slideIn;
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-o-animation-timing-function: ease;
	animation-timing-function: ease;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	visibility: visible !important;
}
			
@-webkit-keyframes slideIn {
    0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}
    100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}
			
@-moz-keyframes slideIn {
    0% {
		opacity: 0;
		-moz-transform: translateX(-20px);
	}
    100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}
@-o-keyframes slideIn {
    0% {
		opacity: 0;
		-o-transform: translateX(-20px);
	}
    100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}
@keyframes slideIn {
    0% {
		opacity: 0;
		transform: translateX(-20px);
	}
    100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* media queries */
@media(max-width:991px) {
    .sign-area {
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
    }

	.sign-area::before {
	    display: none;
	}

	.sign-area {
	    padding: 3.5em 2em;
	}

	.w-full {
	    padding: 8px 5px;
	}
}

@media(max-width:1199px) {
	.sign-area::before {
	    border-right-width: 50px; 
	    border-top-width: 60px; 
	    border-bottom-width: 60px; 
	    left: -50px;
	    top: 223px;
	}
}
/* =====================================================================
   LOGIN PAGE REDESIGN — Premium Glassmorphism EduTech Theme
   ---------------------------------------------------------------------
   Everything below is new. Nothing above this line was changed, so
   forgot.php and pwreset.php (which share this stylesheet) keep their
   exact current appearance and behaviour.

   Every new rule is scoped either by a brand-new class name (not used
   anywhere else in the app) or, where a class name is shared, wrapped
   under body.auth-redesign / .login-panel so it can never touch the
   other two authentication pages.
   ===================================================================== */

body.auth-redesign {
	font-family: 'Manrope', sans-serif;
	background-color: #0a0e1a;
	color: #f5f7ff;
	overflow-x: hidden;
}

.auth-redesign a {
	color: inherit;
}

/* ---------- design tokens ---------- */
.auth-redesign {
	--navy-950: #05070f;
	--navy-900: #0a0e1a;
	--glass-fill: rgba(17, 21, 38, .42);
	--glass-fill-strong: rgba(10, 13, 26, .6);
	--glass-border: rgba(255, 255, 255, .14);
	--blue: #4f7cff;
	--blue-light: #9db4ff;
	--purple: #9b6bff;
	--crimson: #ff3d6e;
	--text-0: #f5f7ff;
	--text-1: rgba(245, 247, 255, .74);
	--text-2: rgba(245, 247, 255, .48);
	--radius-xl: 28px;
	--radius-lg: 16px;
	--radius-full: 999px;
	--shadow-lg: 0 30px 80px -20px rgba(3, 5, 14, .7), 0 10px 30px -10px rgba(3, 5, 14, .55);
	--ease: cubic-bezier(.22, .9, .32, 1);
}

/* ---------- ambient background (sits above the backstretch classroom photo) ---------- */
.bg-overlay {
	position: fixed;
	inset: 0;
	z-index: -999990; /* above backstretch (-999999), below page content */
	pointer-events: none;
	background:
		radial-gradient(circle at 12% 15%, rgba(79, 124, 255, .38), transparent 55%),
		radial-gradient(circle at 88% 85%, rgba(255, 61, 110, .32), transparent 55%),
		linear-gradient(160deg, rgba(4, 6, 14, .55), rgba(4, 6, 14, .78));
}

/* soften / darken / slow-zoom the classroom photo injected by custom.js (jquery.backstretch) */
.backstretch img {
	filter: blur(2px) brightness(.55) contrast(1.08) saturate(1.1);
	animation: bgKenBurns 26s ease-in-out infinite alternate;
}

@keyframes bgKenBurns {
	from { transform: scale(1); }
	to   { transform: scale(1.09); }
}

/* ---------- layout shell ---------- */
.auth-redesign .auth-main {
	justify-content: center;
	padding: 40px 20px;
	position: relative;
	z-index: 1;
}

.auth-shell {
	display: flex;
	width: 100%;
	max-width: 1080px;
	min-height: 600px;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.shell-in {
	animation: shellIn .9s var(--ease) both;
}

@keyframes shellIn {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- brand / student panel (left) ---------- */
.brand-panel {
	position: relative;
	flex: 0 0 42%;
	max-width: 42%;
	overflow: hidden;
	clip-path: url(#splashClip); /* scalable organic "liquid" seam, see inline SVG defs in login.php */
	display: flex;
}

.brand-panel__media {
	position: absolute;
	inset: 0;
	background-image: url('../image/sidebox.jpg');
	background-position: center;
	background-size: cover;
	filter: brightness(.86) contrast(1.12) saturate(1.05);
	transform: scale(1.05);
	animation: mediaFade 1.1s var(--ease) both;
}

@keyframes mediaFade {
	from { opacity: 0; transform: scale(1.12); }
	to   { opacity: 1; transform: scale(1.05); }
}

/* modern blue -> purple -> crimson gradient overlay, replaces the old flat red wash */
.brand-panel__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(200deg, rgba(79, 124, 255, .82) 0%, rgba(123, 92, 255, .70) 45%, rgba(225, 29, 72, .78) 100%),
		linear-gradient(to top, rgba(4, 6, 14, .72), rgba(4, 6, 14, 0) 55%);
	mix-blend-mode: multiply;
	opacity: .86;
}

.brand-panel__content {
	position: relative;
	z-index: 2;
	margin: auto;
	padding: 56px 40px;
	text-align: center;
	color: #fff;
}

.brand-eyebrow {
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
	margin-bottom: 10px;
	font-weight: 500;
	animation: fadeUp .7s .05s var(--ease) both;
}

.brand-name {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3vw, 36px);
	letter-spacing: .01em;
	margin: 0 0 8px;
	line-height: 1.15;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
	animation: fadeUp .7s .12s var(--ease) both;
}

.brand-tagline {
	font-size: 14px;
	color: rgba(255, 255, 255, .85);
	margin-bottom: 30px;
	font-weight: 500;
	animation: fadeUp .7s .18s var(--ease) both;
}

.brand-logo {
	margin-bottom: 22px;
	animation: fadeUp .7s .24s var(--ease) both;
}

.brand-logo img {
	height: 54px;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
}

.brand-address {
	font-size: 13px;
	color: rgba(255, 255, 255, .78);
	margin-bottom: 28px;
	line-height: 1.6;
	animation: fadeUp .7s .3s var(--ease) both;
}

.brand-social {
	display: flex;
	justify-content: center;
	gap: 14px;
	animation: fadeUp .7s .36s var(--ease) both;
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* circular frosted-glass social buttons (replace the old square blue buttons) */
.social-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 15px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .28);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}

.social-btn:hover,
.social-btn:focus-visible {
	color: #fff;
	transform: translateY(-4px) scale(1.07);
	background: rgba(255, 255, 255, .22);
	box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .4), 0 0 0 6px rgba(255, 255, 255, .07);
}

/* mobile-only horizontal organic divider between stacked panels */
.mobile-splash {
	display: none;
	width: 100%;
	height: 30px;
}

.mobile-splash path {
	fill: rgba(13, 16, 29, .55);
}

/* ---------- login panel (right) — the glass card ---------- */
.login-panel {
	position: relative;
	flex: 1;
	background: var(--glass-fill);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border-left: 1px solid var(--glass-border);
	padding: 56px 64px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--text-0);
}

.login-panel__glow {
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 55%;
	background: radial-gradient(circle, rgba(79, 124, 255, .22), transparent 62%);
	filter: blur(14px);
	pointer-events: none;
	z-index: 0;
}

.login-panel .sign-hader {
	text-align: center;
	margin-bottom: 34px;
	padding: 0;
	position: relative;
	z-index: 1;
}

.login-panel .sign-hader img {
	margin-bottom: 14px;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35));
	animation: logoFade .8s var(--ease) both;
}

.login-panel .sign-hader h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 22px;
	color: var(--text-0);
	margin: 0 0 4px;
	letter-spacing: .01em;
}

.sign-subhead {
	font-size: 12px;
	color: var(--text-2);
	text-transform: uppercase;
	letter-spacing: .16em;
	margin: 0;
	font-weight: 600;
}

@keyframes logoFade {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.login-form {
	position: relative;
	z-index: 1;
	animation: formSlide .7s .1s var(--ease) both;
}

@keyframes formSlide {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- floating-label glass inputs ---------- */
.field {
	position: relative;
	margin-bottom: 22px;
}

.field-input {
	width: 100%;
	height: 54px;
	padding: 0 18px 0 46px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radius-lg);
	color: var(--text-0);
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

.field-input::placeholder {
	color: transparent;
}

.field-input:focus {
	outline: none;
	border-color: rgba(79, 124, 255, .65);
	background: rgba(255, 255, 255, .08);
	box-shadow: 0 0 0 4px rgba(79, 124, 255, .16), 0 8px 20px -8px rgba(79, 124, 255, .35);
}

.field:focus-within .field-icon {
	color: var(--blue-light);
}

.field-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-2);
	font-size: 15px;
	z-index: 2;
	pointer-events: none;
	transition: color .25s var(--ease);
}

.field-label {
	position: absolute;
	left: 46px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: var(--text-2);
	pointer-events: none;
	transition: all .2s var(--ease);
	font-family: 'Manrope', sans-serif;
}

.field-input:focus + .field-label,
.field-input:not(:placeholder-shown) + .field-label {
	top: -10px;
	left: 34px;
	transform: translateY(0);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 6px;
	background: rgba(9, 11, 20, .88);
	color: var(--blue-light);
}

.field.has-error .field-input {
	border-color: var(--crimson);
	box-shadow: 0 0 0 4px rgba(255, 61, 110, .15);
}

.field.has-error .field-icon {
	color: var(--crimson);
}

.login-form .error {
	display: block;
	color: #ff90a8;
	font-size: 12px;
	margin-top: 6px;
	padding: 0;
	font-weight: 500;
}

/* ---------- remember-me checkbox (restyled for the glass theme; only used on login.php) ---------- */
.checkbox-replace .i-checks {
	color: var(--text-1);
	font-size: 13px;
}

.checkbox-replace .i-checks > i {
	border-color: rgba(255, 255, 255, .28);
	border-radius: 5px;
}

.checkbox-replace .i-checks > i:before {
	background-color: var(--blue);
	border-radius: 2px;
}

.checkbox-replace .i-checks input:checked + i {
	border-color: var(--blue);
}

.forgot-text {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0 26px;
	font-size: 13px;
}

.forgot-text a {
	color: var(--text-1);
	transition: color .2s var(--ease);
}

.forgot-text a:hover {
	color: var(--blue-light);
}

/* ---------- premium gradient CTA button ---------- */
.btn-cta {
	position: relative;
	width: 100%;
	height: 52px;
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .02em;
	color: #fff;
	background: linear-gradient(120deg, var(--blue), var(--purple) 55%, var(--crimson));
	background-size: 200% 200%;
	box-shadow: 0 14px 30px -10px rgba(79, 124, 255, .5);
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-position .6s var(--ease);
}

.btn-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -8px rgba(155, 107, 255, .55);
	background-position: 100% 50%;
}

.btn-cta:active {
	transform: translateY(0) scale(.98);
}

.btn-cta:focus-visible {
	outline: 3px solid rgba(79, 124, 255, .6);
	outline-offset: 3px;
}

.btn-cta__label {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* shine sweep on hover */
.btn-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg);
	transition: left .7s var(--ease);
}

.btn-cta:hover::before {
	left: 130%;
}

/* CSS-only ripple pulse on click (no JS required) */
.btn-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, .35);
	transform: scale(0);
	opacity: 0;
	transition: transform .5s ease, opacity .5s ease;
	pointer-events: none;
}

.btn-cta:active::after {
	transform: scale(1);
	opacity: .25;
	transition: 0s;
}

.login-panel .sign-footer p {
	text-align: center;
	margin-top: 26px !important;
	font-size: 12px;
	color: var(--text-2);
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.auth-shell {
		flex-direction: column;
		max-width: 480px;
		border-radius: 24px;
	}

	.brand-panel {
		flex: 0 0 auto;
		max-width: 100%;
		min-height: 240px;
		clip-path: none;
	}

	.mobile-splash {
		display: block;
		margin-top: -1px;
		position: relative;
		z-index: 1;
	}

	.login-panel {
		border-left: none;
		border-top: 1px solid var(--glass-border);
		padding: 44px 30px;
	}
}

@media (max-width: 480px) {
	.brand-panel__content {
		padding: 40px 24px;
	}

	.login-panel {
		padding: 36px 20px;
	}

	.login-panel .sign-hader {
		margin-bottom: 26px;
	}
}

/* ---------- accessibility ---------- */
.auth-redesign :focus-visible {
	outline: 2px solid var(--blue-light);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.auth-redesign *,
	.auth-redesign *::before,
	.auth-redesign *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}