:root {
	--brand-50:  #eef6fb;
	--brand-100: #d6e9f4;
	--brand-200: #aed3e9;
	--brand-300: #7fb8d9;
	--brand-400: #519cc7;
	--brand-500: #2d82b5;
	--brand-600: #246a96;
	--brand-700: #1d5578;
	--brand-800: #18445f;
	--brand-900: #13374d;
}

* { box-sizing: border-box; }

li {
	margin-top: 20px;
	list-style: none
}

a:focus-visible {
	border: 2px solid var(--brand-500);
}

html, body { height: 100%; }

body {
	margin: 0;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #1e293b;
	background: #fff;
	overflow-x: hidden;
}

/* ---- Page / panel shell -----------------------------------------------------
	Flat, edge-to-edge split screen - no floating "card" (no radius/shadow/margin
	setting it apart from the page). .ss-login-card fills the viewport height and
	only grows taller if content genuinely needs more room, so a short window
	scrolls normally instead of clipping content off the top. */
.ss-login-page { width: 100%; }

.ss-login-card {
	display: flex;
	min-height: 100vh;
	min-height: 100dvh;
}

.ss-login-panel-left {
	flex: 1 1 54%;
	min-width: 0;
	background: #fff;
	padding: 56px 48px 32px;
	display: flex;
}

/* Keeps form content a comfortable reading width and centered within its half,
	instead of stretching edge-to-edge on wide monitors. */
.ss-login-panel-inner {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 40px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ss-login-panel-right {
	flex: 1 1 46%;
	position: relative;
	background: radial-gradient(120% 120% at 15% 10%, var(--brand-400) 0%, var(--brand-500) 45%, var(--brand-700) 100%);
	color: #fff;
	padding: 56px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

.ss-login-panel-right::before,
.ss-login-panel-right::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
}
.ss-login-panel-right::before { width: 320px; height: 320px; top: -90px; right: -90px; }
.ss-login-panel-right::after  { width: 220px; height: 220px; bottom: -70px; left: -50px; background: rgba(255, 255, 255, .06); }

@media (max-width: 991.98px) {
	.ss-login-panel-right { display: none; }
	.ss-login-panel-left { padding: 40px 32px; }
}

/* ---- Phones ------------------------------------------------------------------- */
@media (max-width: 575.98px) {
	.ss-login-panel-left { padding: 32px 20px; }
	.ss-brand-row { gap: 10px; margin-bottom: 22px; }
	.ss-brand-row img { width: 34px; height: 34px; }
	.ss-brand-name { font-size: .95rem; }
	.ss-login-title { font-size: 1.35rem; }
	.ss-login-subtitle { font-size: .85rem; margin-bottom: 20px; }
}

/* reCAPTCHA's widget is a fixed ~304px wide iframe - narrower screens need it scaled
	down or it forces horizontal scroll on the whole page. */
@media (max-width: 400px) {
	.g-recaptcha { transform: scale(0.85); transform-origin: 0 0; }
}

/* ---- Brand lockup ----------------------------------------------------------- */
.ss-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.ss-brand-row img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--brand-50); padding: 4px; }
.ss-brand-name { font-weight: 700; font-size: 1.05rem; color: var(--brand-800); line-height: 1.2; }
.ss-about-link { font-size: .78rem; color: #94a3b8; text-decoration: none; }
.ss-about-link:hover { color: var(--brand-600); text-decoration: underline; }

.ss-login-title { font-size: 1.6rem; font-weight: 700; color: #0f2942; margin: 0 0 4px; }
.ss-login-subtitle { color: #64748b; font-size: .9rem; margin: 0 0 26px; }

/* ---- Form fields -------------------------------------------------------------- */
.ss-field { margin-bottom: 18px; }
.ss-field label { font-size: .78rem; font-weight: 600; color: #475569; margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: .03em; }
.ss-input-wrap { position: relative; }
.ss-input-wrap > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .85rem; pointer-events: none; }
.ss-input-wrap .form-control,
.ss-input-wrap .form-select { 
	padding-left: 38px;
	margin-top: 7px;
	}

.form-control, .form-select {
	background-color: #f5f7fa;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	min-height: 46px;
	font-size: .925rem;
	color: #1e293b;
}
.form-control:focus, .form-select:focus {
	background-color: #fff;
	border-color: var(--brand-500);
	outline: none;
	box-shadow: none; /* Bootstrap's own .form-control:focus sets a blue box-shadow ring by
							default - not setting this property at all (rather than to "none")
							let that still show through, since CSS falls back per-property to
							whichever matching rule declares it, not per whole rule. */
}
.ss-login-panel-left .form-text { font-size: .76rem; color: #94a3b8; margin-top: 4px; }

.ss-input-password { padding-right: 38px; }
.ss-toggle-password {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	color: #94a3b8;
	cursor: pointer;
}
.ss-toggle-password:hover { color: var(--brand-600); }

.ss-forgot-link { font-size: .78rem; font-weight: 600; color: var(--brand-600); text-decoration: none; white-space: nowrap; }
.ss-forgot-link:hover { color: var(--brand-700); text-decoration: underline; }
.ss-field-link-row { display: flex; justify-content: flex-end; margin-top: 6px; }

.btn-brand {
	width: 100%;
	background: var(--brand-500);
	border-color: var(--brand-500);
	color: #fff;
	font-weight: 600;
	border-radius: 10px;
	min-height: 48px;
	font-size: .95rem;
	margin-top: 4px;
}
.btn-brand:hover, .btn-brand:focus { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.ss-login-suberror { color: #dc2626; font-size: .85rem; }

/* ---- Social icons - plain circular icons, no button chrome, no divider label --- */
.ss-social-row { display: flex; gap: 10px; margin-top: 24px; }
.ss-social-icon {
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid #e2e8f0;
	color: #64748b;
	font-size: .95rem;
	background: #fff;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ss-social-icon:hover { color: #fff; border-color: transparent; }
.ss-social-icon.facebook:hover { background: #1877F2; }
.ss-social-icon.twitter:hover  { background: #000; }
.ss-social-icon.linkedin:hover { background: #0A66C2; }

/* "Powered by" sits alone below the form, set off by a hairline - the company
	address now lives in the right panel, next to the brand tagline. */
.ss-login-meta { margin-top: 32px; padding-top: 18px; border-top: 1px solid #eef1f5; }
.ss-login-footer { text-align: left; font-size: .74rem; color: #b7c0cc; }
.ss-login-footer img { width: 84px; vertical-align: middle; margin-left: 6px; border: 0; opacity: .85; }

/* ---- Right (brand) panel -------------------------------------------------------- */
.ss-promo-logo {
	width: 100px;
	height: 100px;
	object-fit: contain;
	background: #fff;
	border-radius: 22px;
	padding: 16px;
	margin-bottom: 26px;
	box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
	position: relative;
}
.ss-promo-title { font-size: 1.55rem; font-weight: 700; margin: 0 0 10px; position: relative; }
.ss-promo-text { font-size: .9rem; color: rgba(255, 255, 255, .85); max-width: 300px; margin: 0 auto; position: relative; }
.ss-promo-address {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .2);
	font-size: .82rem;
	color: rgba(255, 255, 255, .75);
	line-height: 1.6;
	position: relative;
}

.btn-circle {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}