/* ==========================================
   VIKBOOKING: SINGLE ROOM DETAILS 
   ========================================== */

.vikfx-gallery-container {
    border-radius: var(--exp-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-soft) !important;
    border: 1px solid var(--exp-border) !important;
    margin-bottom: 30px !important;
}

.vbo-listing-details-allphotos a {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--dd-text-main) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    box-shadow: var(--shadow-soft) !important;
    transition: all var(--transition-speed) !important;
}

.vbo-listing-details-allphotos a:hover {
    background-color: var(--dd-primary) !important;
    color: #ffffff !important;
}

/* Grid Layout: Description (Left) & Pricing Widget (Right) */
.vbo-listing-details-descprice-block {
    display: grid !important;
    grid-template-columns: 1.8fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
}

/* Content Cards */
.vbo-listing-details-desc-cont > p,
.vbo-listing-details-desc-cont > ul,
.vbo-listing-amenities-wrap,
.vbo-availcalendars-cont {
    background-color: var(--dd-surface) !important;
    padding: 30px !important;
    border-radius: var(--exp-radius) !important;
    border: 1px solid var(--exp-border) !important;
    box-shadow: var(--shadow-soft) !important;
    margin-bottom: 30px !important;
}

.vbo-listing-details-desc-cont p b {
    font-family: var(--font-heading) !important;
    font-size: 1.3rem !important;
    color: var(--dd-text-main) !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.vbo-listing-details-desc-cont li {
    margin-bottom: 8px !important;
    color: var(--dd-text-muted) !important;
}

/* Amenities Grid */
.vbo-listing-amenities-wrap h4 {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem !important;
    margin: 0 0 20px 0 !important;
    border-bottom: 1px dashed var(--exp-border) !important;
    padding-bottom: 15px !important;
}

.vbo-listing-amenities {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 15px !important;
}

.vbo-listing-amenity {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--dd-text-main) !important;
    font-size: 0.95rem !important;
}

.vbo-listing-amenity-textimg i {
    color: var(--dd-primary) !important;
    font-size: 1.2rem !important;
}

/* Sticky Booking Widget */
.vbo-listing-details-costroomdet {
    position: sticky !important;
    top: 100px !important; 
    padding: 0 !important; 
    border: 1px solid var(--exp-border) !important;
    border-radius: var(--exp-radius) !important;
    box-shadow: var(--shadow-hover) !important;
    background-color: var(--dd-surface) !important;
}

.vbo-listing-details-costroomdet-inner {
    width: 100% !important;
    max-width: 450px !important;
    padding: 30px !important; 
    background: var(--dd-surface) !important;
    border-radius: var(--exp-radius) !important;
    box-sizing: border-box !important;
    margin: 0 auto;
}

.vb_detcostroom {
    border-bottom: 1px solid var(--exp-border) !important;
    padding-bottom: 20px !important;
    margin-bottom: 25px !important;
}

.vbliststartfromrdet {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--dd-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
}

.room_cost {
    font-size: 2rem !important;
    font-weight: 300 !important;
    color: var(--dd-primary) !important;
}

/* Room Occupancy Tracker */
.vbmaxminpeopleroom {
    display: flex !important;
    justify-content: space-between !important;
    background-color: var(--dd-bg-base) !important;
    padding: 12px 15px !important;
    border-radius: 6px !important;
    margin-bottom: 20px !important;
    border: 1px dashed var(--exp-border) !important;
}

.vbmaxlabeldet {
    font-size: 0.8rem !important;
    color: var(--dd-text-muted) !important;
    margin: 0 5px !important;
}

.vbmaxnumberdet { font-weight: 700 !important; color: var(--dd-text-main) !important; }
.vbo-rdetails-capacity-icn i { color: var(--dd-primary) !important; }

/* Availability Calendar */
.vbo-availcalendars-cont h4 {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem !important;
    margin: 0 0 15px 0 !important;
    border-bottom: 1px dashed var(--exp-border) !important;
    padding-bottom: 15px !important;
}

.vblegendediv {
    margin-bottom: 20px !important;
    display: flex !important;
    gap: 20px !important;
}

.vblegfree { background-color: #d1fae5 !important; border: 1px solid #34d399 !important; }
.vblegbusy { background-color: #fee2e2 !important; border: 1px solid #f87171 !important; }

.vbcal {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 4px !important;
}

.vbcaltrmonth td {
    background-color: var(--dd-surface) !important;
    font-family: var(--font-heading) !important;
    font-size: 1.2rem !important;
    padding: 10px !important;
    border: none !important;
}

.vbcaldays td {
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    color: var(--dd-text-muted) !important;
    padding: 10px 0 !important;
    text-align: center !important;
}

.vbcalnumdays td {
    padding: 12px 5px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

.vbtdfree {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
    cursor: pointer !important;
    transition: background var(--transition-speed) !important;
}
.vbtdfree:hover:not(.vbtdpast) { background-color: #d1fae5 !important; }
.vbtdbusy { background-color: #fef2f2 !important; color: #991b1b !important; }
.vbtdpast { opacity: 0.5 !important; cursor: not-allowed !important; }

@media screen and (max-width: 992px) {
    .vbo-listing-details-descprice-block { grid-template-columns: 1fr !important; }
    .vbo-listing-details-costroomdet {
        position: static !important;
        order: -1 !important; 
        margin-bottom: 10px !important;
    }
}