/* =====================================================================
   CSS اختصاصی سایت پارساگلد برای ماژول MyDnnBusinessDirectory
   ---------------------------------------------------------------------
   مسیر: /Portals/0/MBD-Site/Styles/site.rtl.css  (مال خودِ سایت - نه ماژول)
   - این فایل در بسته‌ی نصب ماژول نیست، پس نصب/ارتقای ماژول بازنویسی‌اش نمی‌کند.
   - ماژول (6.0.3 با تغییرات parsagold-merge) این فایل را درست بعد از
     Styles/components.rtl.css به‌صورت <link> انتهای <head> اضافه می‌کند
     (ClientComponentController.RegisterSiteStyleSheet)؛ یعنی بعد از همه‌ی CSSهای
     پوسته/portal لود می‌شود و با specificity برابر روی CSS ماژول برنده است.
   - فقط روی صفحه‌هایی لود می‌شود که ماژول MBD دارند (همان محدوده‌ای که قبلاً
     components.rtl.css فورک داشت).
   - منبع بخش‌های ۱ تا ۳: Styles/components.rtl.css فورک قدیمی پارساگلد
     (بک‌آپ: tmp\SqlBackups\parsagold-local_files_pre-mbd) - فقط قوانینی که مال
     خودِ سایت بودند یا قانون ماژول را عمداً عوض کرده بودند؛ قوانینی که عیناً در
     6.0.3 هستند این‌جا تکرار نشده‌اند. شماره‌ی خط‌ها مال فایل فورک قدیمی است.
   - CSS nesting (&) و متغیرهای سایت (--accent-color و ...) عمداً دست‌نخورده مانده‌اند.
   ===================================================================== */


/* =====================================================================
   بخش ۱: نسخه‌ی پارساگلد از قوانین خودِ ماژول (فورک این‌ها رو عوض کرده بود)
   ===================================================================== */

/* -- textarea (فورک: خط 20) -- */
textarea.text-input.theme-default {
    min-height: 37px;
}

/* -- Select2 (فورک: خط‌های 33-44 و 102-121) -- */
.select2-container--default .select2-selection {
  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);
    background-repeat: repeat-x;
    border: 1px solid #d0d0d0;
    border-radius: 2px;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    background-color: #f9f9f9;
}

.select2-container--default .select2-selection.select2-selection--single {
    height: 36px;
}

.select2-container--default .select2-selection__placeholder {
        font-size: 14px;
    color: #000 !important;
    font-weight: 350;
}

.select2-container--default .select2-selection__arrow {
    right: 1px !important;
    height: 30px !important;
    width: 28px !important;
    position: absolute;
    top: 1px;
    right: auto !important;
    left: 1px;
}

/* -- Upload Photo: گرید ۴ستونه، نسبت ۱:۱، نشان «عکس اصلی» (فورک: خط‌های 602-760) -- */
.mbd-field-uploadphoto {
    margin-bottom: 10px;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 8px;
    min-height: 110px;
}

.mbd-field-uploadphoto .box-upload {
    border: dashed 1px #ccc;
    text-align: center;
    position: relative;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 100% !important;

    .bu-progress {
        bottom: 0;
        display: flex;
        justify-content: center;

        .progress-bar {
            background: var(--accent-color);
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100% !important;
            text-align: center;
        }
    }

    img {
        position: relative;
        top: -5px;
        left: 3px;
    }
}

.mbd-field-uploadphoto .box-upload>input[type=file] {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    border-radius: 0.5rem;
    overflow: hidden;
}

.mbd-field-uploadphoto .box-image {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}

.mbd-field-uploadphoto .box-image.is-main {
    border: 2px solid var(--accent-color);
    overflow: hidden;
    border-radius: 4px !important;
    position: relative;
}

.mbd-field-uploadphoto .box-image.is-main:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 122.88 122.88' style='enable-background:new 0 0 122.88 122.88' xml:space='preserve'%3E%3Cstyle type='text/css'%3E%3C!%5BCDATA%5B .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%233AAF3C;%7D%0A%5D%5D%3E%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M61.44,0c33.93,0,61.44,27.51,61.44,61.44c0,33.93-27.51,61.44-61.44,61.44C27.51,122.88,0,95.37,0,61.44 C0,27.51,27.51,0,61.44,0L61.44,0L61.44,0z M39.48,56.79c4.6,2.65,7.59,4.85,11.16,8.78c9.24-14.88,19.28-23.12,32.32-34.83 l1.28-0.49h14.28C79.38,51.51,64.53,69.04,51.24,94.68c-6.92-14.79-13.09-25-26.88-34.47L39.48,56.79L39.48,56.79z'/%3E%3C/g%3E%3C/svg%3E");
    position: absolute;
    top: 50%;
    right: 50%;
    width: 100%;
    transform: translate(52%, -45%);
    opacity: 0.6;
    width: 80%;
    height: 80;
}

.mbd-field-uploadphoto .box-image .bu-actions {
    /* background-color: rgba(38, 35, 35, 0.13); */
    color: #fff;
    /* width: 100%; */
    position: absolute;
    /* text-align: right; */
    left: 5px;
    /* padding: 5px 10px; */
    /* font-size: 17px; */
    top: 0;
    background-color: rgba(0, 0, 0, .32);
    /* background-color: var(--black-hint); */
    /* border: none; */
    border-radius: 2px;
    cursor: pointer;
    height: 1.375rem;
    top: 4px;
    transition: background-color .36s ease;
    width: 1.375rem;

    i {
        cursor: pointer;
        position: relative;
        top: -3px;
        right: 5px;
    }
}

.mbd-field-uploadphoto .box-image>img {
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
}


/* =====================================================================
   بخش ۲: رادیوباتن سفارشی سایت (.mbdradiobutton - در تمپلیت‌های ذخیره‌شده در دیتابیس)
   (فورک: خط‌های 190-247)
   ===================================================================== */
.mbdradiobutton input:checked {
    --tw-border-opacity: 1;
    border-color: rgb(240 62 88/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(240 62 88/var(--tw-bg-opacity, 1));
}

.mbdradiobutton input {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
    border-width: .0625rem;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(208 213 221/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    height: 1rem;
    width: 1rem;
    min-width: 1rem;
    margin: 0;
}

.mbdradiobutton input:checked:after {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
    border-radius: 50%;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-content: "";
    content: var(--tw-content);
    height: 6px;
    width: 6px;
}

.mbdradiobutton input:focus {
    outline-style: solid;
    outline-width: 4px;
    outline-color: #f2f4f7;
}

.mbdradiobutton input:checked:focus {
    outline-color: #fedee3;
}

span.mbdradiobutton {
    p {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}


/* =====================================================================
   بخش ۳: کامپوننت‌های اختصاصی سایت (کارت‌ها، اسلایدر، رزرو، پرداخت، صفحه‌بندی، ...)
   (فورک: خط 2129 تا آخر فایل)
   ===================================================================== */
.font-weight-semibold {
    font-weight: 600;
}

.error-class {
    color: red;
    border: 1px solid red;
    background-color: #ffe6e6;
}

.plus-touch {
    border-radius: var(--b-radius) 0 0 var(--b-radius);
    border-right: 0;
    -webkit-user-select: none;
    /* Safari, Chrome, Opera */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer, Edge */
    user-select: none;
}

.minus-touch {
    border-radius: 0 var(--b-radius) var(--b-radius) 0;
    border-left: 0;
    -webkit-user-select: none;
    /* Safari, Chrome, Opera */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer, Edge */
    user-select: none;
}

.removefeature,
.EditIcon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem !important;
}

.EditIcon {
    background-color: var(--accent-color);

}

.EditIcon svg {
    fill: #fff;
}

/********** Card ***********/
.sort-dropdown {
    .select2-container--default .select2-selection.select2-selection--single {
        width: 9rem;
    }
}

.slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    aspect-ratio: 1/1;
    border: solid 1px var(--text-dark-0);
    border-radius: var(--radius-circle);
    -webkit-border-radius: var(--radius-circle);
    -moz-border-radius: var(--radius-circle);
    -ms-border-radius: var(--radius-circle);
    -o-border-radius: var(--radius-circle);
    cursor: pointer;

    &.prev {
        right: 120%;
    }

    &.next {
        left: 120%;
    }

    svg {
        width: 0.71rem;
        fill: var(--text-dark-0);
    }

    &.swiper-button-disabled {
        opacity: 0.5;
    }
}

.card-item {
    width: 100%;
    height: 100%;
    background: var(--White);
    border-radius: var(--radius-12);
    overflow: hidden;

    .img-box {
        aspect-ratio: 2/1.5;
        flex-shrink: 0;
        overflow: hidden;

        &:before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: var(--secondary-main);
            mix-blend-mode: hard-light;
            pointer-events: none;
            opacity: 0.35;
        }

        >img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .swiper {
            width: 100%;
            height: 100%;
            z-index: 1;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .slider-nav {
                position: absolute;
                top: calc(50% - 0.5rem);
                width: 1.7rem;
                border: none;
                background: var(--secondary-darker);
                border-radius: var(--b-radius);
                -webkit-border-radius: var(--b-radius);
                -moz-border-radius: var(--b-radius);
                -ms-border-radius: var(--b-radius);
                -o-border-radius: var(--b-radius);
                z-index: 2;

                svg {
                    width: 1.41rem;
                    aspect-ratio: 1;
                    stroke: var(--White);
                }

                &.next {
                    left: .57rem;
                }

                &.prev {
                    right: auto;
                    right: .57rem;
                }
            }

            .slider-pagination {
                position: absolute;
                bottom: 1rem;
                display: flex;
                align-items: center;
                justify-content: center;
                right: 0;
                left: 0;
                z-index: 2;

                .swiper-pagination-bullet {
                    background: var(--secondary-lighter);
                    opacity: 0.5;

                    &.swiper-pagination-bullet-active {
                        opacity: 1;
                    }
                }
            }
        }

        .top-action {
            top: 0;
            right: 0;
            left: 0;
            padding: 1rem;
            z-index: 2;

            .booking-type {
                font-size: 0.91rem;
                color: var(--text-light-1);

                svg {
                    max-width: 1.28rem;
                    max-height: 1.28rem;
                }

                &.accept {
                    svg {
                        fill: var(--system-teal-0);
                    }
                }

                &.instant {
                    svg {
                        fill: var(--system-orange-0);
                    }
                }

                &.prime {
                    svg {
                        fill: var(--system-purple-0);
                    }
                }
            }

            .add-to-fav {
                cursor: pointer;

                svg {
                    max-width: 1.28rem;
                    max-height: 1.28rem;
                    stroke: var(--secondary-main);
                    fill: none;
                }

                &.active {
                    svg {
                        stroke: var(--primary-darker);
                        fill: var(--primary-darker);
                    }
                }

            }
        }

        .edit {
            bottom: .57rem;
            right: .57rem;
            padding: 0.2rem .57rem;
            font-size: 0.91rem;
            background: var(--White);
            color: var(--secondary-lighter);
            border-radius: var(--radius-8);
            cursor: pointer;
            -webkit-border-radius: var(--radius-8);
            -moz-border-radius: var(--radius-8);
            -ms-border-radius: var(--radius-8);
            -o-border-radius: var(--radius-8);
            z-index: 2;

            svg {
                max-width: 1.28rem;
                max-height: 1.28rem;
                stroke: var(--secondary-lighter);
            }
        }

        .video-link {
            bottom: 0;
            left: 0;
            padding: 0.5rem 1rem;
            font-size: 0.91rem;
            color: var(--text-light-1);
            cursor: pointer;
            z-index: 2;

            svg {
                max-width: 1.28rem;
                max-height: 1.28rem;
                stroke: var(--primary-darker);
            }
        }
    }

    .content-box {
        padding: 0.5rem 0.5rem 1rem;
        color: var(--Black);

        .title {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            font-size: 1rem;
            font-weight: 700;
            color: var(--Black);
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .property-rate {
            .rating {
                svg {
                    max-width: 0.91rem;
                    max-height: 0.91rem;
                    fill: var(--system-orange-0);
                }
            }
        }

        .options {
            .item {
                line-height: 0;

                svg {
                    max-width: 1.42rem;
                    max-height: 1.42rem;
                    stroke: var(--secondary-lighter);
                    fill: var(--secondary-lighter);
                }
            }
        }

        .price-box {
            .unit-price {
                font-size: 0.91rem;
                color: var(--secondary-lighter);

                strong {
                    font-size: 1rem;
                    color: var(--secondary-darker);
                }
            }

            .dis-price {
                del {
                    font-size: 0.91rem;
                    color: var(--secondary-lighter);
                }

                .discount {
                    font-size: 1rem;
                    color: var(--White);
                    background: var(--primary-main);
                    border-radius: var(--radius-8);
                    -webkit-border-radius: var(--radius-8);
                    -moz-border-radius: var(--radius-8);
                    -ms-border-radius: var(--radius-8);
                    -o-border-radius: var(--radius-8);
                    padding: 0.2rem;
                }
            }
        }
    }
}

.cards-slider-sec {
    padding: 6rem 0;

    .section-title-wraper {
        .title {
            font-size: 1.28rem;
            color: var(--text-dark-0);
        }

        .subtitle {
            font-size: 0.91rem;
            color: var(--text-dark-0);
        }

    }

    .swiper-slide {
        width: 24rem;
        max-width: 100%;

        .card-item {
            .img-box {
                border-radius: var(--radius-12);
            }

            .content-box {
                .property-rate {
                    .rating {
                        svg {
                            fill: #292929;
                        }
                    }

                    .price-box {
                        .dis-price {
                            del {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }

}

/* checkbox style */
.mbd-field-checkbox {
    label {
        cursor: pointer;
    }

    input {
        cursor: pointer;
        height: 1.25rem;
        width: 1.25rem;
        border-radius: .375rem;
        position: relative;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-width: .0625rem;
        border-style: solid;
        --tw-border-opacity: 1;
        border-color: rgb(208 213 221/var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));

        &:checked {
            --tw-border-opacity: 1;
            border-color: rgb(240 62 88/var(--tw-border-opacity, 1));
            --tw-bg-opacity: 1;
            background-color: rgb(240 62 88/var(--tw-bg-opacity, 1));

            &:after {
                position: absolute;
                left: 5px;
                top: 1px;
                display: block;
                height: 11px;
                width: 6px;
                --tw-rotate: 45deg;
                transform: translate(0, 0) rotate(45deg) skewX(0) skewY(0) scaleX(1) scaleY(1);
                border-width: 0 2px 2px 0;
                border-style: solid;
                --tw-border-opacity: 1;
                border-color: rgb(255 255 255/var(--tw-border-opacity, 1));
                background-color: transparent;
                --tw-content: "";
                content: var(--tw-content);
            }
        }
    }
}

.reserve-card-item {
    width: 100%;
    height: 100%;
    background: var(--White);
    border-radius: var(--radius-12);
    overflow: hidden;

    .img-box {
        aspect-ratio: 2 / 1.4;
        width: calc(48% - 0.5rem);
        border-radius: var(--radius-12);
        overflow: hidden;

        &:before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: var(--secondary-main);
            mix-blend-mode: hard-light;
            pointer-events: none;
            opacity: 0.35;
        }

        >img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .top-action {
            top: 0;
            right: 0;
            left: 0;
            padding: 1rem;

            .booking-type {
                font-size: 0.91rem;
                color: var(--text-light-1);

                svg {
                    max-width: 1.28rem;
                    max-height: 1.28rem;
                }

                &.accept {
                    svg {
                        fill: var(--system-teal-0);
                    }
                }

                &.instant {
                    svg {
                        fill: var(--system-orange-0);
                    }
                }

                &.prime {
                    svg {
                        fill: var(--system-purple-0);
                    }
                }
            }

            .add-to-fav {
                cursor: pointer;

                svg {
                    max-width: 1.28rem;
                    max-height: 1.28rem;
                    stroke: var(--secondary-main);
                    fill: none;
                }

                &.active {
                    svg {
                        stroke: var(--primary-darker);
                        fill: var(--primary-darker);
                    }
                }

            }
        }

        .progress-bar {
            right: 1rem;
            bottom: 1rem;
            left: 1rem;
            padding: 0.5rem 0.5rem;
            background: rgba(255, 255, 255, 0.85);
            border-radius: var(--radius-8);
            -webkit-border-radius: var(--radius-8);
            -moz-border-radius: var(--radius-8);
            -ms-border-radius: var(--radius-8);
            -o-border-radius: var(--radius-8);
            display: flex;
            justify-content: space-between;
            align-items: center;









            .step {
                text-align: center;
                flex: 1;
                position: relative;

                &:not(:first-child) {
                    &::after {
                        content: '';
                        position: absolute;
                        top: 0.87rem;
                        left: calc(50% - 0.87rem);
                        width: calc(100% - 2.4rem);
                        height: 1px;
                        background-color: var(--secondary-lighter);
                        z-index: 0;
                        transform: translateX(50%);
                    }
                }

                .icon {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto;
                    width: 100%;
                    height: 1.71rem;
                    z-index: 1;

                    &:before {
                        content: '';
                        position: absolute;
                        width: 0.57rem;
                        height: 0.57rem;
                        border-radius: 50%;
                        background-color: var(--text-dark-3);
                    }

                    .completed-icon {
                        display: none;
                        width: 1.71rem;
                        height: 1.71rem;
                        stroke: var(--system-green-0);
                    }

                    .active-icon {
                        display: none;
                        width: 1.71rem;
                        height: 1.71rem;
                        stroke: var(--system-orange-1);
                    }

                    .rejected-icon {
                        display: none;
                        width: 1.71rem;
                        height: 1.71rem;
                        stroke: var(--system-red-0);
                    }
                }

                .label {
                    font-size: 14px;
                    color: var(--secondary-main);
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    overflow: hidden;
                    height: 4rem;

                }

                &.completed {
                    .icon {
                        .completed-icon {
                            display: block;
                        }

                        &:before {
                            display: none
                        }
                    }

                    .label {
                        color: var(--system-green-0);
                    }

                    &::after {
                        background-color: var(--system-green-0);
                    }
                }

                &.active {
                    .icon {
                        .active-icon {
                            display: block;
                        }

                        &:before {
                            display: none
                        }
                    }


                    &::after {
                        background-color: var(--system-orange-1);
                    }

                    .label {
                        color: var(--system-orange-1);
                    }
                }

                &.rejected {
                    .icon {
                        .rejected-icon {
                            display: block;
                        }

                        &:before {
                            display: none
                        }
                    }

                    &::after {
                        background-color: var(--system-red-0);
                    }

                    .label {
                        color: var(--system-red-0);
                    }
                }
            }
        }
    }

    .content-box {
        width: 52%;
        padding: 0.5rem;
        color: var(--Black);
        min-height: 22.8rem;

        .title {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            font-size: 1rem;
            font-weight: 700;
            color: var(--Black);
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .property-rate {
            .rating {
                svg {
                    max-width: 0.91rem;
                    max-height: 0.91rem;
                    fill: var(--system-orange-0);
                }
            }
        }

        .user-box {
            .avatar {
                width: 4rem;
                aspect-ratio: 1;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .label {
                font-size: 0.87rem;
                color: var(--secondary-lighter);
            }

            .name {
                font-size: 0.91rem;
                color: var(--secondary-darker);
            }
        }

        .call-btn {
            border: solid 1px var(--secondary-lighter);
            color: var(--secondary-lighter);

            svg {
                width: 1.71rem;
                height: 1.71rem;
                stroke: var(--secondary-lighter);
                fill: var(--secondary-lighter);
            }
        }
    }

    .options {
        .item {
            line-height: 0;

            svg {
                max-width: 1.42rem;
                max-height: 1.42rem;
                stroke: var(--secondary-lighter);
                fill: var(--secondary-lighter);
            }
        }
    }

    .price-date {
        background: var(--text-light-2);
        border-radius: var(--radius-8);
        -webkit-border-radius: var(--radius-8);
        -moz-border-radius: var(--radius-8);
        -ms-border-radius: var(--radius-8);
        -o-border-radius: var(--radius-8);

        .date {
            font-size: 0.91rem;
            color: var(--secondary-darker);
        }

        .price {
            font-size: 0.91rem;
            color: var(--secondary-lighter);

            .number {
                font-size: 1rem;
                color: var(--secondary-darker);
            }
        }
    }

    .btns-wraper {
        .custom-btn {
            font-weight: 700;

            svg {
                width: 1.71rem;
                height: 1.71rem;
                stroke: var(--White);
                fill: var(--White);
            }

            &.outline {
                border: solid 1px var(--secondary-lighter);
                color: var(--secondary-lighter);

                svg {
                    stroke: var(--secondary-lighter);
                    fill: var(--secondary-lighter);
                }
            }
        }
    }

    @media(max-width:990px) {

        .img-box,
        .content-box {
            width: 100%;
        }
    }

    @media(max-width:570px) {

        .content-box {
            .btns-wraper {
                .custom-btn {
                    flex-direction: column;
                    line-height: normal;
                }
            }
        }
    }

    @media(max-width:480px) {

        .content-box {
            .btns-wraper {
                flex-wrap: wrap;

                .custom-btn {
                    width: 100%;
                    flex-direction: row;
                }
            }
        }
    }
}

ul.pagination-sm {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;

    li {
        width: 2rem;
        height: 2rem;
        border-radius: var(--b-radius);
        text-align: center;
        border: 0.1em solid var(--secondary-main);

        &.active,
        &:hover {
            background-color: var(--accent-color);
            border: 0.1em solid transparent;

            a {
                color: var(--White);
            }
        }

        &.disabled {
            cursor: not-allowed
        }

        a {
            display: block;
            cursor: pointer;
            color: var(--secondary-main);
        }
    }
}

.password-inp-box {
    position: relative;

    .toggle-visible-pass {
        position: absolute;
        left: 1rem;
        top: calc(50% - 0.6rem);
        cursor: pointer;
        z-index: 10;

        svg {
            width: 1.14rem;
            height: 1.14rem;
            display: block;
        }
    }
}

.payment-page {
    .back {
        font-weight: 700;
        color: var(--secondary-darker);

        svg {
            width: 1.7rem;
            height: 1.7rem;
            stroke: var(--secondary-darker);
        }
    }

    .wizard-wrapper {
        padding: 1.71rem 0;
        border-bottom: solid 1px var(--secondary-subtle);

        .wizard {
            display: flex;
            justify-content: space-between;
            align-items: start;

            .step {
                text-align: center;
                flex: 1;
                position: relative;
                cursor: pointer;

                &:not(:first-child) {
                    &::after {
                        content: '';
                        position: absolute;
                        top: 0.87rem;
                        left: 2rem;
                        width: calc(100% - 2rem);
                        height: 2px;
                        background-color: var(--secondary-subtle);
                        z-index: 0;
                        transform: translateX(50%);
                    }
                }

                .icon {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto;
                    width: 100%;
                    height: 1.71rem;
                    z-index: 1;

                    &:before {
                        content: '';
                        position: absolute;
                        width: 0.4rem;
                        aspect-ratio: 1;
                        border-radius: 50%;
                        background-color: var(--secondary-main);
                    }

                    svg {
                        display: none;
                        width: 1.71rem;
                        height: 1.71rem;
                        stroke: var(--system-green-0);
                    }
                }

                .label {
                    font-size: 0.87rem;
                    color: var(--secondary-main);
                }

                &.completed {
                    .icon {
                        svg {
                            display: block;
                        }

                        &:before {
                            display: none
                        }
                    }

                    .label {
                        color: var(--system-green-0);
                    }

                    &::after {
                        background-color: var(--system-green-0);
                    }
                }
            }
        }
    }

    .content-wrapper {
        margin-top: 1.14rem;
    }

    .sidebar {
        position: sticky;
        height: max-content;
        box-shadow: 0px 2px 4px 0px rgba(40, 41, 61, 0.04), 0px 8px 16px 0px rgba(96, 97, 112, 0.16);
        border-radius: var(--radius-16);
        -webkit-border-radius: var(--radius-16);
        -moz-border-radius: var(--radius-16);
        -ms-border-radius: var(--radius-16);
        -o-border-radius: var(--radius-16);
        padding: 1.14rem;

        .inner-box {
            padding-bottom: 0.87rem;

            &:not(:first-child) {
                padding-top: 0.87rem;
                border-top: solid 1px var(--secondary-subtle);
            }

            .main-title {
                display: block;
                color: var(--secondary-lighter);
                margin-bottom: 0.87rem;
            }

            &.reserve-info {
                .row-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 0.5rem;
                    color: var(--secondary-lighter);

                    .caption {
                        font-size: 0.92rem;
                    }

                    .value {
                        width: 58%;
                        font-size: 1rem;
                    }
                }
            }

            &.invoice-info {
                .final-price {
                    display: flex;
                    align-items: center;
                    gap: 0.57rem;
                    margin-bottom: 0.87rem;

                    svg {
                        width: 1.71rem;
                        height: 1.71rem;
                    }

                    .text-box {
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        font-size: 0.87rem;
                    }
                }

                .row-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 0.5rem;
                    color: var(--secondary-darker);
                    padding-right: 2.3rem;

                    .caption {
                        font-size: 0.87rem;
                    }

                    .value {
                        font-size: 0.87rem;
                    }
                }
            }
        }

        .btns-box {
            display: flex;
            flex-direction: column;
            gap: 0.87rem;


            .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.3rem;
                font-size: 1.14rem;
                border-radius: var(--radius-8);
                -webkit-border-radius: var(--radius-8);
                -moz-border-radius: var(--radius-8);
                -ms-border-radius: var(--radius-8);
                -o-border-radius: var(--radius-8);
                width: 100%;
                padding: 0.57rem;

                &.disabled {
                    color: var(--secondary-lighter);
                    background: var(--secondary-subtle);
                }

                &.success {
                    color: var(--White);
                    background: var(--system-green-0);
                }

                &.cancel {
                    color: var(--White);
                    background: var(--primary-main);
                }
            }
        }

        .rules-acceped {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 0.92rem;
            margin-top: 0.87rem;
            color: var(--secondary-lighter);

            svg {
                width: 1.72rem;
                height: 1.72rem;
                stroke: var(--system-green-0);
            }

            strong {
                font-size: 1rem;
            }
        }
    }

    .steps-content-box {
        .step-content {
            display: none;

            &.active {
                display: block;
            }
        }

        .row-item {
            border-bottom: solid 1px var(--secondary-subtle);
            padding-bottom: 1rem;
            margin-bottom: 1rem;

            &:last-child {
                border: none;
            }

            .desc {
                font-size: 0.92rem;
                color: var(--secondary-main);
                margin-bottom: 0;
            }

            .count-down {

                #countdown {
                    font-size: 1.28rem;
                    font-weight: bold;
                    direction: ltr;
                }

                .caption {
                    font-size: 0.87rem;
                }
            }

            .cottage {
                color: var(--secondary-main);

                .image-box {
                    width: 14.71rem;
                    aspect-ratio: 2 / 1;
                    border-radius: var(--radius-12);
                    -webkit-border-radius: var(--radius-12);
                    -moz-border-radius: var(--radius-12);
                    -ms-border-radius: var(--radius-12);
                    -o-border-radius: var(--radius-12);
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

            }

            .payment-method {
                .item {
                    position: relative;
                    border: solid 1px var(--secondary-subtle);
                    border-radius: var(--radius-12);
                    -webkit-border-radius: var(--radius-12);
                    -moz-border-radius: var(--radius-12);
                    -ms-border-radius: var(--radius-12);
                    -o-border-radius: var(--radius-12);
                    background-color: var(--White);
                    cursor: pointer;

                    &:before {
                        content: '';
                        position: relative;
                        width: 1.28rem;
                        aspect-ratio: 1;
                        border-radius: var(--radius-circle);
                        -webkit-border-radius: var(--radius-circle);
                        -moz-border-radius: var(--radius-circle);
                        -ms-border-radius: var(--radius-circle);
                        -o-border-radius: var(--radius-circle);
                        border: solid 1px var(--primary-main);
                    }

                    .logo-box {
                        width: 6.28rem;
                    }

                    .name {
                        font-size: 0.92rem;
                    }

                    &.active {
                        border-color: var(--secondary-lighter);

                        &:before {
                            background-color: var(--primary-darker);
                        }
                    }
                }
            }

            .coupen-box {
                .coupen-input {
                    width: 20.78rem;
                    height: 3.21rem;
                    padding: 0.7rem 0.87rem;
                    border: solid 1px var(--secondary-lighter);
                    border-radius: var(--radius-12);
                    outline: none !important;
                }

                .submit-btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 3.21rem;
                    padding: 0.57rem 1.5rem;
                    background-color: var(--text-light-1);
                    border-radius: var(--radius-12);
                    font-weight: 700;
                    color: var(--secondary-lighter);
                    cursor: pointer;
                }
            }
        }
    }
}

.TouchSpinSimpleSearchBox {
    width: 15rem;
    background: var(--text-light-4);
    bottom: -60%;
    padding: 2rem;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out
}

.TouchSpinSimpleSearchBox.show {
    pointer-events: visible;
    visibility: visible;
    opacity: 1;
}

.TouchSpinSimpleSearchBox input {
    border: 0.1em solid var(--secondary-subtle) !important;
    text-align: center !important;
}

.Reservation {
    display: none;
}


/* =====================================================================
   بخش ۴: قوانین سایت از Templates/Default/SubmitListing/submit.css فورک
   ===================================================================== */
.tomanTextPopup {
    display: none !important;
}

.numberunit {
    position: absolute !important;
    left: 0.57rem;
    top: 0;
    bottom: 0;
    line-height: 0;
    display: flex;
    align-items: center;
}

/* =====================================================================
   بخش ۵: سازگاری ظاهر فورک با قالب‌ها/CSS نسخه‌ی 6.0.3
   (قوانین جدید - در فایل فورک نبودند؛ برای برگرداندن همان ظاهری که سایت داشت)
   ===================================================================== */

/* 5.1 - select2: فورک خط جداکننده‌ی کنار فلش را نداشت (6.0.3 اضافه‌اش کرده) */
.select2-container--default .select2-selection__arrow {
    border-right: none;
}

/* 5.2 - چک‌باکس/رادیوی فیلدها: فورک کامپوننت «Radio Button && Checkbox» (.theme-default + .input-helper)
   را از components.rtl.css حذف کرده بود و فیلدها با input خودِ مرورگر / استایل .mbd-field-checkbox
   (appearance:none، تیک قرمز) نمایش داده می‌شدند. 6.0.3 آن کامپوننت را برگردانده (input نامرئی +
   دایره/تیک سبز) - این‌جا فقط داخل فیلدهای فرم خنثی می‌شود؛ پنل مدیریت ماژول دست‌نخورده می‌ماند. */
.mbd-field-checkbox.checkbox.theme-default,
.mbd-field-checkbox .checkbox.theme-default,
.mbd-field-radiobutton .radio.theme-default {
    margin-bottom: 0;
}

.mbd-field-checkbox .checkbox.theme-default + .checkbox.theme-default,
.mbd-field-radiobutton .radio.theme-default + .radio {
    margin-top: 0;
}

.mbd-field-checkbox.checkbox.theme-default label,
.mbd-field-checkbox .checkbox.theme-default label,
.mbd-field-radiobutton .radio.theme-default label {
    padding-right: 0;
    min-height: 0;
}

.mbd-field-checkbox.checkbox.theme-default input[type="checkbox"],
.mbd-field-checkbox .checkbox.theme-default input[type="checkbox"] {
    position: relative;
    top: revert;
    left: revert;
    z-index: revert;
    opacity: 1;
    filter: none;
    margin: revert !important;
    width: 1.25rem;
    height: 1.25rem;
}

.mbd-field-radiobutton .radio.theme-default input[type="radio"] {
    position: revert;
    top: revert;
    left: revert;
    z-index: revert;
    opacity: 1;
    filter: none;
    cursor: revert;
    margin: revert !important;
    width: revert;
    height: revert;
}

.mbd-field-checkbox .input-helper:before,
.mbd-field-checkbox .input-helper:after,
.mbd-field-radiobutton .input-helper:before,
.mbd-field-radiobutton .input-helper:after {
    content: none;
    display: none;
}

/* 5.3 - کلاس‌های بوت‌استرپی که فورک روی wrapper فیلدها گذاشته بود و 6.0.3 برداشته
   (مقادیر = bootstrap.grid.css پوسته‌ی iransite: d-flex/flex-wrap/gap-3/p-4/mt-4/ms-3) */

/* CheckBoxList (فورک: "mbd-field-checkbox d-flex flex-wrap gap-3 p-4") - CheckBox تکی خودش کلاس .checkbox دارد */
.mbd-field-checkbox:not(.checkbox) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding: 1.5rem !important;
}

/* SwitchButton (فورک: "mbd-field-switchbutton d-flex mt-4 ms-3") */
.mbd-field-switchbutton {
    display: flex !important;
    margin-top: 1.5rem !important;
    margin-right: 1rem !important;
}

/* UploadPhoto (فورک: "mbd-field-uploadphoto d-flex mt-4 ms-3"). در 6.0.3 UploadVideo/UploadFile هم
   همین کلاس wrapper را دارند، پس فقط wrapperی که input عکس دارد هدف گرفته می‌شود. */
.mbd-field-uploadphoto:has(> .box-upload > input[type="file"][accept^="image"]) {
    display: flex !important;
    margin-top: 1.5rem !important;
    margin-right: 1rem !important;
}

/* UploadExcel (فورک: textbox ستون‌ها d-none بود) */
.mbd-field-uploadfile > input[ng-model$=".Settings.Columns"] {
    display: none !important;
}

/* 5.4 - تداخل کلاس‌های کمکی 6.0.3 با بوت‌استرپ سایت: components.rtl.css نسخه‌ی 6.0.3 این‌ها را با
   !important و مقدار دیگر تعریف می‌کند (w-100 = 100px، m-5/p-5 = 5px) و چون بعد از CSS پوسته لود
   می‌شود، روی هر عنصر صفحه که این کلاس‌ها را دارد اثر می‌گذاشت. فورک این بلوک‌ها را حذف کرده بود.
   مقادیر = bootstrap.grid.css پوسته‌ی iransite (w-100 آن‌جا بدون !important است). */
.w-100 {
    width: 100% !important;
}

.m-5 {
    margin: 3rem !important;
}

.p-5 {
    padding: 3rem !important;
}