/**
 * Quick Order — استایل فرم سفارش سریع
 * سبک، mobile-first، بدون وابستگی به framework.
 *
 * سیستم رنگ: توکن‌های معنایی برای ثبات در تمام حالت‌ها.
 * تایپوگرافی: مقیاس ۱۲/۱۴/۱۶/۱۸/۲۴، line-height ۱.۵.
 */

/* ===== توکن‌ها ===== */
.qorder-form {
	/* مقیاس پایهٔ ثابت — قالب تم با فونت بزرگ بدنه، فرم را بزرگ می‌کند. */
	font-size: 15px!important;
	--qorder-radius: 10px
	--qorder-radius-sm: 8px
	--qorder-space: 8px
	--qorder-border: #d6d9dd
	--qorder-border-focus: #2271b1
	--qorder-text: #1d2327
	--qorder-text-muted: #646970
	--qorder-bg: #ffffff
	--qorder-bg-soft: #f6f7f7
	--qorder-danger: #842020
	--qorder-danger-bg: #f8d7da
	--qorder-danger-border: #f1aeb5
	--qorder-success: #0f5132
	--qorder-success-bg: #d1e7dd
	--qorder-success-border: #badbcc
	--qorder-info: #055160
	--qorder-info-bg: #cff4fc
	--qorder-info-border: #b6effb
	--qorder-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04)
	--qorder-transition: 150ms ease-in-out

	max-width: 400px!important;
	margin: 1.5em auto!important;
	padding: 20px!important;
	border: 1px solid #e3e6ea!important;
	border-radius: 10px!important;
	background: var(--qorder-bg)!important;
	box-shadow: var(--qorder-shadow)!important;
	direction: rtl!important;
	line-height: 1.5!important;
}

.qorder-form *,
.qorder-form *::before,
.qorder-form *::after {
	box-sizing: border-box!important;
}

.qorder-form__inner {
	display: flex!important;
	flex-direction: column!important;
	gap: 12px!important;
	margin: 0!important;
}

/* ===== فیلدها ===== */
.qorder-field {
	display: flex!important;
	flex-direction: column!important;
	gap: 5px!important;
}

.qorder-field__label {
	font-size: 14px!important;
	font-weight: 600!important;
	color: var(--qorder-text)!important;
	line-height: 1.5!important;
}

.qorder-required {
	color: #d63638!important;
	margin-inline-start: 2px!important;
}

.qorder-optional {
	font-size: 12px!important;
	font-weight: 400!important;
	color: var(--qorder-text-muted)!important;
	margin-inline-start: 4px!important;
}

.qorder-field__input {
	width: 100%!important;
	/* هدف لمسی استاندارد ۴۴px مطابق Apple HIG. */
	min-height: 40px!important;
	padding: 8px 10px!important;
	font-size: 15px!important;
	line-height: 1.5!important;
	color: var(--qorder-text)!important;
	background: var(--qorder-bg)!important;
	border: 1px solid var(--qorder-border)!important;
	border-radius: var(--qorder-radius-sm)!important;
	transition: border-color var(--qorder-transition), box-shadow var(--qorder-transition)!important;
}

.qorder-field__input::placeholder {
	color: #8c9196!important;
}

.qorder-field__input:hover:not(:focus) {
	border-color: #b8bec5!important;
}

.qorder-field__input:focus {
	outline: 2px solid var(--qorder-border-focus)!important;
	outline-offset: -1px!important;
	border-color: var(--qorder-border-focus)!important;
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15)!important;
}

.qorder-field__input[aria-invalid="true"] {
	border-color: #d63638!important;
}

.qorder-field__help {
	margin: 0!important;
	font-size: 12.5px!important;
	color: var(--qorder-text-muted)!important;
	line-height: 1.5!important;
}

.qorder-field__error {
	margin: 0!important;
	font-size: 12.5px!important;
	color: #d63638!important;
	line-height: 1.5!important;
}

/* ===== بخش مبلغ ===== */
.qorder-amount {
	display: flex!important;
	flex-wrap: wrap!important;
	align-items: center!important;
	justify-content: space-between!important;
	gap: 4px 10px!important;
	padding: 10px 12px!important;
	background: var(--qorder-bg-soft)!important;
	border-radius: var(--qorder-radius-sm)!important;
	border: 1px solid #e9ecef!important;
}

.qorder-amount__label {
	font-size: 13px!important;
	font-weight: 500!important;
	color: var(--qorder-text-muted)!important;
}

/* ارزش قیمت: برجسته با ارقام tabular تا جابجا نشود. */
.qorder-amount__value {
	font-size: 19px!important;
	font-weight: 700!important;
	color: var(--qorder-text)!important;
	font-variant-numeric: tabular-nums!important;
	letter-spacing: -0.01em!important;
	line-height: 1.2!important;
	/* چیدمان RTL: عدد سمت راست، نماد واحد (تومان) سمت چپ. */
	direction: rtl!important;
	display: inline-flex!important;
	align-items: baseline!important;
	gap: 5px!important;
	flex-direction: row!important;
	justify-content: flex-start!important;
}

/* مقدار عددی — LTR برای اعداد لاتین. */
.qorder-price__amount {
	direction: ltr!important;
	font-variant-numeric: tabular-nums!important;
}

/* نماد واحد پول (تومان) باید از مبلغ کوچکتر و ملایم‌تر باشد. */
.qorder-price__currency {
	font-size: 12px!important;
	font-weight: 500!important;
	color: var(--qorder-text-muted)!important;
	letter-spacing: 0!important;
}

.qorder-logged-in {
	margin: 0!important;
	font-size: 13px!important;
	color: var(--qorder-text-muted)!important;
}

/* ===== دکمه پرداخت ===== */
.qorder-button {
	position: relative!important;
	display: flex!important;
	align-items: center!important;
	justify-content: center!important;
	gap: 8px!important;
	width: 100%!important;
	/* هدف لمتی استاندارد. */
	min-height: 42px!important;
	padding: 10px 14px!important;
	font-size: 15px!important;
	font-weight: 600!important;
	color: #fff!important;
	background: #2271b1!important;
	border: 0!important;
	border-radius: 10px!important;
	cursor: pointer!important;
	touch-action: manipulation!important;
	transition: background var(--qorder-transition), transform var(--qorder-transition), opacity var(--qorder-transition)!important;
}

.qorder-button:hover:not(:disabled) {
	background: #135e96!important;
}

/* بازخورد فشردن: مقیاس ملایم بدون تغییر چیدمان. */
.qorder-button:active:not(:disabled) {
	transform: scale(0.985)!important;
}

.qorder-button:disabled {
	opacity: 0.65!important;
	cursor: not-allowed!important;
}

.qorder-button__spinner {
	display: none!important;
	width: 14px!important;
	height: 14px!important;
	border: 2px solid rgba(255, 255, 255, 0.4)!important;
	border-top-color: #fff!important;
	border-radius: 50%!important;
	animation: qorder-spin 0.7s linear infinite!important;
}

.qorder-button.is-loading .qorder-button__spinner {
	display: inline-block!important;
}

.qorder-button.is-loading .qorder-button__label::after {
	content: "…"!important;
}

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

/* احترام به ترجیح کاهش حرکت. */
@media (prefers-reduced-motion: reduce) {
	.qorder-button,
	.qorder-field__input {
		transition: none;
	}

	.qorder-button:active:not(:disabled) {
		transform: none!important;
	}

	.qorder-button__spinner {
		animation-duration: 1.6s!important;
	}
}

/* ===== پیام خطا ===== */
.qorder-error {
	max-width: 400px!important;
	margin: 1.5em auto!important;
	padding: 10px 12px!important;
	font-size: 14px!important;
	line-height: 1.6!important;
	color: #d63638!important;
	background: var(--qorder-danger-bg)!important;
	border: 1px solid var(--qorder-danger-border)!important;
	border-radius: var(--qorder-radius-sm)!important;
	direction: rtl!important;
}

/* ===== پیام موفقیت ===== */
.qorder-success {
	max-width: 400px!important;
	margin: 1.5em auto!important;
	padding: 14px 16px!important;
	color: var(--qorder-success)!important;
	background: var(--qorder-success-bg)!important;
	border: 1px solid var(--qorder-success-border)!important;
	border-radius: var(--qorder-radius-sm)!important;
	direction: rtl!important;
	font-size: 14px!important;
}

.qorder-success p {
	margin: 0 0 6px!important;
	line-height: 1.6!important;
}

.qorder-success p:last-child {
	margin-bottom: 0!important;
}

.qorder-order-ref,
.qorder-result__ref {
	font-weight: 600!important;
}

.qorder-note {
	font-size: 13px!important;
	color: #5c6670!important;
}

/* ===== کادر نتیجهٔ پرداخت ===== */
.qorder-result {
	max-width: 400px!important;
	margin: 1.5em auto!important;
	padding: 14px 16px!important;
	border-radius: var(--qorder-radius)!important;
	direction: rtl!important;
	line-height: 1.6!important;
	font-size: 14px!important;
}

.qorder-result p {
	margin: 0 0 7px!important;
}

.qorder-result p:last-child {
	margin-bottom: 0!important;
}

.qorder-result__title {
	font-size: 16px!important;
	font-weight: 700!important;
}

.qorder-result--success {
	color: var(--qorder-success)!important;
	background: var(--qorder-success-bg)!important;
	border: 1px solid var(--qorder-success-border)!important;
}

.qorder-result--failure,
.qorder-result--error {
	color: #d63638!important;
	background: var(--qorder-danger-bg)!important;
	border: 1px solid var(--qorder-danger-border)!important;
}

.qorder-result--info {
	color: var(--qorder-info)!important;
	background: var(--qorder-info-bg)!important;
	border: 1px solid var(--qorder-info-border)!important;
}

.qorder-result__hint {
	font-size: 13px!important;
	color: #5c6670!important;
}

/* ===== fallback دستی redirect ===== */
.qorder-redirect {
	max-width: 400px!important;
	margin: 1.5em auto!important;
	padding: 14px 16px!important;
	text-align: center!important;
	color: var(--qorder-info)!important;
	background: var(--qorder-info-bg)!important;
	border: 1px solid var(--qorder-info-border)!important;
	border-radius: var(--qorder-radius-sm)!important;
	direction: rtl!important;
	font-size: 14px!important;
}

.qorder-redirect a {
	font-weight: 600!important;
	color: var(--qorder-info)!important;
}

/* ===== موبایل کوچک (۳۷۵px) ===== */
@media (max-width: 420px) {
	.qorder-form {
		margin: 12px auto;
		padding: 14px;
	}

	.qorder-amount {
		flex-direction: column!important;
		align-items: flex-start!important;
		gap: 2px!important;
	}

	.qorder-amount__value {
		font-size: 18px!important;
	}
}