/* Buy/rent listing card layout. Loads after style.css and wins with high
   specificity because style.css carries broad legacy !important rules. */

/* ULTRA HIGH SPECIFICITY - Buy page properties grid */
html
  body
  div.main-content
  section.properties-section
  div.container
  div.properties-grid,
html body .main-content .properties-section .container .properties-grid,
body .main-content .properties-section .container .properties-grid,
.main-content .properties-section .container .properties-grid,
.properties-section .container .properties-grid,
.container .properties-grid,
.properties-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px 8px !important;
  width: 100% !important;
}

/* ULTRA HIGH SPECIFICITY - Property cards horizontal layout */
html
  body
  div.main-content
  section.properties-section
  div.container
  div.properties-grid
  div.listing-card,
html
  body
  .main-content
  .properties-section
  .container
  .properties-grid
  .listing-card,
body .main-content .properties-section .container .properties-grid .listing-card,
.main-content .properties-section .container .properties-grid .listing-card,
.properties-section .container .properties-grid .listing-card,
.container .properties-grid .listing-card,
.properties-grid .listing-card,
.listing-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  background: white !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 20px !important;
  cursor: pointer !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
  position: relative !important;
}

.listing-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* ULTRA HIGH SPECIFICITY - Image container (left 50%) */
html
  body
  div.main-content
  section.properties-section
  div.container
  div.properties-grid
  div.listing-card
  div.listing-card__image,
html
  body
  .main-content
  .properties-section
  .container
  .properties-grid
  .listing-card
  .listing-card__image,
body
  .main-content
  .properties-section
  .container
  .properties-grid
  .listing-card
  .listing-card__image,
.main-content
  .properties-section
  .container
  .properties-grid
  .listing-card
  .listing-card__image,
.properties-section .container .properties-grid .listing-card .listing-card__image,
.container .properties-grid .listing-card .listing-card__image,
.properties-grid .listing-card .listing-card__image,
.listing-card .listing-card__image,
.listing-card__image {
  flex: 0 0 50% !important;
  width: 50% !important;
  min-width: 50% !important;
  max-width: 50% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}

/* ULTRA HIGH SPECIFICITY - Images inside the container */
html body .listing-card .listing-card__image img,
body .listing-card .listing-card__image img,
.listing-card .listing-card__image img,
.listing-card__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ULTRA HIGH SPECIFICITY - Content container (right 50%) */
html
  body
  div.main-content
  section.properties-section
  div.container
  div.properties-grid
  div.listing-card
  div.listing-card__body,
html
  body
  .main-content
  .properties-section
  .container
  .properties-grid
  .listing-card
  .listing-card__body,
body
  .main-content
  .properties-section
  .container
  .properties-grid
  .listing-card
  .listing-card__body,
.main-content
  .properties-section
  .container
  .properties-grid
  .listing-card
  .listing-card__body,
.properties-section .container .properties-grid .listing-card .listing-card__body,
.container .properties-grid .listing-card .listing-card__body,
.properties-grid .listing-card .listing-card__body,
.listing-card .listing-card__body,
.listing-card__body {
  flex: 1 1 50% !important;
  width: 50% !important;
  min-width: 50% !important;
  max-width: 50% !important;
  height: 100% !important;
  min-height: 280px !important;
  max-height: 100% !important;
  padding: 24px 28px 20px 28px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  position: relative !important;
  background: white !important;
}

/* Header row: price/title/location column on the left, brokerage logo on the right.
   The text column shares the row with the 75px logo so no dead space opens under the price. */
.listing-card .listing-card__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 8px !important;
}

.listing-card .listing-card__header-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.listing-card .property-price {
  font-size: 20px;
  font-weight: 700;
  color: #188f8b;
  margin-bottom: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.1;
}

.listing-card .listed-usd-note {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin-top: 2px;
}

/* Overrides style.css's 2-line clamp so long titles wrap in full */
.listing-card .property-title {
  font-size: 12px;
  color: #004f4d;
  font-weight: 700;
  line-height: 1.3;
  margin: 10px 0 6px 0;
  display: block;
  overflow: visible;
  white-space: normal;
  position: relative;
  z-index: 5;
}

.listing-card .property-location {
  color: #6e7d87;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
  margin: 0;
}

.listing-card .property-location i {
  color: #188f8b;
  font-size: 12px;
}

.listing-card .dev-unit-label {
  display: inline-block;
  background: #eaf5f4;
  color: #004f4d;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 4px;
  margin: 8px 0 4px 0;
  letter-spacing: 0.3px;
}

.listing-card .property-type-row {
  margin: 0 0 8px 0;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

/* Badge and share pill share line-height and vertical padding so they
   render at the same height. */
.listing-card .property-type-badge,
.listing-card .card-share-btn {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  font-size: 12px;
}

.listing-card .property-type-badge {
  background: #188f8b;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.listing-card .card-share-btn {
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 3px 10px;
  font-weight: 700;
  cursor: pointer;
  gap: 4px;
  letter-spacing: 0.3px;
}

.listing-card .card-mls {
  font-size: 12px;
  color: #6b7280;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: 0.2px;
}

.listing-card .property-bottom {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: auto !important;
}

.listing-card .property-stats-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.listing-card .property-details {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #1f3f3d;
  flex-wrap: nowrap;
  min-width: 0;
}

.listing-card .property-details span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  white-space: nowrap;
}

.listing-card .property-details span i {
  color: #188f8b;
  font-size: 13px;
  width: 14px;
  text-align: center;
}

/* Buttons, so they need the colours reset off the browser default */
.listing-card .listing-contact-actions .contact-icon {
  border: none;
  cursor: pointer;
  color: white;
}

.listing-card .listing-contact-actions .contact-icon.whatsapp {
  background: #25d366;
}

.listing-card .listing-contact-actions .contact-icon.phone {
  background: #ffc922;
}

.listing-card .listing-contact-actions .contact-icon.email {
  background: #2fa4b6;
}

/* Brokerage logo fills its wrapper without distortion */
.listing-card .listing-logo-wrapper .brokerage-logo {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* Consistent divider — border-top renders same thickness everywhere */
.property-divider {
  border-top: 2px solid #8aaead !important;
  height: 0 !important;
  background: none !important;
  width: 100% !important;
  margin: 0 0 10px 0 !important;
  flex-shrink: 0 !important;
}

/* ==============================================
   MOBILE FILTER BAR FIX - Make filters wrap on mobile
   ============================================== */
@media (max-width: 768px) {
  /* Search section container */
  .search-section,
  section.search-section {
    padding: 4px !important;
  }

  .search-section .container,
  section.search-section .container {
    padding: 4px !important;
  }

  .search-form {
    padding: 8px !important;
  }

  /* More Filters container - full width on mobile */
  .more-filters-container {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* More filters menu - full width on mobile */
  .more-filters-menu {
    width: calc(100vw - 19.2px) !important;
    max-width: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* More filters features grid - 2 columns on mobile */
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Filter row inside more filters */
  .filter-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* Very small screens - single column filters */
@media (max-width: 480px) {
  /* Features grid - single column */
  .features-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile-friendly stacked layout - ULTRA HIGH SPECIFICITY to match base styles */
@media (max-width: 768px) {
  html
    body
    div.main-content
    section.properties-section
    div.container
    div.properties-grid
    div.listing-card,
  html
    body
    .main-content
    .properties-section
    .container
    .properties-grid
    .listing-card,
  body .main-content .properties-section .container .properties-grid .listing-card,
  .main-content .properties-section .container .properties-grid .listing-card,
  .properties-section .container .properties-grid .listing-card,
  .container .properties-grid .listing-card,
  .properties-grid .listing-card,
  .listing-card {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  html
    body
    div.main-content
    section.properties-section
    div.container
    div.properties-grid
    div.listing-card
    div.listing-card__image,
  html
    body
    .main-content
    .properties-section
    .container
    .properties-grid
    .listing-card
    .listing-card__image,
  body
    .main-content
    .properties-section
    .container
    .properties-grid
    .listing-card
    .listing-card__image,
  .main-content
    .properties-section
    .container
    .properties-grid
    .listing-card
    .listing-card__image,
  .properties-section .container .properties-grid .listing-card .listing-card__image,
  .container .properties-grid .listing-card .listing-card__image,
  .properties-grid .listing-card .listing-card__image,
  .listing-card .listing-card__image,
  .listing-card__image {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }

  html
    body
    div.main-content
    section.properties-section
    div.container
    div.properties-grid
    div.listing-card
    div.listing-card__body,
  html
    body
    .main-content
    .properties-section
    .container
    .properties-grid
    .listing-card
    .listing-card__body,
  body
    .main-content
    .properties-section
    .container
    .properties-grid
    .listing-card
    .listing-card__body,
  .main-content
    .properties-section
    .container
    .properties-grid
    .listing-card
    .listing-card__body,
  .properties-section .container .properties-grid .listing-card .listing-card__body,
  .container .properties-grid .listing-card .listing-card__body,
  .properties-grid .listing-card .listing-card__body,
  .listing-card .listing-card__body,
  .listing-card__body {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: none !important;
    padding: 14px !important;
    position: relative !important;
  }

  /* Legacy property-card support for mobile */
  .property-card {
    flex-direction: column !important;
    height: auto !important;
  }

  .property-card .property-image {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }

  .property-card .property-content {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Allow property titles to wrap on mobile */
  .listing-card .property-title,
  .listing-card__body .property-title {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* Adjust price size for mobile */
  .listing-card .property-price,
  .listing-card__body .property-price {
    font-size: 16px !important;
  }

  /* Adjust property content for stacked mobile layout */
  .property-card .property-content,
  .listing-card .listing-card__body {
    padding-top: 8px !important;
  }

  /* Property bottom - no extra padding needed; icons are in-flow below */
  .listing-card .property-bottom {
    margin-top: 8px !important;
    padding-bottom: 0 !important;
  }

  /* Property divider - smaller margin on mobile */
  .property-divider {
    margin: 0 0 4px 0 !important;
  }

  /* Logo: smaller on mobile */
  .listing-logo-wrapper {
    height: 56px !important;
    max-width: 62px !important;
  }

  .listing-logo-wrapper img {
    height: 56px !important;
    max-width: 62px !important;
  }

  /* On mobile the icons stay in-flow; no right nudge needed */
  .property-stats-contact-row .listing-contact-actions {
    margin-right: 0 !important;
  }

  /* Stats+icons row: stack vertically on mobile (stats above, icons below) */
  .property-stats-contact-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  /* Contact actions: in-flow below stats, icons in a single horizontal row */
  .listing-contact-actions {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 4px 0 !important;
    width: 100% !important;
  }

  .listing-contact-actions .contact-icon {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }
}

/* ==============================================
   CRAWLABLE CARD LINKS
   The whole card is a link via a stretched overlay anchor, so listing
   grids are crawlable and keyboard-navigable without onclick handlers.
   Interactive controls sit above the overlay.
   ============================================== */
.listing-card .card-link-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

.listing-card .card-title-link {
  color: inherit !important;
  text-decoration: none !important;
}

.listing-card button,
.listing-card .property-title {
  position: relative !important;
  z-index: 2 !important;
}

.listing-card .property-actions {
  z-index: 2 !important;
}