/**
 * KMD Auth — UI component styles.
 */

/* Heading / Subtitle */
.kmd-heading {
	font-size: var( --kmd-font-size-2xl );
	margin-bottom: var( --kmd-space-2 );
}

.kmd-subtitle {
	color: var( --kmd-color-text-muted );
	font-size: var( --kmd-font-size-md );
	margin-bottom: var( --kmd-space-6 );
}

/* Logo */
.kmd-logo {
	display: flex;
	align-items: center;
	gap: var( --kmd-space-2 );
	margin-bottom: var( --kmd-space-6 );
}

.kmd-logo__image {
	max-height: 36px;
	width: auto;
}

.kmd-logo--text .kmd-logo__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var( --kmd-radius-md );
	background: var( --kmd-color-accent );
	color: var( --kmd-color-accent-contrast );
	font-weight: var( --kmd-font-weight-bold );
}

.kmd-logo__name {
	font-weight: var( --kmd-font-weight-semibold );
	font-size: var( --kmd-font-size-lg );
}

/* Form / fields */
.kmd-form {
	display: flex;
	flex-direction: column;
	gap: var( --kmd-space-4 );
	margin-bottom: var( --kmd-space-5 );
}

.kmd-field__label {
	display: block;
	font-size: var( --kmd-font-size-sm );
	font-weight: var( --kmd-font-weight-medium );
	margin-bottom: var( --kmd-space-2 );
}

.kmd-field__input {
	width: 100%;
	padding: var( --kmd-space-3 ) var( --kmd-space-4 );
	border: 1px solid var( --kmd-color-border );
	border-radius: var( --kmd-radius-md );
	background: var( --kmd-color-surface );
	transition: border-color var( --kmd-duration-fast ) var( --kmd-ease-standard ),
		box-shadow var( --kmd-duration-fast ) var( --kmd-ease-standard );
}

.kmd-field__input:focus {
	border-color: var( --kmd-color-accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --kmd-color-accent ) 20%, transparent );
	outline: none;
}

.kmd-field--error .kmd-field__input {
	border-color: var( --kmd-color-error );
}

.kmd-field__error {
	margin-top: var( --kmd-space-2 );
	font-size: var( --kmd-font-size-xs );
	color: var( --kmd-color-error );
}

.kmd-field--password .kmd-field__control {
	position: relative;
}

.kmd-field--password .kmd-field__input {
	padding-right: var( --kmd-space-7 );
}

.kmd-password-toggle {
	position: absolute;
	right: var( --kmd-space-2 );
	top: 50%;
	transform: translateY( -50% );
	width: 32px;
	height: 32px;
	border-radius: var( --kmd-radius-sm );
	color: var( --kmd-color-text-muted );
}

.kmd-password-toggle__icon {
	display: block;
	width: 18px;
	height: 18px;
	margin: 0 auto;
}

.kmd-password-toggle__icon svg {
	width: 100%;
	height: 100%;
}

.kmd-password-toggle__icon--eye-off {
	display: none;
}

.kmd-password-toggle.is-visible .kmd-password-toggle__icon--eye {
	display: none;
}

.kmd-password-toggle.is-visible .kmd-password-toggle__icon--eye-off {
	display: block;
}

.kmd-form__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var( --kmd-font-size-sm );
}

.kmd-link {
	color: var( --kmd-color-accent );
	font-weight: var( --kmd-font-weight-medium );
}

.kmd-link:hover {
	color: var( --kmd-color-accent-hover );
}

/* Checkbox */
.kmd-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var( --kmd-space-2 );
	font-size: var( --kmd-font-size-sm );
	cursor: pointer;
}

.kmd-checkbox__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.kmd-checkbox__box {
	width: 18px;
	height: 18px;
	border-radius: var( --kmd-radius-sm );
	border: 1px solid var( --kmd-color-border );
	background: var( --kmd-color-surface );
	transition: background var( --kmd-duration-fast ) var( --kmd-ease-standard );
}

.kmd-checkbox__input:checked + .kmd-checkbox__box {
	background: var( --kmd-color-accent );
	border-color: var( --kmd-color-accent );
}

/* Buttons */
.kmd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var( --kmd-space-3 ) var( --kmd-space-5 );
	border-radius: var( --kmd-radius-md );
	font-weight: var( --kmd-font-weight-semibold );
	font-size: var( --kmd-font-size-md );
	transition: transform var( --kmd-duration-fast ) var( --kmd-ease-standard ),
		background var( --kmd-duration-fast ) var( --kmd-ease-standard );
}

.kmd-btn--block {
	width: 100%;
}

.kmd-btn--primary {
	background: var( --kmd-color-accent );
	color: var( --kmd-color-accent-contrast );
	box-shadow: var( --kmd-shadow-sm );
}

.kmd-btn--primary:hover {
	filter: brightness( 0.92 );
}

/*
 * "Button Style" appearance setting — applied via a `data-kmd-button-style`
 * attribute on the page/shortcode wrapper (see AppearanceAttributes).
 * Solid is the default and needs no override.
 */
[data-kmd-button-style="soft"] .kmd-btn--primary {
	background: color-mix( in srgb, var( --kmd-color-accent ) 15%, transparent );
	color: var( --kmd-color-accent );
	box-shadow: none;
}

[data-kmd-button-style="soft"] .kmd-btn--primary:hover {
	background: color-mix( in srgb, var( --kmd-color-accent ) 25%, transparent );
	filter: none;
}

[data-kmd-button-style="outline"] .kmd-btn--primary {
	background: transparent;
	color: var( --kmd-color-accent );
	border: 1px solid var( --kmd-color-accent );
	box-shadow: none;
}

[data-kmd-button-style="outline"] .kmd-btn--primary:hover {
	background: color-mix( in srgb, var( --kmd-color-accent ) 10%, transparent );
	filter: none;
}

.kmd-btn--secondary {
	background: var( --kmd-color-bg-subtle );
	color: var( --kmd-color-text );
	border: 1px solid var( --kmd-color-border );
}

.kmd-btn:active {
	transform: scale( 0.98 );
}

.kmd-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.kmd-btn.is-loading {
	color: transparent;
	position: relative;
}

.kmd-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: var( --kmd-radius-full );
	border: 2px solid currentColor;
	border-top-color: transparent;
	color: var( --kmd-color-accent-contrast );
	animation: kmd-spin 700ms linear infinite;
}

@keyframes kmd-spin {
	to { transform: rotate( 360deg ); }
}

/* OAuth buttons */
.kmd-oauth-group {
	display: flex;
	flex-direction: column;
	gap: var( --kmd-space-3 );
	margin-bottom: var( --kmd-space-6 );
}

.kmd-oauth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --kmd-space-3 );
	padding: var( --kmd-space-3 ) var( --kmd-space-4 );
	border: 1px solid var( --kmd-color-border );
	border-radius: var( --kmd-radius-md );
	background: var( --kmd-color-surface );
	color: var( --kmd-color-text );
	font-weight: var( --kmd-font-weight-medium );
	text-decoration: none;
	transition: background var( --kmd-duration-fast ) var( --kmd-ease-standard );
}

.kmd-oauth-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

a.kmd-oauth-btn:hover {
	background: var( --kmd-color-bg-subtle );
}

a.kmd-oauth-btn.is-loading {
	pointer-events: none;
	opacity: 0.6;
}

.kmd-oauth-btn__icon {
	display: block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.kmd-oauth-btn__icon svg {
	width: 100%;
	height: 100%;
}

/* Divider */
.kmd-divider {
	display: flex;
	align-items: center;
	text-align: center;
	color: var( --kmd-color-text-muted );
	font-size: var( --kmd-font-size-sm );
	margin: var( --kmd-space-5 ) 0;
}

.kmd-divider::before,
.kmd-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var( --kmd-color-border );
}

.kmd-divider__label {
	padding: 0 var( --kmd-space-3 );
}

/* Alert */
.kmd-alert {
	padding: var( --kmd-space-3 ) var( --kmd-space-4 );
	border-radius: var( --kmd-radius-md );
	font-size: var( --kmd-font-size-sm );
	margin-bottom: var( --kmd-space-4 );
}

.kmd-alert--info { background: color-mix( in srgb, var( --kmd-color-info ) 12%, transparent ); color: var( --kmd-color-info ); }
.kmd-alert--success { background: color-mix( in srgb, var( --kmd-color-success ) 12%, transparent ); color: var( --kmd-color-success ); }
.kmd-alert--warning { background: color-mix( in srgb, var( --kmd-color-warning ) 12%, transparent ); color: var( --kmd-color-warning ); }
.kmd-alert--error { background: color-mix( in srgb, var( --kmd-color-error ) 12%, transparent ); color: var( --kmd-color-error ); }

/* Footer links */
.kmd-footer-links {
	display: flex;
	justify-content: center;
	gap: var( --kmd-space-4 );
	font-size: var( --kmd-font-size-sm );
	color: var( --kmd-color-text-muted );
	margin-top: var( --kmd-space-5 );
}

.kmd-footer-links__item:hover {
	color: var( --kmd-color-text );
}

/* Auth container (login/register/forgot tabs, no page reload) */
.kmd-auth-container__tabs {
	display: flex;
	gap: var( --kmd-space-2 );
	margin-bottom: var( --kmd-space-5 );
	border-bottom: 1px solid var( --kmd-color-border );
}

.kmd-auth-container__tab {
	padding: var( --kmd-space-2 ) var( --kmd-space-3 );
	font-weight: var( --kmd-font-weight-medium );
	color: var( --kmd-color-text-muted );
	border-bottom: 2px solid transparent;
}

.kmd-auth-container__tab.is-active {
	color: var( --kmd-color-accent );
	border-bottom-color: var( --kmd-color-accent );
}

.kmd-auth-container__panel[hidden] {
	display: none;
}