/**
 * Login flow — mobile / tablet only
 * Devices: Android (~360–412), iPhone 12 Pro (390), iPhone XR (414), iPad Pro (1024)
 * Desktop styles untouched.
 *
 * Screens:
 * - Login (view_users_login)
 * - Welcome / continue panel (view_users_tmp_continue_panel) — Teenaff width fix
 * - Learner Permit upload (view_learner_permit)
 * - Security question (view_login_question)
 * - Locked after incorrect security answers (view_locked_screen_sq)
 * - Payment not received / locked (view_locked_screen)
 * - Forgot password (view_forget_password)
 *
 */

@import url("mobile-typography.css");

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

	/* Full-bleed photo — no white/grey bands on short or tall pages */
	html {
		height: 100%;
		min-height: 100%;
		min-height: 100vh;
		min-height: 100dvh;
		background-color: #2f2f2f !important;
	}

	body#login-body {
		min-height: 100% !important;
		min-height: 100vh !important;
		min-height: 100dvh !important;
		min-height: -webkit-fill-available !important;
		background-color: #2f2f2f !important;
		background-image: url("../../admin/images/loginbg.jpg") !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
		background-attachment: scroll !important;
		display: flex !important;
		flex-direction: column !important;
		position: relative !important;
		isolation: isolate !important;
		overflow-x: hidden !important;
	}

	/* Fixed viewport layer — always covers screen (incl. overscroll / address-bar) */
	body#login-body::before {
		content: "" !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		height: 100dvh !important;
		min-height: 100% !important;
		min-height: -webkit-fill-available !important;
		z-index: -1 !important;
		pointer-events: none !important;
		background-color: #2f2f2f !important;
		background-image: url("../../admin/images/loginbg.jpg") !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}

	body#login-body #site-content,
	body#login-body #site-content > .container,
	body#login-body #site-content > .container > div {
		background: transparent !important;
	}

	body#login-body #site-content {
		flex: 1 1 auto !important;
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
	}

	body#login-body #site-footer {
		flex-shrink: 0 !important;
		margin-top: auto !important;
		width: 100% !important;
	}

	#top-header-registration > .container,
	body#login-body #site-content > .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}

	/* Center login / security form in the viewport */
	body#login-body #site-content > .container {
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		min-height: calc(100vh - 140px) !important;
		min-height: calc(100dvh - 140px) !important;
	}

	#top-header-registration .row,
	#site-content .row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	#top-header-registration .row > [class*="col-"],
	#site-content .row > [class*="col-"] {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0;
		padding-right: 0;
	}

	/* Keep school logo / name bar always visible */
	#top-header-registration {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		flex-shrink: 0 !important;
		width: 100% !important;
		min-height: 72px !important;
		padding: 8px 0 !important;
		background: #2574C4 !important;
		box-sizing: border-box;
		position: relative;
		z-index: 20;
	}

	.register-top-title {
		float: none !important;
		display: block !important;
		visibility: visible !important;
		text-align: center !important;
		font-size: 22px !important;
		margin: 10px 0 !important;
		line-height: 1.2;
		color: #fff !important;
		font-weight: bold !important;
	}

	#top-header-registration .logo {
		float: none !important;
		display: block !important;
		visibility: visible !important;
		margin: 8px auto !important;
		max-height: 72px !important;
		height: auto !important;
		width: auto !important;
		max-width: 80% !important;
	}

	/* Login + security question — capped so low-DPI phones don’t look zoomed */
	.login-box {
		float: none !important;
		display: block !important;
		width: 92% !important;
		max-width: 400px !important;
		margin: 0 auto !important;
		padding: 18px 16px !important;
		box-sizing: border-box !important;
	}

	/* Login validation errors — red/dark text is hard to read on translucent box */
	body.page-login .login-error,
	body.page-login .login-error p,
	body.page-login .login-error span,
	body.page-login .login-error strong,
	body.page-login .login-box > .login-error,
	.login-box .login-error,
	.login-box .login-error * {
		color: #fff !important;
	}

	.forgot-password-link {
		float: none !important;
		display: block;
		text-align: center;
		margin-top: 12px !important;
	}

	/* Welcome screen — full-bleed photo bg + white card (no grey/white split) */
	body.welcome-panel-page #site-content,
	body.welcome-panel-page #site-content > .container,
	body.welcome-panel-page #site-content > .container > div[style] {
		background: transparent !important;
	}

	body.welcome-panel-page #site-content > .container {
		justify-content: center !important;
		align-items: center !important;
	}

	body.welcome-panel-page .welcome-panel,
	body.welcome-panel-page #site-content .terms.welcome-panel {
		width: 92% !important;
		max-width: 400px !important;
		box-sizing: border-box !important;
		padding: 18px 16px !important;
		margin: 12px auto !important;
		background: rgba(255, 255, 255, 0.96) !important;
		border-radius: 4px;
	}

	/* Other .terms panels (non-welcome) */
	#site-content .terms:not(.welcome-panel) {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding: 16px !important;
		margin: 0 auto !important;
	}

	.welcome-panel h3,
	#site-content .terms h3 {
		font-size: 20px !important;
		line-height: 1.3;
		word-wrap: break-word;
	}

	.welcome-panel h4,
	#site-content .terms h4,
	.login-box h4,
	.lp-upload-panel h4,
	#site-content h4 {
		font-size: 20px !important;
		line-height: 1.3 !important;
		word-wrap: break-word;
	}

	.welcome-panel p,
	#site-content .terms p {
		line-height: 1.5;
		word-wrap: break-word;
	}

	.welcome-panel .cont_btn,
	#site-content .terms .cont_btn {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	#site-content [style*="min-height:590px"],
	#site-content [style*="min-height: 590px"],
	#site-content [style*="min-height:890px"],
	#site-content [style*="min-height: 890px"] {
		min-height: 0 !important;
		height: auto !important;
	}

	/* Kill filler <br> that push content up and leave empty space below */
	body#login-body #site-content > .container > br {
		display: none !important;
	}

	body.security-question-page #site-content,
	body.security-question-page #site-content > .container,
	body.lp-upload-page #site-content,
	body.lp-upload-page #site-content > .container,
	body.lp-upload-page .lp-upload-wrap {
		background: transparent !important;
	}

	body.security-question-page #site-content > .container,
	body.lp-upload-page #site-content > .container {
		justify-content: center !important;
		align-items: stretch !important;
		min-height: calc(100vh - 48px) !important;
		min-height: calc(100dvh - 48px) !important;
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	/* Kill old desktop spacer wrappers (min-height:890px etc.) */
	body.lp-upload-page #site-content > .container > div,
	body.lp-upload-page .lp-upload-wrap,
	body.lp-upload-page #site-content [style*="min-height"] {
		min-height: 0 !important;
		height: auto !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		background: transparent !important;
	}

	body.lp-upload-page br {
		display: none !important;
	}

	/* Security question — centered box, no dead space below */
	body.security-question-page .login-box {
		width: 92% !important;
		max-width: 400px !important;
		margin: 0 auto !important;
	}

	/* LP upload panel — fill usable width, no empty band under it */
	body.lp-upload-page .lp-upload-panel,
	.lp-upload-panel,
	#site-content [style*="border:1px solid #7f7f7f"] {
		width: 100% !important;
		max-width: 420px !important;
		box-sizing: border-box !important;
		padding: 16px !important;
		margin: 0 auto !important;
		background: rgba(255, 255, 255, 0.18) !important;
	}

	body.lp-upload-page #site-footer {
		margin-top: 0 !important;
	}

	/* iPad: no white strip under the footer (890px spacer + short content) */
	html:has(body.lp-upload-page),
	body.lp-upload-page {
		height: 100% !important;
		min-height: 100vh !important;
		min-height: 100dvh !important;
		background-color: #2f2f2f !important;
	}

	body.lp-upload-page #site-content {
		flex: 1 1 auto !important;
		background: transparent !important;
	}

	body.lp-upload-page #site-footer {
		margin-top: auto !important;
		background-color: #000 !important;
	}

	.permit_form .btn,
	.permit_form .form-control {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.permit_form label,
	.permit_form p {
		word-wrap: break-word;
	}
}

/* Phones */
@media screen and (max-width: 428px) {
	#top-header-registration > .container,
	#site-content > .container {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.register-top-title {
		font-size: 18px !important;
	}

	.login-box {
		width: 94% !important;
		max-width: 380px !important;
		padding: 16px 14px !important;
		border-width: 3px !important;
	}

	body.welcome-panel-page .welcome-panel {
		width: 94% !important;
		max-width: 380px !important;
		padding: 14px 12px !important;
	}

	#site-content .terms:not(.welcome-panel) {
		padding: 14px 12px !important;
	}

}

/* iPad Pro / tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	#top-header-registration > .container,
	#site-content > .container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.login-box {
		width: 80% !important;
		max-width: 480px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 22px 20px !important;
	}

	body.welcome-panel-page .welcome-panel {
		width: 80% !important;
		max-width: 480px !important;
		padding: 22px 24px !important;
	}

	#site-content .terms:not(.welcome-panel) {
		max-width: 100% !important;
		padding: 24px 28px !important;
	}

	body.lp-upload-page .lp-upload-panel,
	.lp-upload-panel,
	#site-content [style*="border:1px solid #7f7f7f"] {
		width: 80% !important;
		max-width: 480px !important;
		padding: 24px !important;
	}

	body.security-question-page .login-box {
		width: 80% !important;
		max-width: 480px !important;
	}

	html:has(body.lp-upload-page),
	body.lp-upload-page {
		min-height: 100vh !important;
		min-height: 100dvh !important;
		background-color: #2f2f2f !important;
	}

	body.lp-upload-page #site-content,
	body.lp-upload-page #site-content > .container,
	body.lp-upload-page #site-content > .container > div,
	body.lp-upload-page #site-content [style*="min-height"] {
		min-height: 0 !important;
		height: auto !important;
		background: transparent !important;
	}

	body.lp-upload-page #site-content {
		flex: 1 1 auto !important;
	}

	body.lp-upload-page #site-footer {
		margin-top: auto !important;
		flex-shrink: 0 !important;
	}
}

/*
 * 0-days / course reset payment
 * Mobile/tablet: center box vertically + horizontally; hide desktop <br> spacers
 */
@media screen and (max-width: 1024px) {
	html:has(body.course-reset-page) {
		height: 100% !important;
	}

	body.course-reset-page {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		min-height: 100vh !important;
		min-height: 100dvh !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	body.course-reset-page > br {
		display: none !important;
	}

	body.course-reset-page > .container {
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		padding: 20px 12px !important;
		float: none !important;
		box-sizing: border-box !important;
	}

	body.course-reset-page > .container > .row {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		flex: 0 0 auto !important;
	}

	body.course-reset-page > .container > .row > .col-md-3 {
		display: none !important;
	}

	body.course-reset-page > .container > .row > .col-md-6 {
		float: none !important;
		display: block !important;
		width: 100% !important;
		max-width: 420px !important;
		margin: 0 auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.course-reset-page .box_ex {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}

	body.course-reset-page .box_ex > br {
		display: none !important;
	}

	body.course-reset-page .box_ex h4 {
		margin-bottom: 12px !important;
	}

	body.course-reset-page #site-footer {
		flex: 0 0 auto !important;
		width: 100% !important;
		margin-top: auto !important;
		padding: 8px 12px 12px !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}

	body.course-reset-page #paypal-button-container,
	body.course-reset-page #checkout-form,
	body.course-reset-page #card-name-field-container,
	body.course-reset-page #card-number-field-container,
	body.course-reset-page #card-expiry-field-container,
	body.course-reset-page #card-cvv-field-container {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* iPad — fill the width, keep card centered in viewport */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	body.course-reset-page > .container {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	body.course-reset-page > .container > .row > .col-md-6 {
		width: 100% !important;
		max-width: 820px !important;
	}

	body.course-reset-page .box_ex {
		padding: 28px 36px !important;
	}
}

/*
 * Desktop — leave learner permit / login-flow layout alone.
 * (All rules above are max-width: 1024px only.)
 */
@media screen and (min-width: 1025px) {
	body.lp-upload-page .lp-upload-wrap {
		min-height: 0 !important;
		height: auto !important;
	}

	body.lp-upload-page #site-content > .container > br {
		display: none !important;
	}
}

/* iPad Pro landscape (up to 1366) — same fill, no white band under footer */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
	html:has(body.lp-upload-page),
	body.lp-upload-page {
		min-height: 100vh !important;
		min-height: 100dvh !important;
		background-color: #2f2f2f !important;
		background-image: url("../../admin/images/loginbg.jpg") !important;
		background-size: cover !important;
		background-position: center center !important;
		display: flex !important;
		flex-direction: column !important;
	}

	body.lp-upload-page #site-content,
	body.lp-upload-page #site-content > .container,
	body.lp-upload-page #site-content > .container > div,
	body.lp-upload-page #site-content [style*="min-height"] {
		min-height: 0 !important;
		height: auto !important;
		background: transparent !important;
	}

	body.lp-upload-page #site-content {
		flex: 1 1 auto !important;
	}

	body.lp-upload-page #site-footer {
		margin-top: auto !important;
		flex-shrink: 0 !important;
	}
}

/* KMR TEEN class-name aliases (teen site markup) */
@media screen and (max-width: 1024px) {
	body.page-continue-panel.welcome-panel-page .welcome-panel,
	body.page-continue-panel .terms.welcome-panel,
	body.page-continue-panel .terms {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	body.page-login-question.security-question-page .login-box,
	body.page-login-question .login-box {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}

	body.page-login #site-content > .container,
	body.page-login .login-page-inner {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
}

/* iPad only — welcome / continue card was stuck at 400px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	body.page-continue-panel#login-body #site-content,
	body.page-continue-panel#login-body #site-content > .container,
	body.welcome-panel-page#login-body #site-content,
	body.welcome-panel-page#login-body #site-content > .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		box-sizing: border-box !important;
	}

	body.page-continue-panel .continue-page-wrap,
	body.welcome-panel-page .continue-page-wrap {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
	}

	body.welcome-panel-page #site-content .terms.welcome-panel,
	body.welcome-panel-page .welcome-panel,
	body.page-continue-panel #site-content .terms.welcome-panel,
	body.page-continue-panel .terms.welcome-panel,
	body.page-continue-panel .continue-page-wrap .terms {
		width: 88% !important;
		max-width: 820px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 28px 36px !important;
		box-sizing: border-box !important;
	}

	body#login-body.page-continue-panel .continue-page-wrap,
	body#login-body.welcome-panel-page .continue-page-wrap {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
	}
}

/*
 * Desktop sticky footer for all login-flow screens.
 * Welcome/continue: grow the photo area, not the white card, so no blank band.
 */
@media screen and (min-width: 1025px) {
	html:has(body#login-body) {
		min-height: 100%;
		min-height: 100vh;
		background-color: #2f2f2f;
	}

	body#login-body {
		display: flex !important;
		flex-direction: column !important;
		min-height: 100vh !important;
		min-height: 100dvh !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		position: relative !important;
		isolation: isolate !important;
		background-color: #2f2f2f !important;
		background-image: url("../../admin/images/loginbg.jpg") !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}

	body#login-body::before {
		content: "" !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: -1 !important;
		pointer-events: none !important;
		background-color: #2f2f2f !important;
		background-image: url("../../admin/images/loginbg.jpg") !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}

	body#login-body #site-content {
		flex: 1 1 auto !important;
		width: 100% !important;
		background: transparent !important;
	}

	body#login-body #site-footer {
		flex-shrink: 0 !important;
		margin-top: auto !important;
		width: 100% !important;
	}

	body#login-body #site-content > .container,
	body#login-body #site-content > .container > div {
		background: transparent !important;
	}

	/* Welcome — card keeps natural height; extra space is the photo, not stretched white */
	body.welcome-panel-page #site-content,
	body.page-continue-panel #site-content {
		display: block !important;
		background: transparent !important;
	}

	body.welcome-panel-page #site-content > .container > br,
	body.page-continue-panel #site-content > .container > br {
		display: none !important;
	}

	body.welcome-panel-page #site-content > .container,
	body.page-continue-panel #site-content > .container,
	body.welcome-panel-page .continue-page-wrap,
	body.page-continue-panel .continue-page-wrap,
	body.welcome-panel-page #site-content [style*="min-height"],
	body.page-continue-panel #site-content [style*="min-height"] {
		min-height: 0 !important;
		height: auto !important;
		background: transparent !important;
		flex: none !important;
	}

	body.welcome-panel-page .terms,
	body.welcome-panel-page .welcome-panel,
	body.page-continue-panel .terms,
	body.page-continue-panel .welcome-panel {
		height: auto !important;
		min-height: 0 !important;
		flex: none !important;
	}

	body.page-already-logged-in #site-content {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		flex: 1 1 auto !important;
		width: 100% !important;
		background: transparent !important;
	}

	body.page-already-logged-in #site-content > .container {
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		box-sizing: border-box !important;
	}

	body.page-already-logged-in .login-page-inner {
		width: 100% !important;
		max-width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	body.page-already-logged-in .login-box,
	body.page-already-logged-in .already-logged-box {
		width: 40% !important;
		max-width: 560px !important;
		margin: 0 auto !important;
		float: none !important;
		box-sizing: border-box !important;
	}
}

/* Already logged in — keep translucent look, raise opacity so text stays readable */
body.page-already-logged-in .login-box,
body.page-already-logged-in .already-logged-box {
	background: RGBA(255, 255, 255, 0.35) !important;
	background-color: RGBA(255, 255, 255, 0.35) !important;
}

body.page-already-logged-in .login-box,
body.page-already-logged-in .already-logged-box,
body.page-already-logged-in .already-logged-message,
body.page-already-logged-in .already-logged-message p,
body.page-already-logged-in .already-logged-home-link,
body.page-already-logged-in .already-logged-message a {
	color: #fff !important;
}