.warning.error-modern::before {
	content: '';
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 0;
	width: 4px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ef4444, #b91c1c);
}
:root {
	--primary-color: #FFC924;
	--primary-hover-color: #e0b21e;
	--background-color: #0b2340;
	--form-background-color: #0f2542;
	--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:row; width:100%; min-height:100vh }

.branding-panel {
	position:relative; color:var(--branding-text-color); width:65%; display:flex; flex-direction:column; justify-content:center;
	padding: 0 4rem 0.5rem;
	overflow:hidden; z-index:0; background:linear-gradient(180deg, var(--form-background-color), #0b2a4a 80%);
}
.branding-header, .branding-content, .branding-footer { position:relative; z-index:1 }

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

.branding-header img.logo,
.form-branding img.form-logo {
	width: 100px;
	max-width: 100%;
	height: auto;
	border-radius: 0;
	object-fit: contain;
	box-shadow: 0 8px 32px rgba(3, 12, 26, 0.22);
	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.4px;
}

.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: 8px;
	display: inline-block;
	line-height: 1;
	box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;
}

.form-branding .form-title {
	font-size: 36px;
	font-weight: 400;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background: transparent;
	padding: 0;
	border-radius: 4px;
}

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

.login-wrapper.solo .form-branding .form-title {
	font-size: 1.7rem !important;
}

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

@media (min-width: 1200px) {
	.branding-header img.logo,
	.form-branding img.form-logo {
		width: 120px;
		height: auto;
	}
	.branding-header .portal-title {
		font-size: 108px;
	}
	.form-branding .form-title {
		font-size: 42px;
	}
	.branding-panel { width:62% }
	.form-panel { width:38% }
}

.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:35%; padding:0.75rem 3rem; display:flex; flex-direction:column; justify-content:center; align-items:stretch; overflow:visible }
.form-header { margin-bottom:1rem }
.form-header h2 { font-size:1.6rem; font-weight:700; color:#0b2340 }
.form-header .subtitle { display:none; color:var(--subtle-text-color); margin-top:0.5rem }

.form-card {
	background: var(--card-background);
	color: #072033;
	padding: 2.25rem;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(3,12,26,0.35);
	width:100%;
	backdrop-filter: blur(6px);
}

input[type="email"], input[type="password"], input[type="text"] {
	width:100%; padding:0.98rem 1rem; border:1px solid var(--border-color); border-radius:10px; font-size:1.02rem; background:var(--input-background); color:var(--text-color);
}
input::placeholder { color: rgba(255,255,255,0.45) }
input:focus { outline:none; border-color: rgba(255,193,36,0.9); box-shadow: 0 6px 18px rgba(11,35,64,0.45) }

.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="text"],
.form-card textarea,
.form-card select {
	background: #fff8ef;
	color: #072033;
	border: 1px solid #efe6dd;
	box-shadow: none;
}
.form-card input::placeholder, .form-card textarea::placeholder { color:#8b96a4 }

.form-group { margin-bottom:1.5rem }
label { display:block; margin-bottom:0.5rem; font-weight:600 }

.form-row { display:flex; gap:1rem; }
.form-row .form-group { flex:1; margin-bottom:1rem; min-width:0; }
@media (max-width:600px) {
	.form-row { flex-direction:column; }
}

.form-card button[type="submit"] {
	width:100%; padding:1rem; background:var(--primary-color); color:#072033; border:none; border-radius:10px; font-size:1.06rem; font-weight:700; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; box-shadow:0 6px 18px rgba(11,35,64,0.25);
}
.form-card button[type="submit"]:hover { background:var(--primary-hover-color); transform:translateY(-1px); box-shadow:0 10px 28px rgba(11,35,64,0.28) }

.actions { display:flex; justify-content:flex-end; margin-bottom:1.5rem }
.forgot-password { color:var(--link-sky); font-size:0.98rem; 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:8px; text-align:center; margin-bottom:1rem }
.warning { color: var(--error-color); background: rgba(255,107,107,0.06); padding: 0.9rem 1rem; border-radius: 8px; 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:8px; 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:2rem }
}
@media (max-width:600px) {
	.form-header h2 { font-size:1.5rem }
	input, button { font-size:0.95rem }
}

.login-wrapper.solo { flex-direction:column; align-items:center; justify-content:center; min-height:100vh }
.login-wrapper.solo .branding-panel { display:none !important }
.login-wrapper.solo .form-panel { width:100%; max-width:720px; padding:2rem 1.25rem; display:flex; justify-content:center; align-items:center }
.login-wrapper.solo .form-card { width:100%; padding:2rem; border-radius:12px; box-shadow:0 12px 40px rgba(3,12,26,0.42); max-width:720px }
.login-wrapper.solo label { font-size:1.02rem }
.login-wrapper.solo input, .login-wrapper.solo button { font-size:1.02rem }
.login-wrapper.solo .form-header h2 { font-size:1.6rem; margin-bottom:0.5rem }

@media (max-height:740px) {
	.login-wrapper.solo .form-panel { padding:1rem; }
	.login-wrapper.solo .form-card { padding:1rem; }
	.login-wrapper.solo .form-panel { max-height: none; }
	.login-wrapper.solo .form-card { max-height: none; overflow: visible; }
}

@media (max-width:420px) {
	.login-wrapper.solo .form-panel { padding:0.75rem }
	.login-wrapper.solo .form-card { padding:0.9rem }
	.form-group { margin-bottom:1rem }
	label { font-size:0.98rem }
	input, button { font-size:0.98rem }
}

.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:50%; 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:12px; 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:8px; 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: 12px 16px; text-align: center; font-weight: 600; 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: #0b3d91; color: #fff; border: none; }
.maintenance-banner.light { background: linear-gradient(90deg,#fff4e6,#fffaf0); color: #6b3f00; border: 1px solid #ffd8a8; }
.maintenance-padding { height:68px }

#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: linear-gradient(180deg, var(--primary-color), var(--primary-hover-color)); color:#072033; border:none; padding:12px 16px; border-radius:10px; 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,193,36,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:8px; 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:8px; 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: 8px;
	font-weight: 600;
	margin-bottom: 1.25rem;
	text-align: center;
	box-shadow: 0 2px 8px rgba(255,193,36,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,193,36,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,193,36,0.12); padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:700 }
.nootp-continue-btn:hover { background:rgba(255,193,36,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 }

.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:10px; 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:780px; padding:1rem; box-sizing:border-box }
.form-card { background:#ffffff; padding:1rem; border-radius:8px; 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.solo > .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; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.container .section { border:1px solid #eef2f7; border-radius:8px; 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:8px; 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; align-items: center; gap: 12px; 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;
	-webkit-tap-highlight-color: rgba(255,255,255,0) !important;
}

/* Restore native password reveal control if other global CSS removed it */
.form-card input[type="password"], input[type="password"] {
	-webkit-appearance: auto !important;
	-moz-appearance: auto !important;
	appearance: auto !important;
	/* allow native decorations to be shown */
	overflow: visible !important;
	/* reserve space so browser toggle isn't clipped */
	padding-right: 2.4rem !important;
	background-clip: padding-box !important;
}

/* Some browsers (IE/Edge) expose reveal/clear pseudo-elements — ensure they're visible */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
	display: block !important;
}

/* WebKit-based browsers may hide decorations via vendor rules; ensure default decorations allowed */
input[type="password"]::-webkit-textfield-decoration {
	display: initial !important;
}

/* Blink/WebKit password toggle (best-effort selectors) */
input[type="password"]::-webkit-password-inner-caret,
input[type="password"]::-webkit-password-toggle-button {
	display: block !important;
}

[class*="portal-title"], [class*="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: stretch; min-height: auto; }
	.branding-panel { display: none !important; }
	.form-panel { width: 100%; max-width: 520px; margin: 0 auto; padding: 1rem; box-sizing: border-box; }
	.form-card { width: 100%; max-width: 520px; margin: 0 auto; padding: 1rem; border-radius: 10px; box-shadow: 0 8px 20px rgba(2,6,23,0.45); }
	.form-header h2 { font-size: 1.4rem; text-align: center; }
	.form-footer { text-align: center; }

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

	/* 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;
	}
}