/**
 * Registration flow — mobile / tablet only
 * Devices: Android (~360–412), iPhone 12 Pro (390), iPhone XR (414), iPad Pro (1024)
 * Desktop styles untouched (all rules inside max-width: 1024px media queries).
 *
 * Covers:
 * - Terms (adult_online)
 * - Begin registration (email/password popup)
 * - Main registration + preview (full-width content)
 * - Payment
 * - Payment complete / transaction successful
 * - Audio payment
 * - System requirements
 */

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

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

	/* ---- Full-page background (no white gap at bottom) ---- */
	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;
	}

	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;
		min-height: 0;
		width: 100%;
		background: transparent !important;
	}

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

	/* ---- Shared: use available screen width ---- */
	#top-header-registration > .container,
	#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;
	}

	#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;
	}

	/* Terms scroll area (default registration screens) */
	.terms {
		max-height: 55vh;
		width: 100%;
		box-sizing: border-box;
	}

	/* Terms & Conditions page — viewport-sized scrollable terms box */
	body.terms-page {
		overflow: hidden !important;
		height: 100vh !important;
		height: 100dvh !important;
	}

	body.terms-page #top-header-registration {
		flex-shrink: 0 !important;
		min-height: 72px !important;
	}

	body.terms-page #top-header-registration .logo {
		max-height: 64px !important;
		margin: 6px auto !important;
	}

	body.terms-page .register-top-title {
		font-size: 18px !important;
		margin: 8px 0 !important;
		color: #fff !important;
	}

	body.terms-page #site-content {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0 !important;
		overflow: hidden;
		padding: 0 !important;
	}

	body.terms-page #site-content > .container {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 8px 10px 8px !important;
		box-sizing: border-box;
		overflow: hidden;
	}

	body.terms-page #site-content > .container > br {
		display: none;
	}

	body.terms-page .terms-page-wrap {
		min-height: 0 !important;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

	body.terms-page .terms-page-form {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0 !important;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	/* Scrollable terms + signature — height follows viewport minus header/buttons/footer */
	body.terms-page .terms.terms-scroll {
		flex: 1 1 auto;
		width: 100% !important;
		max-width: 100% !important;
		height: calc(100vh - 220px) !important;
		height: calc(100dvh - 220px) !important;
		max-height: calc(100vh - 220px) !important;
		max-height: calc(100dvh - 220px) !important;
		min-height: 180px !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		box-sizing: border-box;
		padding: 12px !important;
		margin: 0 0 8px 0 !important;
	}

	body.terms-page .terms-signature {
		margin-top: 16px;
		padding-top: 12px;
		border-top: 1px solid #ccc;
		width: 100%;
		box-sizing: border-box;
	}

	body.terms-page .terms-signature .form-group,
	body.terms-page .terms-signature .form-control {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	body.terms-page .terms-date-row {
		margin: 6px 0 10px;
		width: 100%;
	}

	body.terms-page .terms-actions {
		flex-shrink: 0;
		width: 100%;
		padding: 4px 0 0;
		box-sizing: border-box;
	}

	body.terms-page .terms-actions center {
		width: 100%;
		padding: 4px 0;
	}

	body.terms-page .terms-actions .btn {
		width: 100% !important;
		max-width: 100% !important;
		margin: 6px 0 !important;
		box-sizing: border-box;
	}

	body.terms-page #site-footer {
		flex-shrink: 0;
		padding: 8px 0 !important;
	}

	/* Login-style boxes — centered (payment/begin-reg override below) */
	.login-box {
		float: none !important;
		display: block !important;
		width: 92% !important;
		max-width: 420px !important;
		margin: 0 auto !important;
		padding: 18px 16px !important;
		box-sizing: border-box !important;
	}

	/* Begin-registration inner block */
	#site-content [style*="min-height:390px"],
	#site-content [style*="min-height: 390px"] {
		min-height: auto !important;
	}

	/*
	 * Begin registration (email/password)
	 * Center the white container both horizontally + vertically in the viewport
	 */
	body.begin-reg-page {
		min-height: 100vh !important;
		min-height: 100dvh !important;
	}

	body.begin-reg-page #site-content {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
	}

	body.begin-reg-page #site-content > .container {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto !important;
		justify-content: center !important;
		align-items: center !important;
		min-height: calc(100vh - 140px) !important;
		min-height: calc(100dvh - 140px) !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		box-sizing: border-box;
	}

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

	body.begin-reg-page .begin-reg-wrap {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		margin: 0 auto !important;
		padding: 0 !important;
		box-sizing: border-box;
	}

	body.begin-reg-page .begin-reg-box,
	body.begin-reg-page #site-content .terms.begin-reg-box {
		float: none !important;
		position: relative !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		text-align: center !important;
		box-sizing: border-box;
		max-height: none !important;
		left: auto !important;
		right: auto !important;
	}

	body.begin-reg-page .begin-reg-box p,
	body.begin-reg-page .begin-reg-box strong,
	body.begin-reg-page .begin-reg-box center {
		text-align: center !important;
		display: block;
		width: 100%;
	}

	body.begin-reg-page .begin-reg-box label {
		text-align: left !important;
		display: block;
		width: 100%;
	}

	body.begin-reg-page .begin-reg-box .row {
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: center;
	}

	body.begin-reg-page .begin-reg-box .row > [class*="col-"] {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto 10px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.begin-reg-page .begin-reg-box .form-control,
	body.begin-reg-page .begin-reg-box .form-group {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	body.begin-reg-page .begin-reg-box .btn {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/*
	 * Payment screen — center login-box both horizontally + vertically
	 */
	body.payment-page {
		min-height: 100vh !important;
		min-height: 100dvh !important;
	}

	body.payment-page #site-content {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
	}

	body.payment-page #site-content > .container {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto !important;
		justify-content: center !important;
		align-items: center !important;
		min-height: calc(100vh - 140px) !important;
		min-height: calc(100dvh - 140px) !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		box-sizing: border-box;
	}

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

	body.payment-page .login-box {
		float: none !important;
		position: relative !important;
		display: block !important;
		/* Cap in px — % alone looks huge on low-DPI / wider CSS viewports (A21, some iPhones) */
		width: 92% !important;
		max-width: 400px !important;
		margin: 0 auto !important;
		box-sizing: border-box;
		left: auto !important;
		right: auto !important;
		overflow-wrap: anywhere !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
	}

	/* Long emails / course names must wrap inside payment login-box */
	body.payment-page .login-box h4,
	body.payment-page .login-box h3,
	body.payment-page .login-box p,
	body.payment-page .login-box strong,
	body#login-body .login-box h4,
	body#login-body .login-box h3,
	body#login-body .login-box p,
	.login-box h4,
	.login-box h3 {
		max-width: 100% !important;
		overflow-wrap: anywhere !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
		white-space: normal !important;
		overflow: visible !important;
		hyphens: auto;
	}
}

/* Main + preview registration: full-width content, stack header CTA */
@media screen and (max-width: 1024px) {
	body:not(#login-body) {
		min-height: 100vh;
		min-height: 100dvh;
	}

	body:not(#login-body) #site-content {
		width: 100%;
	}

	body:not(#login-body) #site-content > .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.register-header {
		font-size: 20px !important;
		line-height: 1.25;
		text-align: center;
		display: block;
		overflow: hidden;
	}

	/* “Already have an Account?” — full width, no side waste */
	.register-header .btn,
	.register-header a.btn-primary {
		float: none !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 12px 0 0 0 !important;
		box-sizing: border-box;
		text-align: center;
	}

	.preview_side,
	.preview_area,
	.birthday_box {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

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

/* Phones: Android, iPhone 12 Pro, iPhone XR */
@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;
	}

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

	.terms {
		max-height: 50vh;
		padding: 10px !important;
	}

	body.terms-page .terms.terms-scroll {
		height: calc(100vh - 200px) !important;
		height: calc(100dvh - 200px) !important;
		max-height: calc(100vh - 200px) !important;
		max-height: calc(100dvh - 200px) !important;
		min-height: 160px !important;
		padding: 10px !important;
	}

	body.terms-page #site-content > .container {
		padding: 6px 8px 8px !important;
	}

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

	body.payment-page .login-box {
		width: 94% !important;
		max-width: 380px !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;
	}

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

	.register-header {
		font-size: 26px !important;
	}

	.login-box {
		max-width: 640px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.payment-page .login-box {
		width: 70% !important;
		max-width: 480px !important;
		margin: 0 auto !important;
	}

	/* Still use most of the tablet width for long forms */
	body:not(#login-body) #site-content > .container {
		max-width: 100% !important;
	}

	body.terms-page .terms.terms-scroll {
		height: calc(100vh - 240px) !important;
		height: calc(100dvh - 240px) !important;
		max-height: calc(100vh - 240px) !important;
		max-height: calc(100dvh - 240px) !important;
	}
}

/*
 * System Requirements (extra_home/requirements)
 * Full-bleed bg, readable .req panel, no white gap / overflow
 */
@media screen and (max-width: 1024px) {
	body.requirements-page {
		min-height: 100vh !important;
		min-height: 100dvh !important;
	}

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

	body.requirements-page #site-content > .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		box-sizing: border-box !important;
		flex: 1 1 auto !important;
	}

	body.requirements-page #site-content > .container > br,
	body.requirements-page #site-content [style*="min-height:390px"] > br {
		display: none !important;
	}

	body.requirements-page #site-content [style*="min-height:390px"],
	body.requirements-page #site-content [style*="min-height: 390px"] {
		min-height: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding: 12px 0 24px 0 !important;
	}

	body.requirements-page .req {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding: 16px 14px !important;
		margin: 0 auto !important;
		overflow-wrap: anywhere !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
	}

	body.requirements-page .req h1 {
		font-size: 22px !important;
		line-height: 1.3 !important;
		word-wrap: break-word !important;
	}

	body.requirements-page .req h3 {
		font-size: 16px !important;
		line-height: 1.35 !important;
		margin-top: 14px !important;
	}

	body.requirements-page .req p,
	body.requirements-page .req li,
	body.requirements-page .req strong {
		font-size: 14px !important;
		line-height: 1.45 !important;
		overflow-wrap: anywhere !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
		white-space: normal !important;
	}

	body.requirements-page .req ul,
	body.requirements-page .req ol {
		margin-left: 18px !important;
		padding-left: 4px !important;
	}

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

@media screen and (min-width: 768px) and (max-width: 1024px) {
	body.requirements-page .req {
		max-width: 720px !important;
		padding: 22px 24px !important;
	}

	body.requirements-page .req h1 {
		font-size: 26px !important;
	}

	body.requirements-page .req h3 {
		font-size: 18px !important;
	}

	body.requirements-page .req p,
	body.requirements-page .req li {
		font-size: 15px !important;
	}
}

/* Email already registered page (view_block_email_registration) */
@media screen and (max-width: 1024px) {
	.email-already-registered {
		min-height: auto !important;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px 12px 40px;
		box-sizing: border-box;
		/* fill viewport so loginbg covers with no white gap */
		min-height: calc(100vh - 48px) !important;
		min-height: calc(100dvh - 48px) !important;
	}

	.email-already-registered h4 {
		max-width: 100% !important;
		width: 100% !important;
		font-size: 16px !important;
		line-height: 1.45;
		padding: 0 8px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.email-already-registered h4 a {
		color: #fff;
		text-decoration: underline;
		word-break: break-word;
	}

	#login-body #site-content > .container > br {
		display: none;
	}
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
	.email-already-registered h4 {
		font-size: 18px !important;
		max-width: 640px !important;
	}
}

/* Desktop — restore space between terms box and I Agree / Cancel */
@media screen and (min-width: 1025px) {
	body.terms-page .terms.terms-scroll {
		margin-bottom: 20px;
	}

	body.terms-page .terms-actions {
		margin-top: 18px;
		padding-top: 12px;
	}

	body.terms-page .terms-actions center {
		padding: 10px 0 16px;
	}

	body.terms-page .terms-actions .btn {
		margin: 0 6px;
	}
}

/* KMR TEEN class-name aliases (teen site markup) */
@media screen and (max-width: 1024px) {
	body.page-terms.terms-page,
	body.page-terms {
		display: flex !important;
		flex-direction: column !important;
	}

	body.page-reg-popup.begin-reg-page .begin-reg-box,
	body.page-reg-popup .terms.begin-reg-box,
	body.page-reg-popup .terms {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	body.page-registration-payment.payment-page .login-box,
	body.page-registration-payment .login-box {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		box-sizing: border-box;
	}

	body.page-registration-regular #site-content > .container,
	body.page-preview-registration #site-content > .container,
	body.page-registration-regular .registration-page-wrap,
	body.page-preview-registration .registration-page-wrap {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		box-sizing: border-box;
	}

	body.page-reg-email-exists .reg-email-exists-box,
	body.page-reg-email-exists .email-already-registered {
		min-height: auto !important;
		width: 100%;
		box-sizing: border-box;
	}

	body.page-terms .terms-form-actions,
	body.page-terms .terms-actions {
		text-align: center;
	}

	body.page-terms .terms-form-actions .btn,
	body.page-terms .terms-actions .btn {
		margin: 6px;
	}
}