/* -----------------------------------------------------------------------------
   Property Modal – custom styling
   Author: (Your name / company)
   Description:
     Extra styles on top of Bootstrap 5 to give the property detail modal a clean,
     modern look that scales nicely on desktop, tablet and mobile.
   -------------------------------------------------------------------------- */

/* ======= Root colour palette (override if your brand differs) =============== */
:root {
  --pm-primary: #346f8f;   /* Bootstrap primary */
  --pm-dark: #428ab1;      /* Bootstrap dark */
  --pm-light: #f8f9fa;     /* Bootstrap light */
  --pm-gray: #6c757d;      /* Bootstrap secondary */
}

/* ======= Modal container & dialog ========================================= */
#propertyModal .modal-dialog {
  max-width: 100%;
  width: 95%;
}

#propertyModal .modal-content {
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.25);
}

/* ======= Carousel ========================================================== */
#propertyModal .carousel-item {
  height: 65vh;                /* keeps images above the fold */
}

#propertyModal .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;           /* crop, no distortion */
}

/* Touch‑friendly bigger controls */
#propertyModal .carousel-control-prev-icon,
#propertyModal .carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
  filter: drop-shadow(0 0 0.5rem rgba(0,0,0,0.5));
}

/* Dot indicators – minimalist pills */
#propertyModal .carousel-indicators [data-bs-target] {
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.25rem;
  background-color: #fff;
  opacity: .5;
}

#propertyModal .carousel-indicators .active {
  opacity: 1;
}

/* ======= Text panel (right column) ======================================== */
#propertyModal .modal-body {
  background: var(--pm-light);
}

#propertyModal h3 {
  font-size: 1.5rem;
  color: var(--pm-dark);
}

#propertyModal h4 {
  color: var(--pm-primary);
}

#propertyModal p,
#propertyModal ul {
  font-size: 0.95rem;
}
#propertyModal p{
    overflow-y: auto;
    max-height: 300px;
    white-space: pre-wrap;
}
#propertyModal .list-inline-item i {
  color: var(--pm-primary);
}

/* Primary button full width */
#propertyModal .btn-primary {
  background-color: var(--pm-primary);
  border: none;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background-color .2s ease-in-out;
}

#propertyModal .btn-primary:hover {
  background-color: var(--pm-dark);
}

/* Close (X) button */
#propertyModal .btn-close {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") center/1rem auto no-repeat;
  opacity: .65;
}

#propertyModal .btn-close:hover {
  opacity: 1;
}

/* ======= Responsive tweaks =============================================== */
@media (max-width: 991.98px) {
  #propertyModal .carousel-item {
    height: 50vh;
  }

  #propertyModal .btn-close {
    top: 0.5rem !important;
    right: 0.5rem !important;
  }
}

@media (max-width: 575.98px) {
  #propertyModal .carousel-item {
    height: 45vh;
  }

  #propertyModal h3 {
    font-size: 1.25rem;
  }

  #propertyModal h4 {
    font-size: 1.1rem;
  }
}

/* ======= Utility: Dark mode switch ======================================= */
@media (prefers-color-scheme: dark) {
  #propertyModal .modal-body {
    background: #1e1e1e;
    color: #e9ecef;
  }

  #propertyModal .modal-content {
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.75);
    background-color: #121212;
  }

  #propertyModal h3,
  #propertyModal h4 {
    color: #fff;
  }

  #propertyModal .carousel-indicators [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.7);
  }
}