/* ===========================
   INV BUY (Listing + Sidebar)
   Works with: BuyVila.aspx new markup
   Depends on: inv-core.css
=========================== */

/* Top bar */
.inv-top {
    padding: 10px 0 0;
}

.inv-titlebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /*justify-content: space-between;*/
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel) 62%, transparent);
    backdrop-filter: blur(12px);
}

    .inv-titlebar .title-txt {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 900;
    }

        .inv-titlebar .title-txt img {
            width: 18px;
            height: 18px;
            opacity: .9;
        }

    .inv-titlebar .navtxt {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.8;
        /*max-width: 55%*/;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Main layout grid: content + sidebar */
.inv-main {
    overflow-x: hidden;
}

.inv-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 14px;
    align-items: start;
    padding: 14px 0 0;
}

/* Sidebar panel */
.inv-side {
    position: relative;
}

.inv-panel {
    border-radius: 22px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 65%, transparent);
    backdrop-filter: blur(12px);
    overflow: hidden;
    margin-bottom:10px;
}

.inv-panel__head {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--line);
}

.inv-panel__title {
    font-weight: 900;
    font-size: 14px;
}

.inv-panel__hint {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9;
}

.inv-panel__body {
    padding: 14px;
}


/* Make sidebar sticky on desktop */
@media (min-width: 1025px) {

    #SearchMenu {
        position: sticky;
        top: 88px; /* زیر هدر/نوار بالا */
    }
}



/* Filters content styling (legacy classes inside) */
#SearchMenu .container.col1 {
    margin-bottom: 14px;
}

#SearchMenu .rs-title {
    font-weight: 900;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}

#SearchMenu .txt {
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 58%, transparent);
    color: var(--text);
    padding: 0 12px;
    outline: none;
}

    #SearchMenu .txt::placeholder {
        color: color-mix(in srgb, var(--muted) 70%, transparent);
    }

#SearchMenu .search-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

    /* input عرض باقی‌مانده را بگیرد */
    #SearchMenu .search-inline .txt {
        flex: 1 1 auto;
        min-width: 0;
    }

/* دکمه کنار input و شبیه button */
#SearchMenu #btnFilter {
    width: 44px;
    height: 44px;
    margin: 0 !important; /* margin قبلی باعث افتادن زیر می‌شود */
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 58%, transparent);
    box-sizing: border-box;
    cursor: pointer;
    transition: transform .12s ease, filter .2s ease;
}

    #SearchMenu #btnFilter:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
    }

    #SearchMenu #btnFilter:active {
        transform: translateY(0);
        filter: brightness(.98);
    }
#SearchMenu .rs-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 14px !important;
    letter-spacing: .3px;
    color: var(--text);
    opacity: .85;
    margin-bottom: 6px;
    padding: 0 2px;
    position: relative;
}

    /* خط ظریف زیر عنوان */
    #SearchMenu .rs-title::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -3px;
        width: 60px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient( -90deg, var(--accent, #4f7cff), transparent );
        opacity: .8;
    }

#SearchMenu .container.col1:focus-within .rs-title {
    opacity: 1;
    color: var(--accent,#4f7cff);
    transition: .2s ease;
}

    #SearchMenu .container.col1:focus-within .rs-title::after {
        width: 90px;
        opacity: 1;
        transition: width .25s ease;
    }

/* checkbox list (keep your structure) */
.chk-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 58%, transparent);
    margin-bottom: 10px;
    font-weight: 800;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
}

    .chk-container:hover {
        border-color: color-mix(in srgb, var(--accent) 22%, transparent);
        color: var(--text);
    }

    .chk-container input {
        accent-color: var(--accent);
    }


/* Pager */
.inv-pager {
    margin-top: 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 60%, transparent);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

    .inv-pager .pager a,
    .inv-pager .pager input,
    .inv-pager .pager button,
    .inv-pager .pager span,
    .inv-pager .pager .Current,
    .inv-pager .pager .current {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--panel) 60%, transparent);
        color: var(--muted);
        font-weight: 900;
        margin: 3px;
    }

    .inv-pager .pager .active,
    .inv-pager .pager .Current,
    .inv-pager .pager .current {
        color: var(--text);
        background: color-mix(in srgb, var(--accent) 18%, transparent);
        border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    }

    .inv-pager .item-count {
        height: 38px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--panel) 58%, transparent);
        color: var(--text);
        padding: 0 10px;
        outline: none;
    }

.inv-bq {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-weight: 900;
}



/* ===== rangeslider (plugin) theming ===== */
#SearchMenu .slider-labels {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 8px;
}

/* The plugin elements (common class names) */
.rangeslider,
.rangeslider--horizontal {
    height: 8px !important;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 25%, transparent) !important;
    box-shadow: none !important;
}

.rangeslider__fill {
    background: color-mix(in srgb, var(--accent) 70%, transparent) !important;
    border-radius: 999px;
}

.rangeslider__handle {
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: var(--accent) !important;
    border: 2px solid color-mix(in srgb, var(--panel) 75%, #fff) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

    .rangeslider__handle:after {
        display: none !important;
    }

/* ===== Mobile sidebar drawer behavior ===== */
@media (max-width: 1024px) {
    .inv-grid {
        grid-template-columns: 1fr;
    }

    .buy-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .inv-side {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 80;
        display: none;
        padding: 14px;
    }

        .inv-side.is-open {
            display: block;
        }

        .inv-side .inv-panel {
            max-width: 420px;
            margin: 0 auto;
            max-height: calc(100vh - 28px);
            overflow: auto;
        }
}

@media (max-width: 560px) {
    .buy-grid {
        grid-template-columns: 1fr;
    }

    .inv-titlebar .navtxt .current {
        display: none;
    }
}


/* استایل باکس جستجو */
#SearchMenu {
    padding: 8px;
    background: color-mix(in srgb, var(--panel) 75%, transparent);
    border: 1px solid var(--line);
    border-radius: 18px;
    backdrop-filter: blur(12px);
   /* z-index: 100;*/
    transition: top 0.3s ease;
}

    #SearchMenu .rs-title {
        font-weight: 900;
        color: var(--muted);
        font-size: 12px;
        margin-bottom: 8px;
    }

    #SearchMenu .range {
        width: 100%;
        height: 6px;
        background: var(--muted);
        border-radius: 10px;
        outline: none;
    }

        #SearchMenu .range::-webkit-slider-thumb {
            width: 20px;
            height: 20px;
            border-radius: 999px;
            background: var(--accent);
            border: 2px solid #fff;
        }

/* برای استایل نمایش فیلتر‌ها و امکانات */
.chk-container,
.filter__row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

    .chk-container label,
    .filter__row label {
        font-weight: 800;
        font-size: 14px;
        background: color-mix(in srgb, var(--panel) 55%, transparent);
        padding: 8px 12px;
        border-radius: 18px;
        cursor: pointer;
        border: 1px solid var(--line);
    }

    .chk-container input[type="checkbox"],
    .filter__row input[type="checkbox"] {
        display: none;
    }

        .chk-container input[type="checkbox"]:checked + .checkmark {
            background-color: var(--accent);
        }

.checkmark {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--line);
    transition: all 0.3s;
}

.switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
}

    .switch input {
        opacity: 0;
    }


input:checked + .slider {
    background-color: var(--accent);
}

    input:checked + .slider:before {
        transform: translateX(14px);
    }

.noUi-target, .noUi-target * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.noUi-target {
    position: relative;
    direction: ltr;
}

.noUi-base {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    /* Fix 401 */
}

.noUi-origin {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
}

.noUi-handle {
    position: relative;
    z-index: 1;
}

.noUi-stacking .noUi-handle {
    /* This class is applied to the lower origin when
   its values is > 50%. */
    z-index: 10;
}

.noUi-state-tap .noUi-origin {
    -webkit-transition: left 0.3s,top .3s;
    transition: left 0.3s,top .3s;
}

.noUi-state-drag * {
    cursor: inherit !important;
}

/* Painting and performance;
 * Browsers can paint handles in their own layer.
 */
.noUi-base, .noUi-handle {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* Slider size and handle placement;
 */
.noUi-horizontal {
    height: 4px;
}

    .noUi-horizontal .noUi-handle {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        left: -7px;
        top: -7px;
        background-color: #345DBB;
    }

/* Styling;
 */
.noUi-background {
    background: #D6D7D9;
}

.noUi-connect {
    background: #345DBB;
    -webkit-transition: background 450ms;
    transition: background 450ms;
}

.noUi-origin {
    border-radius: 2px;
}

.noUi-target {
    border-radius: 2px;
}

    .noUi-target.noUi-connect {
    }

/* Handles and cursors;
 */
.noUi-draggable {
    cursor: w-resize;
}

.noUi-vertical .noUi-draggable {
    cursor: n-resize;
}

.noUi-handle {
    cursor: default;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

    .noUi-handle:active {
        border: 8px solid #345DBB;
        border: 8px solid rgba(53,93,187,0.38);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        left: -14px;
        top: -14px;
    }

/* Disabled state;
 */
[disabled].noUi-connect, [disabled] .noUi-connect {
    background: #B8B8B8;
}

[disabled].noUi-origin, [disabled] .noUi-handle {
    cursor: not-allowed;
}

/* استایل اسلایدر در حالت تم دارک */
body[data-theme='dark'] .noUi-horizontal .noUi-handle {
    background-color: #345dbb;
    border: 2px solid #fff;
}

body[data-theme='dark'] .noUi-background {
    background: #333;
}

body[data-theme='dark'] .noUi-connect {
    background: #345dbb;
}

/* استایل اسلایدر در حالت تم لایت */
body[data-theme='light'] .noUi-horizontal .noUi-handle {
    background-color: #345dbb;
    border: 2px solid #333;
}

body[data-theme='light'] .noUi-background {
    background: #d6d7d9;
}

body[data-theme='light'] .noUi-connect {
    background: #345dbb;
}

.inv-titlebar .tag {
    display: inline-flex;
    align-items: center;
    background-color: color-mix(in srgb, var(--accent2) 15%, transparent);
    color: color-mix(in srgb, var(--accent2) 90%, var(--text));
 /*   color: #fff;*/
    padding: 5px 10px;
    border-radius: 5px;
    /*margin-left: 10px;*/
    font-size: 0.9em;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding-right: 20px;
}

    .inv-titlebar .tag::after {
        content: "×";
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        line-height: 1;
        pointer-events: auto; 
    }


    /* تغییر رنگ تگ‌ها هنگام هاور */
    .inv-titlebar .tag:hover {
        background-color: color-mix(in srgb, var(--accent) 15%, transparent);
        color: color-mix(in srgb, var(--accent) 90%, var(--text));
    }


    /* استایل برای اضافه کردن تگ‌ها */
   /* .inv-titlebar .tag.tp,
    .inv-titlebar .tag.tm {
        font-size: 0.8em;
        background-color: #f39c12; 
    }

        .inv-titlebar .tag.tp:hover,
        .inv-titlebar .tag.tm:hover {
            background-color: #e67e22; 
        }*/

/* تگ‌های فعال با رنگ‌های مختلف */
/*body[data-theme='dark'] .inv-titlebar .tag.tp {
    background-color: #2980b9; 
}

body[data-theme='dark'] .inv-titlebar .tag.tm {
    background-color: #e74c3c; 
}*/


@media (min-width:1025px) {
    #SearchMenu.is-fixed {
        position: fixed !important;
        top: 80px;
        z-index: 100;
        width: 280px; /* عرض ستون */
    }

    .sticky-spacer {
        height: 0;
    }
}

#SearchMenu.is-fixed,
#SearchMenu.is-absolute {
    transition: none !important;
}


#SearchMenu.is-fixed {
    position: fixed;
    z-index: 100;
}

#SearchMenu.is-absolute {
    position: absolute;
    z-index: 0;
}

/* ===== Floating Filter Button ===== */
#btnOpenFilter {
    position: fixed;
    bottom: 18px;
    left: 18px; /* کنار go-up؛ اگر go-up داری، بعداً فاصله می‌دیم */
    z-index: 1200;
    display: none; /* فقط موبایل */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    background: color-mix(in srgb, #fff 78%, transparent);
    backdrop-filter: blur(10px);
    color: var(--text);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

    #btnOpenFilter:hover {
        transform: translateY(-2px);
        filter: brightness(1.03);
        box-shadow: 0 22px 50px rgba(0,0,0,.45);
    }

    /* حلقه Accent ظریف */
    #btnOpenFilter::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
        opacity: .8;
        pointer-events: none;
    }

/* فقط موبایل */
@media (max-width:1024px) {
    #btnOpenFilter {
        display: grid;
        place-items: center;
    }
}




/* base chip */
.div-attr {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 60%, transparent);
    font-weight: 800;
    font-size: 13px;
    position: relative;
    margin:5px;
}

    /* حذف span قدیمی اگر فقط برای دات بوده */
    .div-attr span {
        display: none;
    }

    /* ===== TRUE (تیک سبز) ===== */
    .div-attr.icon-true {
        color: var(--text);
        border-color: var(--accent2);
        /*color: var(--accent2);*/
    }

        .div-attr.icon-true::before {
            content: "✓";
            font-weight: 900;
            font-size: 14px;
            color: var(--accent2);
            margin-left: 6px;
        }

    /* ===== FALSE (ضربدر فید شده) ===== */
    .div-attr.icon-false {
        color: var(--muted);
        opacity: .6; /* فید شده */
    }

        .div-attr.icon-false::before {
            content: "✕";
            font-weight: 900;
            font-size: 14px;
            color: var(--muted); /* نه قرمز */
            margin-left: 6px;
        }

    /* هاور ملایم */
    .div-attr:hover {
        opacity: 1;
        transform: translateY(-1px);
        transition: .2s ease;
    }




/* دو ستون خلاصه */
.inv-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* باکس داخلی */
.inv-summary__box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* قیمت */
.inv-price {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 20px;
}

.inv-price__unit {
    font-size: 13px;
    color: var(--muted);
}

.inv-price__meta {
    font-size: 13px;
    color: var(--muted);
}

/* ===== Summary block (Price + Code/Props) ===== */
.inv-panel__body .grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    align-items: start;
}

/* price block */
.inv-panel__body .rs-title {
    font-weight: 900;
    font-size: 14px !important;
    color: color-mix(in srgb, var(--text) 88%, transparent);
    opacity: .9;
    margin-bottom: 8px;
}

/* قیمت: عدد بزرگ + بک‌پلیت */
.inv-panel__body .price {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: .2px;
}

/*.inv-panel__body .price,
.inv-panel__body #lblPrice {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    background: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--panel) 70%, transparent) );
    box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 20%, transparent);*/
}

    /* تومان (همان span بعد از قیمت) */
    .inv-panel__body .price + span,
    .inv-panel__body #lblPrice + span {
        color: var(--muted) !important;
        font-size: 12px !important;
        font-weight: 900;
    }

    /* شرایط پرداخت: مثل یک Note شیک */
    .inv-panel__body #lblPrice ~ div,
    .inv-panel__body .grid > div > div[style*="margin-top:8px"] {
        margin-top: 10px !important;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--panel) 55%, transparent);
        color: var(--muted) !important;
        font-size: 13px !important;
        line-height: 1.9 !important;
    }

/* کد ملک: badge بهتر */
/*.inv-panel__body .inv-bq {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent2) 20%, var(--line));
    background: color-mix(in srgb, var(--accent2) 12%, transparent);
    color: color-mix(in srgb, var(--accent2) 90%, var(--text));
    font-weight: 900;
}*/

/* ===== Properties: کنار هم (Grid) ===== */
/* چون liProperty داخل div با margin-top:10px می‌آید، همان را گرید می‌کنیم */
.inv-panel__body .grid > div:nth-child(2) > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 12px !important;
}

/* هر property1 به صورت کارت کوچک */
.inv-panel__body .property1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    font-weight: 900;
    font-size: 13px;
    color: var(--text);
}

    /* خط قدیمی را حذف کن */
    .inv-panel__body .property1 .line {
        display: none;
    }

/* چون title/value هر دو متن هستند، این ترفند کمک می‌کند title کم‌رنگ‌تر حس شود */
.inv-panel__body .property1 {
    position: relative;
}

    .inv-panel__body .property1::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 14px;
        pointer-events: none;
        background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--bg) 12%, transparent) );
        opacity: .35;
    }

    /* هاور کارت‌ها */
    .inv-panel__body .property1:hover {
        border-color: color-mix(in srgb, var(--accent) 22%, transparent);
        transform: translateY(-1px);
        transition: .2s ease;
    }

/* ریسپانسیو */
@media (max-width: 768px) {
    .inv-panel__body .grid {
        grid-template-columns: 1fr !important;
    }

        .inv-panel__body .grid > div:nth-child(2) > div:last-child {
            grid-template-columns: 1fr;
        }

    .inv-panel__body .price,
    .inv-panel__body #lblPrice {
        font-size: 22px;
        width: 100%;
        justify-content: center;
    }
}

/* عنوان داخل دیتیل */
.inv-section-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: .3px;
    margin: 0 0 12px;
    padding: 0 2px;
}

    /* همان خط گرادیانی کوتاه */
    .inv-section-title::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -4px;
        width: 60px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient( -90deg, var(--accent, #4f7cff), transparent );
        opacity: .8;
    }

/* افکت هنگام هاور یا فوکوس */
.inv-panel:hover .inv-section-title::after {
    width: 90px;
    opacity: 1;
    transition: width .25s ease;
}

/* گرید دو ستون */
.inv-sumgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

/* ===== Price box centered ===== */
.inv-pricebox {
    text-align: center;
}

/* عدد قیمت مثل پلیت برجسته */
.inv-price {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    background: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--panel) 70%, transparent) );
    box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 18%, transparent);
    margin-top: 2px;
}

.inv-pricebox .price {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: .2px;
}

.inv-price__unit {
    font-size: 12px;
    font-weight: 900;
    color: var(--muted);
}

/* ===== Payment terms as a nice note ===== */
.inv-paynote {
    margin: 12px auto 0;
    max-width: 420px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}

    /* اگر متن خالی بود، فضا نگیرد (اختیاری) */
    .inv-paynote:empty {
        display: none;
    }

/* ===== Meta title (کد ملک) ===== */
.inv-meta-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ===== Properties wrap: کنار هم ===== */
.inv-propswrap {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

    /* خروجی فعلی liProperty با property1 و line */
    .inv-propswrap .property1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--panel) 55%, transparent);
        font-weight: 900;
        font-size: 13px;
    }

        .inv-propswrap .property1 .line {
            display: none;
        }

        /* hover */
        .inv-propswrap .property1:hover {
            border-color: color-mix(in srgb, var(--accent) 22%, transparent);
            transform: translateY(-1px);
            transition: .2s ease;
        }

/* موبایل */
@media (max-width: 768px) {
    .inv-sumgrid {
        grid-template-columns: 1fr;
    }

    .inv-propswrap {
        grid-template-columns: 1fr;
    }

    .inv-pricebox {
        text-align: right;
    }
    /* اگر در موبایل دوست داری راست‌چین شود */
    .inv-price {
        width: 100%;
        justify-content: center;
    }
}

/* کانتینر کیورد */
.divkeyword {
    display: flex;
    flex-wrap: wrap;
    border:none;

}

    /* حذف تصویر اگر خواستی مینیمال باشد */
    .divkeyword img {
        width: 16px;
        height: 16px;
        opacity: .6;
        margin-left: 4px;
    }

/* چیپ کیورد */
.inv-keyword {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    color: var(--muted);
    transition: .2s ease;
}

    /* hover زیبا */
    .inv-keyword:hover {
        color: var(--accent,#4f7cff);
        border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        transform: translateY(-1px);
    }


/* =========================
   Consultant / Sidebar Card
   Works with your current markup
========================= */

/* spacing between blocks inside sidebar panel */
.inv-panel__body .container.col1 {
    margin-bottom: 14px;
}


    /* center version */
    .div-consultant.txt-center {
        text-align: center;
    }

    /* avatar */
    .div-consultant .img-user {
        width: 90%;
        height: auto;
        border-radius: 18px;
        object-fit: cover;
        margin: 0 auto 10px;
        border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
        box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    /* star image (0star.png etc) */
    .div-consultant img[src*="star"] {
        width: 88px;
        height: auto;
        margin: 6px auto 10px;
        opacity: .95;
    }

    /* name link */
    .div-consultant p {
        margin: 10px 0 0;
        color: var(--muted);
        font-weight: 800;
        line-height: 1.9;
        font-size: 13px;
    }

        .div-consultant p a {
            color: var(--text);
            font-weight: 900;
            text-decoration: none;
        }

            .div-consultant p a:hover {
                color: var(--accent,#4f7cff);
            }

    /* phone row */
    .div-consultant .icon-cellphone {
        margin-top: 10px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--panel) 60%, transparent);
        color: var(--text);
        font-weight: 900;
        direction: ltr; /* شماره درست */
    }

        .div-consultant .icon-cellphone::before {
            content: "☎";
            font-size: 14px;
            opacity: .9;
        }

/* نسخه پیشرفته badge برای تعداد فایل */
#lnkConsultant .inv-bq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .3px;
    background: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) );
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    color: var(--accent);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 25%, transparent);
    transition: .2s ease;
}

/* hover داخل دکمه */
#lnkConsultant:hover .inv-bq {
    transform: scale(1.05);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 35%, transparent);
}

#lblViews.inv-bq {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent2) 20%, var(--line));
    background: color-mix(in srgb, var(--accent2) 12%, transparent);
    color: color-mix(in srgb, var(--accent2) 90%, var(--text));
    font-weight: 900;
}

    /* آیکن چشم */
    #lblViews.inv-bq::before {
        content: "";
        width: 14px;
        height: 14px;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/svg%3E") no-repeat center / contain;
        -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/svg%3E") no-repeat center / contain;
        opacity: .9;
        padding-left:15px;
    }


/* button inside consultant card (file count) */
#lnkConsultant.btn {
    width: 100%;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* address line */
.div-consultant p:last-child {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

/* agent site button */
#lnkAgentSite.btn {
    width: 100%;
    display: block;
    margin: 12px 0 14px;
}

/* ===== Breadcrumb ===== */
.navtxt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--muted);
}

    .navtxt a {
        text-decoration: none;
        color: var(--text);
        opacity: .92;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--panel) 55%, transparent);
        transition: border-color .15s ease, background .15s ease, transform .15s ease;
    }

        .navtxt a:hover {
            transform: translateY(-1px);
            border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
            background: color-mix(in srgb, var(--accent) 14%, transparent);
        }

    .navtxt .sep {
        opacity: .6;
        padding: 0 2px;
    }

    .navtxt .current {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--card) 92%, transparent);
        color: var(--text);
        font-weight: 900;
    }



/* ===== Gallery ===== */
.inv-gallery {
    direction: ltr; /* اسلایدر طبیعی */
    min-width: 0;
}

.inv-gallery__main {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* جلوگیری از اسکرول افقی صفحه */
    max-width: 100%;
}

    .inv-gallery__main::-webkit-scrollbar {
        height: 10px;
    }

    .inv-gallery__main::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--muted) 25%, transparent);
        border-radius: 999px;
    }

.inv-gallery__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    aspect-ratio: 16 / 10; /* نسبت خوب برای ویلا */
    background: rgba(0,0,0,.08);
}

    /* هر چی داخل slide است (img یا literal) تمام‌قد */
    .inv-gallery__slide img,
    .inv-gallery__slide picture,
    .inv-gallery__slide a,
    .inv-gallery__slide > * {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* اگر literal شما img خروجی می‌دهد */
    .inv-gallery__slide img {
        object-fit: cover;
    }

/* sold badge اگر absolute است */
.inv-gallery__main .sold {
    z-index: 2;
}

/* Thumbs */
.inv-gallery__thumbs {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    max-width: 100%;
}

    .inv-gallery__thumbs::-webkit-scrollbar {
        background: color-mix(in srgb, var(--muted) 28%, transparent);
        border-radius: 999px;
    }

    .inv-gallery__thumbs::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--muted) 22%, transparent);
        border-radius: 999px;
    }

.inv-thumb {
    flex: 0 0 auto;
    width: 78px;
    height: 58px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    transition: .2s ease;
}

    .inv-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .inv-thumb.is-active {
        border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
        box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 18%, transparent);
    }

.inv-thumb__ph {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 900;
    font-size: 12px;
}

/* مهم: جلوگیری از overflow کلی صفحه */
.inv-panel, .inv-panel__body, .inv-gallery, .inv-gallery__main {
    min-width: 0;
}

/* موبایل */
@media (max-width:560px) {
    .inv-thumb {
        width: 64px;
        height: 48px;
        border-radius: 12px;
    }

    .inv-gallery__slide {
        aspect-ratio: 16 / 11;
    }
}

/* ===== Floating Consultant Button ===== */

#btnOpenSide {
    position: fixed;
    bottom: 80px;
    left: 18px;
    z-index: 1200;
    display: none; /* فقط موبایل */

    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    background: var(--panel);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    overflow: hidden;
    cursor: pointer;
    transition: .25s ease;
}

/* فقط موبایل */
@media (max-width:1024px) {
    #btnOpenSide {
        display: block;
    }
}

/* تصویر داخل */
#btnOpenSide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* hover */
#btnOpenSide:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 22px 50px rgba(0,0,0,.45);
}

/* وقتی ساید باز است */
#btnOpenSide.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent), 0 20px 45px rgba(0,0,0,.5);
}
#btnOpenSide::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: .35;
    animation: pulse 2.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: .4;
    }

    70% {
        transform: scale(1.3);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* ===== Shake Animation ===== */
@keyframes fabShake {
    0% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-4px);
    }

    30% {
        transform: translateX(4px);
    }

    45% {
        transform: translateX(-3px);
    }

    60% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-2px);
    }

    90% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
    }
}

#btnOpenSide.shake, #btnOpenFilter.shake {
    animation: fabShake .6s ease;
}




/**************************Fore RealEstate************************/
/* =========================
   Consultant / Sidebar Card
   For NEW markup (inv-panel)
========================= */

/* فاصله استاندارد داخل کارت */
.inv-panel .inv-panel__body {
    padding: 14px;
}

    /* مرکز چین کردن محتوا */
    .inv-panel .inv-panel__body .txt-center {
        text-align: center;
    }

    /* avatar */
    .inv-panel .inv-panel__body .img-user {
        width: 100%;
        max-width: 320px;
        height: auto;
        border-radius: 18px;
        object-fit: cover;
        margin: 0 auto 10px;
        border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
        box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    /* rating (اگر خروجی ستاره img باشد) */
    .inv-panel .inv-panel__body img[src*="star"] {
        width: 88px;
        height: auto;
        margin: -20px auto 10px;
        opacity: .95;
        display: block;
    }

    /* نام مشاور */
    .inv-panel .inv-panel__body p {
        margin: 10px 0 0;
        color: var(--muted);
        font-weight: 800;
        line-height: 1.9;
        font-size: 13px;
    }

        .inv-panel .inv-panel__body p a {
            color: var(--text);
            font-weight: 900;
            text-decoration: none;
        }

            .inv-panel .inv-panel__body p a:hover {
                color: var(--accent, #4f7cff);
            }

    /* phone row */
    .inv-panel .inv-panel__body .icon-cellphone {
        margin-top: 10px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--panel) 60%, transparent);
        color: var(--text);
        font-weight: 900;
        direction: ltr; /* شماره درست */
    }

        .inv-panel .inv-panel__body .icon-cellphone::before {
            content: "☎";
            font-size: 14px;
            opacity: .9;
        }

    /* badge تعداد فایل (در مارکاپ جدید همین است) */
    .inv-panel .inv-panel__body .inv-badge {
        width: 100%;
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--panel) 55%, transparent);
        color: var(--text);
        font-weight: 900;
    }

        /* عدد داخل badge */
        .inv-panel .inv-panel__body .inv-badge strong {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 26px;
            padding: 0 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: .3px;
            background: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) );
            border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
            color: var(--accent);
            box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 25%, transparent);
            transition: .2s ease;
        }

        /* hover روی badge (چون لینک نداریم، hover روی کل badge) */
        .inv-panel .inv-panel__body .inv-badge:hover strong {
            transform: scale(1.05);
            box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 35%, transparent);
        }

    /* آدرس: آخرین پاراگراف */
    .inv-panel .inv-panel__body p:last-of-type {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        color: var(--muted);
    }

/* CTA های کانال/وبسایت (همان‌هایی که گذاشتی) */
.inv-cta {
    width: 100%;
    display: block;
    margin-top: 12px;
    text-align: center;
}
/* =========================
   Consultant contact buttons
========================= */

.inv-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.inv-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    text-decoration: none;
    color: #fff;
    font-size: 10.5px;
    line-height: 1;
    box-shadow: 0 10px 24px color-mix(in srgb, #000 25%, transparent);
    transition: .18s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .inv-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px color-mix(in srgb, #000 30%, transparent);
    }

    .inv-btn:active {
        transform: translateY(0);
    }

/* icon */
.inv-ico {
    width: 18px;
    height: 18px;
    background: #fff;
    opacity: .95;
    mask: var(--ico) no-repeat center / contain;
    -webkit-mask: var(--ico) no-repeat center / contain;
}

/* svg masks */
.inv-ico--call {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.5 3 3.6 5 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.1 21 3 13.9 3 5c0-.6.4-1 1-1h3.4c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1z'/%3E%3C/svg%3E");
}

.inv-ico--tg {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.1 13.3 8.9 17c.4 0 .6-.2.9-.4l2.2-2.1 4.5 3.3c.8.4 1.4.2 1.6-.8l2.9-13.5c.3-1.2-.4-1.7-1.2-1.4L2.8 9.4c-1.1.4-1.1 1.1-.2 1.4l4.4 1.4 10.1-6.4c.5-.3.9-.1.6.2z'/%3E%3C/svg%3E");
}

.inv-ico--wa {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.5 15.3L2 22l4.9-1.3A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-2.9.8.8-2.8-.2-.3A8 8 0 1 1 12 20zm4.4-5.7c-.2-.1-1.3-.6-1.5-.7s-.4-.1-.6.1-.7.7-.8.9-.3.2-.5.1a6.6 6.6 0 0 1-2-1.2 7.6 7.6 0 0 1-1.4-1.8c-.1-.2 0-.4.1-.5l.4-.5c.1-.1.2-.3.2-.4s0-.3-.1-.4-.6-1.4-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5c-.1 0-.4.1-.6.3s-.8.8-.8 2a3.5 3.5 0 0 0 .7 1.9 8.3 8.3 0 0 0 3.2 3 10.8 10.8 0 0 0 1.1.4 2.6 2.6 0 0 0 1.2.1 2 2 0 0 0 1.3-.9 1.6 1.6 0 0 0 .1-.9c0-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E");
}

.inv-ico--ig {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 4.5A3.5 3.5 0 1 1 8.5 12 3.5 3.5 0 0 1 12 8.5zm0 2A1.5 1.5 0 1 0 13.5 12 1.5 1.5 0 0 0 12 10.5z'/%3E%3C/svg%3E");
}

.inv-ico--web {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm7.9 9h-3.1a15.5 15.5 0 0 0-1.3-5 8 8 0 0 1 4.4 5zM12 4c1.2 1.6 2 3.7 2.4 7H9.6C10 7.7 10.8 5.6 12 4zM4.1 13h3.1a15.5 15.5 0 0 0 1.3 5 8 8 0 0 1-4.4-5zm3.1-2H4.1a8 8 0 0 1 4.4-5 15.5 15.5 0 0 0-1.3 5zM12 20c-1.2-1.6-2-3.7-2.4-7h4.8c-.4 3.3-1.2 5.4-2.4 7zm3.5-2a15.5 15.5 0 0 0 1.3-5h3.1a8 8 0 0 1-4.4 5z'/%3E%3C/svg%3E");
}

.inv-ico--chat {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm0 14H5.2L4 17.2V4h16z'/%3E%3C/svg%3E");
}

/* Themes per app */
.inv-btn--call {
    background: #0f172a;
}
/* call */
.inv-btn--tg {
    background: #229ED9;
}
/* telegram */
.inv-btn--tgch {
    background: #1d8cc0;
}
/* channel */
.inv-btn--wa {
    background: #25D366;
}
/* whatsapp */
.inv-btn--ig {
    background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

.inv-btn--web {
    background: var(--accent);
}
/* website */
.inv-btn--eitaa {
    background: #f59e0b;
}
/* eitaa */
.inv-btn--bale {
    background: #f97316;
}
/* bale */
.inv-btn--rubika {
    background: #8b5cf6;
}
/* rubika */
.inv-btn--ig {
    background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

@media (max-width:1024px) {
    .inv-side #SearchMenu,
    .inv-side #ConsultantCard {
        display: none;
    }

    .inv-side.is-open.is-filter #SearchMenu {
        display: block;
    }

    .inv-side.is-open.is-consultant #ConsultantCard {
        display: block;
    }
}