/* ============================================
   VIKBOOKING ROOM DETAILS CUSTOM CSS
   For RV Park Site Listings
   ============================================ */

/* ============================================
   MAIN CONTAINER - Room Description Block
   Contains: Description, Amenities, Calendar
   ============================================ */







.vbo-rdet-descprice-block,
.vbo-listing-details-descprice-block {
    border-radius: 20px;
    padding: 32px !important;
    /* MAIN BACKGROUND COLOR - Currently: Bright Orange */
    background-color: #2E2D2A !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.vbo-rdet-desc-cont,
.vbo-listing-details-desc-cont {
    border-radius: 15px;
    padding: 30px !important;
    /* DESCRIPTION BACKGROUND COLOR - Currently: Pure White */
    background-color: #FEF9E1 !important;
    text-align: left !important;
}

/* Description Paragraph Text */
.vbo-rdet-desc-cont p,
.vbo-listing-details-desc-cont p {
    /* DESCRIPTION TEXT COLOR - Currently: Baby Blue */
    color: #000000 !important;
    font-size: 16px;
    line-height: 1.6;
}

/* ============================================
   ROOM HEADING (Premier Site / Signature Site)
   ============================================ */
.vblistroomname {
    font-size: 32px !important;
    font-weight: 700 !important;
    margin-bottom: 15px;
    /* HEADING TEXT COLOR - Currently: Purple */
    color: #2E2D2A !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Room Name Div (contains h3 heading) */
.vblistroomnamediv {
    text-align: center !important;
    margin: 0 auto 25px auto !important;
}

.vblistroomnamediv h3 {
    /* H3 HEADING TEXT SIZE - Made larger and bold */
    font-size: 36px !important;
    font-weight: 700 !important;
    margin: 20px 0 !important;
    /* H3 HEADING TEXT COLOR - Currently: Purple */
    color: #FFFFFF !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Room Image Gallery Container */
.vbroomimgdesc {
    text-align: center !important;
    margin: 0 auto 30px auto !important;
    display: block !important;
}

.vikfx-gallery-container {
    margin: 0 auto !important;
    display: inline-block !important;
}

/* ============================================
   AMENITIES SECTION
   ============================================ */
.vbo-listing-amenities-wrap {
    border-radius: 12px;
    padding: 15px;
    margin-top: 20px;
    /* AMENITIES BACKGROUND COLOR - Currently: Neon Green */
    background-color: #FEF9E1;
    text-align: left !important;
}

.vbo-listing-amenities-wrap h4 {
    /* AMENITIES HEADING COLOR - Currently: Purple */
    color: #2E2D2A;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}

.vbo-listing-amenity {
    /* AMENITY ITEM BACKGROUND - Currently: Yellow */
    background-color: #2E2D2A;
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-block;
    margin: 5px;
}

.vbo-listing-amenity-name {
    /* AMENITY TEXT COLOR - Currently: Hot Pink */
    color: #dbc1ac;
    font-weight: 600;
}

/* ============================================
   AVAILABILITY CALENDAR SECTION
   ============================================ */
.vbo-roomdet-calscontainer {
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
    /* CALENDAR CONTAINER BACKGROUND - Currently: Purple */
    background-color: #2E2D2A;
    text-align: left !important;
}

.vbo-availcalendars-cont h4 {
    /* CALENDAR HEADING COLOR - Currently: Neon Green */
    color: #FEF9E1;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Calendar Month Selector */
.vbselectm {
    border-radius: 8px;
    padding: 10px 15px;
    /* SELECT DROPDOWN BACKGROUND - Currently: Hot Pink */
    background-color: #dbc1ac;
    /* SELECT DROPDOWN TEXT - Currently: Yellow */
    color: #2E2D2A;
    border: 2px solid #FEF9E1;
    font-weight: 600;
    font-size: 16px;
}

/* Calendar Tables */
.vbcaldivcont {
    border-radius: 12px;
    padding: 10px;
    margin: 10px 5px;
    /* CALENDAR BACKGROUND - Currently: Yellow */
    background-color: #2E2D2A;
}

.vbcal {
    border-radius: 10px;
    overflow: hidden;
}

/* Calendar Month Header */
.vbcaltrmonth td {
    /* CALENDAR MONTH HEADER BACKGROUND - Currently: Neon Green */
    background-color: #FEF9E1 !important;
    padding: 12px;
    border-radius: 8px 8px 0 0;
}

.vbcaltrmonth-month,
.vbcaltrmonth-year {
    /* CALENDAR MONTH TEXT COLOR - Currently: Purple */
    color: #2E2D2A !important;
    font-size: 18px;
}

/* Calendar Day Headers */
.vbcaldays td {
    /* DAY NAMES BACKGROUND - Currently: Hot Pink */
    background-color: #dbc1ac;
    /* DAY NAMES TEXT - Currently: Yellow */
    color: #2E2D2A;
    font-weight: 600;
    padding: 8px;
}

/* Available Days - BRIGHT GREEN */
.vbtdfree {
    background-color: #4CAF50 !important; /* Bright green */
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.vbtdfree:hover {
    background-color: #45a049 !important; /* Darker green on hover */
    cursor: pointer;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/* Unavailable Days */
.vbtdbusy,
.vblegbusy {
    /* UNAVAILABLE DAYS BACKGROUND - Currently: Hot Pink */
    background-color: #dbc1ac !important;
    /* UNAVAILABLE DAYS TEXT - Currently: Yellow */
    color: #2E2D2A !important;
}

/* ============================================
   PRICING SECTION
   ============================================ */
.vb_detcostroomdet,
.vbo-listing-details-costroomdet {
    border-radius: 15px;
    padding: 20px;
    /* PRICING SECTION BACKGROUND - Currently: Neon Green */
    background-color: #FEF9E1;
    text-align: left !important;
    grid-column: 2 !important; /* Second column */
    width: 100% !important; /* Fill the grid cell */
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.vblistroomnamedivprice {
    border-radius: 12px;
    padding: 15px;
    /* PRICE BOX BACKGROUND - Currently: Purple */
    background-color: #2E2D2A;
}

.vbo-listing-details-costroomdet .vblistroomnamedivprice .vbliststartfromrdet {
    /* "STARTING FROM" TEXT COLOR - Currently: Yellow */
    color: #FEF9E1;
    font-size: 16px;
}

.room_cost {
    /* PRICE TEXT COLOR - Currently: Hot Pink */
    color: #FFFFFF;
    font-size: 36px;
    font-weight: 700;
}

/* ============================================
   BOOKING FORM SECTION
   ============================================ */
.vbo-seldates-cont {
    border-radius: 15px;
    padding: 25px;
    /* BOOKING FORM BACKGROUND - Currently: Yellow */
    background-color: #2E2D2A;
    text-align: left !important;
}

.vbo-seldates-cont h4 {
    /* BOOKING FORM HEADING - Currently: Hot Pink */
    color: #dbc1ac;
    font-size: 22px;
    font-weight: 600;
}


.vbo-search-inpblock {
    border-radius: 10px;
    padding: 12px;
    /* FORM INPUT BLOCK BACKGROUND - Currently: Neon Green */
    background-color: #FEF9E1;
    margin: 10px 0;
}

.vbo-search-inpblock label {
    /* FORM LABEL COLOR - Currently: Purple */
    color: #2E2D2A;
    font-weight: 600;
}

.vbo-search-inpblock input {
    border-radius: 8px;
    padding: 10px;
    /* FORM INPUT BACKGROUND - Currently: Hot Pink */
    background-color: #dbc1ac;
    /* FORM INPUT TEXT - Currently: Yellow */
    color: #2E2D2A;
    border: 2px solid #2E2D2A;
}

/* Book Now Button */
.vbdetbooksubmit {
    border-radius: 10px;
    padding: 15px 40px;
    /* BOOK NOW BUTTON BACKGROUND - Currently: Purple */
    background-color: #2E2D2A !important;
    /* BOOK NOW BUTTON TEXT - Currently: Neon Green */
    color: #FEF9E1 !important;
    font-size: 20px;
    font-weight: 700;
    border: 3px solid #dbc1ac;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vbdetbooksubmit:hover {
    /* BOOK NOW BUTTON HOVER BACKGROUND - Currently: Hot Pink */
    background-color: #dbc1ac !important;
    /* BOOK NOW BUTTON HOVER TEXT - Currently: Yellow */
    color: #2E2D2A !important;
    transform: scale(1.05);
}

/* ============================================
   LEGEND (Available/Not Available indicators)
   ============================================ */
.vblegendediv {
    border-radius: 10px;
    padding: 15px;
    margin: 15px 0;
    /* LEGEND BACKGROUND - Currently: Hot Pink */
    background-color: #dbc1ac;
}


.vblegenda {
    border-radius: 6px;
    padding: 8px 12px;
    margin: 5px;
    /* LEGEND ITEM BACKGROUND - Currently: Yellow */
    background-color: #2E2D2A;
}

.vblegenda-lbl {
    /* LEGEND TEXT COLOR - Currently: Purple */
    color: #FEF9E1;
    font-weight: 600;
}

/* ============================================
   NOTES FOR CUSTOMIZATION:
   
   LAYOUT STRUCTURE:
   - Uses CSS Grid with two columns (60% and 38%)
   - Heading and images span both columns (full width)
   - Description block in left column
   - Booking menu in right column
   - Switches to single column on mobile devices
   
   COLOR REPLACEMENT GUIDE:
   - Bright Orange (#2E2D2A) - Main container background
   - Pure White (#FEF9E1) - Description content background
   - Baby Blue (#000000) - Description text color
   - Hot Pink (#dbc1ac) - Main accent, buttons, highlights
   - Yellow (#2E2D2A) - Backgrounds, input text
   - Purple (#2E2D2A) - Text, headings, secondary backgrounds
   - Neon Green (#FEF9E1) - Highlights, available days, accents, “Starting From”
   
   Simply find and replace these hex codes with your 
   final color scheme throughout this file.
   ============================================ */

/* ============================================
   RESPONSIVE DESIGN - Mobile/Tablet
   ============================================ */
@media screen and (max-width: 768px) {
    /* Switch to single column layout on mobile */
    .vbrdetboxtop,
    .vbo-listing-details-wrap {
        grid-template-columns: 1fr !important;
    }
    
    /* Reset grid columns and widths for mobile */
    .vbo-rdet-descprice-block,
    .vbo-listing-details-descprice-block,
    .vb_detcostroomdet,
    .vbo-listing-details-costroomdet {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Reduce heading size on mobile */
    .vblistroomnamediv h3 {
        font-size: 28px !important;
    }
    
    /* Adjust padding on mobile */
    .vbo-rdet-descprice-block,
    .vbo-listing-details-descprice-block {
        padding: 20px !important;
    }
}

/* Availability Calendar - Free/Available Days */
.vbo-free-cell {
    background-color: #4CAF50 !important; /* Bright green */
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.vbo-free-cell:hover {
    background-color: #45a049 !important; /* Darker green on hover */
    cursor: pointer;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/* Partially Booked Days - Already working with yellow */
.vbo-partially-cell {
    background-color: #FFC107 !important; /* Yellow for partial */
    color: #000000 !important;
    font-weight: 700 !important;
}

.vbo-partially-cell .vbo-availability-day-container {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* Fully Occupied/Booked Days - BRIGHT RED */
.vbo-occupied-cell:not(.vbo-partially-cell),
.vbtdbusy,
.vblegbusy {
    background-color: #D32F2F !important; /* Stop sign red */
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.vbo-occupied-cell:not(.vbo-partially-cell) .vbo-availability-day-container {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.vbo-search-num-adults-entry-label {
	color: #FFFFFF
}

.vbo-search-num-children-entry-label {
	color: #FFFFFF 
}

.vblegenda-status.vblegfree {
	background: #4CAF50
}

/* More specific targeting for Availability Calendar title */
.vbo-availability-controls ~ h3,
.wrap.plugin-container > h3 {
    text-transform: uppercase;
    text-align: center;
}

/* Customize VikBooking Legend Labels */

/* Hide original text */
.vblegenda-lbl {
    font-size: 0;
}

/* Show custom text */
.vblegenda-lbl::after {
    font-size: 14px; /* Adjust to match your theme's font size */
}

/* Change "Available" to "All Available" */
.vblegfree ~ .vblegenda-lbl::after {
    content: "All Available";
}

/* Change "Partially Reserved" to "Spots Available" */
.vblegwarning ~ .vblegenda-lbl::after {
    content: "Spots Available";
}

/* Keep "Not Available" the same (optional - remove if you want different text) */
.vblegbusy ~ .vblegenda-lbl::after {
    content: "Not Available";
}

/* Wrapped calendar styling */
.vbo-wrapped-calendar {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
}

.vbo-month-header td {
    text-align: center;
    padding: 15px;
    font-size: 18px;
    font-weight: 600;
    background-color: #FEF9E1;
    color: #2E2D2A;
    border-radius: 8px 8px 0 0;
}

.vbo-calendar-week td {
    padding: 15px 10px;
    text-align: center;
    border-radius: 4px;
    min-height: 80px;
    vertical-align: top;
    position: relative;
}

/* Style the day number and weekday inside each cell */
.vbo-calendar-week td .vbo-availability-daynumber {
    display: block;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
}

.vbo-calendar-week td .vbo-availability-weekday {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Spots available number at bottom of cell */
.vbo-spots-available {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
}
/* Force phone dropdown to stay closed */
.vbo-phone-prefix-dropdown,
.phone-prefix-select {
    display: none !important;
}

.vbo-search-solution:hover, 
.vbo-booking-solution:hover {
    background: #444FE9 !important;
}