/**
 * OTP Email Verify for Elementor — Front-end styles
 * Author: Rohit Bhatt
 * Prefix: rh-oevfe-
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.rh-oevfe-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

/* ── Email row ───────────────────────────────────────────────────────────── */
.rh-oevfe-email-row {
	width: 100%;
}

.rh-oevfe-email-input {
	width: 100%;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.rh-oevfe-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
	white-space: nowrap;
}

.rh-oevfe-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.rh-oevfe-btn-primary {
	background-color: #6a4fff;
	color: #fff;
}

.rh-oevfe-btn-primary:hover:not(:disabled) {
	background-color: #5a3fee;
}

.rh-oevfe-btn-success {
	background-color: #28a745;
	color: #fff;
}

.rh-oevfe-btn-success:hover:not(:disabled) {
	background-color: #218838;
}

/* ── OTP panel ───────────────────────────────────────────────────────────── */
.rh-oevfe-otp-panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rh-oevfe-otp-label {
	font-size: 13px;
	color: #555;
}

.rh-oevfe-otp-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.rh-oevfe-otp-input {
	flex: 1;
	max-width: 160px;
	padding: 8px 12px;
	font-size: 18px;
	letter-spacing: 4px;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 4px;
	outline: none;
	transition: border-color 0.2s ease;
}

.rh-oevfe-otp-input:focus {
	border-color: #6a4fff;
	box-shadow: 0 0 0 2px rgba( 106, 79, 255, 0.18 );
}

/* ── Timer ───────────────────────────────────────────────────────────────── */
.rh-oevfe-timer {
	font-size: 12px;
	color: #888;
	margin: 0;
}

.rh-oevfe-timer-warn {
	color: #e67e22;
	font-weight: 600;
}

.rh-oevfe-timer-end {
	color: #e74c3c;
	font-weight: 600;
}

/* ── Status message ──────────────────────────────────────────────────────── */
.rh-oevfe-status {
	margin: 0;
	font-size: 13px;
	min-height: 1.4em;
}

.rh-oevfe-error {
	color: #e74c3c;
}

.rh-oevfe-success {
	color: #27ae60;
}

/* ── Verified badge ──────────────────────────────────────────────────────── */
.rh-oevfe-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: #eafaf1;
	border: 1px solid #27ae60;
	border-radius: 4px;
	color: #27ae60;
	font-size: 13px;
	font-weight: 600;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.rh-oevfe-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: rh-oevfe-spin 0.7s linear infinite;
	vertical-align: middle;
}

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

/* ── Shake animation (wrong OTP) ─────────────────────────────────────────── */
@keyframes rh-oevfe-shake {
	0%, 100% { transform: translateX( 0 ); }
	20%       { transform: translateX( -6px ); }
	40%       { transform: translateX( 6px ); }
	60%       { transform: translateX( -4px ); }
	80%       { transform: translateX( 4px ); }
}

.rh-oevfe-shake {
	animation: rh-oevfe-shake 0.45s ease;
}

/* ── Next-button overlay shield ──────────────────────────────────────────── */
.rh-oevfe-btn-overlay {
	position: absolute;
	inset: 0;
	z-index: 9999;
	cursor: not-allowed !important;
	background: transparent;
	border-radius: inherit;
}

.elementor-field-type-next {
	position: relative !important;
}