/**
 * Shikkhaloy Login Page — dedicated, self-contained stylesheet.
 * Scoped entirely under .shikkhaloy-login-page / .login-* so nothing here
 * can leak into or be affected by the admin dashboard's CSS. This file is
 * loaded ONLY by resources/views/auth/login.blade.php.
 */
/* This page loads no Bootstrap/reset, so the browser's default box-sizing
   (content-box) is in effect. Every width:100%/flex-basis% element here is
   also padded, which under content-box renders wider than intended and
   overflows the shell's overflow:hidden edge -- silently clipping whatever
   sits near the right edge of the right-hand panel (language selector,
   Forgot password, the password eye). border-box is the fix, scoped to
   this page only. */
.shikkhaloy-login-page,
.shikkhaloy-login-page *,
.shikkhaloy-login-page *::before,
.shikkhaloy-login-page *::after{
	box-sizing: border-box;
}

:root{
	--login-navy: #0b1f38;
	--login-navy-deep: #081527;
	--login-teal: #0f6849;
	--login-teal-light: #12806090;
	--login-teal-bright: #14b8a6;
	--login-blue: #2563eb;
	--login-green: #16a34a;
	--login-cyan: #67e8f9;
	--login-page-bg: #eef4fb;
	--login-border: #e6ecf5;
	--login-text-muted: #64748b;
	--login-radius: 26px;
	--login-font: "Inter", "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.shikkhaloy-login-page{
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 28px 16px;
	position: relative;
	overflow-x: hidden;
	background: var(--login-page-bg);
	font-family: var(--login-font);
	color: #1e293b;
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   Decorative background -- pure CSS, no image dependency: soft blurred
   colour blobs + a faint dotted grid, kept low-contrast and behind (z:0)
   the login shell (z:1).
--------------------------------------------------------------------- */
.login-bg-decor{
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.login-bg-decor::before,
.login-bg-decor::after{
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(10px);
	opacity: .55;
}
.login-bg-decor::before{
	width: 720px;
	height: 720px;
	top: -220px;
	left: -200px;
	background: radial-gradient(circle at 30% 30%, #cfe3ff, transparent 70%);
}
.login-bg-decor::after{
	width: 660px;
	height: 660px;
	bottom: -240px;
	right: -180px;
	background: radial-gradient(circle at 70% 70%, #c9f2e6, transparent 70%);
}
.login-bg-dots{
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, #c3d3e6 1px, transparent 1.4px);
	background-size: 26px 26px;
	opacity: .42;
	mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 40%, transparent 88%);
}
.login-bg-wave{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42vh;
	background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(191, 219, 254, .55), transparent 70%);
}
.login-bg-quote{
	position: absolute;
	font-family: "Segoe Script", "Brush Script MT", cursive;
	color: #64748b;
	opacity: .45;
	line-height: 1.4;
}
.login-bg-quote-tr{
	top: 30px;
	right: 44px;
	font-size: 16px;
	text-align: right;
}
.login-bg-quote-tr .login-bg-quote-underline{
	display: block;
	width: 46px;
	height: 3px;
	margin: 4px 0 0 auto;
	border-radius: 2px;
	background: var(--login-green);
	opacity: .7;
}
.login-bg-quote-br{
	bottom: 30px;
	right: 60px;
	font-size: 14px;
}

/* Very subtle abstract line-art decorations -- CSS-only shapes, no image
   assets. Kept low-opacity and hidden below 1280px so they never compete
   with the shell or with the stacked mobile layout. */
.login-bg-school{
	position: absolute;
	left: 3.5%;
	bottom: 8%;
	width: 180px;
	height: 140px;
	opacity: .14;
}
.login-bg-school-clock{
	position: absolute;
	top: 46px;
	left: 67px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2.5px solid var(--login-navy);
}
.login-bg-school-wing{
	position: absolute;
	top: 74px;
	left: 128px;
	width: 22px;
	height: 58px;
	border: 3px solid var(--login-navy);
	border-radius: 2px;
}
.login-bg-school-body::before,
.login-bg-school-body::after{
	content: '';
	position: absolute;
	top: 18px;
	width: 16px;
	height: 16px;
	border: 3px solid var(--login-navy);
}
.login-bg-school-body::before{ left: 18px; }
.login-bg-school-body::after{ right: 18px; }
.login-bg-school-roof{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
	border-bottom: 38px solid var(--login-navy);
}
.login-bg-school-flag{
	position: absolute;
	top: -22px;
	left: 50%;
	width: 2px;
	height: 22px;
	background: var(--login-navy);
}
.login-bg-school-flag::after{
	content: '';
	position: absolute;
	top: 0;
	left: 2px;
	width: 12px;
	height: 8px;
	background: var(--login-navy);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.login-bg-school-body{
	position: absolute;
	top: 36px;
	left: 15px;
	width: 120px;
	height: 96px;
	border: 4px solid var(--login-navy);
	border-radius: 2px;
}
.login-bg-school-door{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 40px;
	border: 4px solid var(--login-navy);
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
}
.login-bg-plant{
	position: absolute;
	right: 3.5%;
	bottom: 6%;
	width: 150px;
	height: 100px;
	opacity: .17;
}
.login-bg-book{
	position: absolute;
	left: 10px;
	height: 15px;
	border-radius: 5px 8px 8px 5px;
	background: transparent;
	border: 2.5px solid var(--login-teal);
}
.login-bg-book:nth-child(1){ width: 100px; bottom: 0; }
.login-bg-book:nth-child(2){ width: 84px; bottom: 15px; border-color: var(--login-blue); }
.login-bg-book:nth-child(3){ width: 68px; bottom: 30px; border-color: var(--login-green); }
.login-bg-leaf{
	position: absolute;
	bottom: 50px;
	left: 42px;
	width: 13px;
	height: 32px;
	border-radius: 50% 50% 50% 0;
	background: transparent;
	border: 2.5px solid var(--login-green);
	transform: rotate(-28deg);
}
.login-bg-leaf.login-bg-leaf-2{
	left: 52px;
	bottom: 52px;
	height: 36px;
	transform: rotate(-6deg);
}
.login-bg-leaf.login-bg-leaf-3{
	left: 63px;
	bottom: 52px;
	height: 36px;
	transform: rotate(6deg);
	border-radius: 50% 50% 0 50%;
}
.login-bg-leaf.login-bg-leaf-r{
	left: 72px;
	bottom: 50px;
	transform: rotate(28deg);
	border-radius: 50% 50% 0 50%;
}
.login-bg-pot{
	position: absolute;
	bottom: 28px;
	left: 40px;
	width: 40px;
	height: 24px;
	border-radius: 0 0 10px 10px;
	background: transparent;
	border: 2.5px solid var(--login-navy);
	border-top: 0;
}

/* ---------------------------------------------------------------------
   Shell + composition
--------------------------------------------------------------------- */
.shikkhaloy-login-shell{
	position: relative;
	z-index: 1;
	width: min(79vw, 1420px);
	min-height: 760px;
	display: flex;
	align-items: stretch;
	border-radius: var(--login-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 30px 60px -22px rgba(8, 21, 39, .28), 0 12px 26px -14px rgba(8, 21, 39, .16);
}

/* ---------------------------------------------------------------------
   Left brand / promotional panel
--------------------------------------------------------------------- */
.login-brand-panel{
	flex: 0 0 62%;
	max-width: 62%;
	position: relative;
	overflow: hidden;
	padding: 48px 44px 46px;
	color: #fff;
	background:
		radial-gradient(circle at 15% 10%, rgba(37, 99, 235, .38), transparent 42%),
		radial-gradient(circle at 90% 95%, rgba(20, 184, 166, .4), transparent 55%),
		linear-gradient(155deg, var(--login-navy) 0%, var(--login-navy-deep) 42%, var(--login-teal) 82%, var(--login-teal-bright) 130%);
	display: flex;
	flex-direction: column;
}
.login-brand-panel::before{
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1.4px);
	background-size: 22px 22px;
	opacity: .5;
	pointer-events: none;
}

.login-brand-header{
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	z-index: 1;
}
.login-brand-icon{
	width: 56px;
	height: 56px;
	border-radius: 14px;
	object-fit: cover;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.login-brand-name{
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
}
.login-brand-tagline{
	font-size: 12.5px;
	font-weight: 500;
	color: #dbe6f0;
	letter-spacing: .02em;
}

.login-brand-doodle{
	position: absolute;
	font-family: "Segoe Script", "Brush Script MT", cursive;
	font-size: 16px;
	line-height: 1.3;
	color: #f0fdf9;
	opacity: .85;
	transform: rotate(-4deg);
	z-index: 1;
}
.login-brand-doodle-top{
	top: 34px;
	right: 40px;
	text-align: right;
}
.login-brand-doodle-bottom{
	bottom: 88px;
	left: 30px;
}
.login-brand-doodle-underline{
	display: block;
	width: 52px;
	height: 3px;
	margin-top: 4px;
	border-radius: 2px;
	background: var(--login-green);
}
.login-brand-doodle-top .login-brand-doodle-underline{
	margin-left: auto;
}

.login-brand-heading{
	position: relative;
	z-index: 1;
	margin: 26px 0 16px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.28;
	max-width: 98%;
}
.login-brand-heading .accent{
	color: #b3faff;
}
.login-brand-subheading{
	position: relative;
	z-index: 1;
	margin: 0 0 38px;
	max-width: 92%;
	font-size: 16.5px;
	color: #d7e4ee;
	line-height: 1.6;
}

/* Feature showcase: two feature-card columns flanking the device mockup */
.login-feature-showcase{
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 24px;
	flex: 1 1 auto;
}
.login-feature-col{
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 0 0 22%;
	max-width: 22%;
}
.login-feature-card{
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 70px;
	padding: 16px 20px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .36);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
	backdrop-filter: blur(5px);
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}
.login-feature-card:hover{
	background: rgba(255, 255, 255, .22);
	transform: translateY(-1px);
}
.login-feature-icon{
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	color: #fff;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
}
.login-feature-card.c-green .login-feature-icon{ background: #16a34a; }
.login-feature-card.c-blue .login-feature-icon{ background: #2563eb; }
.login-feature-card.c-purple .login-feature-icon{ background: #7c3aed; }
.login-feature-card.c-orange .login-feature-icon{ background: #f97316; }
.login-feature-card.c-teal .login-feature-icon{ background: #0d9488; }
.login-feature-card.c-pink .login-feature-icon{ background: #db2777; }
.login-feature-label{
	flex: 1 1 auto;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
}
.login-feature-card i.feather-chevron-right{
	flex-shrink: 0;
	font-size: 15px;
	opacity: .8;
}

.login-device-mockup{
	position: relative;
	flex: 0 0 50%;
	max-width: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.login-device-mockup::before{
	content: '';
	position: absolute;
	bottom: 2px;
	left: 50%;
	width: 66%;
	height: 16px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(0, 0, 0, .4), transparent 72%);
	filter: blur(5px);
	pointer-events: none;
}
.login-device-frame{
	width: 100%;
	max-width: 460px;
	border-radius: 13px 13px 3px 3px;
	background: #0c1c2e;
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 20px 46px -14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
	padding: 11px 11px 0;
}
.login-device-cam{
	width: 5px;
	height: 5px;
	margin: 0 auto 7px;
	border-radius: 50%;
	background: #334155;
}
.login-device-screen{
	background: #f4f8fc;
	border-radius: 6px 6px 0 0;
	padding: 14px;
	aspect-ratio: 16 / 12.5;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.login-device-screen-bar{
	display: flex;
	gap: 3px;
	margin-bottom: 2px;
}
.login-device-screen-bar span{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #cbd5e1;
}
.login-device-screen-body{
	flex: 1;
	display: flex;
	gap: 8px;
}
.login-device-screen-nav{
	flex: 0 0 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 9px 4px;
	border-radius: 6px;
	background: linear-gradient(180deg, #16243b, #0e1a2c);
	border: 1px solid rgba(255, 255, 255, .08);
}
.login-device-nav-logo{
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	border-radius: 4px;
	background: #3b82f6;
	margin-bottom: 2px;
}
.login-device-nav-item{
	width: 68%;
	height: 5px;
	flex-shrink: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, .22);
}
.login-device-nav-item.active{
	width: 80%;
	background: #3b82f6;
}
.login-device-screen-main{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.login-device-screen-header{
	height: 11px;
	border-radius: 5px;
	background: linear-gradient(90deg, #2563eb3d, #2563eb0f);
}
.login-device-screen-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}
.login-device-screen-card{
	height: 22px;
	border-radius: 5px;
	background: linear-gradient(135deg, #2563eb26, #2563eb0d);
	border: 1px solid #dbe6f5;
}
.login-device-screen-card.c-2{ background: linear-gradient(135deg, #16a34a26, #16a34a0d); }
.login-device-screen-card.c-3{ background: linear-gradient(135deg, #f9731626, #f973160d); }
.login-device-screen-card.c-4{ background: linear-gradient(135deg, #7c3aed26, #7c3aed0d); }
.login-device-screen-chart{
	flex: 1;
	border-radius: 6px;
	background: linear-gradient(180deg, #16a34a22, transparent 70%);
	border: 1px solid #dbe6f5;
	position: relative;
	overflow: hidden;
}
.login-device-screen-chart::after{
	content: '';
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 6px;
	height: 65%;
	background: linear-gradient(100deg, transparent 40%, #16a34a70 41%, transparent 44%, transparent 58%, #16a34a70 59%, transparent 62%, transparent 78%, #2563eb60 79%, transparent 82%);
}
.login-device-screen-actions{
	display: flex;
	gap: 6px;
}
.login-device-screen-actions span{
	flex: 1;
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(90deg, #2563eb30, #2563eb10);
	border: 1px solid #dbe6f5;
}
.login-device-base{
	height: 10px;
	margin: 0 -12px;
	background: linear-gradient(180deg, #1c2b3d, #0c1c2e);
	border-radius: 0 0 3px 3px;
	clip-path: polygon(4% 0, 96% 0, 100% 100%, 0% 100%);
}
.login-device-keyboard{
	position: relative;
	height: 15px;
	margin: 2px -20px 0;
	background: linear-gradient(180deg, #17273b, #0a141f);
	border-radius: 0 0 9px 9px;
	clip-path: polygon(3% 0, 97% 0, 100% 100%, 0% 100%);
}
.login-device-keyboard::after{
	content: '';
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 58px;
	height: 5px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .14);
}

.login-benefits-row{
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 8px;
	padding-top: 28px;
	margin-top: auto;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.login-benefit{
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 15.5px;
	font-weight: 700;
	color: #ffffff;
}
.login-benefit-icon{
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(22, 163, 74, .32);
	border: 1px solid rgba(22, 163, 74, .75);
	box-shadow: 0 0 14px rgba(22, 163, 74, .28);
	color: #86efac;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.login-benefit-sep{
	width: 1px;
	height: 32px;
	background: rgba(255, 255, 255, .45);
}

/* ---------------------------------------------------------------------
   Right login form panel
--------------------------------------------------------------------- */
.login-form-panel{
	flex: 0 0 38%;
	max-width: 38%;
	background: #ffffff;
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
	position: relative;
}
.login-lang-select{
	position: absolute;
	z-index: 2;
	top: 26px;
	right: 30px;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid #dbe6f5;
	border-radius: 999px;
	background: #f8fafc;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	white-space: nowrap;
	cursor: default;
	user-select: none;
}
.login-lang-select i:first-child{
	font-size: 14px;
	color: var(--login-text-muted);
}
.login-lang-select i:last-child{
	font-size: 12px;
	color: var(--login-text-muted);
}

.login-form-inner{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.login-form-icon{
	width: 84px;
	height: 84px;
	border-radius: 22px;
	margin: 4px auto 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #eef5ff, #dceefc);
	border: 1px solid #d7e6f7;
	box-shadow: 0 10px 24px -8px rgba(37, 99, 235, .3);
}
.login-form-icon img{
	width: 50px;
	height: 50px;
	border-radius: 12px;
}
.login-welcome{
	text-align: center;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .3em;
	color: var(--login-blue);
	margin-bottom: 9px;
}
.login-title{
	text-align: center;
	margin: 0 0 10px;
	font-size: 27px;
	font-weight: 800;
	color: #0f172a;
}
.login-subtitle{
	text-align: center;
	margin: 0 0 36px;
	font-size: 13.5px;
	color: var(--login-text-muted);
}

.login-alert{
	margin-bottom: 16px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	font-size: 12.5px;
	line-height: 1.5;
}
.login-alert ul{
	margin: 0;
	padding-left: 18px;
}

.login-field-group{
	margin-bottom: 22px;
}
.login-field-group label{
	display: block;
	margin-bottom: 7px;
	font-size: 12.5px;
	font-weight: 700;
	color: #334155;
}
.login-input-wrap{
	position: relative;
	display: flex;
	align-items: center;
}
.login-input-icon{
	position: absolute;
	left: 18px;
	font-size: 18px;
	color: #64748b;
	pointer-events: none;
}
.login-input{
	width: 100%;
	height: 56px;
	padding: 0 18px 0 48px;
	border: 1px solid #e9edf3;
	border-radius: 13px;
	font-size: 14.5px;
	font-family: inherit;
	color: #0f172a;
	background: #f7f8fa;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.login-input::placeholder{
	color: #8695a8;
}
.login-input:focus{
	outline: none;
	border-color: var(--login-blue);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.login-input.is-invalid{
	border-color: #ef4444;
	background: #fff7f7;
}
/* Extra right padding only on the password field, so typed text never
   runs under the show/hide button sitting inside the same input wrap. */
.login-input.login-input-has-toggle{
	padding-right: 48px;
}
.login-input-toggle{
	position: absolute;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	background: transparent;
	color: #475569;
	font-size: 16px;
	cursor: pointer;
	border-radius: 7px;
}
.login-input-toggle:hover{
	color: var(--login-blue);
}
.login-input-toggle:focus-visible{
	outline: 2px solid var(--login-blue);
}
.login-error{
	margin-top: 6px;
	font-size: 11.5px;
	color: #dc2626;
	font-weight: 600;
}

.login-row-between{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
	gap: 12px;
	flex-wrap: nowrap;
}
.login-remember{
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: #334155;
	cursor: pointer;
	user-select: none;
}
.login-remember input{
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.login-remember-box{
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1.5px solid #cbd5e1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	transition: background-color .15s ease, border-color .15s ease;
}
.login-remember-box::after{
	content: '';
	width: 9px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translateY(-1px);
	opacity: 0;
}
.login-remember input:checked ~ .login-remember-box{
	background: var(--login-green);
	border-color: var(--login-green);
}
.login-remember input:checked ~ .login-remember-box::after{
	opacity: 1;
}
.login-remember input:focus-visible ~ .login-remember-box{
	outline: 2px solid var(--login-blue);
	outline-offset: 2px;
}
.login-forgot{
	flex-shrink: 0;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--login-blue);
	text-decoration: none;
	white-space: nowrap;
}
.login-forgot:hover{
	text-decoration: underline;
}

.login-submit{
	width: 100%;
	height: 58px;
	border: 0;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .04em;
	color: #fff;
	background: linear-gradient(135deg, var(--login-teal) 0%, var(--login-green) 70%, #22c55e 100%);
	box-shadow: 0 18px 34px -10px rgba(22, 163, 74, .55);
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.login-submit i{
	font-size: 18px;
}
.login-submit:hover{
	transform: translateY(-1px);
	box-shadow: 0 18px 32px -10px rgba(22, 163, 74, .5);
}
.login-submit:focus-visible{
	outline: 2px solid #0f172a;
	outline-offset: 2px;
}
.login-submit:disabled{
	opacity: .6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.login-secure-note{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
	font-size: 12.5px;
	font-weight: 500;
	color: #334155;
}
.login-secure-note i{
	color: var(--login-green);
	font-size: 15px;
}

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */
.login-footer{
	position: relative;
	z-index: 1;
	width: min(79vw, 1420px);
	margin: 24px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}
.login-footer-line{
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(to var(--login-line-dir, right), transparent, var(--login-border) 30%, var(--login-border) 70%, transparent);
	max-width: 240px;
}
.login-footer-content{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 13.5px;
	color: var(--login-text-muted);
	white-space: nowrap;
}
.login-footer-item{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.login-footer-item strong{
	color: #1e293b;
	font-weight: 700;
	font-size: 15px;
}
.login-footer-icon{
	width: 26px;
	height: 26px;
	border-radius: 6px;
}
.login-footer-logo{
	height: 24px;
	width: auto;
}
.login-footer-sep{
	color: var(--login-border);
}
.login-copyright{
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 16px 0 0;
	font-size: 12px;
	color: #94a3b8;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1279.98px){
	.shikkhaloy-login-shell{
		width: 90%;
		min-height: 680px;
	}
	.login-brand-panel,
	.login-form-panel{
		padding: 34px 32px;
	}
	.login-brand-heading{
		font-size: 26px;
	}
	.login-bg-quote,
	.login-bg-school,
	.login-bg-plant{
		display: none;
	}
}

@media (max-height: 820px){
	.shikkhaloy-login-shell{
		min-height: 600px;
	}
	.shikkhaloy-login-page{
		padding: 16px 16px;
	}
	.login-footer{
		margin-top: 14px;
	}
	.login-copyright{
		margin-top: 6px;
	}
}

@media (max-width: 991.98px){
	.shikkhaloy-login-page{
		align-items: flex-start;
		padding: 24px 14px;
	}
	.shikkhaloy-login-shell{
		width: 100%;
		min-height: 0;
		flex-direction: column;
		border-radius: 20px;
	}
	.login-brand-panel,
	.login-form-panel{
		flex: 1 1 auto;
		max-width: 100%;
		padding: 26px 26px;
	}
	.login-form-panel{
		order: -1;
		padding-top: 16px;
	}
	/* Desktop spacing was opened up in this pass (logo/welcome/title/
	   subtitle/field/row/secure-note margins) for a more premium feel on
	   large screens; mobile must stay compact, so those margins are
	   pulled back down here rather than inheriting the larger desktop
	   values. */
	.login-lang-select{
		top: 18px;
		right: 20px;
	}
	.login-form-icon{
		margin: 0 auto 16px;
	}
	.login-welcome{
		margin-bottom: 6px;
	}
	.login-title{
		margin-bottom: 7px;
	}
	.login-subtitle{
		margin-bottom: 22px;
	}
	.login-field-group{
		margin-bottom: 16px;
	}
	.login-row-between{
		margin-bottom: 20px;
	}
	.login-secure-note{
		margin-top: 16px;
	}
	/* Keep only the compact brand header + Bangla message on tablet/
	   mobile; the feature-card grid, laptop mockup, benefits row and the
	   handwritten doodles are the "nonessential decorative artwork" the
	   target's own mobile guidance says may be hidden so the login form
	   stays primary and the page doesn't grow very long. */
	.login-feature-showcase,
	.login-benefits-row,
	.login-brand-doodle{
		display: none;
	}
	.login-brand-heading{
		margin: 18px 0 8px;
		font-size: 20px;
		line-height: 1.4;
		max-width: 100%;
	}
	.login-brand-subheading{
		max-width: 100%;
		margin-bottom: 4px;
	}
	.login-footer,
	.login-copyright{
		width: 100%;
	}
}

@media (max-width: 575.98px){
	.shikkhaloy-login-page{
		padding: 16px 10px;
	}
	.login-brand-panel,
	.login-form-panel{
		padding: 22px 18px;
	}
	.login-brand-header .login-brand-icon{
		width: 36px;
		height: 36px;
	}
	.login-brand-name{
		font-size: 17px;
	}
	.login-brand-heading{
		font-size: 17px;
		line-height: 1.4;
	}
	.login-brand-subheading{
		font-size: 12.5px;
	}
	.login-title{
		font-size: 20px;
	}
	.login-input{
		height: 46px;
	}
	.login-submit{
		height: 50px;
		font-size: 14px;
	}
	.login-footer-content{
		flex-wrap: wrap;
		justify-content: center;
		white-space: normal;
		text-align: center;
		gap: 12px;
		font-size: 13px;
	}
	.login-footer-line{
		display: none;
	}
	.login-row-between{
		flex-wrap: wrap;
	}
}