/*!
 * OSS CE Modules — Registration Guard frontend CSS
 * Inline error styling + form enhancement styles.
 * Version: 2.0.1
 */

/* ========== Error styling ========== */

.ossce-rg-field-error {
	display: block;
	width: 100%;
	clear: both;
	margin: 6px 0 8px;
	padding: 8px 12px;
	background: #fcf0f1;
	border-left: 3px solid #dc3232;
	border-radius: 3px;
	color: #8b1a1a;
	font-size: 13px;
	line-height: 1.4;
	box-sizing: border-box;
	animation: ossceRgShake 0.3s ease-out;
}

.ossce-rg-field-invalid,
input.ossce-rg-field-invalid,
input.ossce-rg-field-invalid:focus {
	border-color: #dc3232 !important;
	box-shadow: 0 0 0 1px #dc3232 !important;
	outline: none;
}

@keyframes ossceRgShake {
	0%   { transform: translateX(0); }
	15%  { transform: translateX(-4px); }
	30%  { transform: translateX(4px); }
	45%  { transform: translateX(-3px); }
	60%  { transform: translateX(3px); }
	75%  { transform: translateX(-1px); }
	100% { transform: translateX(0); }
}

/* ========== Phone wrapper + flag ========== */

.ossce-rg-phone-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.ossce-rg-flag-icon {
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: auto;
	pointer-events: none;
	z-index: 1;
}

.ossce-rg-phone-wrapper input,
.ossce-rg-phone-wrapper input[type="text"] {
	padding-left: 35px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* ========== Success message ========== */

.ossce-rg-success-message {
	padding: 20px 24px;
	background: #d4edda;
	border: 1px solid #c3e6cb;
	border-radius: 8px;
	color: #155724;
	font-size: 15px;
	line-height: 1.6;
	margin-top: 20px;
	animation: ossceRgFadeIn 0.5s ease-in;
}

@keyframes ossceRgFadeIn {
	0%   { opacity: 0; transform: translateY(-10px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ========== Checking indicator (domain AJAX) ========== */

.ossce-rg-field-checking,
input.ossce-rg-field-checking,
input.ossce-rg-field-checking:focus {
	border-color: #0073aa !important;
	box-shadow: 0 0 0 1px #0073aa !important;
	background-image: linear-gradient(90deg, transparent 0%, rgba(0, 115, 170, 0.05) 50%, transparent 100%);
	background-size: 200% 100%;
	animation: ossceRgChecking 1.2s ease-in-out infinite;
}

@keyframes ossceRgChecking {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ========== Disabled submit button (live validation) ========== */

.ossce-rg-btn-disabled,
button.ossce-rg-btn-disabled,
input.ossce-rg-btn-disabled,
[type="submit"].ossce-rg-btn-disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	pointer-events: none;
	filter: grayscale(30%);
	transition: opacity 0.2s ease, filter 0.2s ease;
}

[type="submit"]:not(.ossce-rg-btn-disabled) {
	transition: opacity 0.2s ease, filter 0.2s ease;
}