/* OneHome status labels: white/navy foundation with status-specific colour. */
:root {
  --status-label-navy: #092638;
  --status-label-active: #16824b;
  --status-label-conditional: #b45309;
  --status-label-sold: #c62828;
  --status-label-inactive: #5b6670;
}

/* Listing-card labels */
.card.listing.editorialListing .listingMedia .photo > .unifiedStatusChip,
.unifiedListingCard .listingMedia .photo > .unifiedStatusChip {
  gap: 8px !important;
  border: 2px solid var(--status-label-navy) !important;
  background: #fff !important;
  color: var(--status-label-navy) !important;
  box-shadow: 0 8px 22px rgba(9, 38, 56, .18) !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}
.card.listing.editorialListing .listingMedia .photo > .unifiedStatusChip::before,
.unifiedListingCard .listingMedia .photo > .unifiedStatusChip::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent);
}
.card.listing.editorialListing .listingMedia .photo > .unifiedStatusChip[data-unified-status="Active"],
.unifiedListingCard .listingMedia .photo > .unifiedStatusChip[data-unified-status="Active"] {
  color: var(--status-label-active) !important;
}
.card.listing.editorialListing .listingMedia .photo > .unifiedStatusChip[data-unified-status="Conditionally Sold"],
.unifiedListingCard .listingMedia .photo > .unifiedStatusChip[data-unified-status="Conditionally Sold"] {
  color: var(--status-label-conditional) !important;
}
.card.listing.editorialListing .listingMedia .photo > .unifiedStatusChip[data-unified-status="Sold"],
.unifiedListingCard .listingMedia .photo > .unifiedStatusChip[data-unified-status="Sold"] {
  color: var(--status-label-sold) !important;
}
.card.listing.editorialListing .listingMedia .photo > .unifiedStatusChip:not([data-unified-status="Active"]):not([data-unified-status="Conditionally Sold"]):not([data-unified-status="Sold"]),
.unifiedListingCard .listingMedia .photo > .unifiedStatusChip:not([data-unified-status="Active"]):not([data-unified-status="Conditionally Sold"]):not([data-unified-status="Sold"]) {
  color: var(--status-label-inactive) !important;
}

/* Full-listing status label */
.detailHero .heroIdentityKicker[class*="status-"] {
  gap: 8px !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 8px 12px !important;
  border: 2px solid var(--status-label-navy) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--status-label-navy) !important;
  box-shadow: 0 8px 22px rgba(9, 38, 56, .2) !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}
.detailHero .heroIdentityKicker[class*="status-"] b {
  color: var(--status-label-navy) !important;
}
.detailHero .heroIdentityKicker[class*="status-"] em {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--status-label-inactive) !important;
}
.detailHero .heroIdentityKicker[class*="status-"] em::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent);
}
.detailHero .heroIdentityKicker.status-active em {
  color: var(--status-label-active) !important;
}
.detailHero .heroIdentityKicker.status-conditional em {
  color: var(--status-label-conditional) !important;
}
.detailHero .heroIdentityKicker.status-closed em,
.detailHero .heroIdentityKicker.status-pending em {
  color: var(--status-label-sold) !important;
}

@media (max-width: 700px) {
  .card.listing.editorialListing .listingMedia .photo > .unifiedStatusChip.mobileStatusChip,
  .unifiedListingCard .listingMedia .photo > .unifiedStatusChip.mobileStatusChip {
    min-height: 36px !important;
    padding-inline: 11px !important;
    border: 2px solid var(--status-label-navy) !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(9, 38, 56, .18) !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
  }
  .detailHero .heroIdentityKicker[class*="status-"] {
    padding: 7px 10px !important;
  }
}