/* ============================================================
   تمیزک — طراحیِ جدیدِ صفحه‌ی ورود (my-orders، حالتِ واردنشده)
   کلاس‌ها با پیشوند tzo-auth- تا با بقیه‌ی استایل‌ها قاطی نشوند.
   عکس‌های پس‌زمینه: tzo-auth-bg.jpg (الگوی نظافت) و
   tzo-auth-photo.webp (عکسِ همیار) — کنارِ همین فایل، در پوشه‌ی افزونه.
   ============================================================ */

/* حالتِ ورود، پدینگِ پیش‌فرضِ .tzo-myorders-wrap رو خنثی می‌کنیم
   تا هدر/عکس تا لبه‌ی صفحه بره؛ خودِ کارت پدینگِ خودشو داره. */
.tzo-myorders-wrap--auth{ padding: 0 !important; max-width: none; }

.tzo-auth-wrap{
	--tzo-auth-blue: #17c1f0;
	--tzo-auth-blue-deep: #0a93cf;
	--tzo-auth-blue-soft: #eaf9fe;
	--tzo-auth-ink: #223142;
	--tzo-auth-ink-soft: #8095a3;
	--tzo-auth-line: #e3edf4;
	--tzo-auth-surface: #ffffff;
	--tzo-auth-bg: #f0f4f7;
	--tzo-auth-pattern: url('tzo-auth-bg.jpg');
	--tzo-auth-photo: url('9k.jpg');

	max-width: 480px;
	margin: 0 auto;
	min-height: 100vh;
	background:
		linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)),
		var(--tzo-auth-pattern) repeat center / 220px;
}

/* ---------- هدرِ گرافیکی (موبایل) ---------- */
.tzo-auth-hero{
	position: relative;
	height: 250px;
	border-radius: 0 0 28px 28px;
	overflow: hidden;
	background: linear-gradient(160deg, var(--tzo-auth-blue), var(--tzo-auth-blue-deep));
}
.tzo-auth-hero__photo{
	position: absolute; inset: 0;
	background: var(--tzo-auth-photo) center 30% / cover no-repeat;
}
.tzo-auth-hero__tint{
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(175deg, rgba(23,193,240,.72), rgba(10,147,207,.92));
}
.tzo-auth-hero__brand{
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px; color: #fff; text-align: center;
}
.tzo-auth-hero__logo{
	width: 54px; height: 54px; border-radius: 15px; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.tzo-auth-hero__logo img{ width: 100%; height: 100%; object-fit: cover; }
.tzo-auth-hero__name{ font-size: 26px; font-weight: 700; }
.tzo-auth-hero__slogan{ font-size: 13px; opacity: .9; margin-top: 4px; }
.tzo-auth-hero__home{
	position: absolute; top: 18px; right: 16px;
	display: flex; align-items: center; gap: 6px;
	font-size: 12px; color: #fff !important; text-decoration: none !important;
	background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
	padding: 7px 12px; border-radius: 999px;
}

/* ---------- آیکونِ گوشیِ بالایِ تب‌ها (فقط دسکتاپ، مطابقِ نمونه) ---------- */
.tzo-auth-phone-icon{ display: none; align-items: center; justify-content: center; margin: 0 auto 4px; }
.tzo-auth-phone-icon img{ width: 72px; height: 72px; }

/* ---------- کارتِ فرم ---------- */
.tzo-auth-card{
	position: relative; margin-top: -26px; z-index: 2;
	background:
		linear-gradient(rgba(255,255,255,.96), rgba(255,255,255,.96)),
		var(--tzo-auth-pattern) repeat center / 220px;
	border-radius: 26px 26px 0 0;
	box-shadow: 0 -10px 30px -18px rgba(34,49,66,.18);
	padding: 22px 18px 24px;
	display: flex; flex-direction: column; gap: 18px;
}

/* ---------- تبِ نقش (مشتری/همیار) ---------- */
.tzo-auth-role{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tzo-auth-role__label{ font-size: 13.5px; font-weight: 600; color: var(--tzo-auth-ink); white-space: nowrap; }
.tzo-auth-role__tabs{ display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--tzo-auth-bg); }
.tzo-auth-role__tab{
	border: 0; border-radius: 9px; padding: 7px 13px;
	font-family: inherit; font-size: 13px; font-weight: 600;
	color: var(--tzo-auth-ink-soft); background: transparent; cursor: pointer;
	white-space: nowrap;
}
.tzo-auth-role__tab.is-active{
	background: var(--tzo-auth-surface); color: var(--tzo-auth-blue-deep);
	box-shadow: 0 2px 6px -2px rgba(34,49,66,.18);
}
/* تبِ «همیار»: فعلاً تزئینی و غیرقابلِ کلیک */
.tzo-auth-role__tab.is-disabled{
	cursor: not-allowed; opacity: .5;
}

/* ---------- فیلدِ شماره‌موبایل (باکسیِ آیکون‌دار) ---------- */
.tzo-auth-field{ display: flex; align-items: center; height: 54px; padding: 0 14px;
	background: var(--tzo-auth-surface); border: 1.5px solid var(--tzo-auth-line);
	border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.tzo-auth-field:focus-within{ border-color: var(--tzo-auth-blue); box-shadow: 0 0 0 4px rgba(23,193,240,.16); }
.tzo-auth-field__icon{ flex: none; display: flex; align-items: center; margin-inline-end: 10px;
	padding-inline-end: 10px; border-inline-end: 1px solid var(--tzo-auth-line); color: var(--tzo-auth-ink-soft); }
/* اینپوتِ شماره باید همیشه چپ‌به‌راست نوشته بشه؛ قانونِ کلیِ
   form.css (که rtl می‌کنه) رو اینجا override می‌کنیم. */
.tzo-auth-field .tzo-input{ flex: 1; min-width: 0; border: 0; background: transparent; margin: 0; padding: 0;
	height: auto; font-size: 17px; direction: ltr !important; text-align: left !important; }
.tzo-auth-field .tzo-input:focus{ box-shadow: none; }
.tzo-auth-field .tzo-input::placeholder{ direction: ltr !important; text-align: left !important; color: #c3ccd3; }

/* ---------- سرصفحه‌ی داخلیِ صفحه‌ی کد (دکمه‌ی بازگشت) ---------- */
.tzo-auth-topbar{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tzo-auth-topbar__title{ font-size: 14.5px; font-weight: 600; color: var(--tzo-auth-ink); }
.tzo-auth-topbar__spacer{ width: 36px; }
.tzo-auth-iconbtn{
	width: 36px; height: 36px; border-radius: 10px;
	background: var(--tzo-auth-bg); border: 0; display: flex; align-items: center; justify-content: center;
	color: var(--tzo-auth-ink); cursor: pointer;
}

/* ---------- سرِ صفحه‌ی کد (بَج + عنوان) ---------- */
.tzo-auth-otp-head{ display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tzo-auth-otp-head__badge{
	width: 52px; height: 52px; border-radius: 16px;
	background: linear-gradient(135deg, var(--tzo-auth-blue), var(--tzo-auth-blue-deep));
	display: flex; align-items: center; justify-content: center; margin-bottom: 2px;
}
.tzo-auth-otp-head__title{ font-size: 17px; font-weight: 700; color: var(--tzo-auth-ink); }

/* پنلِ عکس‌دارِ دسکتاپ، روی موبایل مخفیه (فقط تویِ مدیاکوئریِ پایین باز می‌شه) */
.tzo-auth-desktop-photo{ display: none; }

/* ---------- حالتِ خاکستریِ دکمه‌ی «دریافت کد تایید» (قبلِ کلیک/فوکوسِ فیلد) ---------- */
.tzo-auth-card .tzo-btn--primary.is-inactive{
	background: var(--tzo-auth-bg); color: var(--tzo-auth-ink-soft);
}

/* ---------- ارسالِ دوباره‌ی کد (سؤال + شمارش + دکمه‌ی فعال/غیرفعال) ---------- */
.tzo-auth-resend{ text-align: center; font-size: 12px; color: var(--tzo-auth-ink-soft); margin-top: 4px; line-height: 1.9; }
.tzo-auth-resend span{ display: block; }
.tzo-auth-resend b{ color: var(--tzo-auth-ink); font-variant-numeric: tabular-nums; }
.tzo-auth-resend-dial{ display: flex; align-items: center; justify-content: center; margin: 8px 0 2px; }
.tzo-auth-card .tzo-otp-resend__btn:disabled{
	background: var(--tzo-auth-bg); color: var(--tzo-auth-ink-soft);
	cursor: not-allowed; opacity: .7;
}

/* ---------- متنِ حقوقی ---------- */
.tzo-auth-legal{ text-align: center; font-size: 11px; line-height: 1.9; color: var(--tzo-auth-ink-soft); margin-top: auto; }
.tzo-auth-legal a{ color: var(--tzo-auth-blue-deep); }

/* ============================================================
   حالتِ دسکتاپ: دو ستون (عکس در یک طرف، فرم در طرفِ دیگر)
   شبیهِ چیدمانِ رقیب — عکس‌محور، فرم وسط‌چینِ عمودی
   ============================================================ */
@media (min-width: 900px){
	.tzo-svc--auth{ max-width: none; padding-bottom: 0; }
	.tzo-myorders-wrap--auth{ display: flex; }
	.tzo-auth-wrap{
		max-width: none; width: 100%; margin: 0;
		display: flex; flex-direction: row-reverse; /* راست‌چین: فرم سمتِ راست مثلِ نمونه */
		background: var(--tzo-auth-surface);
	}
	.tzo-auth-desktop-photo{
		display: flex; flex: 1 1 55%;
		position: relative;
		background: var(--tzo-auth-photo) center 35% / cover no-repeat;
		align-items: flex-end; padding: 48px 48px 110px;
		border-radius: 0 32px 32px 0;
		overflow: hidden;
	}
	.tzo-auth-desktop-photo__tint{
		position: absolute; inset: 0; pointer-events: none;
		background: linear-gradient(175deg, rgba(23,193,240,.55), rgba(10,147,207,.88));
	}
	.tzo-auth-desktop-photo__brand{ position: relative; z-index: 1; color: #fff; }
	.tzo-auth-desktop-photo__logo{
		width: 58px; height: 58px; border-radius: 16px; margin-bottom: 18px; overflow: hidden;
		display: flex; align-items: center; justify-content: center;
	}
	.tzo-auth-desktop-photo__logo img{ width: 100%; height: 100%; object-fit: cover; }
	.tzo-auth-desktop-photo__name{ font-size: 30px; font-weight: 700; }
	.tzo-auth-desktop-photo__slogan{ font-size: 14.5px; opacity: .9; margin-top: 8px; }

	.tzo-auth-panel{
		flex: 1 1 45%; display: flex; align-items: center; justify-content: center;
		padding: 40px; min-height: 100vh;
	}
	.tzo-auth-panel-inner{ width: 100%; max-width: 380px; }

	/* رویِ دسکتاپ، هدرِ موبایل و پس‌زمینه‌ی الگوییِ کارت خاموش می‌شه؛
	   عکسِ سمتِ چپ جایگزینش شده */
	.tzo-auth-hero{ display: none; }
	.tzo-auth-phone-icon{ display: flex; }
	.tzo-auth-otp-head__badge{ display: none; }
	.tzo-auth-card{
		margin-top: 0; border-radius: 24px; box-shadow: 0 20px 50px -20px rgba(34,49,66,.25);
		background: var(--tzo-auth-surface);
	}
	#tzoMoStep2 .tzo-auth-card{ box-shadow: 0 20px 50px -20px rgba(34,49,66,.25); }
}