/*
=================================================================
    ★ NEW CSS FOR MODAL WIDTH AND ACTION BUTTONS ★
=================================================================
*/
/* --- Modal Css --- */

.btn.btn-primary.w-100{

    background-color: #607d8b;
    border: none;
}

h4.fw-bold.text-primary.mb-1{

    color: #212529cf !important;
}

h6.fw-semibold{

    font-size: 23px;
    margin-bottom: 20px;
    color: #575b5e;
    font-weight: 500 !important;
}

input.form-control.form-control-sm {
 padding: 10px;

}


/* --- Modal Width Override --- */
/* Makes the modal wider on large screens */
@media (min-width: 992px) {
  #unitQuickView .modal-dialog {
    max-width: 1500px!important; /* Adjust this value as needed */
  }
}

/* --- Action Button Custom Styling --- */
/* This is the container for Reserve/Shortlist */
.unit-action-buttons {
    display: flex; /* Ensures buttons are side-by-side */
    gap: 0.75rem; /* Space between the buttons */
}

/* Shared style for both buttons */
.unit-action-buttons .btn {
    padding: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 6px;
    flex-grow: 1; /* Makes both buttons share the space equally */
    transition: all 0.2s ease-in-out;
}

/* Specific styling for the Shortlist button */
.unit-action-buttons .card-shortlist-badge {
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    color: #333333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
}
.unit-action-buttons .card-shortlist-badge:hover {
    background-color: #f7f7f7;
    border-color: #aaaaaa;
}

/* Text inside the Shortlist button */
.unit-action-buttons .card-shortlist-badge .shortlist-badge-action-text {
    font-size: 0.9rem;
    margin-bottom: 2px;
}
.unit-action-buttons .card-shortlist-badge .shortlist-badge-count {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    color: #6c757d;
}

/* Active "is-shortlisted" state */
.unit-action-buttons .card-shortlist-badge.is-shortlisted {
    background-color: #fff8e1; /* A light yellow */
    border-color: #ffc107;   /* Bootstrap's warning yellow */
    color: #856404;          /* A dark yellow for text */
}

.unit-action-buttons .card-shortlist-badge.is-shortlisted .shortlist-badge-action-text,
.unit-action-buttons .card-shortlist-badge.is-shortlisted .fas.fa-star {
    color: #ffc107;
}

/* Ensure the icon has a color */
.unit-action-buttons .fa-star {
    color: #aaaaaa;
}



/* Ensure the overall details area has a background if items are white */
#unitQuickViewDetails {
    background-color: #f8f9fa; /* Or your desired light grey background for the aside panel */
    padding: 10px;
    margin: 0;
    /* margin-left: 5px; */
}
.unit-features{
	gap: 3%;
}
#unitQuickViewDetails .unit-features .col-6 {
    font-size: 0.9rem;
    padding-top: 0.8rem;    /* Internal padding within the white box */
    padding-bottom: 0.8rem; /* Internal padding within the white box */
    padding-left: 0.8rem;   /* Add some horizontal internal padding */
    padding-right: 0.8rem;  /* Add some horizontal internal padding */
    background-color: #ffffff; /* White background for each item */
    border-radius: 8px;       /* Slightly more standard border-radius value */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.1); Optional: subtle shadow for depth */
    display: flex; /* Ensures icon and text align well if not already by d-flex */
    align-items: center; /* Ensures icon and text align well */
	flex-basis: 47%;
}

/* Optional: Adjust icon styling within the item */
#unitQuickViewDetails .unit-features .col-6 .fas {
    margin-right: 10px!important; /* Space between icon and text */
    color: #6c757d; /* Default icon color, can be overridden */
    flex-shrink: 0; /* Prevent icon from shrinking if text is long */
}

/* The .row with g-3 will handle the spacing between .col-6 items */
/* No extra margin needed on .col-6 itself if using Bootstrap gutters */

#unitQuickViewDetails .unit-features .fa-lg {
    width: 20px; /* Ensure icons align well */
}

/* Owl Carousel Navigation Arrows Styling */
#unitQuickViewGallery .owl-carousel .owl-nav button.owl-prev,
#unitQuickViewGallery .owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5) !important; /* Darker background for visibility */
    color: white !important;
    border-radius: 50% !important;
    width: 40px !important; /* Adjust size */
    height: 40px !important; /* Adjust size */
    font-size: 1.2rem !important; /* Icon size */
    line-height: 40px !important; /* Center icon vertically */
    text-align: center;
    padding: 0 !important;
    transition: background-color 0.3s ease;
    z-index: 10;
}

#unitQuickViewGallery .owl-carousel .owl-nav button.owl-prev:hover,
#unitQuickViewGallery .owl-carousel .owl-nav button.owl-next:hover {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

#unitQuickViewGallery .owl-carousel .owl-nav button.owl-prev {
    left: 15px; /* Adjust position */
}

#unitQuickViewGallery .owl-carousel .owl-nav button.owl-next {
    right: 15px; /* Adjust position */
}

/* Owl Carousel Dots Styling (Optional, if you want to match example closely) */
#unitQuickViewGallery .owl-carousel .owl-dots {
    position: absolute;
    bottom: 0px; /* Adjust position */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

#unitQuickViewGallery .owl-carousel .owl-dot span {
    background: #ccc !important; /* Dot color */
    width: 10px !important;
    height: 10px !important;
    margin: 5px 5px !important;
}

#unitQuickViewGallery .owl-carousel .owl-dot.active span,
#unitQuickViewGallery .owl-carousel .owl-dot:hover span {
    background: #337ab7 !important; /* Active/hover dot color (adjust to your primary color) */
}

/* Ensure gallery images don't overflow and have a max height */
#unitQuickViewGallery .owl-carousel .item img {
    display: block;
    width: 100%;
    object-fit: cover; /* Or 'cover' if you prefer cropping to fill */
    background-color: #f0f0f0; /* Fallback bg for images that don't load or are transparent */
}

/* Ensure the gallery section has a defined height or min-height if images are slow to load */
#unitQuickViewGallery {
    min-height: 600px!important; /* Or a more appropriate value */
    background-color: #ffffff!important; /* Light background for gallery area */
    position: relative; /* For absolute positioning of nav/dots */
    width: 66.666667%;
}


/* FLOOR PLANS - FRONTEND CSS STYLES BELOW */

/* Existing Status Dot CSS (keep as is) */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* REMOVE margin-left if dot is now on the left */
    margin-right: 8px; /* Space between dot and status text */
    vertical-align: middle;
    animation: pulse 1.75s infinite ease-in-out;
}

.status-dot.green { /* Available */
    background-color: #28a745;
    box-shadow: 0 0 5px #28a745, 0 0 10px #28a745;
}

.status-dot.red { /* Sold */
    background-color: #dc3545;
    box-shadow: 0 0 5px #dc3545, 0 0 10px #dc3545;
}

.status-dot.orange { /* Reserved */
    background-color: #fd7e14; /* Bootstrap warning orange */
    box-shadow: 0 0 5px #fd7e14, 0 0 10px #fd7e14;
}

.status-dot.yellow { /* Pending */
    background-color: #ffc107; /* Bootstrap warning yellow */
    box-shadow: 0 0 5px #ffc107, 0 0 10px #ffc107;
}

/* Keep @keyframes pulse as is */
@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
}

/* Tooltip styling (keep as is) */
.unit-tooltip {
    /* ... */
}
.tooltip-title {
    font-weight: bold;
    margin-bottom: 5px;
    /* ... */
}
.tooltip-row {
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
}
.tooltip-label {
    margin-right: 5px;
    color: #555;
}
.tooltip-value {
    font-weight: 500;
    display: inline-flex; 
    align-items: center;
}

@media (max-width: 991.98px) {
#unitQuickViewGallery {
    width: 100%;
	min-height:inherit !important;
}
}