/**
 * KMD Auth — The two built-in layout templates.
 */

/*
 * Template 1: Split Testimonial — a literal port of an imported reference
 * design ("SoftQA"). Colors/spacing/type below match the source exactly
 * (kept as oklch() to preserve its exact palette); only the copy is
 * dynamic (MarketingContent/Wording), and the form itself is the plugin's
 * real, functional shared component set, restyled to match the source.
 */
.kmd-layout--testimonial {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	background: oklch( 0.96 0.006 250 );
	font-family: "Plus Jakarta Sans", var( --kmd-font-family );
}

.kmd-layout--testimonial .kmd-layout__form-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 64px;
}

.kmd-layout--testimonial .kmd-layout__form-inner {
	width: 100%;
	max-width: 400px;
}

.kmd-layout--testimonial .kmd-logo--text .kmd-logo__mark {
	background: oklch( 0.32 0.05 195 );
	border-radius: 10px;
}

.kmd-layout--testimonial .kmd-logo__name {
	color: oklch( 0.25 0.02 230 );
}

.kmd-layout--testimonial .kmd-heading {
	font-size: 26px;
	font-weight: 700;
	color: oklch( 0.22 0.02 230 );
	margin-bottom: 10px;
}

.kmd-layout--testimonial .kmd-subtitle {
	font-size: 14px;
	color: oklch( 0.5 0.01 230 );
	line-height: 1.5;
	max-width: 340px;
}

.kmd-layout--testimonial .kmd-field__label {
	font-size: 13px;
	font-weight: 600;
	color: oklch( 0.3 0.02 230 );
}

.kmd-layout--testimonial .kmd-field__input {
	border: 1.5px solid oklch( 0.85 0.005 230 );
	border-radius: 8px;
	padding: 11px 14px;
}

.kmd-layout--testimonial .kmd-field__input:focus {
	border-color: oklch( 0.45 0.08 195 );
	box-shadow: none;
}

.kmd-layout--testimonial .kmd-link {
	color: oklch( 0.45 0.09 195 );
}

.kmd-layout--testimonial .kmd-btn--primary {
	background: oklch( 0.3 0.05 195 );
	border-radius: 8px;
}

.kmd-layout--testimonial .kmd-btn--primary:hover {
	background: oklch( 0.26 0.05 195 );
	filter: none;
}

.kmd-layout--testimonial .kmd-divider__label {
	color: oklch( 0.6 0.01 230 );
}

.kmd-layout--testimonial .kmd-divider::before,
.kmd-layout--testimonial .kmd-divider::after {
	background: oklch( 0.9 0.003 230 );
}

.kmd-layout--testimonial .kmd-oauth-btn {
	border-color: oklch( 0.88 0.005 230 );
	border-radius: 8px;
	color: oklch( 0.3 0.02 230 );
}

.kmd-layout--testimonial .kmd-oauth-btn:not(:disabled):hover {
	background: oklch( 0.97 0.003 230 );
}

.kmd-layout--testimonial .kmd-footer-links {
	color: oklch( 0.5 0.01 230 );
}

.kmd-marketing--testimonial {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 56px 64px;
	color: #f3f4f6;
	background-image: linear-gradient( 160deg, oklch( 0.28 0.045 195 ), oklch( 0.16 0.03 210 ) );
}

.kmd-marketing__heading {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 600;
	color: #fff;
	max-width: 380px;
	margin-bottom: 20px;
}

.kmd-marketing__quote-mark {
	font-size: 34px;
	line-height: 0;
	color: oklch( 0.6 0.03 195 );
	margin-bottom: 6px;
}

.kmd-marketing__quote {
	font-size: 14.5px;
	line-height: 1.6;
	color: oklch( 0.85 0.01 195 );
	max-width: 380px;
	margin-bottom: 20px;
}

.kmd-marketing__testimonial {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kmd-marketing__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.kmd-marketing__avatar--placeholder {
	background: oklch( 0.5 0.04 195 );
}

.kmd-marketing__testimonial-name {
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
}

.kmd-marketing__testimonial-role {
	font-size: 12px;
	color: oklch( 0.7 0.02 195 );
}

.kmd-marketing__logos-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: oklch( 0.65 0.02 195 );
	font-weight: 600;
	text-transform: uppercase;
}

.kmd-marketing__logos-rule {
	flex: 1;
	height: 1px;
	background: oklch( 0.4 0.03 195 );
}

.kmd-marketing__logos-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 14px 20px;
}

.kmd-marketing__logo {
	font-size: 13px;
	font-weight: 600;
	color: oklch( 0.75 0.015 195 );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media ( max-width: 960px ) {
	.kmd-layout--testimonial {
		grid-template-columns: 1fr;
	}

	.kmd-marketing--testimonial {
		display: none;
	}

	.kmd-marketing__logos-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/*
 * Template 2: Aurora Serif — a literal port of an imported reference
 * design ("Cogie"): near-black card, animated aurora blur, serif quote on
 * the left; minimalist black/white serif-heading form on the right.
 */
.kmd-layout--aurora {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	padding: 12px;
	box-sizing: border-box;
	gap: 0;
	background: #fff;
}

.kmd-marketing--aurora {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 56px 64px;
	min-height: 320px;
	border-radius: 20px;
}

.kmd-aurora__blur {
	position: absolute;
	inset: -20%;
	filter: blur( 40px );
	animation: kmd-aurora-shift 18s ease-in-out infinite;
	background:
		radial-gradient( circle at 25% 30%, oklch( 0.6 0.25 340 / 0.9 ), transparent 45% ),
		radial-gradient( circle at 70% 20%, oklch( 0.65 0.22 300 / 0.85 ), transparent 45% ),
		radial-gradient( circle at 60% 70%, oklch( 0.55 0.2 250 / 0.85 ), transparent 50% ),
		radial-gradient( circle at 20% 75%, oklch( 0.6 0.22 200 / 0.7 ), transparent 50% );
}

@keyframes kmd-aurora-shift {
	0% { transform: translate( -5%, -5% ) rotate( 0deg ); }
	50% { transform: translate( 5%, 3% ) rotate( 8deg ); }
	100% { transform: translate( -5%, -5% ) rotate( 0deg ); }
}

.kmd-marketing__illustration {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kmd-aurora__eyebrow {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	color: oklch( 0.9 0.01 90 );
	font-size: 11px;
	letter-spacing: 0.12em;
	font-weight: 600;
	text-transform: uppercase;
}

.kmd-aurora__rule {
	width: 60px;
	height: 1px;
	background: oklch( 0.6 0.01 90 );
}

.kmd-aurora__content {
	position: relative;
}

.kmd-aurora__heading {
	font-family: "Source Serif 4", var( --kmd-font-family-serif, Georgia, serif );
	font-size: 38px;
	font-weight: 600;
	color: #fff;
	line-height: 1.1;
	margin-bottom: 14px;
}

.kmd-aurora__description {
	font-family: "Work Sans", var( --kmd-font-family );
	font-size: 13.5px;
	color: oklch( 0.82 0.01 90 );
	max-width: 300px;
	line-height: 1.5;
}

.kmd-layout__form-panel--aurora {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 64px;
	font-family: "Work Sans", var( --kmd-font-family );
}

.kmd-layout__form-panel--aurora .kmd-layout__form-inner {
	width: 100%;
	max-width: 340px;
}

.kmd-layout--aurora .kmd-heading,
.kmd-layout--aurora .kmd-subtitle,
.kmd-layout--aurora .kmd-logo {
	text-align: center;
	justify-content: center;
}

.kmd-layout--aurora .kmd-heading {
	font-family: "Source Serif 4", var( --kmd-font-family-serif, Georgia, serif );
	font-size: 32px;
	color: #000;
}

.kmd-layout--aurora .kmd-subtitle {
	font-size: 13px;
	color: oklch( 0.5 0.005 90 );
}

.kmd-layout--aurora .kmd-logo--text .kmd-logo__mark {
	background: transparent;
	border: 2px solid #000;
	border-radius: 50%;
	color: transparent;
}

.kmd-layout--aurora .kmd-logo__name {
	font-family: "Source Serif 4", serif;
	color: #000;
}

.kmd-layout--aurora .kmd-field__label {
	font-size: 12.5px;
	font-weight: 500;
	color: oklch( 0.3 0.005 90 );
}

.kmd-layout--aurora .kmd-field__input {
	border: 1px solid oklch( 0.9 0.003 90 );
	background: oklch( 0.97 0.002 90 );
	border-radius: 8px;
	padding: 11px 14px;
	font-size: 13.5px;
}

.kmd-layout--aurora .kmd-field__input:focus {
	border-color: #000;
	box-shadow: none;
}

.kmd-layout--aurora .kmd-checkbox__input:checked + .kmd-checkbox__box {
	background: #000;
	border-color: #000;
}

.kmd-layout--aurora .kmd-link {
	color: oklch( 0.35 0.005 90 );
}

.kmd-layout--aurora .kmd-btn--primary {
	background: #000;
	border-radius: 8px;
}

.kmd-layout--aurora .kmd-btn--primary:hover {
	background: oklch( 0.25 0 0 );
	filter: none;
}

.kmd-layout--aurora .kmd-oauth-btn {
	border-color: oklch( 0.88 0.003 90 );
	border-radius: 8px;
	color: #000;
}

.kmd-layout--aurora .kmd-oauth-btn:not(:disabled):hover {
	background: oklch( 0.97 0.002 90 );
}

.kmd-layout--aurora .kmd-footer-links {
	font-size: 12.5px;
	color: oklch( 0.5 0.005 90 );
}

.kmd-layout--aurora .kmd-footer-links__item {
	color: #000;
	font-weight: 600;
}

@media ( max-width: 960px ) {
	.kmd-layout--aurora {
		grid-template-columns: 1fr;
		padding: 0;
	}

	.kmd-marketing--aurora {
		border-radius: 0;
	}
}

/* Shortcode-embedded full-viewport takeover */
.kmd-auth--embedded {
	position: fixed;
	inset: 0;
	z-index: 999999;
	overflow: auto;
}