/* ============================================================
   تمیزک — اسکلتِ پنلِ داشبوردِ بعدِ لاگین (my-orders، حالتِ واردشده)
   کارتِ پروفایلِ بالا + سایدبارِ سمتِ راست در دسکتاپ.
   رنگ‌ها هماهنگ با بقیه‌ی سایت (آبیِ برند #17c1f0).
   ============================================================ */

.tzo-panel-wrap{
	--tzo-d-blue: #17c1f0;
	--tzo-d-blue-deep: #0a93cf;
	--tzo-d-ink: #223142;
	--tzo-d-ink-soft: #7a8a99;
	--tzo-d-line: #e3edf4;
	--tzo-d-bg: #f0f4f7;
	max-width: 1100px;
	margin: 0 auto;
}

/* ---------- کارتِ بالای پروفایل ---------- */
.tzo-profile-card{
	background: #fff; border-radius: 18px; padding: 18px;
	box-shadow: 0 2px 14px -6px rgba(34,49,66,.12);
	margin-bottom: 16px;
}
.tzo-profile-card__top{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.tzo-profile-card__avatar{
	width: 56px; height: 56px; border-radius: 50%; flex: none;
	background: linear-gradient(135deg, var(--tzo-d-blue), var(--tzo-d-blue-deep));
	display: flex; align-items: center; justify-content: center;
	color: #fff; box-shadow: 0 4px 12px -3px rgba(23,193,240,.5);
}
.tzo-profile-card__info{ flex: 1 1 200px; min-width: 160px; }
.tzo-profile-card__name{ font-size: 16px; font-weight: 700; color: var(--tzo-d-ink); margin-bottom: 8px; }
.tzo-profile-card__stats{ display: flex; flex-wrap: wrap; gap: 6px; }
.tzo-profile-card__stat{
	font-size: 11.5px; color: var(--tzo-d-ink-soft); background: var(--tzo-d-bg);
	border-radius: 999px; padding: 4px 11px;
}
.tzo-profile-card__stat b{ color: var(--tzo-d-ink); font-weight: 700; }
.tzo-profile-card__invite{
	display: flex; align-items: center; gap: 8px; width: 100%;
	margin-top: 14px; padding: 12px 14px;
	border: 1px dashed var(--tzo-d-line); border-radius: 12px;
	background: none; font-family: inherit; font-size: 13px; font-weight: 700;
	color: var(--tzo-d-ink-soft); cursor: not-allowed;
}
.tzo-profile-card__invite-icon{
	flex: none; width: 30px; height: 30px; border-radius: 50%;
	background: var(--tzo-d-bg); color: var(--tzo-d-blue-deep);
	display: flex; align-items: center; justify-content: center;
}
.tzo-profile-card__invite .tzo-badge-soon{ margin-inline-start: auto; }
/* ============================================================
   نوارِ تبِ پایینِ موبایل — شبیهِ اپلیکیشن (ثابت، آیکون+برچسب)
   عمداً کاملاً داخلِ مدیاکوئریِ موبایله؛ نه فقط از رویِ ظاهر، بلکه
   چون قبلاً یه‌بار همین استایل بدونِ مدیاکوئری، به‌خاطرِ اسپسیفیسیتیِ
   بالاتر، رویِ دسکتاپ هم اثر گذاشت و سایدبار رو قایم کرد.
   ============================================================ */
@media (max-width: 899px){
	.tzo-myorders-tabs > .tzo-svc-tabs__nav{
		position: fixed; right: 0; left: 0; bottom: 0; z-index: 40;
		display: flex; justify-content: space-around; align-items: stretch;
		background: #fff; border-top: 1px solid var(--tzo-d-line);
		border-bottom: none; border-radius: 20px 20px 0 0;
		box-shadow: 0 -6px 22px -10px rgba(34,49,66,.22);
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0));
	}
	.tzo-myorders-tabs > .tzo-svc-tabs__nav .tzo-svc-tabs__btn{
		flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 3px; padding: 6px 4px; background: none; color: var(--tzo-d-ink-soft);
		font-size: 10.5px; font-weight: 600; border-radius: 14px;
		transition: color .18s ease;
	}
	.tzo-myorders-tabs > .tzo-svc-tabs__nav .tzo-svc-tabs__btn-icon{
		position: relative; display: flex; align-items: center; justify-content: center;
		width: 34px; height: 34px; border-radius: 50%;
		transition: background-color .18s ease, color .18s ease;
	}
	.tzo-myorders-tabs > .tzo-svc-tabs__nav .tzo-svc-tabs__btn.is-active{ color: var(--tzo-d-blue-deep); font-weight: 700; }
	.tzo-myorders-tabs > .tzo-svc-tabs__nav .tzo-svc-tabs__btn.is-active .tzo-svc-tabs__btn-icon{
		background: linear-gradient(135deg, var(--tzo-d-blue), var(--tzo-d-blue-deep));
		color: #fff;
		box-shadow: 0 4px 12px -3px rgba(23,193,240,.55);
	}
	.tzo-myorders-tabs > .tzo-svc-tabs__nav .tzo-unread-dot{
		position: absolute; top: 1px; left: 1px; margin: 0;
		width: 8px; height: 8px; border: 2px solid #fff;
	}

	/* جایِ خالیِ کافی زیرِ محتوا تا نوارِ ثابتِ پایین چیزی رو نپوشونه */
	.tzo-myorders-wrap--panel{ padding-bottom: 84px; }
}

/* ---------- سایدبارِ دسکتاپ (روی موبایل مخفیه، به‌جاش تبِ بالا کار می‌کنه) ---------- */
.tzo-sidebar-nav{ display: none; }

/* ---------- خروجِ مخصوصِ موبایل (انتهایِ تبِ «حساب من»)، رویِ دسکتاپ مخفی می‌شه ---------- */
.tzo-myorders-head{ margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tzo-d-line); }
.tzo-myorders-head .tzo-myorders-logout{ width: 100%; padding: 12px; }

@media (min-width: 900px){
	.tzo-svc--panel{ max-width: 1140px; }
	.tzo-myorders-wrap--panel{ max-width: none; padding-left: 0; padding-right: 0; }
	.tzo-myorders-head{ display: none; } /* دسکتاپ: خروج تویِ سایدباره */

	.tzo-svc-tabs__nav{ display: none; } /* دسکتاپ: تبِ بالا لازم نیست */

	.tzo-svc-tabs{
		display: flex; flex-direction: row; align-items: flex-start; gap: 22px;
	}
	.tzo-svc-tabs__panel{ flex: 1; min-width: 0; }

	.tzo-sidebar-nav{
		display: flex; flex-direction: column; gap: 6px;
		width: 240px; flex: none;
		background: #fff; border-radius: 18px; padding: 14px 12px;
		box-shadow: 0 2px 14px -6px rgba(34,49,66,.12);
	}
	.tzo-sidebar-nav form{ display: block; width: 100%; margin: 0; }
	.tzo-sidebar-nav__item{
		display: flex; align-items: center; gap: 10px; width: 100%;
		border: none; background: transparent; text-align: right;
		border-radius: 12px; padding: 13px 14px;
		font-family: inherit; font-size: 13.5px; font-weight: 600;
		color: var(--tzo-d-ink); cursor: pointer;
	}
	.tzo-sidebar-nav__icon{ flex: none; display: flex; color: var(--tzo-d-ink-soft); }
	.tzo-sidebar-nav__label{ flex: 1; }
	.tzo-sidebar-nav__item:hover{ background: var(--tzo-d-bg); }
	.tzo-sidebar-nav__item.is-active{
		background: linear-gradient(135deg, var(--tzo-d-blue), var(--tzo-d-blue-deep));
		color: #fff; box-shadow: 0 6px 16px -6px rgba(23,193,240,.55);
	}
	.tzo-sidebar-nav__item.is-active .tzo-sidebar-nav__icon{ color: #fff; }
	.tzo-sidebar-nav__item.is-disabled{ color: var(--tzo-d-ink-soft); cursor: not-allowed; }
	.tzo-sidebar-nav__item.is-disabled:hover{ background: transparent; }
	.tzo-sidebar-nav__item .tzo-badge-soon{
		font-size: 9px; font-weight: 700; color: var(--tzo-d-blue-deep);
		background: #eaf9fe; border-radius: 999px; padding: 1px 6px;
	}
	.tzo-sidebar-nav__logout{ color: #e05a6f; border-top: 1px solid var(--tzo-d-line); margin-top: 6px; padding-top: 14px; border-radius: 0 0 12px 12px; }
	.tzo-sidebar-nav__logout .tzo-sidebar-nav__icon{ color: #e05a6f; }
	.tzo-sidebar-nav__logout:hover{ background: #fdecec; }
}

/* ---------- نقطه‌ی قرمزِ اعلانِ خوانده‌نشده (هم رویِ نوارِ موبایل، هم سایدبار) ---------- */
.tzo-unread-dot{
	display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	background: #e05a6f; margin-inline-start: 4px; vertical-align: middle;
}
.tzo-sidebar-nav__item .tzo-unread-dot{ margin-inline-start: auto; }

/* ---------- کارتِ اعلان ---------- */
.tzo-announcement-card{
	background: #fff; border-radius: 16px; padding: 18px 20px; margin-bottom: 12px;
	border: 1px solid var(--tzo-d-line);
	box-shadow: 0 3px 14px -8px rgba(34,49,66,.15);
}
.tzo-announcement-card__head{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tzo-announcement-card__icon{
	flex: none; width: 30px; height: 30px; border-radius: 9px;
	background: linear-gradient(135deg, var(--tzo-d-blue), var(--tzo-d-blue-deep));
	color: #fff; display: flex; align-items: center; justify-content: center;
}
.tzo-announcement-card__title{ font-size: 14.5px; font-weight: 700; color: var(--tzo-d-ink); }
.tzo-announcement-card__body{ font-size: 13px; color: var(--tzo-d-ink-soft); line-height: 2; margin: 0; }

/* ---------- کارتِ «توجه» زیرِ لیستِ سرویس‌ها ---------- */
.tzo-notice-card{
	display: flex; gap: 14px; align-items: flex-start;
	background: #f7f5f2; border-radius: 14px; padding: 18px; margin-top: 16px;
}
.tzo-notice-card__icon{
	flex: none; width: 34px; height: 34px; border-radius: 50%;
	background: #fdecec; color: #e05a6f;
	display: flex; align-items: center; justify-content: center;
}
.tzo-notice-card__title{ font-size: 13.5px; font-weight: 700; color: #e05a6f; margin-bottom: 8px; }
.tzo-notice-card__text{ font-size: 12.5px; line-height: 2; color: #7a8a99; margin: 0; }