/* ── Mito-Elev8 OTP Auth — Frontend Styles ─────────────────────────────── */

:root {
	--elev8-primary:       #2563eb;
	--elev8-primary-dark:  #1d4ed8;
	--elev8-success:       #16a34a;
	--elev8-error:         #dc2626;
	--elev8-border:        #d1d5db;
	--elev8-bg:            #f9fafb;
	--elev8-radius:        10px;
	--elev8-text:          #111827;
	--elev8-muted:         #6b7280;
	--elev8-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */

.mitoelev8-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 20px;
	color: var( --elev8-muted );
	font-size: 13px;
	font-family: var( --elev8-font );
}

.mitoelev8-divider::before,
.mitoelev8-divider::after {
	content: '';
	flex: 1;
	border-top: 1px solid var( --elev8-border );
}

/* ── OTP Box ──────────────────────────────────────────────────────────────── */

.mitoelev8-otp-box {
	background: var( --elev8-bg );
	border: 1px solid var( --elev8-border );
	border-radius: var( --elev8-radius );
	padding: 24px 20px;
	margin-bottom: 28px;
	font-family: var( --elev8-font );
}

.mitoelev8-otp-box h3 {
	margin: 0 0 18px;
	font-size: 16px;
	font-weight: 600;
	color: var( --elev8-text );
}

/* ── Fields ───────────────────────────────────────────────────────────────── */

.mitoelev8-field {
	margin-bottom: 14px;
}

.mitoelev8-field label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var( --elev8-text );
	margin-bottom: 5px;
}

.mitoelev8-field input[type="tel"],
.mitoelev8-field input[type="text"],
.mitoelev8-field input[type="email"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --elev8-border );
	border-radius: 7px;
	font-size: 15px;
	color: var( --elev8-text );
	background: #fff;
	transition: border-color 0.15s;
	box-sizing: border-box;
	outline: none;
}

.mitoelev8-field input:focus {
	border-color: var( --elev8-primary );
	box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.12 );
}

/* ── Mobile row with prefix ───────────────────────────────────────────────── */

.mitoelev8-mobile-row {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid var( --elev8-border );
	border-radius: 7px;
	overflow: hidden;
	background: #fff;
}

.mitoelev8-mobile-row:focus-within {
	border-color: var( --elev8-primary );
	box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.12 );
}

.mitoelev8-prefix {
	display: flex;
	align-items: center;
	padding: 0 12px;
	background: #f3f4f6;
	border-right: 1px solid var( --elev8-border );
	font-size: 14px;
	font-weight: 500;
	color: var( --elev8-muted );
	white-space: nowrap;
	user-select: none;
}

.mitoelev8-mobile-row input[type="tel"] {
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	flex: 1;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.mitoelev8-send-btn,
.mitoelev8-verify-btn {
	display: inline-block;
	padding: 10px 22px;
	background: var( --elev8-primary );
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	border: none;
	border-radius: 7px;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s;
	margin-top: 4px;
}

.mitoelev8-send-btn:hover,
.mitoelev8-verify-btn:hover {
	background: var( --elev8-primary-dark );
}

.mitoelev8-send-btn:active,
.mitoelev8-verify-btn:active {
	transform: scale( 0.98 );
}

.mitoelev8-send-btn:disabled,
.mitoelev8-verify-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ── OTP step ─────────────────────────────────────────────────────────────── */

.mitoelev8-otp-step {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var( --elev8-border );
}

.mitoelev8-otp-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

/* ── Resend button ────────────────────────────────────────────────────────── */

.mitoelev8-resend-btn {
	background: none;
	border: none;
	color: var( --elev8-primary );
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	transition: color 0.15s;
}

.mitoelev8-resend-btn:disabled {
	color: var( --elev8-muted );
	cursor: not-allowed;
	text-decoration: none;
}

/* ── Notice ───────────────────────────────────────────────────────────────── */

.mitoelev8-notice {
	margin: 10px 0 0;
	font-size: 13px;
	min-height: 18px;
}

.mitoelev8-notice.success {
	color: var( --elev8-success );
}

.mitoelev8-notice.error {
	color: var( --elev8-error );
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
	.mitoelev8-otp-box {
		padding: 18px 14px;
	}

	.mitoelev8-otp-actions {
		flex-direction: column;
		align-items: flex-start;
	}
}