/**
 * Phone Number Validator - Frontend Styles
 *
 * Provides styles for phone validation feedback.
 *
 * @package    Spk_Course
 * @subpackage Spk_Course/public/css
 * @since      1.0.6
 */

/* ==========================================================================
   Validation Feedback
   ========================================================================== */

.spk-phone-validation-feedback {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	display: none;
	align-items: center;
	gap: 6px;
	transition: opacity 0.2s ease;
}

.spk-phone-validation-feedback:not(:empty) {
	display: flex;
}

/* Icon */
.spk-phone-validation-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	flex-shrink: 0;
}

/* Loading state */
.spk-phone-validation-loading {
	color: #666666;
}

.spk-phone-validation-loading .spk-phone-validation-icon {
	animation: spkPhoneValidationSpin 1s linear infinite;
}

/* Valid state */
.spk-phone-validation-valid {
	color: #2e7d32;
}

.spk-phone-validation-valid .spk-phone-validation-icon {
	color: #4caf50;
}

/* Invalid state */
.spk-phone-validation-invalid {
	color: #c62828;
}

.spk-phone-validation-invalid .spk-phone-validation-icon {
	color: #f44336;
}

/* Input states */
input.spk-phone-valid {
	border-color: #4caf50 !important;
}

input.spk-phone-invalid {
	border-color: #f44336 !important;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes spkPhoneValidationSpin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.spk-phone-validation-loading .spk-phone-validation-icon {
		animation: none;
	}

	.spk-phone-validation-feedback {
		transition: none;
	}
}

/* High contrast mode */
@media (prefers-contrast: high) {
	.spk-phone-validation-valid {
		color: green;
	}

	.spk-phone-validation-invalid {
		color: red;
	}
}