/*
 * فایل RTL.CSS نهایی برای قالب WHMCS
 * این فایل جهت راست به چپ (RTL) و تراز متن را تنظیم کرده و مشکل چیدمان کاشی‌ها را برطرف می‌کند.
 */

/* ----------------------------------------------------- */
/* 1. تنظیمات عمومی جهت و تراز متن */
/* ----------------------------------------------------- */

/* اعمال راست تراز بودن روی تمام عناصر متنی اصلی */
body, 
p, 
h1, h2, h3, h4, h5, h6, 
ul, ol, li, 
table, 
.card,
.breadcrumb,
.alert {
    text-align: right !important; 
}

/* 2. اصلاح جهت در فیلدهای ورودی (برای متون فارسی) */
input[type="text"], 
input[type="email"], 
input[type="password"],
textarea,
.form-control {
    text-align: right !important;
    direction: rtl !important;
}

/* 3. اصلاح کلاس های شناور (Float) و حاشیه های خودکار (Auto Margins) */
.float-left {
    float: right !important;
}
.float-right {
    float: left !important;
}
.mr-auto {
    margin-right: auto !important;
    margin-left: initial !important; 
}
.ml-auto {
    margin-left: auto !important;
    margin-right: initial !important; 
}
.text-left {
    text-align: right !important;
}
.text-right {
    text-align: left !important;
}

/* ----------------------------------------------------- */
/* 🚨 4. اصلاح ویژه کاشی‌های اصلی (Tiles - سرویس، دامنه، تیکت، فاکتور) 🚨 */
/* هدایت آیکون به سمت چپ کاشی بدون به هم ریختگی چیدمان */
/* ----------------------------------------------------- */

/* ----------------------------------------------------- */
/* 🚨 4. اصلاح نهایی با Flexbox (تمرکز بر جداسازی) 🚨 */
/* ----------------------------------------------------- */

/* ----------------------------------------------------- */
/* 4. اصلاح کاشی‌ها - پشتیبانی از تگ <img> برای چپ‌چین شدن */
/* ----------------------------------------------------- */



/* محفظه متن: (Text container) */
/* اگر آیکون و متن داخل یک DIV والد باشند، این DIV باید عرض محدود و float: right داشته باشد */
.tiles .tile .stat, 
.tiles .tile .title,
.tiles .tile > div:not(.custom-tile-icon):not(.icon-container) {
    float: right !important;
    text-align: right !important;
    /* این عرض را کم می‌کنیم تا برای آیکون جا باز شود */
    width: 75% !important; 
}


/* ----------------------------------------------------- */
/* 5. اصلاح آیکون ها در لیست های کناری (Sidebar) و نوار ناوبری (Navbar) */
/* ----------------------------------------------------- */

/* اصلاح آیکون‌های سایدبار */
.list-group-item i.fa, 
.list-group-item i.fas,
.list-group-item i.far {
    margin-right: 0;
    margin-left: 10px; 
}

/* اصلاح چیدمان منوی اصلی (Header Navbar) */
.navbar-nav .nav-item {
    padding-left: 0 !important;
    padding-right: 5px !important;
}

/* اصلاح دکمه سبد خرید در نوار بالا */
.nav-link.cart-btn i.fa, .nav-link.cart-btn i.far {
    margin-right: 0;
    margin-left: 5px;
}



      /* ----------------------------------------------------- */
        /* استایل کادر موجودی دسکتاپ (Credit Box - Desktop) */
        /* ----------------------------------------------------- */
        .credit-box-desktop {
            display: none; /* پیش فرض پنهان */
            padding: 5px 15px;
            background-color: #1633C4; /* رنگ پس زمینه روشن */
            border-radius: 8px;
            border: 1px solid #000000;
            white-space: nowrap; 
            text-align: left; /* برای نمایش صحیح واحد پولی */
            margin-right: 20px;
        }
        
        /* نمایش کادر در دسکتاپ (1200px به بالا) */
        @media (min-width: 1200px) { 
            .credit-box-desktop {
                display: flex; 
                align-items: center;
            }
        }
        
        .credit-box-desktop i {
            color: #00FF27; /* رنگ آیکون */
            margin-left: 5px; /* فاصله آیکون از متن */
        }
        
        .credit-box-desktop .balance-amount {
            font-weight: bold;
            color: #FFFFFF; /* رنگ سبز برای موجودی */
            direction: ltr; /* موجودی را چپ چین نمایش می‌دهد */
            font-size: 14px;
            line-height: 1;
        }

        /* ----------------------------------------------------- */
        /* استایل کادر موجودی موبایل (Credit Box - Mobile) */
        /* ----------------------------------------------------- */
        
             .custom-nav-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        .custom-nav-list {
            flex-grow: 1; /* اجازه رشد به لیست منوها */
        }
        
        .credit-box-mobile {
            display: none; /* پیش فرض پنهان در دسکتاپ */
            padding: 10px 15px;
            margin: 10px 15px 15px 15px;
            background-color: #1633C4;
            border-radius: 8px;
            text-align: right;
            border: 1px solid #000000;
        }
        
        /* نمایش در موبایل/تبلت (کوچکتر از 1200px) */
        @media (max-width: 1199.98px) { 
            .credit-box-mobile {
                display: block; 
            }
        }
        
        .credit-box-mobile .balance-amount {
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            direction: ltr;
            display: inline-block;
        }
        
        .credit-box-mobile a.btn {
            margin-top: 10px;
            width: 100%;
        }
    
    /* ========================================================== */
/* 1. تعریف فونت جدید (Xino Yekan V2 Bold) */
/* مسیر فونت: ../fonts/Xino_YekanV2Bold.woff */
/* ========================================================== */
@font-face {
    font-family: 'Xino Yekan V2'; /* نامی که در استایل‌ها استفاده می‌شود */
    src: url('../fonts/Xino_YekanV2Bold.woff') format('woff');
    font-weight: bold; /* چون فایل فونت شما Bold است */
    font-style: normal;
    font-display: swap; 
}


/* ========================================================== */
/* 2. اعمال فونت به کل قالب */
/* ========================================================== */

/* اعمال به بدنه اصلی و تمامی عناصر متنی */
body, 
html {
    font-family: 'Xino Yekan V2', Tahoma, Arial, sans-serif !important; 
}

/* اعمال به تمامی عناوین و عناصر مهم UI برای اطمینان بیشتر */
h1, h2, h3, h4, h5, h6, 
.btn, 
.form-control, 
.nav-link, 
.custom-nav-list a,
.font-weight-normal,
.font-weight-bold {
    /* اگر فقط نسخه Bold را دارید، تمام این عناصر Bold نمایش داده خواهند شد. */
    font-family: 'Xino Yekan V2', Tahoma, Arial, sans-serif !important;
}
    
/* ----------------------------------------------------------
   تنظیمات چیدمان نوار لوگو (Navbar-light) برای RTL
/* ----------------------------------------------------------
   تنظیمات چیدمان نوار لوگو (Navbar-light) برای RTL
   ---------------------------------------------------------- */
.navbar-light .container {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: space-between; 
    width: 100%;
}

@media (min-width: 1200px) {
    /* 1. لوگو اصلی (navbar-brand): راست‌ترین عنصر (Order 1) */
    .navbar-light .navbar-brand {
        order: 1;
        margin-right: 0 !important;
        margin-left: 20px !important; 
    }
    
    /* 2. کادر جستجو (header-search-form): مرکز نوار (Order 2) */
    .navbar-light .header-search-form {
        order: 2;
        flex-grow: 1; /* اجازه پر کردن فضای باقیمانده */
        max-width: 400px;
        margin-right: 0 !important;
        /* فضای خالی بزرگ برای جدا کردن از لوگوی چپ و سبد خرید */
        margin-left: 50px !important; 
    }

    /* 3. سبد خرید و لوگوی کوچک (toolbar): چپ‌ترین عنصر (Order 3) */
    .navbar-light .toolbar {
        order: 3;
        /* تبدیل toolbar به فلکس برای مرتب‌سازی لوگوی کوچک و سبد خرید */
        display: flex;
        align-items: center;
        margin-left: 0 !important; 
        margin-right: 0 !important;
    }
    
    /* فیکس کلی عرض جستجو */
     .navbar-light .input-group.search {
        width: 100%;
    }
}

/* ----------------------------------------------------------
   کنترل اندازه و استایل لوگوها
   ---------------------------------------------------------- */

/* کنترل اندازه لوگوی اصلی (بارگذاری شده از پنل ادمین) */
.navbar-light .navbar-brand .logo-img {
    height: 40px; 
    max-height: 40px;
    width: auto; 
}

/* استایل کادر لوگوی کوچک (جدید) */
.navbar-light .custom-left-logo-item {
    font-weight: bold;
    color: #fff; /* رنگ متن (iranhetzner) */
    padding-left: 15px; /* فاصله از سبد خرید */
}
.navbar-light .custom-left-logo-item .custom-left-logo {
    display: flex;
    align-items: center;
}

/* کنترل اندازه لوگوی کوچک سمت چپ (logo-white.png) */
.custom-left-logo .small-logo-img {
    height: 30px; 
    max-width: none;
    vertical-align: middle;
    margin-left: 5px; /* فاصله از نام شرکت */
}

/* فاصله بین آیتم‌های سبد خرید و لوگوی کوچک */
.navbar-light .toolbar .nav-item {
    /* تنظیم فاصله بین آیتم‌ها را فیکس می‌کند */
    margin-right: 15px !important; 
    margin-left: 0 !important;
}
.navbar-nav.toolbar li:last-child {
    /* حذف فاصله اضافی در آخرین عنصر (دکمه موبایل) */
    margin-right: 0 !important;
}

/* ==========================================================
   💥 فیکس نهایی و قطعی: ریسپانسیو موبایل
   (برای جداول عریض و نمادهای اعتماد در فوتر)
   ========================================================== */

@media (max-width: 767.98px) {

    /* 🚨 گام ۱: تنظیمات کلی برای جلوگیری از بیرون‌زدگی محتوا (مهم‌ترین فیکس) */
    /* این کار تضمین می‌کند که صفحه به طور کلی از عرض موبایل بیرون نمی‌زند */
    body, html {
        overflow-x: hidden !important; /* مهم: کل صفحه را ثابت نگه می‌دارد */
        width: 100% !important;
        min-width: 100% !important;
    }
    
    /* اجازه دادن به کانتینر محتوا برای اسکرول (جذب محتوای عریض) */
    .main-content, 
    .container-fluid.main-content,
    .container {
        max-width: 100% !important;
        /* محتوای عریض (مثل جدول) داخل این اسکرول می‌شود، در حالی که BODY ثابت می‌ماند */
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch !important; /* اسکرول بهتر در iOS */
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    /* 🚨 گام ۲: فیکس اجباری جدول صورتحساب‌ها */

    /* اطمینان از اینکه جدول درون یک کانتینر اسکرول‌شونده قرار می‌گیرد */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* تنظیم حداقل عرض برای فعال شدن اسکرول در خود جدول */
    #tableInvoicesList,
    .main-content table {
        min-width: 680px !important; /* عرض کافی برای همه ستون‌ها */
        width: auto !important;
        display: table !important;
    }

    /* فیکس نمایش سلول‌ها و لغو نمایش عمودی ناسازگار */
    #tableInvoicesList td, 
    #tableInvoicesList th {
        padding: 8px 6px !important; /* کاهش پدینگ */
        white-space: nowrap !important; /* جلوگیری از شکستن خط */
        height: auto !important; /* حذف ارتفاع ثابت */
    }

    /* لغو قانون نمایش عمودی برچسب وضعیت و بازگرداندن به حالت نرمال */
    #tableInvoicesList .label.status {
        writing-mode: horizontal-tb !important; /* حالت نوشتار نرمال افقی */
        height: auto !important;
        line-height: 1.5 !important;
        padding: 5px 10px !important;
        display: inline-block !important; 
        width: auto !important;
    }


    /* 🚨 گام ۳: فیکس تصاویر نماد اعتماد در فوتر (از کد HTML ارسالی) */
    
    /* تصاویر نماد اعتماد و زیبال را وادار به مقیاس‌پذیری می‌کنیم */
    .footer-trust-badges .d-flex img {
        width: 48% !important; /* هر کدام تقریبا نصف عرض کانتینر خود را اشغال کنند */
        height: auto !important;
        max-width: 100% !important;
        display: inline-block !important;
    }
    .footer-trust-badges .d-flex {
        /* اگر نمادها بزرگتر از فضای موجود باشند، به خط بعدی هدایت می‌شوند */
        flex-wrap: wrap !important; 
        justify-content: center !important; /* وسط چین برای موبایل */
    }
    .footer-trust-badges a {
        /* اعمال حداکثر عرض به لینک‌های والد */
        max-width: 50% !important; 
        padding: 5px;
    }
    
    /* 🚨 گام ۴: فیکس چینش ستون‌های فوتر */
    .footer.custom-fancy-footer .row {
        flex-direction: column !important; /* ستون‌ها را زیر هم قرار می‌دهد */
    }
    .footer.custom-fancy-footer .col-md-3,
    .footer-bottom-bar .col-md-6,
    .footer-bottom-bar .col-12 {
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 20px !important;
        text-align: center !important; /* چینش وسط برای موبایل */
    }
    
}