#grid-container{
        margin: 100px auto;
}
.hotel-cart{
  background-color: #F7F8F6;
    padding:20px 4px 10px;
    border-radius: 5px;
    margin-bottom: 32px;
}
.off-tag{
      padding: 0px 3px;
    color: #fff;
    border-radius: 3px;
    background: #BD0000;
    font-size: 12px;
}
.off-price{
      padding: 0px 7px;
    text-decoration: line-through;
    color: #949494;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
.final_price{
        color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding-top: 9px;
}
.font-size15{
    font-size:15px !important;
}
.btn-11{
           height: 45px;
    border-radius: 5px;
    border: 1px solid #161313;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: block;
    text-align: center;
    line-height: 43px;
    background: #141414;
    width: 160px;
 }
.btn-11:hover{
    background: #141414c4;  color: #fff;
}
.ti-sl{
        width: 100%;
    display: block;
    padding-bottom: 16px;
    direction: rtl;
    color: #000;
    text-align: right;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
   
}
.p-dt-99 {
        color: #403F41;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
.p-99{
    color: #949599;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 5px 0px;
}
.a-link{
        color: #A68262;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    line-height: 150%;
    margin-bottom: 19px;
    display: block;
    border-bottom: 1px solid #A68262;
    width: 100px;
    float: right;
}
.sh-info{
        color: #8E8E8E;
    text-align: right;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 9px;
}
.ms-back-room {
/*height: 100vh;*/
    background: rgba(0, 0, 0, 0.56);
    background-attachment: fixed !important;
    background-size: cover !important;
    position: relative;
    width: 98%;
    margin: 0px auto;
    border-radius: 20px;
    padding: 4% 0px;
}
.ms-back-room:before {
    position: absolute;
    background-image: url(/frontPage/images/hv.png);
    width: 100%;
    height: 100px;
    z-index: 9;
    bottom: -1px;
    left: 0;
    content: "";
    background-size: 100% 100%;
}
.ms-back-room:after {
    background-image: url(/frontPage/images/thh.png);
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    height: 100px;
    width: 100%;
    bottom: -90px;
}
.ms-main-rw{
      /* background: #fff;*/
    width: 90%;
    height: 91%;
    margin: 0% auto;
    border-radius: 20px;
    position: relative;
}

.ms-slider li {
    margin: 0px auto;
    height: auto;
   /* width: 100% !important;*/
   /* padding-top: 100%;*/
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 19px;
}
.ms-slider li:before {
  /*  position: absolute;
    background-image: url(/frontPage/images/li.png);
    width: 102%;
    height: 100%;
    background-size: 100% 100%;
    top: 0;
    content: "";
    left: -1px;z-index: 9;*/
}

.ms-slider img {
    width: 100% !important;
    display: block;
    margin: 0px auto;
 /*   position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;*/

}
.fs-6 {
    height: 1.1em;
    width: 1.8em;
    font-size: 1.65rem !important;
    color: #888;
    fill: currentColor;
}
.line-height43{
    line-height: 43px;
}

.unit-price{
    text-decoration: line-through;
    color: #333 !important;
    margin: 0px 7px;
    border-radius: 100px;
    border: 0.5px solid #999;
    background: rgba(235, 235, 235, 0.40);
    padding: 5px 12px;
    font-size: 15px !important;
}
.p16{
        direction: rtl;
    line-height: 38px;
    font-size: 16px;    color: #403F41;
}
/***************Details Room start *****************/
.ms_galery_mobile{
    display:none;
}
.ms_hidden{
    display:none;
}
.ms_gallery {
     display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    direction: rtl;
}
.ms_gallery > div {
     height: 278px;
    width: 100%;
    transition: .3s;
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 168 / 111;
    background-position:center;
    }
    .ms_gallery > div:first-child {
           height: 570px;
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio:auto;
    }
    
   
.pic-num {
  position: absolute;
    bottom: 25px;
    left: 25px;
    width: 85px;
    border-radius: 25px;
    padding:  7px 15px;
    line-height: 18px;
    height: 48px;
    text-align: center;
    background: rgba(255, 255, 255, 0.80);
}
.more_info_room div {
    background: #fff;
    padding: 13px;
    border-left: 1px dashed #ccc;
    width: 25%;
    min-height: 54px;
}
    .more_info_room div:first-child {
        border-left: none;
        background: none;
    }
    .more_info_room div:last-child {
        border-left: none;
    }
    .text{
        padding: 35px;
    color: #000;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 250%;
    direction: rtl;
    }
    .ti--11{
    color: #000;
text-align: right;
position:relative;
font-size: 24px;
font-style: normal;
line-height: normal;
padding-right:10px;
}
.ti--11:before{
    position: absolute;
    width: 4px;
    height: 39px;
    border-radius: 100px;
    background: rgb(64, 63, 65);
    content: "";
    right: 0px;
    top: -1px;

}
#map{
      /*  height: 400px;*/
    border-radius: 20px;
    background: var(--LIGHT-GRAY, #E4E4E5);
    padding: 14px;
}
.p-bt{
        color: #000;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 33px;
    margin-bottom: 15px;
}
.time_stl {
    background: #F6F6F6;
    color: #B4B4B4;
    padding: 6px 21px;
    line-height: 29px;width: 48%;
    text-align: center;
}
.btn_reserve {
   border-radius: 5px;
    border: 1px solid #161313;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: block;
    text-align: center;
    line-height: 33px;
    background: #141414;
    width: 100%;
}
.btn_reserve:hover{
    opacity:.8;
     color: #fff;
}
#percount {
    position: absolute;
    width: 55%;
    height: 27px;
    text-align: center;
    margin: 0px auto;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #ffffff;
    z-index: 9;
    color: #000;
    direction: rtl;
}
.nice-numberd {
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-content: center;
   flex-direction: row;
    align-items: center;
}
.nice-numberd a.plus{
    color: #F26522;
    border-color: #F26522;
}
.nice-numberd input {
    vertical-align: middle;
    -moz-appearance: textfield;
    box-sizing: content-box;
    margin: 0;
    text-align: center;
    border: none;
}

.nice-numberd input::-webkit-inner-spin-button, .nice-numberd input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.nice-numberd button, .nice-numberd a:focus {
    background: #e9f2f9;
    outline: none;
    text-decoration: none;
}
.nice-numberd {
    position: relative;
    width: 100%;
}

.nice-numberd input {
         width: 80px !important;
    height: 35px;
    display: block;
    padding: 5px;
}

.nice-numberd a {
    font-size: 24px;
    text-align: center;
    color: #949494;
    line-height: 10px;
    position: relative;
    top: 0px;
    border-radius: 50%;
    border: 0.5px solid #949494;
    width: 45px;
    height: 40px;
    padding-top: 14px;
}

.quantity {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
  
}

.quantity .group-quantity-button {
    width: 100%;
}

/* Custom Range Slider */
#priceRange {
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(to right, #e9ecef 0%, #e9ecef 100%);
    outline: none;
}

#priceRange::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0d6efd; /* آبی Bootstrap */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: background 0.3s;
}

#priceRange::-webkit-slider-thumb:hover {
    background: #0b5ed7;
}

#priceRange::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Progress bar برای track */
#priceRange::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(to right, #e9ecef var(--value), #e9ecef 100%);
    border-radius: 5px;
}
.option-label {
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .progress-container {
        max-width: 185px;
    height: 5px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
        }
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #4caf50, #8bc34a);
            transition: width 0.3s ease;
            border-radius: 10px;
        }
        .progress-value {
            font-size: 12px;
            color: #666;
            text-align: left;
        }
        /* تنظیمات برای نوارهای مختلف بر اساس تصویر (درصدهای تخمینی) */
        .positive { background: linear-gradient(90deg, #4caf50, #8bc34a); }
        .negative { background: linear-gradient(90deg, #f44336, #ff5722); }
        .neutral { background: linear-gradient(90deg, #ff9800, #ffb74d); }


.calendar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999; /* یک واحد کمتر از خود تقویم */
}
 body:has(.stickyCalendar) #sticky-sidebar .sidebar-collapsed-summary {
          display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    }
  body:has(#bookingForm) #sticky-sidebar .sidebar-collapsed-summary {
          display: none;
    
    }
.sidebar-collapsed-summary .btn_reserve {
    display: none;
}

@media (max-width:992px) {
      /* متن فقط توی موبایل دیده بشه */
    #trigger-overlay .filter-btn-text {
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        margin-right: 6px;color: #000;
    }

    #trigger-overlay {
               position: fixed;
        bottom: 70px;
        right: 0px;
        transform: translateX(-10%);
        z-index: 9998;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        background: #fff;
        border: 1px solid #E0E0E0;
        border-radius: 100px;
        padding: 10px 10px;
        box-shadow: rgba(50, 50, 50, 0.16) 0px 0px 8px, rgba(0, 0, 0, 0.1) 0px 10px 19px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
        width: auto;
        height: auto;
    }

    #trigger-overlay:active {
        transform: translateX(-10%) scale(0.97);
    }

    #trigger-overlay img {
        width: 18px;
    }

    body:has(.stickyCalendar) {
        padding-bottom: 115px;
    }

        body:has(.stickyCalendar) #sticky-sidebar {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 99999;
            margin: 0;
            padding: 12px 15px;
            border-radius: 20px 20px 0 0 !important;
            background: #fff;
            box-shadow: 0 -5px 20px rgba(0,0,0,.15);
             transition: padding .25s ease;
        }
        /* فقط توی همین حالت خاص (اینلاین‌کلندر روی موبایل) دستگیره و خلاصه دیده بشن */
    body:has(.stickyCalendar) #sticky-sidebar .sidebar-drag-handle {
        display: block;
        width: 40px;
        height: 4px;
        background: #d0d0d0;
        border-radius: 10px;
       
        cursor: pointer;
    }
    body:has(.stickyCalendar) #sticky-sidebar.collapsed .sidebar-collapsed-summary .btn_reserve {
    display: block;
}

    /* وقتی حالت جمع‌شده فعاله، آیکون باید حالت باز کردن رو نشون بده */
    /*body:has(.inlineCalendar) #sticky-sidebar.collapsed .sidebar-drag-handle {
        background-image: url(/css/img/open.png);*/ /* یا همون close.png با transform */
        /*transform: rotate(180deg);
    }*/

   

    /* حالت جمع‌شده (وقتی کلاس collapsed اضافه بشه) */
    body:has(.stickyCalendar) #sticky-sidebar.collapsed {
        padding: 8px 15px;
    }

    body:has(.stickyCalendar) #sticky-sidebar.collapsed .sidebar-content , #picroom{
        display: none;
    }

    body:has(.stickyCalendar) #sticky-sidebar.collapsed .sidebar-collapsed-summary {
        display: flex !important;
    }
        /* عنوان */

        /*#sticky-sidebar strong {
            display: none;
        }*/

        /* حذف br */

            body:has(.stickyCalendar) #sticky-sidebar br {
                display: none;
            }

        /* تاریخ */

            body:has(.stickyCalendar) #sticky-sidebar > a {
                display: flex !important;
                justify-content: space-between;
                margin-bottom: 8px;
            }

        body:has(.stickyCalendar) .time_stl {
            width: 48%;
            padding: 0;
            border: none !important;
        }

            body:has(.stickyCalendar) .time_stl div {
                display: none !important;
            }

            body:has(.stickyCalendar) .time_stl p {
                margin: 0;
                text-align: center;
                font-size: 12px;
                font-weight: 600;
            }

    /* تعداد نفرات */

        body:has(.stickyCalendar) .quantity {
            margin: 8px 0 !important;
            padding: 0 !important;
        }

        body:has(.stickyCalendar) .nice-numberd {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 36px;
        }

        body:has(.stickyCalendar) #percount {
            display: none;
        }

        body:has(.stickyCalendar) #PersonCount {
            width: 35px;
            text-align: center;
            border: none;
        }

    /* لیست قیمت */

        body:has(.stickyCalendar) #pricelist {
            margin: 8px 0 !important;
            font-size: 13px;
        }

        /* فقط قیمت نهایی */

            body:has(.stickyCalendar) #pricelist table tr:not(:last-child) {
                display: none;
            }

    /* دکمه */

        body:has(.stickyCalendar) .btn_reserve {
            margin: 0 !important;
            height: 42px !important;
            width: 120px;
        }
}
/***************Details Room end *****************/
/*****************Reserve Form Start ************************/
.background-color_fff
 {
    background: #fff;
}
.pd-1025{
    padding:10px 25px;
}
.title-booking {
    padding: 25px;
    margin-bottom: 25px;
    font-size: 24px;
    font-style: normal;
    gap: 5px;
    font-weight: 700;
    position: relative;
    padding-top: 18px;
}
.title-booking:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0px auto;
    width: 100%;
    height: 1px;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22834%22%20height%3D%221%22%20viewBox%3D%220%200%20834%201%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M833.5%200.25H0%22%20stroke%3D%22%23A3A3A3%22%20stroke-width%3D%220.5%22%20stroke-dasharray%3D%226%206%22%2F%3E%3C%2Fsvg%3E);
}
.ms-info2 {
    background: rgba(0, 132, 184, 0.10);
    color: #0084B8;
}.ms-info {
    background: rgba(224, 165, 0, 0.10);
    border: 1px solid #eba8251a;
    color: #E0A500;
}
 .add-guest{
    float: left;    font-size: 12px;
    margin-top: -8px;
 }
 .remove-guest{
         float: left;    font-size: 12px;
    margin-top: -8px;
 }
 .p-lg{
         font-size: 24px;
    font-weight: bold;
 }
  .p-lg a{
      color:#000;
 }
/*****************Reserve Form End *************************/
@media only screen and (max-width: 990px) {
    .col-slid .col-md-6:nth-child(2) {
                width: 95%;
        order: 1;
        margin: 0px auto;
     
    }
            .col-slid .col-md-6:first-child {
               width: 95%;
        order: 2;
        margin: 0px auto;
       
    }
   .ms-back-room {
            padding-bottom: 6%;
    }
   .ms-back-room .col-slid {
  
    display: flex;
    flex-direction: column;
}
    .ms_galery_mobile {
        display: block;margin-top: 15px;
    }

    .ms_gallery  {
        display:none;
    }
    .more_info_room div:first-child {
       
        width: 100%;
    }
    .more_info_room div {
     
        width: 33%;
       
    }
}
@media only screen and (max-width: 768px) {
    .more_info_room div {
        width: 100%;
    }
}