/* ═══════════════════════════════════════════════════════════
   موبایل سلامت — استایل حرفه‌ای حساب کاربری (نسخه ۳٫۴٫۰)
   حل قطعی مشکلات دسکتاپ و هم‌ترازی فیلدها
   ═══════════════════════════════════════════════════════════ */

/* ─── کانتینر اختصاصی دسکتاپ ─── */
.ms-acc-page-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
	box-sizing: border-box;
}

/* ═══════════════════════════════════════
   ۱. صفحه ورود و ثبت‌نام (طراحی یکپارچه)
   ═══════════════════════════════════════ */

.ms-login-page {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60vh;
}

.ms-login-card {
	width: 100%;
	max-width: 480px; /* عرض استاندارد دسکتاپ */
	background: #fff;
	border: 1px solid #eef2f7;
	border-radius: 20px;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 20px 50px -20px rgba(0,0,0,0.1);
	padding: 40px;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.ms-login-card { padding: 30px 20px; border: 0; box-shadow: none; }
}

.ms-login-logo { text-align: center; margin-bottom: 24px; }
.ms-login-logo__icon { 
	display: inline-flex; width: 64px; height: 64px; border-radius: 18px; 
	background: linear-gradient(135deg, #10b98b, #059672); color: #fff;
	align-items: center; justify-content: center; box-shadow: 0 8px 20px -8px rgba(5,150,105,0.5);
}

.ms-login-card__title { font-size: 24px; font-weight: 900; color: #0f172a; text-align: center; margin-bottom: 10px; }
.ms-login-card__desc { font-size: 14px; color: #64748b; text-align: center; margin-bottom: 30px; line-height: 1.6; }

.ms-login-tabs { display: flex; background: #f1f5f9; border-radius: 14px; padding: 5px; margin-bottom: 30px; gap: 5px; }
.ms-login-tab { flex: 1; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #64748b; font-weight: 800; cursor: pointer; transition: 0.2s; }
.ms-login-tab.is-active { background: #fff; color: #059672; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

.ms-login-label { display: block; font-size: 13px; font-weight: 800; color: #334155; margin-bottom: 8px; }
.ms-login-input { 
	width: 100% !important; height: 54px !important; padding: 0 16px !important; margin-bottom: 20px !important;
	border: 2px solid #f1f5f9 !important; border-radius: 14px !important; background: #f8fafc !important;
	font-size: 16px !important; color: #0f172a !important; box-sizing: border-box !important; transition: 0.2s;
}
.ms-login-input:focus { border-color: #10b98b !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(16,185,139,0.1) !important; outline: none !important; }

.ms-login-btn { 
	width: 100%; height: 54px; border: 0; border-radius: 14px; background: #ef4056; color: #fff;
	font-size: 16px; font-weight: 900; cursor: pointer; transition: 0.2s; box-shadow: 0 8px 20px -8px rgba(239,64,86,0.5);
}
.ms-login-btn:hover { background: #d63850; transform: translateY(-1px); }

/* ═══════════════════════════════════════
   ۲. حساب کاربری (طراحی حرفه‌ای ۲ ستونه)
   ═══════════════════════════════════════ */

/* تراز کردن ستون‌های ووکامرس */
.woocommerce-account .woocommerce {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

@media (min-width: 992px) {
	.woocommerce-account .woocommerce {
		flex-direction: row-reverse !important; /* منو راست، محتوا چپ */
		align-items: flex-start;
	}
	.ms-accnav-wrap {
		width: 300px !important;
		flex-shrink: 0;
		position: sticky;
		top: 100px;
	}
	.woocommerce-account .woocommerce-MyAccount-content {
		flex: 1;
		min-width: 0;
		background: #fff;
		border: 1px solid #eef2f7;
		border-radius: 20px;
		padding: 35px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.02);
	}
}

/* کارت پروفایل در سایدبار */
.ms-acc-user {
	background: linear-gradient(135deg, #04785e, #059672);
	border-radius: 20px 20px 0 0;
	padding: 24px 20px;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 15px;
}
.ms-acc-user__avatar {
	width: 54px; height: 54px; border-radius: 50%;
	background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.4);
	display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900;
}

.ms-accnav {
	background: #fff;
	border: 1px solid #eef2f7;
	border-top: 0;
	border-radius: 0 0 20px 20px;
	box-shadow: 0 10px 30px -15px rgba(0,0,0,0.05);
	padding: 10px;
}
.ms-accnav ul { list-style: none; margin: 0; padding: 0; }
.ms-accnav ul li a {
	display: flex; align-items: center; padding: 14px 18px; border-radius: 12px;
	font-weight: 800; color: #475569; transition: 0.2s; font-size: 14px;
}
.ms-accnav ul li.is-active a { background: #059672; color: #fff; box-shadow: 0 8px 15px -5px rgba(5,150,105,0.4); }
.ms-accnav ul li a:hover:not(.is-active) { background: #f0fdf4; color: #059672; }

/* ─── داشبورد (خلاصه وضعیت دیجی‌کالایی) ─── */
.ms-dash__section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ms-dash__section-head b { font-size: 18px; font-weight: 900; }

.ms-acc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
.ms-acc-stat { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 16px; padding: 20px; text-align: center; }
.ms-acc-stat__num { display: block; font-size: 24px; font-weight: 900; color: #059672; }
.ms-acc-stat__label { font-size: 12px; color: #94a3b8; font-weight: 800; }

@media (max-width: 768px) {
	.ms-acc-stats { grid-template-columns: 1fr; }
	.ms-acc-stat { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; }
}

/* ═══════════════════════════════════════
   ۳. تسویه حساب (Checkout)
   ═══════════════════════════════════════ */
@media (min-width: 1024px) {
	.woocommerce-checkout form.checkout {
		display: flex;
		flex-direction: row-reverse !important;
		gap: 30px;
	}
	.woocommerce-checkout .col2-set { flex: 1; }
	.woocommerce-checkout #order_review, .woocommerce-checkout #order_review_heading { width: 420px; flex-shrink: 0; }
}

/* استایل فیلدها در تمام صفحات */
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	border: 2px solid #f1f5f9 !important;
	border-radius: 12px !important;
	height: 50px !important;
	padding: 0 15px !important;
}