/* otp-auth: login + OTP verification card.
   All visual properties on interactive elements use !important — this
   component intentionally overrides any theme-wide button/input styling
   (Hello Elementor, Elementor Pro globals, etc.) rather than inheriting it. */

:root {
	--otp-primary: var( --color-primary, #2f6fed );
	--otp-primary-hover: var( --color-primary-hover, #1f5adb );
	--otp-text: var( --color-text, #1a2b3c );
	--otp-muted: var( --color-muted, #6b7280 );
	--otp-border: var( --color-border, #e2e5ea );
	--otp-bg: var( --color-bg, #ececec );
	--otp-card-bg: var( --color-surface, #ffffff );
	--otp-error: var( --color-error, #d84040 );
	--otp-success: var( --color-success, #1a7f5a );
}

.otp-auth-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: var( --otp-bg );
	padding: 24px;
	box-sizing: border-box;
	font-family: inherit;
}

.otp-auth-wrapper button,
.otp-auth-wrapper input,
.otp-auth-wrapper a {
	all: unset;
	box-sizing: border-box;
}

.otp-auth-card {
	position: relative;
	width: 100%;
	max-width: 400px;
	background: var( --otp-card-bg ) !important;
	border: 1px solid var( --otp-border ) !important;
	border-radius: 12px !important;
	padding: 32px 28px;
	box-sizing: border-box;
	text-align: center;
}

.otp-back-to-site {
	display: flex !important;
	align-items: center;
	gap: 6px;
	color: var( --otp-muted ) !important;
	font-size: 13px;
	cursor: pointer;
	margin-bottom: 16px;
	width: fit-content;
}

.otp-back-to-site:hover {
	color: var( --otp-primary ) !important;
}

.otp-auth-logo-row {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-bottom: 24px;
}

.otp-auth-logo {
	max-width: 220px;
	height: auto;
}

.otp-back-arrow {
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	transform: translateY( -50% );
	color: var( --otp-text ) !important;
	cursor: pointer;
	padding: 4px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.otp-back-arrow:hover {
	color: var( --otp-primary ) !important;
}

/* Fade transition between the phone step and the code step. */
.otp-step {
	opacity: 0;
	transform: translateY( 6px );
}

.otp-step.otp-fade-in {
	animation: otpFadeIn 0.3s ease forwards;
}

@keyframes otpFadeIn {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.otp-title {
	font-size: 20px;
	font-weight: 700;
	color: var( --otp-text ) !important;
	margin: 0 0 8px;
}

.otp-subtitle {
	font-size: 14px;
	color: var( --otp-muted ) !important;
	margin: 0 0 20px;
	line-height: 1.7;
}

.otp-phone-display {
	color: var( --otp-text ) !important;
	font-weight: 600;
	unicode-bidi: plaintext;
}

.otp-phone-input {
	display: block !important;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var( --otp-border ) !important;
	border-radius: 10px !important;
	background: #fff !important;
	font-size: 16px;
	text-align: center;
	margin-bottom: 16px;
	direction: rtl;
	color: var( --otp-text ) !important;
	cursor: text;
}

.otp-phone-input:focus {
	outline: none;
	border-color: var( --otp-primary ) !important;
}

.otp-code-inputs {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-bottom: 16px;
	direction: ltr;
}

.otp-digit {
	display: block !important;
	width: 44px;
	height: 48px;
	text-align: center;
	font-size: 18px;
	border: 1px solid var( --otp-border ) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var( --otp-text ) !important;
	cursor: text;
}

.otp-digit:focus {
	outline: none;
	border-color: var( --otp-primary ) !important;
}

.otp-resend {
	font-size: 13px;
	color: var( --otp-muted ) !important;
	margin-bottom: 20px;
}

#otpTimer {
	unicode-bidi: plaintext;
	font-weight: 600;
	color: var( --otp-text ) !important;
}

.otp-resend-link {
	color: var( --otp-primary ) !important;
	cursor: pointer;
}

.otp-resend-link.otp-disabled {
	color: var( --otp-muted ) !important;
	pointer-events: none;
}

.otp-btn-primary {
	display: block !important;
	width: 100%;
	padding: 14px 16px;
	background: var( --otp-primary ) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
	transition: background 0.15s ease;
}

.otp-btn-primary:hover {
	background: var( --otp-primary-hover ) !important;
}

.otp-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.otp-btn-outline {
	display: block !important;
	width: 100%;
	padding: 12px 16px;
	background: transparent !important;
	color: var( --otp-text ) !important;
	border: 1px solid var( --otp-border ) !important;
	border-radius: 10px !important;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.otp-btn-outline:hover {
	border-color: var( --otp-error ) !important;
	color: var( --otp-error ) !important;
}

.otp-error {
	min-height: 18px;
	color: var( --otp-error ) !important;
	font-size: 13px;
	margin-top: 10px;
}