﻿/*----------------بهبود موبایل---------------*/

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
        width: 100% !important;
        max-width: 100% !important;
    }

    .img-flag {
        position: relative !important;
      /*  top: 0px !important;*/

     /*   margin: 5px 0;*/

    }

    /* بهبود ناوبری در موبایل */
    .nav-underline {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        padding-bottom: 5px;
    }

        .nav-underline .nav-link {
            white-space: nowrap;
            font-size: 0.85rem;
            padding: 0.5rem;
        }

    /* بهبود بخش محصول */
    .product-box, .filter-box {
        padding: 15px;
        margin-bottom: 15px;
    }

    /* بهبود تب‌ها در موبایل */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .nav-tabs .nav-item {
            flex: 0 0 auto;
        }

        .nav-tabs .nav-link {
            font-size: 0.8rem;
            padding: 0.5rem;
        }

    /* بهبود سکشن فیدبک */
    .feedback-section {
        flex-direction: column;
    }

    .feedback-form, .feedback-img {
        width: 100% !important;
    }

    /* بهبود گالری پروژه‌ها */
    .carousel-item-row {
        flex-direction: column;
    }

    .carousel-col {
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* بهبود بخش وبلاگ */
    .product-details-card .row {
        flex-direction: column;
    }

    .product-details-card .col-5,
    .product-details-card .col-7 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* بهبود بخش اسناد */
    .doc-card {
        flex-direction: row;
        align-items: center;
        padding: 10px;
    }

    /* بهبود فوتور */
    .footer-dark .row {
        flex-direction: column;
    }

    .footer-dark .col-md-2,
    .footer-dark .col-md-4 {
        width: 100%;
        margin-bottom: 20px;
    }

    /* بهبود ناوبری نهایی */
    .newsletter-bar .row {
        flex-direction: column-reverse;
    }

    .nl-form {
        width: 100%;
    }
    .product-details-card img {
        width: 100%;
    }
}

/* استایل‌های اضافی برای نمایش بهتر در موبایل */
@media (max-width: 576px) {
       .breadcrumb {
                /*flex-wrap: nowrap;*/
                overflow-x: auto;
            }

            .social-icons {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
            }
    .mobile-flex {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
        .mobile-flex div {
           display:flex;
        }
    .section-title {
        font-size: 1.2rem;
    }

    .hero-carousel,
    .hero-carousel .carousel-item {
        min-height: 250px;
        height: 250px;
    }

        .hero-carousel .glass {
            position: relative;
            width: 90%;
            margin: 10px auto;
            right: auto;
            top: auto;
        }

    .util-icons {
        justify-content: center;
        width: 100%;
        margin-top: 10px;
    }

    /* بهبود منو آف‌کنواس */
    .offcanvas-start {
        width: 85% !important;
    }

    .img-flag {
          top: 0px !important;

    }
}

/* پیشگیری از overflow горизонтаی */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}
/*----------------بهبود موبایل---------------*/

/* استایل پایه برای همه */
/*.header-white .container {
    flex-wrap: nowrap;*/ /* آیتم‌ها در یک خط بمونن */
/*}*/

/* تا 1400 پیکسل: فاصله‌ها کمتر شه */
/*@media (max-width: 1500px) {
    .header-white .nav {
        gap: 10px;*/ /* فاصله کمتر بین آیتم‌های منو */
    /*}

    .header-white img {
        left: 80px;
        height: 70px;*/ /* لوگو کمی کوچک‌تر */
    /*}
}
@media (min-width: 1330px) and (max-width: 1350px) {

    .header-white img {
        left: 70px;
        height: 70px;*/ /* لوگو کمی کوچک‌تر */
    /*}
}*/
/* تا 1200 پیکسل: منو وسط جمع بشه */
/*@media (min-width: 1330px) and (max-width: 1350px) {
    .header-white img {
        left: 40px;
        height: 60px;*/ /* لوگو کمی کوچک‌تر */
    /*}*/

    /*.header-white .nav {
        display: none !important;*/ /* منوی وسط مخفی */
    /*}*/

    /*.header-white .d-flex.flex-shrink-0 {
        gap: 5px;
    }
}*/

/* تا 992 پیکسل: آیتم‌ها روی دو خط مرتب شن */
/*@media (max-width: 992px) {
    .header-white .container {
        flex-wrap: wrap;*/ /* اجازه بده آیتم‌ها برن خط بعد */
        /*justify-content: space-between;
    }

    .header-white a img {
        height: 40px;
    }

    .header-white .d-flex.flex-shrink-0 {
        order: 2;*/ /* بیاد زیر لوگو */
        /*width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }
}*/

/* تا 576 پیکسل: خیلی جمع و جور */
/*@media (max-width: 576px) {

    .header-white .d-flex.flex-shrink-0 {
        width: auto !important;

    }
    .img-flag {
        display: none !important;
    }*/
/*    .header-white .d-flex.flex-shrink-0 a {
        font-size: 18px;
    }

    .header-white img.img-flag {
        height: 20px;
    }*/
/*}
.alertbar .alert-container {
    gap: 8px;*/ /* فاصله بین لینک و متن */
/*}

.alertbar .alert-link {
    flex-shrink: 0;*/ /* لینک کوچیک نشه اما متن رو له نکنه */
/*}

.alertbar .alert-text {
    flex: 1 1 auto;*/ /* متن فضا بگیره */
    /*white-space: nowrap;*/ /* تک‌خطه بمونه */
    /*overflow: hidden;*/ /* بیرون نزنه */
    /*text-overflow: ellipsis;*/ /* … وقتی جا کم شد */
    /*direction: rtl;*/ /* متن فارسی درست شروع بشه */
    /*text-align: end;*/ /* معادل text-right در BS5 */
    /*transform: none !important;*/ /* اگر قبلاً ترنسفورم دادی، خنثی شه */
/*}*/

/* روی موبایل: چیدمان بهتر */
/*@media (max-width: 576px) {
    .alertbar .alert-container {
        justify-content: flex-start;*/ /* از ابتدا بچینه */
    /*}

    .alertbar .alert-text {
        order: 1;
    }

    .alertbar .alert-link {
        order: 2;
        margin-inline-start: 8px;
    }
}*/
