/* Front-end modal. Reads the host theme's own CSS variables when
   present (var(--mgx-*), used by many WooCommerce child themes) and
   falls back to a sane neutral palette otherwise, so this plugin
   looks reasonable standalone on any theme.

   Every rule below is !important + repeats the font-family explicitly
   on every element (not just relying on inheritance): this modal is
   injected in wp_footer, outside any of the site's own content
   wrappers, so it's an easy target for a theme/plugin's own generic
   "button", "input" or "a" rules to win the cascade against a plain
   class selector. Being explicit here is cheap insurance against that,
   proven necessary already once on this same site (the side-cart
   plugin's icon font needed the identical treatment). */

.mgx-otp-overlay,
.mgx-otp-overlay * {
	font-family: var(--mgx-font, 'Vazirmatn', Tahoma, sans-serif) !important;
	box-sizing: border-box !important;
}

.mgx-otp-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(15, 18, 22, .6) !important;
	padding: 20px !important;
}
.mgx-otp-overlay.is-open { display: flex !important; }

.mgx-otp-modal {
	position: relative !important;
	width: 100% !important;
	max-width: 400px !important;
	background: #fff !important;
	border-radius: 20px !important;
	padding: 32px 28px 28px !important;
	box-shadow: 0 28px 70px rgba(0, 0, 0, .3) !important;
	direction: rtl !important;
	text-align: right !important;
	margin: 0 !important;
}

.mgx-otp-modal__close {
	position: absolute !important;
	top: 16px !important;
	left: 16px !important;
	width: 34px !important;
	height: 34px !important;
	border: 1px solid var(--mgx-line, #E4E7EA) !important;
	background: #fff !important;
	border-radius: 10px !important;
	font-size: 1.2rem !important;
	line-height: 1 !important;
	color: var(--mgx-muted, #5A6578) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	transition: background .15s ease, color .15s ease;
}
.mgx-otp-modal__close:hover {
	background: var(--mgx-ink, #1E252B) !important;
	color: #fff !important;
	border-color: var(--mgx-ink, #1E252B) !important;
}

.mgx-otp-modal__title {
	font-size: 1.3rem !important;
	font-weight: 800 !important;
	color: var(--mgx-ink, #1E252B) !important;
	margin: 0 0 26px !important;
	padding-inline-start: 14px !important;
	border-inline-start: 5px solid var(--mgx-amber, #F5B301) !important;
	line-height: 1.3 !important;
}

.mgx-otp-field {
	display: flex !important;
	flex-direction: row-reverse !important;
	align-items: center !important;
	gap: 10px !important;
	border: 1px solid var(--mgx-line, #E4E7EA) !important;
	border-radius: 14px !important;
	padding: 4px 16px !important;
	margin-bottom: 10px !important;
	background: var(--mgx-bg, #F8F9FA) !important;
}
.mgx-otp-field:focus-within {
	border-color: var(--mgx-amber, #F5B301) !important;
	background: #fff !important;
}
.mgx-otp-field__icon { color: var(--mgx-muted, #5A6578) !important; display: flex !important; flex-shrink: 0 !important; }
.mgx-otp-field__icon svg { width: 20px !important; height: 20px !important; }
.mgx-otp-field input {
	flex: 1 !important;
	border: none !important;
	outline: none !important;
	padding: 14px 4px !important;
	font-size: 1rem !important;
	text-align: right !important;
	direction: rtl !important;
	background: transparent !important;
	color: var(--mgx-ink, #1E252B) !important;
	width: 100% !important;
}
/* the phone number itself reads left-to-right (09123456789), even
   though the surrounding form is RTL -- otherwise digits visually
   re-order themselves as they're typed. */
.mgx-otp-field input[data-mgx-otp-phone] {
	direction: ltr !important;
	text-align: right !important;
	unicode-bidi: plaintext !important;
}

.mgx-otp-submit {
	display: block !important;
	width: 100% !important;
	margin: 16px 0 0 !important;
	padding: 15px !important;
	border: none !important;
	border-radius: 14px !important;
	background: var(--mgx-amber, #F5B301) !important;
	color: var(--mgx-ink, #1E252B) !important;
	font-weight: 800 !important;
	font-size: 1rem !important;
	cursor: pointer !important;
	transition: filter .15s ease, transform .15s ease;
	box-shadow: 0 10px 24px rgba(245, 179, 1, .35) !important;
}
.mgx-otp-submit:hover:not(:disabled) { filter: brightness(0.95) !important; transform: translateY(-1px); }
.mgx-otp-submit:disabled { opacity: .6 !important; cursor: default !important; box-shadow: none !important; }

.mgx-otp-error {
	color: #c0392b !important;
	font-size: .82rem !important;
	margin: 8px 2px 0 !important;
	min-height: 1em !important;
}

.mgx-otp-code-hint {
	font-size: .92rem !important;
	color: var(--mgx-muted, #5A6578) !important;
	margin: 0 0 18px !important;
}
.mgx-otp-code-boxes {
	display: flex !important;
	flex-direction: row-reverse !important;
	gap: 10px !important;
	justify-content: center !important;
	margin-bottom: 18px !important;
}
.mgx-otp-code-box {
	width: 48px !important;
	height: 56px !important;
	text-align: center !important;
	font-size: 1.3rem !important;
	font-weight: 800 !important;
	border: 1px solid var(--mgx-line, #E4E7EA) !important;
	border-radius: 12px !important;
	background: var(--mgx-bg, #F8F9FA) !important;
	color: var(--mgx-ink, #1E252B) !important;
	padding: 0 !important;
}
.mgx-otp-code-box:focus {
	outline: none !important;
	border-color: var(--mgx-amber, #F5B301) !important;
	background: #fff !important;
}

.mgx-otp-resend-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-size: .84rem !important;
	margin-bottom: 6px !important;
}
.mgx-otp-resend {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--mgx-teal-dark, #0B7A70) !important;
	cursor: pointer !important;
	font-size: .84rem !important;
	font-weight: 600 !important;
}
.mgx-otp-resend:disabled { color: var(--mgx-muted, #5A6578) !important; cursor: default !important; }
.mgx-otp-resend-row a { color: #c0392b !important; text-decoration: none !important; font-weight: 600 !important; }
.mgx-otp-resend-row a:hover { text-decoration: underline !important; }

@media (max-width: 420px) {
	.mgx-otp-code-box { width: 40px !important; height: 50px !important; }
}