/* ================== Section Wrapper ================== */
#sectionWrapper {
  position: relative;
  min-height: 100vh;
  padding-bottom: 40px;
}

/* ================== Universal Grid ================== */
listings-grid, #listingsGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 1200px;
    /* margin: 0 auto; */
    /* padding: 10px; */
    margin-top: -110px;
    margin-bottom: -110px;
}

@media (min-width: 768px) {
  .listings-grid,
  #listingsGrid {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: -110px;
  }
}

@media (min-width: 1025px) {
  .listings-grid,
  #listingsGrid {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: -110px;
  }
}

/* ================== Listing Card ================== */
.listing {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(16,24,40,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.listing:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(16,24,40,.15);
}

/* ---- Thumbnail ---- */
.thumbnail {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
}

/* ---- Status & Counter ---- */
.status-tag,
.image-counter {
  position: absolute;
  top: 10px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 3px;
  color: #fff;
}

.status-tag { left: 10px; }
.image-counter {
  right: 10px;
  background: rgba(0,0,0,0.7);
}

.for-sale { background: #28a745; }
.for-rent { background: #ff8c00; }

/* ---- Details ---- */
.details {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.details h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #343a40;
  margin: 0;
}

.price {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1c7e97;
  margin: 0;
}

/* ---- Icons Row ---- */
.listing-icons {
  display: flex;
  justify-content: flex-start;
  gap: 28px;
  margin: 10px 0;
}

.icon-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #334155;
}

.icon-item i { font-size: 28px; }

/* ---- Bottom Row ---- */
.bottom-row {
  display: flex;
  justify-content: space-between; /* left group vs right link */
  align-items: flex-start; /* align top since we now stack */
  margin-top: 6px;
}

/* Container for both badges */
.dom-info {
  display: flex;
  flex-direction: column; /* stack vertically */
  gap: 4px;
  background: #f2f2f2;   /* shared container background */
  padding: 4px 10px;
  border-radius: 3px;
  line-height: 0.8;
}

/* First badge (highlight) */
.dom-badge {
  font-size: 10px;
  font-weight: 600;
  color: #ff4d01;
  margin-bottom: 0px;
  padding: 3px 0px;
  background: transparent;
}

/* Second badge (info) */
.days-on-market {
  font-size: 12px;
  font-weight: 600;
  color: #1a3454;
}
    
/* ---- Button ---- */
.btn-link {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 3px;
  text-decoration: none;
  background: #1a3454;
  color: #fff;
  align-self: center; /* keeps button aligned middle if badges grow */
}
.btn-link:hover { background: #12263a; }

/* ================== Load More Button ================== */
.load-more {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background: #1a3454;
  color: #fff;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: background .2s ease;
  margin-top: 160px;
  margin-bottom: -85px;
}

.load-more:hover {
  background: #cc0000;
}

#error-message {
  color: red;
  font-weight: bold;
  text-align: center;
}