/* ------------------------------------------------------------------ *
 * Hub Login page: two-column split layout + right-hand showcase panel.
 *
 * The two columns themselves are genuine Elementor Containers (built by
 * knc_hub_build_login_layout() in includes/elementor-layout.php) - this
 * file only refines spacing/typography inside them (#knc-login-split /
 * #knc-login-left / #knc-login-right are the Containers' own Custom IDs)
 * and styles the [knc_login_showcase] panel's markup, which Elementor has
 * no native controls for. assets/css/hub-login.css still owns the actual
 * form field styling (inputs, buttons, error banner) - untouched here, so
 * the same login form looks right whether it's inside this layout or the
 * older single-column "chrome=full" card.
 * ------------------------------------------------------------------ */

#knc-login-split {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	min-height: 640px;
	box-sizing: border-box;
	overflow: hidden;
}

#knc-login-split,
#knc-login-split * {
	box-sizing: border-box;
}

/* Elementor Container children don't split 50/50 on their own (each one
   sizes to its own content unless told otherwise) - this is what actually
   makes the two columns an even split on desktop; the <=1024px media query
   further down resets both back to 100% once the split container itself
   has switched to a single column. */
#knc-login-left,
#knc-login-right {
	flex: 1 1 50%;
	max-width: 50%;
}

/* ---- Left column: logo / heading / intro / form ---- */

#knc-login-left {
	background: #ffffff;
}

#knc-login-left > .elementor-container,
#knc-login-left > .e-con-inner {
	width: 100%;
}

#knc-login-logo-widget img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 0 20px;
}

#knc-login-left .elementor-heading-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.2;
	color: #0f172a;
	margin: 0 0 10px;
	text-align: left;
}

#knc-login-left .elementor-widget-text-editor p {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #0f172a;
	margin: 0 0 30px;
	max-width: 420px;
}

/* Give the bare form ("chrome=form") a sensible max width so it doesn't
   stretch full-bleed on wide desktop left columns. */
#knc-login-left .knc-login-form--standalone {
	max-width: 420px;
}

#knc-login-left .knc-login-error {
	max-width: 420px;
}

/* Cover both "forgotten password" and "forgotten username" without a
   second, redundant link - see includes/authentication.php. */
#knc-login-left .knc-forgot-link {
	white-space: normal;
}

/* ---- Right column: showcase panel ---- */

#knc-login-right {
	position: relative;
	background: #0e7c86;
	min-height: 100%;
}

#knc-login-right > .elementor-container,
#knc-login-right > .e-con-inner,
#knc-login-right .elementor-widget-shortcode,
#knc-login-right .elementor-widget-container,
#knc-login-right .elementor-shortcode {
	height: 100%;
}

.knc-login-showcase {
	position: relative;
	height: 100%;
	min-height: 560px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 48px;
	background: linear-gradient(135deg, #0e7c86 0%, #0f6f61 55%, #16a34a 100%);
	overflow: hidden;
	font-family: 'Poppins', sans-serif;
}

.knc-login-showcase-blob {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.knc-login-showcase-blob--a {
	width: 320px;
	height: 320px;
	top: -100px;
	right: -90px;
}

.knc-login-showcase-blob--b {
	width: 220px;
	height: 220px;
	bottom: -80px;
	left: -60px;
	background: rgba(255, 255, 255, 0.06);
}

.knc-login-showcase-content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 460px;
	color: #ffffff;
}

.knc-login-showcase-heading {
	font-size: 27px;
	font-weight: 800;
	line-height: 1.28;
	margin: 0 0 12px;
	color: #ffffff;
}

.knc-login-showcase-sub {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	margin: 0 0 28px;
}

/* "Device frame" mini browser mockup */

.knc-login-showcase-frame {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 20px 45px rgba(6, 40, 36, 0.35);
	overflow: hidden;
	margin-bottom: 28px;
}

.knc-login-showcase-frame-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: #f1f5f4;
	border-bottom: 1px solid #e2e8e7;
}

.knc-login-showcase-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cbd5d1;
	display: inline-block;
}

.knc-login-showcase-frame-url {
	margin-left: 8px;
	font-size: 11px;
	color: #64766f;
	background: #ffffff;
	border-radius: 6px;
	padding: 3px 10px;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.knc-login-showcase-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	padding: 16px;
}

.knc-login-showcase-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	border-radius: 12px;
	padding: 14px 12px;
	background: #f8fafc;
}

.knc-login-showcase-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.65);
}

.knc-login-showcase-card-label {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #0f172a;
}

.knc-login-showcase-card--green {
	background: #e6f5eb;
}
.knc-login-showcase-card--green .knc-login-showcase-icon {
	color: #0f7a38;
}

.knc-login-showcase-card--gold {
	background: #fbf0dc;
}
.knc-login-showcase-card--gold .knc-login-showcase-icon {
	color: #a66b04;
}

.knc-login-showcase-card--teal {
	background: #e1f2f1;
}
.knc-login-showcase-card--teal .knc-login-showcase-icon {
	color: #0a5f67;
}

.knc-login-showcase-card--violet {
	background: #eee6fa;
}
.knc-login-showcase-card--violet .knc-login-showcase-icon {
	color: #6b3aae;
}

/* Trust stats row */

.knc-login-showcase-stats {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
}

.knc-login-showcase-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.knc-login-showcase-stat strong {
	font-size: 20px;
	font-weight: 800;
	color: #ffffff;
}

.knc-login-showcase-stat span {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------------ *
 * Responsive: stack the two columns from tablet width down (Elementor's
 * own flex_direction_tablet/flex_direction_mobile settings on the
 * #knc-login-split container already do the actual stacking - see
 * knc_hub_build_login_layout() - this just fixes up sizing/spacing so
 * nothing looks like a half-width leftover once it's a single column).
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	#knc-login-split {
		min-height: 0;
	}

	#knc-login-left,
	#knc-login-right {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: 100% !important;
	}

	.knc-login-showcase {
		min-height: 420px;
		padding: 44px 28px;
	}
}

@media (max-width: 600px) {
	#knc-login-logo-widget img {
		width: 52px;
		height: 52px;
	}

	#knc-login-left .elementor-heading-title {
		font-size: 25px;
	}

	.knc-login-showcase {
		padding: 36px 20px 40px;
		min-height: 380px;
	}

	.knc-login-showcase-heading {
		font-size: 22px;
	}

	.knc-login-showcase-frame {
		margin-bottom: 22px;
	}

	.knc-login-showcase-grid {
		gap: 8px;
		padding: 12px;
	}

	.knc-login-showcase-stats {
		gap: 18px;
	}
}