/* General styles for the property details */
.property-details {
     font-family: Arial, sans-serif;
     margin: 20px;
     padding: 20px;
     border: 1px solid #ccc;
     background-color: #f9f9f9;
     color: #333;
     font-size: 14px;  /* Smaller font size for a more compact look */
 }
 
 .property-details h2 {
     font-size: 22px;
     color: #33054D;  /* Primary color */
     margin-bottom: 10px;
     font-weight: bold;
 }
 
 .property-details p {
     font-size: 15px;  /* Smaller text */
     line-height: 1.5;
 }
 
 .property-details ul {
     list-style-type: none;
     padding: 0;
 }
 
 .property-details ul li {
     font-size: 14px;
     margin-bottom: 8px;
 }
 
 /* Styling for the calendar */
 #calendar {
     margin: 20px 0;
     width: 100%;
 }
 
 .fc-toolbar {
     background-color: #33054D;  /* Primary color */
     color: white;
     padding: 10px;
     font-size: 14px;  /* Slightly smaller font size */
 }
 
 .fc-button {
     background-color: #33054D;  /* Primary color */
     color: white;
     border: none;
     padding: 10px 15px;
     margin: 0 5px;
     font-size: 13px;  /* Smaller button text */
 }
 
 .fc-button:hover {
     background-color: #2A0238;  /* Darker shade of primary color */
 }
 
 .fc-day-grid-event {
     background-color: #33054D;  /* Primary color */
     color: white;
 }
 
 /* Styling for check-in and check-out fields */
 #check-in, #check-out {
     width: 200px;
     padding: 8px;
     font-size: 15px;
     margin: 10px 0;
     border: 1px solid #ccc;
     border-radius: 4px;
 }
 
 /* Availability status */
 #availability-status {
     font-size: 16px;
     font-weight: bold;
     margin: 10px 0;
 }
 
 #availability-status.available {
     color: #70ACAD;  /* Secondary color */
 }
 
 #availability-status.unavailable {
     color: #FF6347;  /* Red color for unavailable */
 }
 
 /* Styling for the "Book Now" button */
 #book-now {
     background-color: #33054D;  /* Primary color */
     color: white;
     border: none;
     padding: 12px 20px;
     font-size: 16px;
     cursor: pointer;
     margin-top: 10px;
     width: 100%;
     border-radius: 4px;
 }
 
 #book-now:disabled {
     background-color: #ccc;
     cursor: not-allowed;
 }
 
 #book-now:hover {
     background-color: #2A0238;  /* Darker shade of primary color */
 }

/* Styling for the listings grid */
.uplisting-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.listing-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.listing-item:hover {
    transform: translateY(-5px);
}

.listing-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.listing-details {
    padding: 15px;
    text-align: center;
}

.listing-details h3 {
    font-size: 18px;
    color: #33054D; /* Primary color */
    margin: 10px 0;
}

.listing-details p {
    font-size: 14px;
    color: #333;
    margin: 0;
}

 
 /* Add some spacing between sections */
 .property-details p, .property-details ul, #calendar {
     margin-bottom: 20px;
 }
 
 /* Responsive Design: Adjusting for smaller screens */
 @media (max-width: 768px) {
     .property-details {
         padding: 15px;
     }
 
     .property-details h2 {
         font-size: 20px;
     }
 
     #check-in, #check-out {
         width: 150px;
         font-size: 14px;
     }
 
     #book-now {
         font-size: 14px;
     }
 
     #calendar {
         margin-top: 15px;
     }
 }
 
 @media (max-width: 480px) {
     .property-details h2 {
         font-size: 18px;
     }
 
     .property-details p {
         font-size: 13px;
     }
 
     #check-in, #check-out {
         width: 130px;
         font-size: 13px;
     }
 
     #book-now {
         font-size: 12px;
     }
 
     #calendar {
         margin-top: 10px;
     }
 }