.warning.error-modern::before {
	content: '';
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 0;
	width: 4px;
	border-radius: 0;
	background: linear-gradient(180deg, #ef4444, #b91c1c);
}
:root {
	--primary-color: #facc15;
	--primary-hover-color: #d1d5db;
	--background-color: #1a3a5c;
	--form-background-color: #1a3a5c;
	--card-background: rgba(255,255,255,1);
	--text-color: #f4f6fb;
	--muted-text-color: #bfc9d9;
	--subtle-text-color: #a9b4c8;
	--border-color: rgba(255,255,255,0.08);
	--input-background: rgba(255,255,255,0.04);
	--error-color: #ff6b6b;
	--branding-overlay-color: rgba(2,12,34,0.55);
	--branding-text-color: #ffffff;
	--link-sky: #38bdf8;
	--footer-height: 80px;
}

@font-face {
	font-family: 'Enviro';
	src: url('../fonts/enviro_font/regular.woff2') format('woff2'),
		 url('../fonts/enviro_font/regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Login-page specific fixed footer styles (kept here so the page can reserve space) */
.login-page .login-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 20px;
	width: 100%;
	height: var(--footer-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5rem;
	background: #001f3f; /* dark navy blue */
	border-top: 1px solid rgba(255,255,255,0.04);
	box-shadow: 0 -8px 30px rgba(2,6,23,0.35);
	z-index: 120010;
	pointer-events: auto;
}

* { margin:0; padding:0; box-sizing:border-box }
html,body { width:100%; height:100%; }
body {
	font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	background-color: var(--background-color);
	color: var(--text-color);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.5;
}

.login-wrapper { display:flex; flex-direction:column; width:100%; min-height:100vh }

.branding-panel {
	position:relative; color:var(--branding-text-color); width:100%; display:none;
}
.branding-header, .branding-content, .branding-footer { position:relative; z-index:1 }

.branding-header,
.form-branding {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	text-align: center;
	margin: 0 auto 0.5rem auto;
}

.branding-header img.logo,
.form-branding img.form-logo {
	width: 80px;
	max-width: 100%;
	height: auto;
	border-radius: 0;
	object-fit: contain;
	background: transparent;
	display: block;
}

.branding-header img.logo,
.form-branding img.form-logo,
.branding-header .logo svg,
.form-branding .form-logo svg {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	filter: none !important;
	mix-blend-mode: normal !important;
	transition: none !important;
	background: transparent;
}

.branding-header .portal-title,
.form-branding .form-title {
	font-family: 'Enviro', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	white-space: nowrap;
	letter-spacing: 0.3px;
	font-size: 1.3rem;
	font-weight: 400;
	color: #ffffff !important;
}

.branding-header .portal-title {
	font-size: 88px;
	font-weight: 400;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background: transparent;
	padding: 4px 12px;
	text-shadow: 0 2px 6px rgba(0,0,0,0.45);
	border-radius: 0;
	display: inline-block;
	line-height: 1;
}

.login-wrapper .form-branding img.form-logo {
	width: 80px !important;
	height: auto !important;
}

@media (max-width: 600px) {
	.branding-header,
	.form-branding {
		flex-direction: column;
		gap: 0.5rem;
	}
	.branding-header img.logo,
	.form-branding img.form-logo {
		width: 64px;
		height: auto;
	}
	.branding-header .portal-title {
		font-size: 50px;
		padding: 4px 10px;
	}
}

@media (min-width: 1200px) {
	.branding-header img.logo,
	.form-branding img.form-logo {
		width: 52px;
		height: auto;
	}
	.branding-header .portal-title {
		font-size: 108px;
	}
}

.branding-content h1 { font-size:4rem; font-weight:800; margin-bottom:0.5rem; color:var(--text-color) }
.branding-content p { font-size:1.05rem; max-width:520px; color:var(--muted-text-color) }
.branding-footer { font-size:0.95rem; color:var(--subtle-text-color) }

.form-panel { width:100%; max-width:520px; padding:1.5rem 2rem; display:flex; flex-direction:column; align-items:stretch; overflow:visible }
.form-header { margin-bottom:1.5rem; text-align:center; }

input[type="email"], input[type="password"], input[type="text"] {
	width:100%; padding:0.85rem 1rem; border:1px solid #d0d5dd; border-radius:0; font-size:1rem; background:#ffffff; color:#072033;
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	box-shadow: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	-webkit-text-fill-color: #072033 !important;
	background: #ffffff !important;
	transition: background-color 5000s ease-in-out 0s;
}
input::placeholder { color: #8b96a4 }
input:focus { outline:none; box-shadow: 0 0 0 3px rgba(255,202,21,0.18) }

.form-group { margin-bottom:1.1rem; width:100% }
label { display:block; margin-bottom:0.4rem; font-weight:600; color:#072033; font-size:0.95rem }

.cf-turnstile-wrap { width:100%; height:auto; margin:1.1rem 0; overflow:visible; }
.cf-turnstile-wrap.cf-revealed { width:100%; height:auto; margin:1.1rem 0; overflow:visible; }
.cf-turnstile-wrap .cf-turnstile div { display:flex; }
.cf-turnstile-wrap .cf-turnstile iframe { width:100% !important; }
.cf-turnstile-wrap.cf-challenge-shown { margin-bottom:14px; }
@media (max-width:480px) { .cf-turnstile-wrap { margin:0.75rem 0; } }

.form-card button[type="submit"],
button[type="submit"].signin-btn {
	width:100%; padding:0.85rem; background:var(--primary-color); color:#1a3a5c; border:none; border-radius:14px; font-size:1.05rem; font-weight:600; cursor:pointer; transition:background 0.15s;
}
button[type="submit"]:hover,
button[type="submit"].signin-btn:hover { background:#000000; color:#ffffff }

.forgot-password-row { text-align:center; margin-top:1rem; font-size:0.95rem; color:var(--muted-text-color); align-self:center }
.forgot-password { color:var(--link-sky); font-weight:600; text-decoration:none; transition:color 0.12s ease }
.forgot-password:hover { color:#0ea5e9; text-decoration:underline }

.forgot-password.disabled {
	color: #9aaec0;
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.6;
	text-decoration: none;
}

#otp-timer.otp-active { color: #226c20; font-weight:700; }
#otp-timer.otp-expired { color: #b00020; font-weight:700; }

.error { color:var(--error-color); background:rgba(255,107,107,0.08); padding:0.8rem; border-radius:0; text-align:center; margin-bottom:1rem }
.warning { color: var(--error-color); background: rgba(255,107,107,0.06); padding: 0.9rem 1rem; border-radius: 0; border: 1px solid rgba(255,107,107,0.12); font-weight:600; text-align:center; margin-bottom:1rem; display:block; }
.success { color:#226c20; background:#e2ffe2; padding:0.8rem; border-radius:0; text-align:center; margin-bottom:1.5rem }

.form-footer { text-align:center; padding-top:1.5rem; color:var(--muted-text-color); font-size:0.95rem }
.form-footer a { color:var(--primary-color); font-weight:700; text-decoration:none }

@media (max-width:992px) {
	.login-wrapper { flex-direction:column; height:auto }
	.branding-panel { width:100%; height:40vh; min-height:200px; padding:0.5rem 1rem }
	.branding-content, .branding-footer { display:none }
	.form-panel { width:100%; padding:1rem }
}
@media (max-width:600px) {
	.form-header h2 { font-size:1.5rem }
	input, button { font-size:0.95rem }
}

.login-wrapper { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh }
.login-wrapper .branding-panel { display:none !important }
.login-wrapper .form-panel { width:100%; max-width:520px; padding:1rem; display:flex; justify-content:center; align-items:stretch }

@media (max-width:480px) {
	.login-wrapper { padding:20px 8px }
	.login-wrapper .form-panel { padding:1rem 10px }
}

@media (max-width:420px) {
	.login-wrapper .form-panel { padding:0.75rem 8px }
	.form-group { margin-bottom:0.75rem }
	input, button { font-size:0.95rem }
}

.ajax-dots { display:inline-block; min-width:2em }
.ajax-msg { margin-left:0.5em }
.role-options { display:flex; gap:1.25rem; margin-bottom:1rem }
.role-option { display:flex; align-items:center; cursor:pointer; user-select:none }
.role-option input { display:none }
.role-option .circle { width:20px; height:20px; border-radius:0; border:2px solid rgba(11,35,64,0.20); margin-right:0.5rem; transition:all 0.18s }
.role-option input:checked + .circle { background:#28a745; border-color:#28a745 }

.nootp-center-wrap { min-height:100%; display:flex; align-items:center; justify-content:center; padding:32px; background: var(--background-color); }
.nootp-card { width:100%; max-width:420px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); box-shadow:0 10px 30px rgba(2,6,23,0.6); padding:28px; border-radius:0; color:#e6eef8 }
.nootp-field { margin-bottom:12px }
.nootp-field label { display:block; font-size:13px; color:#93a3b8; margin-bottom:6px }
.nootp-input { width:100%; padding:12px 14px; border-radius:0; border:1px solid rgba(255,255,255,0.03); background:#091022; color:#e6eef8; font-size:14px; box-sizing:border-box }

#otp-form button[disabled], button[disabled] { background:#ccc; cursor:not-allowed; opacity:0.6 }

.invalid { box-shadow: 0 0 0 3px rgba(255,99,71,0.06) inset; border-color: #ff6b6b !important }
.role-options.invalid { border: 1px solid #ff6b6b; padding: 0.5rem }

.ajax-dots .dot { display:inline-block; opacity:0.28; font-weight:900; margin:0 1px; animation: ajax-dot 1s infinite }
.ajax-dots .dot:nth-child(2) { animation-delay: .12s }
.ajax-dots .dot:nth-child(3) { animation-delay: .24s }
@keyframes ajax-dot { 0% { opacity:0.15; transform:translateY(0) } 50% { opacity:0.9; transform:translateY(-4px) } 100% { opacity:0.15; transform:translateY(0) } }

.maintenance-banner { box-sizing: border-box; padding: 10px 18px; text-align: center; font-weight: 600; font-size: 14px; position: fixed; top: 0; left: 0; right: 0; z-index: 99999; box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 0.75rem; background: #2B3445; color: #F3F4F6; border: none; border-bottom: 1px solid #3B82F6; }
.maintenance-banner.light { background: linear-gradient(90deg,#fff4e6,#fffaf0); color: #6b3f00; border: 1px solid #ffd8a8; }
.maintenance-padding { height:56px }

#floating-chat-launcher { position:fixed; bottom:32px; right:32px; z-index:9999 }
#floating-chat-launcher button#openChatBtn { background:#2563eb; color:#fff; border:none; border-radius:50%; width:60px; height:60px; box-shadow:0 2px 8px rgba(0,0,0,0.15); font-size:28px; cursor:pointer }
#floating-chat-launcher button#openChatBtn:focus { outline:none }

.nootp-card { transition: box-shadow .18s ease, transform .12s ease; position:relative }
.nootp-card:focus-within { box-shadow: 0 18px 48px rgba(2,6,23,0.7); transform: translateY(-2px) }

.nootp-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px }
.nootp-note { color:var(--muted-text-color); font-size:0.88rem }

.nootp-primary { appearance:none; -webkit-appearance:none; -moz-appearance:none; background: var(--primary-color); color:#1a3a5c; border:none; padding:12px 16px; border-radius:6px; font-weight:800; letter-spacing:0.2px; cursor:pointer; box-shadow:0 8px 20px rgba(11,35,64,0.18); transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; }
.nootp-primary:hover { transform: translateY(-2px); box-shadow:0 12px 30px rgba(11,35,64,0.22) }
.nootp-primary:active { transform: translateY(0) }
.nootp-primary:focus { outline: 3px solid rgba(255,202,21,0.18); outline-offset:2px }

.nootp-bypass { display:flex; gap:8px; align-items:center; background: rgba(6,95,70,0.06); color:#065f46; padding:8px 10px; border-radius:6px; font-size:0.95rem; border:1px solid rgba(6,95,70,0.08) }
.nootp-bypass svg { flex:0 0 auto }

.error-box { color:var(--error-color); background: rgba(255,107,107,0.08); padding:10px 12px; border-radius:0; border:1px solid rgba(255,107,107,0.14); margin-bottom:12px; font-weight:600; text-align:center }
.warning.error-modern {
	background: #fff4e6;
	border: 1px solid #ffd8a8;
	color: #b54708;
	padding: 12px 16px;
	border-radius: 0;
	font-weight: 600;
	margin-bottom: 1.25rem;
	text-align: center;
	box-shadow: 0 2px 8px rgba(255,202,21,0.08);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	justify-content: center;
	font-size: 1.04rem;
}
.form-card .error-box,
.form-card .error,
.form-card .success {
	text-align: center !important;
	margin-left: auto;
	margin-right: auto;
}

.nootp-visitor-overlay { position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:center; padding:10px 0; pointer-events:auto; z-index:99999; background:transparent; width:100%; }
.nootp-geo-panel { margin:0; width:100%; max-width:100%; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:0; padding:12px 20px; box-shadow:0 8px 22px rgba(2,6,23,0.45); border:1px solid rgba(255,255,255,0.04); display:flex; gap:12px; align-items:center; pointer-events:auto; align-self:stretch; }
.nootp-geo-spinner { width:42px; height:42px; display:flex; align-items:center; justify-content:center; }
.nootp-spinner-dot { width:10px; height:10px; border-radius:50%; background:var(--primary-color); box-shadow:0 4px 12px rgba(255,202,21,0.24); animation: spin-dot 1s linear infinite }
@keyframes spin-dot { 0% { transform:scale(1) } 50% { transform:scale(0.55) } 100% { transform:scale(1) } }

.nootp-geo-content { color:var(--text-color); font-size:0.92rem; line-height:1.25 }
.nootp-geo-title { font-weight:700; margin-bottom:6px; font-size:0.95rem }
.nootp-geo-line { color:var(--muted-text-color); margin-bottom:4px }
.nootp-geo-line strong { color:var(--text-color); font-weight:700 }
.nootp-geo-actions { margin-left:auto }
.nootp-continue-btn { background:transparent; color:var(--primary-color); border:1px solid rgba(255,202,21,0.12); padding:8px 12px; border-radius:6px; cursor:pointer; font-weight:700 }
.nootp-continue-btn:hover { background:rgba(255,202,21,0.06) }

@media (max-width:420px) {
	.nootp-geo-panel { flex-direction:column; align-items:flex-start; padding:12px }
	.nootp-geo-actions { width:100%; display:flex; justify-content:flex-end }
}

@media (max-width:720px) {
	.nootp-geo-panel { padding:10px 12px; gap:8px }
	.nootp-geo-content { font-size:0.88rem }
	.nootp-geo-spinner { width:34px; height:34px }
}

input[disabled], button[disabled], .nootp-input[disabled] { opacity:0.6; cursor:not-allowed }
button[type="submit"].signin-btn[disabled] { opacity:1 }
button[type="submit"].signin-btn.loading { transition:none }

.oauth-buttons { display:flex; gap:10px; align-items:center; flex-wrap:wrap }

.oauth-btn { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:6px; font-weight:700; font-size:0.95rem; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease; box-shadow: 0 6px 18px rgba(3,12,26,0.06); }

.oauth-btn__icon { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px }
.oauth-btn__label { display:inline-block }

.oauth-google-btn { background: #fff; color: #202124; border: 1px solid #e6e6e6; }
.oauth-google-btn:hover { transform:translateY(-2px); box-shadow: 0 10px 28px rgba(3,12,26,0.08) }

.oauth-apple-btn { background: #111; color: #fff; border: 1px solid rgba(255,255,255,0.06); }
.oauth-apple-btn:hover { transform:translateY(-2px); box-shadow: 0 10px 28px rgba(3,12,26,0.12) }

.oauth-btn.disabled { opacity:0.6; cursor:not-allowed; pointer-events:none; filter:grayscale(6%) }

.oauth-google-btn .oauth-btn__icon { background:transparent }
.oauth-apple-btn .oauth-btn__icon { background:transparent }

.html, body { height:100%; margin:0 }
.login-wrapper { display:flex; flex-direction:column; min-height:100vh }
.login-wrapper.solo { align-items:center; justify-content:center }
.branding-panel { display:block }

/* Reduce the vertical gap above the site title on the solo login page
   by anchoring the branding panel towards the top and adding modest
   top padding. This nudges the title and form upward on tall viewports. */
.login-wrapper.solo .branding-panel {
	justify-content: flex-start;
	padding: 1.5rem 4rem 0.5rem;
}
.form-panel { width:100%; max-width:520px; padding:1rem; box-sizing:border-box }
.form-card { background:#ffffff; padding:1rem; border-radius:0; box-sizing:border-box }
.form-branding img { max-width:240px; height:auto; display:block }

.maintenance-banner.small { padding:0.5rem }
.maintenance-banner .mb-text { flex:1 }
.maintenance-banner .mb-actions { display:flex; gap:0.5rem; align-items:center }
.maintenance-banner .mb-dismiss { background:transparent; border:0; color:inherit; font-weight:600; cursor:pointer }
.maintenance-banner .mb-icon { font-size:1.15rem }
.maintenance-banner.hidden { display:none !important }

.login-wrapper > .branding-panel { display: none !important }
.branding-header img.logo,
.form-branding img.form-logo { border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }

.container .section { border:1px solid #eef2f7; border-radius:0; margin-top:12px; overflow:hidden; background:#fff; }
.container .accordion-btn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:10px 12px; background:transparent; border:0; text-align:left; font-weight:600; color:#0f172a; cursor:pointer; font-size:1rem; }
.container .accordion-btn:hover { background:#f8fafc; }
.container .accordion-btn .chev { transition: transform 200ms ease; color:#475569; margin-left:10px; }
.container .section .content { padding:0 12px 12px 12px; max-height:0; overflow:hidden; transition: max-height 260ms ease, opacity 180ms ease; }
.container .section.open .content { max-height: min(60vh, 1200px); overflow:auto; -webkit-overflow-scrolling: touch; }
.container .section.open .accordion-btn .chev { transform: rotate(180deg); }

.container p { margin:0 0 0.6rem 0; }
.container .muted { color:#64748b; font-size:0.85rem; margin-bottom:8px; }

.privacy-panel .section, #privacyPanel .section { border:1px solid #eef2f7; border-radius:0; margin-top:12px; overflow:hidden; background:#fff; }
.privacy-panel .accordion-btn, #privacyPanel .accordion-btn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:10px 12px; background:transparent; border:0; text-align:left; font-weight:600; color:#0f172a; cursor:pointer; font-size:1rem; }
.privacy-panel .accordion-btn:hover, #privacyPanel .accordion-btn:hover { background:#f8fafc; }
.privacy-panel .accordion-btn .chev, #privacyPanel .accordion-btn .chev { transition: transform 200ms ease; color:#475569; margin-left:10px; }
.privacy-panel .section .content, #privacyPanel .section .content { padding:0 12px 12px 12px; max-height:0; overflow:hidden; transition: max-height 260ms ease, opacity 180ms ease; }
.privacy-panel .section.open .content, #privacyPanel .section.open .content { max-height: min(60vh, 1200px); overflow:auto; -webkit-overflow-scrolling: touch; }
.privacy-panel .section.open .accordion-btn .chev, #privacyPanel .section.open .accordion-btn .chev { transform: rotate(180deg); }
.privacy-panel p, #privacyPanel p { margin:0 0 0.6rem 0; }
.privacy-panel .muted, #privacyPanel .muted { color:#64748b; font-size:0.85rem; margin-bottom:8px; }
/* Cookie styles removed per request */

/* Branding header layout */
.branding-header { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.branding-header .logo { display: block; }
.portal-title { position: relative; display: inline-block; z-index: 2; }

.privacy-panel .body, #privacyPanel .body { display:flex; flex-direction:column; min-height:100%; box-sizing:border-box; padding:16px; }
.privacy-panel .body > .container, #privacyPanel .body > .container { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.privacy-panel .body .footer, #privacyPanel .body .footer { margin-top:auto; padding-top:10px; }

.privacy-panel .accordion-btn, #privacyPanel .accordion-btn { font-size:1.06rem; padding:14px 16px; min-height:54px; align-items:center; }
.privacy-panel .section, #privacyPanel .section { display:flex; flex-direction:column; }
.privacy-panel .section .content, #privacyPanel .section .content { flex:0 0 auto; }

.privacy-panel .section .accordion-btn, #privacyPanel .section .accordion-btn { display:flex; align-items:center; }

.branding-header .portal-title,
.form-branding .form-title,
.branding-header .portal-title *,
.form-branding .form-title * {
	color: #ffffff !important;
	fill: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

input[type="password"] {
	padding-right: 2.4rem !important;
}

.form-title {
	color: #ffffff !important;
}

/* Login-page-specific footer: always visible and not scrollable */
/* Reserve exact footer height for page content so it never overlaps */
.login-page .login-wrapper { padding-bottom: var(--footer-height); }
.login-page .login-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 20px;
	width: 100%;
	height: var(--footer-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5rem;
	background: linear-gradient(180deg, rgba(11,35,64,0.98), rgba(10,30,56,0.98));
	border-top: 1px solid rgba(255,255,255,0.04);
	box-shadow: 0 -8px 30px rgba(2,6,23,0.35);
	/* keep footer above overlays so banners can slide in from behind it */
	z-index: 120010;
	pointer-events: auto;
	touch-action: manipulation;
	transform: none !important;
	transition: none !important;
}

@media (max-width: 480px) {
	/* Make footer flow naturally on small screens and stack links vertically.
	   Reserve space equal to the footer height so fixed/overlayed footers
	   or cookie banners don't cover the primary action button. */
 	.login-page .login-wrapper { padding-bottom: calc(var(--footer-height, 80px) + env(safe-area-inset-bottom, 0px)) !important; }
 	.login-page .login-footer {
 		position: static;
 		width: 100%;
 		height: auto;
 		padding: 1rem 1rem;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		gap: 0.5rem;
 		box-shadow: none;
 		border-top: 1px solid rgba(255,255,255,0.04);
 	}

	/* Ensure links and items inside footer stack vertically and are easy to tap */
	.login-page .login-footer > * { width: 100%; text-align: center; }
	.login-page .login-footer a { display: inline-block; width: 100%; padding: 6px 0; }

	/* Hide Terms of Use link on small screens (third item in footer-links) */
	.login-page .login-footer .footer-links .footer-link:nth-child(3) { display: none; }

	/* Make the overall login layout mobile-friendly: center form, hide large branding */
	.login-wrapper { flex-direction: column; align-items: center; min-height: auto; }
	.branding-panel { display: none !important; }
	.form-panel { width:100%; max-width:520px; margin: 0 auto; padding: 1rem; box-sizing: border-box; }

	/* Ensure form controls are large enough to tap */
	input[type="email"], input[type="password"], button[type="submit"] { font-size: 1rem; padding: 0.7rem 0.85rem; }

	/* Reduce footer typography for better fit */
	.login-page .login-footer { font-size: 0.95rem; }

}

/* Strictly hide Terms of Use on non-desktop viewports (mobile/tablet) */
@media (max-width: 1024px) {
    .login-page .login-footer .footer-links .footer-link:nth-child(3) { display: none !important; }
}

/* Increase space between page content and fixed footer so form sits higher */
@media (min-width: 720px) {
	.login-page .login-wrapper {
		/* add 24px extra gap on top of the reserved footer height; fallback to 80px if --footer-height is missing */
		padding-bottom: calc(var(--footer-height, 80px) + 24px) !important;
	}
}