/* =========================================
   IMAGE STATUS BADGES
========================================= */

.listing-carousel,
.listing-no-image {
  position:
    relative;
}


.listing-image-sold-badge,
.listing-image-reserved-badge {
  position:
    absolute;

  top:
    16px;

  right:
    16px;

  z-index:
    8;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    8px 14px;

  border-radius:
    999px;

  font-size:
    0.76rem;

  font-weight:
    900;

  line-height:
    1;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;

  box-shadow:
    0 6px 16px
    rgba(
      15,
      23,
      42,
      0.18
    );
}


.listing-image-sold-badge {
  color:
    #ffffff;

  background-color:
    #dc2626;

  border:
    1px solid
    #b91c1c;
}


.listing-image-reserved-badge {
  color:
    #7c2d12;

  background-color:
    #ffedd5;

  border:
    1px solid
    #fdba74;
}


/* =========================================
   SOLD NOTICE
========================================= */

.listing-sold-notice {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  margin-bottom:
    16px;

  padding:
    15px 16px;

  background:
    linear-gradient(
      135deg,
      #fff1f2,
      #fff7f7
    );

  border:
    1px solid
    #fecaca;

  border-left:
    5px solid
    #dc2626;

  border-radius:
    10px;
}


.listing-sold-notice-icon {
  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  color:
    #ffffff;

  background-color:
    #dc2626;

  border-radius:
    50%;

  font-size:
    0.86rem;

  font-weight:
    900;
}


.listing-sold-notice-title {
  margin:
    0 0 4px;

  color:
    #991b1b;

  font-size:
    0.95rem;

  font-weight:
    850;
}


.listing-sold-notice-text {
  margin:
    0;

  color:
    #7f1d1d;

  font-size:
    0.82rem;

  line-height:
    1.5;
}


/* =========================================
   RESERVED NOTICE
========================================= */

.listing-reserved-notice {
  margin-bottom:
    16px;

  padding:
    14px 16px;

  background:
    linear-gradient(
      135deg,
      #fff7ed,
      #fffbf5
    );

  border:
    1px solid
    #fed7aa;

  border-left:
    5px solid
    #f97316;

  border-radius:
    10px;
}


.listing-reserved-notice-title {
  margin:
    0 0 4px;

  color:
    #9a3412;

  font-size:
    0.93rem;

  font-weight:
    850;
}


.listing-reserved-notice-text {
  margin:
    0;

  color:
    #9a3412;

  font-size:
    0.81rem;

  line-height:
    1.45;
}


/* =========================================
   STATUS BADGE
========================================= */

.listing-status-badge {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  padding:
    4px 9px;

  border-radius:
    999px;

  font-size:
    0.69rem;

  font-weight:
    800;

  line-height:
    1;

  text-transform:
    capitalize;
}


.listing-status-badge.active {
  background-color:
    #dcfce7;

  color:
    #166534;

  border:
    1px solid #86efac;
}


.listing-status-badge.reserved {
  background-color:
    #fff7ed;

  color:
    #c2410c;

  border:
    1px solid #fdba74;
}


.listing-status-badge.sale_agreed {
  background-color:
    #eff6ff;

  color:
    #1d4ed8;

  border:
    1px solid
    #93c5fd;
}


.listing-status-badge.sold {
  color:
    #ffffff;

  background-color:
    #dc2626;

  border:
    1px solid
    #b91c1c;
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 768px) {

  .listing-image-sold-badge,
  .listing-image-reserved-badge {
    top:
      12px;

    right:
      12px;

    padding:
      7px 11px;

    font-size:
      0.68rem;
  }


  .listing-sold-notice {
    padding:
      13px 14px;
  }
}