﻿/* =====================================================
   RTL COMPONENTS
===================================================== */


/* =====================================================
   1) RTL CARDS
   عکس سمت چپ + محتوا سمت راست
===================================================== */

.rtl-section {
    direction: rtl !important;
    text-align: right !important;
}


    /* عنوان بالای سکشن */
    .rtl-section .mini-heading {
        width: 100% !important;
        direction: rtl !important;
        text-align: right !important;
    }

        .rtl-section .mini-heading h4 {
            direction: rtl !important;
            text-align: right !important;
        }


    /* =====================================================
   کارت
===================================================== */

    .rtl-section .item {
        display: flex !important;
        /*
       ترتیب HTML حفظ می‌شود:
       عکس سمت چپ
       متن سمت راست
    */
        flex-direction: row !important;
        direction: ltr !important;
        align-items: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }


        /* =====================================================
   تصویر کارت
===================================================== */

        .rtl-section .item .left-img {
            order: 1 !important;
            flex: 0 0 42% !important;
            width: 42% !important;
            max-width: 42% !important;
            margin: 0 !important;
            padding: 0 !important;
            float: none !important;
        }

            .rtl-section .item .left-img img {
                display: block !important;
                width: 100% !important;
                height: 100% !important;
                margin: 0 !important;
                object-fit: cover !important;
            }


        /* =====================================================
   محتوای کارت
===================================================== */

        .rtl-section .item .right-content {
            order: 2 !important;
            flex: 1 1 auto !important;
            width: 58% !important;
            padding: 30px !important;
            float: none !important;
            direction: rtl !important;
            text-align: right !important;
            box-sizing: border-box !important;
        }


            /* تمام نوشته‌های کارت به جز span
   span حذف شده تا توضیحات بتواند Justify شود */

            .rtl-section .item .right-content h1,
            .rtl-section .item .right-content h2,
            .rtl-section .item .right-content h3,
            .rtl-section .item .right-content h4,
            .rtl-section .item .right-content h5,
            .rtl-section .item .right-content h6,
            .rtl-section .item .right-content p,
            .rtl-section .item .right-content a,
            .rtl-section .item .right-content em {
                text-align: right !important;
            }


            /* جهت نوشته‌های فارسی */

            .rtl-section .item .right-content h1,
            .rtl-section .item .right-content h2,
            .rtl-section .item .right-content h3,
            .rtl-section .item .right-content h4,
            .rtl-section .item .right-content h5,
            .rtl-section .item .right-content p,
            .rtl-section .item .right-content a {
                direction: rtl !important;
            }


            /* خط داخل کارت */

            .rtl-section .item .right-content .line-dec {
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }


            /* عنوان کاربرد شیر برقی */

            .rtl-section .item .right-content h6 {
                display: block !important;
                width: 100% !important;
                direction: rtl !important;
                text-align: right !important;
                margin-bottom: 8px;
            }


/* =====================================================
   توضیحات کارت
   دوطرف‌چین مثل متن کتاب
===================================================== */

.item-details-page .right-content span.date {
    display: block !important;
    width: 100% !important;
    direction: rtl !important;
    text-align: justify !important;
    text-align-last: right !important;
    line-height: 2;
    margin: 0;
    padding: 0;
    word-spacing: normal;
    overflow-wrap: break-word;
}


/* =====================================================
   یکسان کردن ارتفاع کارت‌های کاربرد شیر برقی
===================================================== */

.item-details-page .current-bid .col-lg-4 {
    display: flex;
}

.item-details-page .current-bid .item {
    width: 100%;
    height: 435px;
    display: flex;
    overflow: hidden;
}


    /* تصویر کارت تمام ارتفاع را بگیرد */

    .item-details-page .current-bid .item .left-img {
        height: 100%;
    }

        .item-details-page .current-bid .item .left-img img {
            height: 100%;
            object-fit: cover;
        }


/* =====================================================
   RTL CARDS - MOBILE
===================================================== */

@media (max-width: 767px) {

    .rtl-section .item {
        display: flex !important;
        flex-direction: row !important;
    }

        .rtl-section .item .left-img {
            flex: 0 0 40% !important;
            width: 40% !important;
            max-width: 40% !important;
        }

        .rtl-section .item .right-content {
            width: 60% !important;
            padding: 18px !important;
        }


    /* در موبایل ارتفاع آزاد باشد */

    .item-details-page .current-bid .item {
        height: auto;
        min-height: 435px;
    }
}



/* =====================================================
   2) WHY CHROME SPADE SECTION
   بخش «چرا کروم اسپاد»
===================================================== */

.rtl-create-section {
    direction: rtl !important;
    text-align: right !important;
}


    /* ترتیب ستون‌های Bootstrap */

    .rtl-create-section > .container > .row {
        direction: rtl !important;
    }


    /* جلوگیری از floatهای قالب اصلی */

    .rtl-create-section .section-heading,
    .rtl-create-section .main-button,
    .rtl-create-section .item {
        float: none !important;
    }



    /* =====================================================
   عنوان اصلی بخش
===================================================== */

    .rtl-create-section .section-heading {
        display: block !important;
        width: 100% !important;
        margin: 0 0 45px 0 !important;
        padding: 0 !important;
        direction: rtl !important;
        text-align: right !important;
    }


        /* خط طلایی بالای عنوان */

        .rtl-create-section .section-heading .line-dec {
            display: block !important;
            width: 65px !important;
            height: 4px !important;
            margin-top: 0 !important;
            margin-right: 0 !important;
            margin-bottom: 14px !important;
            margin-left: auto !important;
            background: #fdbb18 !important;
            border-radius: 10px !important;
        }


        /* عنوان */

        .rtl-create-section .section-heading h2 {
            display: block !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            direction: rtl !important;
            text-align: right !important;
            font-size: 34px !important;
            font-weight: 800 !important;
            line-height: 1.5 !important;
            color: #ffffff !important;
        }


            /* بخش طلایی عنوان */

            .rtl-create-section .section-heading h2 strong {
                color: #fdbb18 !important;
                font-weight: 800 !important;
            }



    /* =====================================================
   دکمه بالای بخش
===================================================== */

    .rtl-create-section .main-button {
        width: 100% !important;
        direction: rtl !important;
        text-align: left !important;
    }

        .rtl-create-section .main-button a {
            direction: rtl !important;
            white-space: nowrap;
        }



    /* =====================================================
   کارت‌های چرا کروم اسپاد
===================================================== */

    .rtl-create-section .item {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-height: 300px !important;
        margin: 0 !important;
        padding-top: 15px !important;
        padding-right: 30px !important;
        padding-bottom: 25px !important;
        padding-left: 30px !important;
        direction: rtl !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }



        /* =====================================================
   آیکون کارت‌ها
===================================================== */

        .rtl-create-section .item .icon {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 62px !important;
            height: 62px !important;
            margin-top: 0 !important;
            margin-right: 0 !important;
            margin-bottom: 24px !important;
            margin-left: auto !important;
            padding: 0 !important;
            float: none !important;
            border-radius: 50% !important;
        }


            /* خود تصویر داخل آیکون */

            .rtl-create-section .item .icon img {
                display: block !important;
                width: auto !important;
                height: auto !important;
                max-width: 31px !important;
                max-height: 31px !important;
                margin: 0 auto !important;
                object-fit: contain !important;
            }



        /* =====================================================
   شماره کارت
===================================================== */

        .rtl-create-section .item .number {
            position: absolute !important;
            top: -6px !important;
            right: 30px !important;
            left: auto !important;
            width: auto !important;
            height: auto !important;
            margin: 0 !important;
            padding: 0 !important;
            direction: ltr !important;
            z-index: 5 !important;
        }

            .rtl-create-section .item .number h6 {
                margin: 0 !important;
                padding: 0 !important;
                direction: ltr !important;
                text-align: center !important;
                font-weight: 700 !important;
            }



        /* =====================================================
   عنوان کارت
===================================================== */

        .rtl-create-section .item h4 {
            display: block !important;
            width: 100% !important;
            min-height: 76px !important;
            margin: 0 0 12px 0 !important;
            padding: 0 !important;
            direction: rtl !important;
            text-align: right !important;
            font-size: 21px !important;
            font-weight: 700 !important;
            line-height: 1.8 !important;
            white-space: normal !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
        }



        /* =====================================================
   توضیحات کارت
===================================================== */

        .rtl-create-section .item p {
            display: block !important;
            width: 100% !important;
            max-width: none !important;
            height: auto !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            direction: rtl !important;
            text-align: right !important;
            font-size: 15px !important;
            font-weight: 400 !important;
            line-height: 2.15 !important;
            white-space: normal !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
            text-indent: 0 !important;
        }


            /* لینک داخل توضیحات */

            .rtl-create-section .item p a {
                display: inline !important;
                margin: 0 !important;
                padding: 0 !important;
                direction: rtl !important;
                text-align: right !important;
            }



    /* =====================================================
   خط عمودی بین کارت‌ها
===================================================== */

    .rtl-create-section .first-item::after,
    .rtl-create-section .second-item::after {
        position: absolute !important;
        top: 10px !important;
        right: auto !important;
        left: 0 !important;
        width: 1px !important;
        height: calc(100% - 20px) !important;
        opacity: 0.25 !important;
    }



/* =====================================================
   WHY CHROME SPADE - TABLET
===================================================== */

@media (max-width: 991px) {

    .rtl-create-section .section-heading {
        margin-bottom: 30px !important;
    }

    .rtl-create-section .main-button {
        margin-bottom: 35px !important;
        text-align: right !important;
    }

    .rtl-create-section .item {
        min-height: 0 !important;
        margin-bottom: 30px !important;
        padding-top: 25px !important;
        padding-right: 20px !important;
        padding-bottom: 25px !important;
        padding-left: 20px !important;
    }

        .rtl-create-section .item .number {
            top: 3px !important;
            right: 20px !important;
        }

        .rtl-create-section .item h4 {
            min-height: 0 !important;
        }


    /* حذف خطوط عمودی روی تبلت و موبایل */

    .rtl-create-section .first-item::after,
    .rtl-create-section .second-item::after {
        display: none !important;
    }
}



/* =====================================================
   WHY CHROME SPADE - MOBILE
===================================================== */

@media (max-width: 767px) {

    .rtl-create-section .section-heading {
        margin-bottom: 25px !important;
    }

        .rtl-create-section .section-heading .line-dec {
            width: 50px !important;
            height: 3px !important;
            margin-bottom: 10px !important;
        }

        .rtl-create-section .section-heading h2 {
            font-size: 27px !important;
            line-height: 1.6 !important;
        }

    .rtl-create-section .main-button {
        margin-bottom: 30px !important;
        text-align: right !important;
    }

    .rtl-create-section .item {
        min-height: 0 !important;
        margin-bottom: 25px !important;
        padding: 20px !important;
    }

        .rtl-create-section .item .icon {
            margin-bottom: 20px !important;
        }

        .rtl-create-section .item .number {
            top: 0 !important;
            right: 20px !important;
        }

        .rtl-create-section .item h4 {
            min-height: 0 !important;
            margin-bottom: 10px !important;
            font-size: 19px !important;
            line-height: 1.8 !important;
        }

        .rtl-create-section .item p {
            font-size: 14px !important;
            line-height: 2 !important;
        }
}



/* =====================================================
   3) ABOUT SECTION RTL
   تصویر سمت چپ + متن سمت راست
===================================================== */

.rtl-about-section {
    direction: rtl !important;
    text-align: right !important;
}



    /* =====================================================
   عنوان درباره ما
===================================================== */

    .rtl-about-section .section-heading {
        width: 100% !important;
        direction: rtl !important;
        text-align: right !important;
        margin-bottom: 35px !important;
    }

        .rtl-about-section .section-heading .line-dec {
            width: 65px !important;
            height: 4px !important;
            margin-right: 0 !important;
            margin-left: auto !important;
            margin-bottom: 14px !important;
            background: #fdbb18 !important;
            border-radius: 10px !important;
        }

        .rtl-about-section .section-heading h2 {
            direction: rtl !important;
            text-align: right !important;
            margin: 0 !important;
            line-height: 1.6 !important;
        }

            .rtl-about-section .section-heading h2 em {
                font-style: normal !important;
            }



    /* =====================================================
   ردیف اصلی درباره ما
===================================================== */

    /*
   LTR است تا:
   عکس سمت چپ
   متن سمت راست
*/

    .rtl-about-section .about-main-row {
        direction: ltr !important;
        display: flex !important;
        align-items: center !important;
    }



    /* =====================================================
   تصویر درباره ما
===================================================== */

    .rtl-about-section .about-image-wrapper {
        direction: ltr !important;
    }

        .rtl-about-section .about-image-wrapper .left-image {
            width: 100% !important;
        }

            .rtl-about-section .about-image-wrapper .left-image img {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                border-radius: 20px !important;
                margin: 0 !important;
            }



    /* =====================================================
   محتوای سمت راست
===================================================== */

    .rtl-about-section .about-content {
        direction: rtl !important;
        text-align: right !important;
        padding-right: 35px !important;
        padding-left: 15px !important;
    }

        .rtl-about-section .about-content h4 {
            direction: rtl !important;
            text-align: right !important;
            font-size: 25px !important;
            font-weight: 700 !important;
            line-height: 1.8 !important;
            margin-bottom: 18px !important;
        }


        /* متن درباره ما دوطرف‌چین */

        .rtl-about-section .about-content p {
            direction: rtl !important;
            text-align: justify !important;
            text-align-last: right !important;
            font-size: 15px !important;
            line-height: 2.2 !important;
            margin: 0 !important;
        }



    /* =====================================================
   اطلاعات شرکت
===================================================== */

    .rtl-about-section .company-info {
        display: flex !important;
        align-items: center !important;
        direction: rtl !important;
        margin-bottom: 20px !important;
    }

        .rtl-about-section .company-info img {
            width: 50px !important;
            height: 50px !important;
            object-fit: cover !important;
            border-radius: 50% !important;
            margin-left: 12px !important;
            margin-right: 0 !important;
        }

        .rtl-about-section .company-info h6 {
            direction: rtl !important;
            text-align: right !important;
            margin: 0 !important;
            line-height: 1.8 !important;
        }



    /* =====================================================
   Current Bid / کارت‌های پایین
===================================================== */

    .rtl-about-section .about-bids {
        direction: rtl !important;
        text-align: right !important;
        margin-top: 60px !important;
    }


        /* تیتر پایین */

        .rtl-about-section .about-bids .mini-heading {
            direction: rtl !important;
            text-align: right !important;
        }

            .rtl-about-section .about-bids .mini-heading h4 {
                direction: rtl !important;
                text-align: right !important;
            }


        /* select */

        .rtl-about-section .about-bids fieldset {
            direction: rtl !important;
        }

        .rtl-about-section .about-bids .form-select {
            direction: rtl !important;
            text-align: right !important;
        }



/* =====================================================
   ABOUT - TABLET
===================================================== */

@media (max-width: 991px) {

    .rtl-about-section .about-main-row {
        display: block !important;
    }

    .rtl-about-section .about-content {
        padding: 30px 0 0 0 !important;
    }

        .rtl-about-section .about-content h4 {
            font-size: 22px !important;
        }

        .rtl-about-section .about-content p {
            text-align: justify !important;
            text-align-last: right !important;
        }
}



/* =====================================================
   ABOUT - MOBILE
===================================================== */

@media (max-width: 767px) {

    .rtl-about-section .section-heading h2 {
        font-size: 27px !important;
    }

    .rtl-about-section .section-heading .line-dec {
        width: 50px !important;
        height: 3px !important;
    }

    .rtl-about-section .about-content {
        padding-top: 25px !important;
    }

        .rtl-about-section .about-content h4 {
            font-size: 20px !important;
        }

        .rtl-about-section .about-content p {
            font-size: 14px !important;
            line-height: 2 !important;
            text-align: justify !important;
            text-align-last: right !important;
        }
}



/* =====================================================
   4) LANGUAGE DROPDOWN
===================================================== */

.language-dropdown {
    position: relative;
}

    .language-dropdown .selected-language {
        display: flex !important;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 10px 14px !important;
    }


/* پرچم */

.language-flag {
    width: 32px;
    height: 24px;
    object-fit: cover;
    border-radius: 2px;
}


/* فلش */

.language-arrow {
    font-size: 9px;
    margin-right: 3px;
}


/* =====================================================
   منوی کشویی
===================================================== */

.language-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 145px;
    background: #fff;
    border-radius: 10px;
    padding: 7px;
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s ease;
    z-index: 9999;
}


/* باز شدن منو */

.language-dropdown:hover .language-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* هر زبان */

.language-dropdown-menu .language-option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px !important;
    color: #222 !important;
    border-radius: 7px;
    font-size: 13px;
    text-decoration: none;
}

    .language-dropdown-menu .language-option:hover {
        background: #f2f2f2;
    }

