/* Theme-only presentation for Kevira Auth's documented public UI classes. */

.kevira-auth-modal,
.kevira-auth-account-prompt,
.kevira-auth-email-status,
.kevira-auth-toast {
	color: var(--kev-integration-text);
	font-family: inherit;
}

.kevira-auth-modal__backdrop {
	background: rgb(3 3 3 / 78%);
}

.kevira-auth-modal__card,
.kevira-auth-account-prompt,
.kevira-auth-email-status,
.kevira-auth-toast {
	background: var(--kev-integration-surface);
	border-color: var(--kev-integration-border);
	color: var(--kev-integration-text);
}

.kevira-auth-modal__card,
.kevira-auth-account-prompt {
	border-radius: var(--kev-integration-card-radius);
	box-shadow: 0 1.5rem 4.5rem rgb(0 0 0 / 45%);
}

.kevira-auth-modal h2 {
	color: var(--kev-integration-heading);
}

.kevira-auth-modal__description,
.kevira-auth-modal label,
.kevira-auth-email-status__label {
	color: var(--kev-integration-muted);
}

.kevira-auth-modal__icon {
	background: color-mix(in srgb, var(--kev-integration-accent) 14%, var(--kev-integration-surface));
	color: var(--kev-integration-accent);
}

.kevira-auth-modal__close {
	background: var(--kev-integration-field-surface);
	border-color: var(--kev-integration-border);
	color: var(--kev-integration-muted);
}

.kevira-auth-modal__close:hover {
	background: color-mix(in srgb, var(--kev-integration-accent) 12%, var(--kev-integration-surface));
	border-color: var(--kev-integration-accent);
	color: var(--kev-integration-heading);
}

.kevira-auth-modal input {
	background: var(--kev-integration-field-surface);
	border-color: var(--kev-integration-border);
	border-radius: var(--kev-integration-field-radius);
	color: var(--kev-integration-heading);
	caret-color: var(--kev-integration-accent);
}

.kevira-auth-modal input::placeholder {
	color: var(--kev-integration-muted);
}

.kevira-auth-modal input:disabled {
	background: color-mix(in srgb, var(--kev-integration-field-surface) 68%, #000);
	color: var(--kev-integration-muted);
}

.kevira-auth-modal input:focus,
.kevira-auth-modal__otp input:focus {
	background: color-mix(in srgb, var(--kev-integration-accent) 6%, var(--kev-integration-field-surface));
	border-color: var(--kev-integration-accent);
	box-shadow: var(--kev-integration-focus-ring);
}

.kevira-auth-modal label.is-invalid input,
.kevira-auth-modal label.is-invalid .kevira-auth-modal__otp input {
	background: var(--kev-integration-error-surface);
	border-color: var(--kev-integration-error);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kev-integration-error) 18%, transparent);
}

.kevira-auth-modal__field-error,
.kevira-auth-modal__message {
	color: var(--kev-integration-error);
}

.kevira-auth-modal__otp input {
	background: var(--kev-integration-field-surface);
	border-color: var(--kev-integration-border);
	border-radius: var(--kev-integration-field-radius);
	color: var(--kev-integration-heading);
}

.kevira-auth-modal__otp input.is-filled {
	background: color-mix(in srgb, var(--kev-integration-accent) 10%, var(--kev-integration-field-surface));
	border-color: color-mix(in srgb, var(--kev-integration-accent) 68%, var(--kev-integration-border));
}

.kevira-auth-modal__otp-actions button,
.kevira-auth-modal__password-actions button {
	color: var(--kev-integration-accent);
}

.kevira-auth-modal__otp-actions button:hover,
.kevira-auth-modal__password-actions button:hover {
	color: var(--kev-integration-accent-hover);
}

.kevira-auth-modal__otp-actions button:disabled {
	color: var(--kev-integration-muted);
}

.kevira-auth-modal__submit,
.kevira-auth-account-prompt .button,
.kevira-auth-email-status .button {
	background: var(--kev-integration-accent);
	border-color: var(--kev-integration-accent);
	color: var(--kev-integration-heading);
}

.kevira-auth-modal__submit:hover,
.kevira-auth-account-prompt .button:hover,
.kevira-auth-email-status .button:hover {
	background: var(--kev-integration-accent-hover);
	border-color: var(--kev-integration-accent-hover);
	color: var(--kev-integration-heading);
}

.kevira-auth-modal__secondary,
.kevira-auth-modal__reset {
	background: color-mix(in srgb, var(--kev-integration-accent) 9%, var(--kev-integration-surface));
	border-color: var(--kev-integration-accent);
	color: var(--kev-integration-accent);
}

.kevira-auth-modal__secondary:hover,
.kevira-auth-modal__reset:hover {
	background: color-mix(in srgb, var(--kev-integration-accent) 16%, var(--kev-integration-surface));
	color: var(--kev-integration-accent-hover);
}

.kevira-auth-modal button:focus-visible,
.kevira-auth-account-prompt .button:focus-visible,
.kevira-auth-email-status .button:focus-visible {
	outline: 2px solid var(--kev-integration-accent);
	outline-offset: 3px;
	box-shadow: var(--kev-integration-focus-ring);
}

.kevira-auth-modal button:disabled {
	opacity: 0.58;
}

.kevira-auth-email-status {
	background: var(--kev-integration-error-surface);
	border-color: color-mix(in srgb, var(--kev-integration-error) 46%, transparent);
	color: var(--kev-integration-error);
}

.kevira-auth-email-status.is-verified {
	background: var(--kev-integration-success-surface);
	border-color: color-mix(in srgb, var(--kev-integration-success) 46%, transparent);
	color: var(--kev-integration-success);
}

@media (max-width: 42rem) {
	.kevira-auth-modal__card {
		border-radius: var(--kev-integration-mobile-card-radius);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kevira-auth-modal * {
		animation-duration: var(--kev-integration-reduced-motion-duration) !important;
		scroll-behavior: auto !important;
		transition-duration: var(--kev-integration-reduced-motion-duration) !important;
	}
}