/* Add to your custom CSS file (e.g., plcehhub-custom.css or style.css) */

/* --- Apartment Details Page General --- */
.apartment-details-page .container {
  /* Add class="apartment-details-page" to body or a main wrapper */
  font-family: "Poppins", sans-serif;
}

/* --- Top Section (Title, Location, Price) --- */
.apartment-header-info .apartment-title {
  /* Ensure H1 in HTML has this class */
  font-size: 2.25rem; /* Larger title */
  font-weight: 600; /* Was bold, 600 is a good Poppins weight */
  color: #222; /* Darker, more focused color */
  margin-bottom: 0.25rem;
}

.apartment-header-info .apartment-location {
  font-size: 1rem;
  color: #555;
  margin-bottom: 0.75rem;
}
.apartment-header-info .apartment-location i {
  color: #777; /* Subtler icon color */
}

.apartment-header-info .apartment-meta-details {
  /* New wrapper for ID & Posted Date */
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 1rem;
}
.apartment-header-info .apartment-meta-details .apartment-id,
.apartment-header-info .apartment-meta-details .apartment-posted {
  display: inline-block; /* Or use flex */
  margin-right: 1rem;
}

.price-display-box {
  /* Wrapper for price on the right */
  text-align: right;
}
.price-display-box .rent-title {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.price-display-box .rent-amount-display {
  /* New class for styling the amount */
  font-size: 1.75rem;
  font-weight: 600;
  color: #4c9fa2; /* Your primary color */
  margin: 0;
}

/* --- Image Carousel --- */
#apartmentCarousel {
  border-radius: 12px; /* Rounded corners for the carousel container */
  overflow: hidden; /* Ensure inner images also respect border-radius */
  background-color: #f0f0f0; /* Placeholder bg if images are slow to load */
}

#apartmentCarousel .carousel-item img {
  border-radius: 0; /* Images inside shouldn't have their own radius if carousel has one */
  /* object-fit: cover; is already in your PHP, which is good */
  /* aspect-ratio: 16/9; is good via ratio class, ensure carousel itself has height */
}

#apartmentCarousel .carousel-control-prev-icon,
#apartmentCarousel .carousel-control-next-icon {
  background-color: rgba(
    0,
    0,
    0,
    0.3
  ); /* Darker, semi-transparent background */
  border-radius: 50%;
  width: 2.5rem; /* Slightly larger controls */
  height: 2.5rem;
  background-size: 60% 60%; /* Make the arrow icon smaller within the circle */
}
/* Override existing carousel control color if needed */
/* .carousel-control-prev-icon, .carousel-control-next-icon { color: #fff !important; } */

#apartmentCarousel .carousel-indicators button {
  background-color: rgba(
    255,
    255,
    255,
    0.5
  ); /* Semi-transparent white indicators */
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
}
#apartmentCarousel .carousel-indicators button.active {
  background-color: #fff; /* Solid white for active indicator */
  border-color: rgba(0, 0, 0, 0.4);
}

/* Placeholder for no image */
.no-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* Stack icon and text */
  background-color: #f8f9fa; /* Light gray background */
  border: 1px dashed #ced4da; /* Dashed border */
  border-radius: 12px; /* Match carousel radius */
  /* Ensure it takes the full height of its container if ratio is used */
  /* For example, if parent has .ratio, this needs to be 100% height */
}
.no-image-placeholder i {
  font-size: 3rem; /* Larger icon */
  color: #adb5bd; /* Muted icon color */
  margin-bottom: 0.5rem;
}
.no-image-placeholder p {
  color: #6c757d; /* Muted text color */
}

/* --- Key Features Section (.apartment-specs) --- */
.apartment-specs {
  background-color: #fff; /* Remove bg-light for a flatter look, or use a very subtle off-white */
  border: 1px solid #e9ecef; /* Softer border */
  /* box-shadow: none; Remove shadow-sm for flatter look, or make it more subtle */
  /* e.g., box-shadow: 0 2px 8px rgba(0,0,0,0.05); */
  border-radius: 8px; /* Consistent border radius */
  padding: 1.5rem; /* Adjust padding */
}

.apartment-specs .section-title-minor {
  /* New class for "Key Features" title */
  color: #333; /* Darker title */
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.apartment-specs .section-title-minor i {
  color: #4c9fa2; /* Your primary color for the icon */
}

.apartment-specs .spec-item {
  font-size: 0.95rem;
  color: #555;
  display: flex; /* Align icon and text nicely */
  align-items: center;
  padding: 0.5rem 0; /* Add some vertical padding */
}
.apartment-specs .spec-item i.primary-icon {
  /* Your existing class for icons */
  color: #4c9fa2; /* Ensure primary color */
  font-size: 1.1em; /* Slightly larger icon */
  margin-right: 0.75rem; /* Space after icon */
  width: 20px; /* Fixed width for alignment if needed */
  text-align: center;
}

/* --- Apartment Description Section Enhancements --- */
.apartment-description-content .section-title-minor {
  color: #333;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.apartment-description-content .section-title-minor i {
  color: #4c9fa2; /* Your primary theme color */
}

/* Wrapper for the description text that will be collapsed/expanded */
.description-wrapper {
  --description-collapsed-height: 100px; /* Approx 4-5 lines. Adjust as needed. Can be overridden by JS if needed too. */
  /* max-height is initially set by JS after checking scrollHeight */
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease-in-out;
  line-height: 1.7;
  color: #333;
  /* Ensure bottom padding or margin on #fullDescriptionText if you want space below text before fade */
}

/* This class is added by JS if the content is indeed collapsible */
.description-wrapper.is-collapsible:not(.expanded)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45px; /* Height of the fade effect */
  /* Uses Bootstrap's body background color variable by default */
  background: linear-gradient(to bottom, transparent, var(--bs-body-bg, white));
  pointer-events: none;
  transition: opacity 0.3s ease-in-out; /* Smooth fade in/out of the gradient */
  opacity: 1;
}

.description-wrapper.expanded::after {
  opacity: 0; /* Hide gradient when expanded */
}

/* #fullDescriptionText might need some bottom margin/padding if the fade looks abrupt */
#fullDescriptionText {
  padding-bottom: 1px; /* Prevents fade from overlapping last line of text sometimes */
}

/* Styling for the "See More" / "See Less" button */
#seeMoreBtn {
  text-decoration: none;
  font-weight: 600; /* Already set in HTML, can be reinforced here */
  color: #4c9fa2; /* Your primary theme color */
  padding-left: 0 !important;
  border: none;
  background: none; /* Ensure transparent background for link-like button */
  cursor: pointer;
}

#seeMoreBtn:hover,
#seeMoreBtn:focus {
  text-decoration: underline;
  color: #3e8588; /* Darker shade on hover */
  box-shadow: none;
  outline: none; /* Remove focus outline if you prefer only underline */
}

#seeMoreBtn i {
  font-size: 0.85em;
  margin-left: 0.3rem; /* Adjusted from ms-1 for finer control */
  transition: transform 0.3s ease-in-out;
}

#seeMoreBtn.expanded i {
  transform: rotate(180deg);
}

/* Styling for the "No description" message */
.apartment-description-content .alert.alert-secondary {
  /* Changed from alert-light for more contrast */
  background-color: #f8f9fa;
  border-color: #e9ecef;
  color: #6c757d !important; /* Ensure text-muted color applies */
}

/* --- General styles for .apartment-details-page elements (from your provided CSS) --- */
/* Ensure these are correctly placed and integrated if they were not before */
.apartment-details-page .container {
  font-family: "Poppins", sans-serif;
}
.apartment-header-info .apartment-title {
  font-size: 2.25rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.25rem;
}
.apartment-header-info .apartment-location {
  font-size: 1rem;
  color: #555;
  margin-bottom: 0.75rem;
}
.apartment-header-info .apartment-location i {
  color: #777;
}
.apartment-header-info .apartment-meta-details {
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 1rem;
}
.apartment-header-info .apartment-meta-details .apartment-id,
.apartment-header-info .apartment-meta-details .apartment-posted {
  display: inline-block;
  margin-right: 1rem;
}
.price-display-box {
  text-align: right;
}
.price-display-box .rent-title {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.price-display-box .rent-amount-display {
  font-size: 1.75rem;
  font-weight: 600;
  color: #4c9fa2;
  margin: 0;
}

/* Carousel and other component styles from your custom.css file should also be included */
/* For example: #apartmentCarousel, .no-image-placeholder, .apartment-specs, .apartment-sidebar etc. */
/* Make sure the --bs-body-bg CSS variable is available if using Bootstrap 5, otherwise replace it in the gradient */

/* --- Sidebar (.apartment-sidebar) Styling --- */
.apartment-sidebar {
  border: 1px solid #e0e0e0; /* Your existing border */
  border-radius: 12px; /* Slightly larger radius for modern feel */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); /* Softer shadow */
  padding: 1rem; /* Add some internal padding if card-body doesn't suffice */
}

.apartment-sidebar .card-body {
  padding: 1.25rem; /* Standardize padding */
}

.apartment-sidebar .card-title-sidebar {
  /* For "Listed by", "Send an Inquiry", "Interested?" */
  font-size: 1.15rem;
  font-weight: 600;
  color: #333;
}
.apartment-sidebar .card-title-sidebar i.text-primary {
  /* Ensure icons in title use your brand color */
  color: #4c9fa2 !important;
}

.apartment-sidebar .lister-info .lister-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.75rem;
}
.apartment-sidebar .lister-contact-detail {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.3rem; /* Tighter spacing for contact details */
  display: flex;
  align-items: center;
}
.apartment-sidebar .lister-contact-detail i {
  margin-right: 0.6rem;
  width: 16px; /* Align icons */
  text-align: center;
}

.apartment-sidebar .inquiry-cta-guest p {
  font-size: 0.95rem;
  color: #555;
}

.apartment-sidebar .inquiry-cta-guest .btn-primary {
  /* Your existing .btn-primary style from style.css will apply */
  /* You can add more specific styles if needed */
  /* e.g., text-transform: uppercase; letter-spacing: 0.5px; */
}

.apartment-sidebar .inquiry-cta-guest a.text-primary {
  text-decoration: none;
}
.apartment-sidebar .inquiry-cta-guest a.text-primary:hover {
  text-decoration: underline;
}

.send-email-loggedin .form-text.small {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 0.75rem;
}
.send-email-loggedin .list-unstyled.small {
  font-size: 0.85rem;
  background-color: #f8f9fa !important; /* Ensure this applies if you have other bg-light styles */
  border: 1px solid #e9ecef;
  padding: 0.75rem !important;
}
.send-email-loggedin .form-label {
  font-size: 0.9rem;
  font-weight: 500;
}
.send-email-loggedin .form-control-sm {
  font-size: 0.9rem;
  border-radius: 6px; /* Consistent border radius */
}
.send-email-loggedin .btn-primary i {
  /* Icon inside button */
  opacity: 0.8;
}

.lister-info .lister-contact-detail i.fab {
  /* Ensures brand icons are well-aligned if their default widths vary */
  width: 1.1em; /* Adjust as needed */
  text-align: center;
  margin-right: 0.6rem; /* Consistent spacing with other icons */
}

/* Styling for the social media links */
.lister-contact-detail a.social-link {
  text-decoration: none;
  color: #4c9fa2; /* Your primary theme color for links, or inherit */
  font-weight: 500; /* Slightly bolder if desired */
}

.lister-contact-detail a.social-link:hover {
  text-decoration: underline;
  color: #3e8588; /* Darker shade on hover */
}