/**
 * Sikada Auth Passwordless Login - Shared Styles
 *
 * @package SikadaAuthPasswordless
 */

:root {
	/* Colors */
	--sikada-primary-color: #2271b1; /* matches file #1 */
	/* Overridden by inline style in render.php */
	--sikada-border-color: #ccc;
	--sikada-bg-color: #f6f7f7;
	--sikada-error-color: #d63638;
	--sikada-success-color: #008a20;
	--sikada-text-color: #333;

	/* Spacing */
	--sikada-spacing-sm: 8px;
	--sikada-spacing-md: 15px;
	--sikada-spacing-lg: 20px;

	/* Typography */
	--sikada-font-family: inherit;
	--sikada-font-size-base: 0.95em;
	--sikada-font-size-sm: 0.85em;
	--sikada-font-size-xs: 0.75em;
}

.sikada-passwordless-login-wrapper,
.sikada-passwordless-registration-wrapper {
	max-width: 400px; /* file #1 */
	margin: 0 auto;
	padding: var(--sikada-spacing-lg);
	font-family: var(--sikada-font-family);
	color: var(--sikada-text-color);
}

/* Forms */
.sikada-passwordless-form {
	margin: var(--sikada-spacing-lg) 0;
}

.sikada-form-field {
	margin-bottom: var(--sikada-spacing-md);
}

.sikada-form-field label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	font-size: var(--sikada-font-size-base);
	color: var(--sikada-text-color);
}

.sikada-form-field input[type="email"],
.sikada-form-field input[type="text"],
.sikada-form-field input[type="password"],
.sikada-form-field input[type="tel"],
.sikada-form-field textarea {
	width: 100%;
	padding: var(--sikada-spacing-sm) 12px; /* file #1 */
	border: 1px solid var(--sikada-border-color);
	border-radius: 4px;
	font-size: var(--sikada-font-size-base);
	line-height: 1.5;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
}

/* File #1 uses height:46px for inputs (not textarea) */
.sikada-form-field input[type="email"],
.sikada-form-field input[type="text"],
.sikada-form-field input[type="password"],
.sikada-form-field input[type="tel"] {
	height: 46px;
}

.sikada-form-field input:focus,
.sikada-form-field textarea:focus {
	border-color: var(--sikada-primary-color);
	box-shadow: 0 0 0 1px var(--sikada-primary-color);
	outline: 2px solid transparent; /* file #1 */
}

.sikada-form-field textarea {
	resize: vertical;
	min-height: 100px;
}

.sikada-button {
	width: 100%;
	padding: 12px; /* file #1 */
	background-color: var(--sikada-primary-color);
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: var(--sikada-font-size-base);
	font-weight: 500; /* file #1 */
	text-align: center;
	transition: opacity 0.2s; /* file #1 */
	box-sizing: border-box;
}

.sikada-button-primary {
	background-color: var(--sikada-primary-color);
	color: white;
	width: 100%;
	display: block;
	box-sizing: border-box;
}

.sikada-button:hover:not(:disabled),
.sikada-button-primary:hover:not(:disabled) {
	opacity: 0.9;
}

.sikada-button-primary:active:not(:disabled) {
	transform: none;
}

.sikada-button:disabled,
.sikada-button-primary:disabled {
	background-color: #a7aaad; /* file #1 */
	cursor: not-allowed;
	opacity: 1; /* file #1 */
}

.sikada-password-fallback-link,
.sikada-passwordless-fallback-link,
.sikada-registration-link,
.sikada-lost-password-link,
.sikada-back-to-login-link {
	text-align: center;
	margin-top: var(--sikada-spacing-md);
	font-size: var(--sikada-font-size-xs);
}

.sikada-password-fallback-link a,
.sikada-passwordless-fallback-link a,
.sikada-registration-link a,
.sikada-lost-password-link a,
.sikada-back-to-login-link a {
	color: var(--sikada-primary-color);
	text-decoration: none;
	transition: none;
}

.sikada-password-fallback-link a:hover,
.sikada-passwordless-fallback-link a:hover,
.sikada-registration-link a:hover,
.sikada-lost-password-link a:hover,
.sikada-back-to-login-link a:hover {
	text-decoration: underline;
	color: var(--sikada-primary-color);
}

.sikada-name-fields {
	margin-top: var(--sikada-spacing-md);
	padding-top: var(--sikada-spacing-md);
	border-top: 1px solid var(--sikada-border-color);
}

.sikada-passwordless-message {
	padding: 10px;
	margin-bottom: var(--sikada-spacing-md);
	font-size: var(--sikada-font-size-sm);
	border-left: 4px solid var(--sikada-primary-color);
	background-color: var(--sikada-bg-color);
	border-radius: 0; /* file #1 has no radius */
	line-height: normal; /* file #1 doesn't set line-height */
}

.sikada-passwordless-error {
	border-left-color: var(--sikada-error-color);
	color: var(--sikada-text-color);
	background-color: var(--sikada-bg-color);
	border: none;
}

.sikada-passwordless-success {
	border-left-color: var(--sikada-success-color);
	color: var(--sikada-text-color);
	background-color: var(--sikada-bg-color);
	border: none;
}

.sikada-passwordless-info {
	border-left-color: var(--sikada-primary-color);
	color: var(--sikada-text-color);
	background-color: var(--sikada-bg-color);
	border: none;
}

.sikada-passwordless-logged-in {
	text-align: center;
	padding: var(--sikada-spacing-lg);
	background-color: var(--sikada-bg-color);
	border-radius: 4px;
	color: var(--sikada-text-color);
}

.sikada-login-method {
	transition: opacity 0.3s ease-in-out;
}

.sikada-login-method.hidden {
	display: none;
}

.sikada-form-checkbox label {
	font-weight: normal;
	display: flex;
	align-items: center;
	gap: var(--sikada-spacing-sm);
	cursor: pointer;
}

.sikada-form-checkbox input[type="checkbox"] {
	accent-color: var(--sikada-primary-color);
	width: auto;
	height: auto;
	margin: 0;
	cursor: pointer;
}

.required {
	color: var(--sikada-error-color);
	margin-left: 2px;
	font-weight: bold;
}

.sikada-form-description {
	color: var(--sikada-text-color);
	font-size: var(--sikada-font-size-sm);
	margin-bottom: var(--sikada-spacing-lg);
}

@media (max-width: 600px) {
	.sikada-passwordless-login-wrapper,
	.sikada-passwordless-registration-wrapper {
		padding: 15px;
	}

	.sikada-form-field input,
	.sikada-form-field textarea {
		font-size: 16px; /* Prevents zoom on iOS */
	}
}

/* Code entry input */
.sikada-code-input {
	width: 180px !important;
	font-size: 28px !important;
	font-family: "Courier New", Courier, monospace;
	letter-spacing: 8px;
	text-align: center;
	height: 56px !important;
	display: block;
	margin: 0 auto;
}

/* Resend code area */
.sikada-resend-code-wrap {
	text-align: center;
	margin-top: var(--sikada-spacing-md);
	font-size: var(--sikada-font-size-sm);
}

.sikada-resend-code-link {
	color: var(--sikada-primary-color);
	text-decoration: none;
}

.sikada-resend-code-link:hover {
	text-decoration: underline;
}

.sikada-resend-countdown {
	color: #888;
	font-size: var(--sikada-font-size-sm);
}

.sikada-button-primary:disabled::after {
	content: '...';
	animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
	0%,
	20% {
		content: '';
	}
	40% {
		content: '.';
	}
	60% {
		content: '..';
	}
	80%,
	100% {
		content: '...';
	}
}