/*
	Theme Name:	Xtra Child
	Theme URI:	https://www.rtl-theme.com/xtra-corporate-woocommerce-theme/
	Description:Sample child theme of Xtra theme for customization.
	Author:		Xtra Theme
	Author URI:	http://xtratheme.ir
	Template:	xtra
	Version:	1.0.0
*/

/* --- 1. اصلاح ساختار کلی (Flexbox) --- */
/* این بخش باعث می‌شود منو و محتوا کنار هم قرار بگیرند و فلوت‌ها خنثی شوند */
.elementor-widget-woocommerce-my-account .woocommerce {
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

/* --- 2. استایل‌دهی به باکس منو (سایدبار) --- */
/* بازنویسی کدهای قبلی شما برای حذف رنگ سیاه و پدینگ‌های زیاد */
.woocommerce-account .woocommerce-MyAccount-navigation,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation {
    width: 280px !important;  /* عرض ثابت و مناسب */
    background: #ffffff !important; /* سفید کردن پس‌زمینه */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; /* سایه نرم و مدرن */
    border-radius: 15px !important;
    padding: 20px !important; /* حذف آن پدینگ 110 پیکسلی */
    margin: 0 !important; /* حذف مارجین منفی */
    float: none !important; /* حذف فلوت برای سازگاری با فلکس */
    border: 1px solid #f0f0f0;
    position: relative;
    z-index: 2;
}

/* --- 3. استایل‌دهی به لینک‌های منو --- */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation ul li {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    background: transparent !important;
}

.woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px !important;
    color: #555 !important; /* تغییر رنگ متن از سفید به خاکستری تیره */
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

/* حالت هاور (وقتی موس روی گزینه می‌رود) */
.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #f7f9fc !important;
    color: #333 !important;
    transform: translateX(-5px); /* حرکت ریز */
}

/* حالت فعال (گزینه انتخاب شده) */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #eef2ff !important; /* آبی خیلی روشن */
    color: #4f46e5 !important; /* رنگ اصلی مدرن */
    font-weight: 700;
}

/* --- 4. استایل‌دهی به بخش محتوا (سمت چپ) --- */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 !important; /* پر کردن فضای باقی‌مانده */
    width: auto !important;
    float: none !important;
    background: #ffffff;
    padding: 40px !important;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}

/* --- 5. تنظیمات موبایل --- */
@media (max-width: 768px) {
    .elementor-widget-woocommerce-my-account .woocommerce {
        flex-direction: column !important;
    }
    
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}