.hero{
background-color:var(--collection-bgcolor) !important;
}
.hero .carousel-item {
height: 50vh !important;
}
.eric-button{
background-color:#6d635d;
opacity:0.85;
letter-spacing: 1px !important;
}
.prop-details .listing-container {
padding: 0 20px 20px;
}
.prop-details .listing-container .main-title { color: #6d635d; font-weight: 500; font-size:20px; }
.prop-details .listing-container .icon-label { color: #6d635d; font-size: 1rem; }
.prop-details .listing-container .stat-row { display: flex; align-items: center; }
/* Custom CSS to style the gallery */
#gallery-container {
max-width: 1000px; /* Limit the gallery width */
margin: 2rem auto;
/* background-color: #fff; */
/* padding: 1rem; */
border-radius: 8px;
/* box-shadow: 0 4px 15px rgba(0,0,0,0.1); */
}

/* Main Image Container and Ratio */
.main-img-wrapper {
position: relative;
width: 100%;
/* Forces a specific aspect ratio (16:9) */
padding-bottom: 56.25%; 
overflow: hidden;
background-color: #f0f0f0; /* Pre-loader background color */
}

#main-display-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image fills the space without stretching */
transition: opacity 0.15s ease-in-out;
}

/* Navigation Arrows */
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.7);
color: #333;
border: none;
padding: 10px 15px;
font-size: 1.5rem;
cursor: pointer;
border-radius: 50%;
z-index: 10;
transition: background-color 0.2s;
}

.gallery-nav:hover {
background-color: rgba(255, 255, 255, 0.9);
}

.gallery-nav.prev  {
left: 15px;
background:none;

}

.gallery-nav.next {
right: 15px;
background:none;
}

/* Thumbnails Container */
.thumbnails-container {
margin-top: 1rem;
display: flex;
gap: 10px; /* Space between thumbnails */
overflow-x: auto; /* Allow horizontal scrolling if many thumbnails */
padding-bottom: 5px;
}
/* .thumbnails-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.thumbnails-container::-webkit-scrollbar {
  display: none;
} */

/* Individual Thumbnails */
.thumb-link {
flex: 0 0 calc(16.66% - 10px); /* Display 6 per row by default, accounting for gap */
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.2s;
position: relative;
padding-bottom: 11%; /* Aspect ratio for thumbnails */
overflow: hidden;
}

/* Responsive thumbnails for smaller screens */
@media (max-width: 768px) {
.thumb-link {
flex: 0 0 calc(33.33% - 10px); /* 3 per row on mobile */
padding-bottom: 22%;
}
}

.thumb-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

/* Highlight the active thumbnail */
.thumb-link.active {
border-color: #6d635d; /* Bootstrap blue */
}
.review-card {
overflow: hidden;
background: #fff;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
border:1px solid #6d635d;
}

.review-card:hover {
/* box-shadow: 0 12px 24px rgba(0,0,0,0.08); */
transform: translateY(-5px);
border-bottom: 4px solid #6d635d;
}

.card-header-custom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px;
}

.username {
font-weight: 600;
color: #7a6e67;
font-size: 1.1rem;
}

.rating {
font-weight: bold;
color: #7a6e67;
}

.card-body-custom {
padding: 0px 24px 20px;
color: #8a8a8a;
font-size: 0.825rem;
line-height: 1.6;
flex-grow: 1;
overflow-y:scroll;
text-align:justify;
height:200px;
-ms-overflow-style: none;  /* Internet Explorer 10+ */
scrollbar-width: none;
}
.card-body-custom::-webkit-scrollbar { 
    display: none;  /* Older Safari and Chromium */
}

/* --- SLIDING FOOTER LOGIC --- */
.footer-container {
height: 75px; 
position: relative;
overflow: hidden;
/* Border only appears on hover to keep it "invisible" initially */
border-top: 1px solid transparent; 
margin: 0 24px;
transition: border-color 0.4s ease;
}

.footer-content {
position: absolute;
width: 100%;
top: 100%;       /* Start below the card */
opacity: 0;      /* Fully invisible */
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
padding: 15px 0;
display: flex;
justify-content: space-between;
}

/* Hover States */
.review-card:hover .footer-container {
border-top: 1px solid #f0eeed;
}

.review-card:hover .footer-content {
top: 0;          /* Slide up to position */
opacity: 1;      /* Fade in */
}

.footer-label {
font-size: 0.7rem;
color: #b0a8a2;
margin-bottom: 0;
}

.footer-value {
font-size: 0.85rem;
color: #7a6e67;
font-weight: 500;
}
