/* =========================================
   IMAGE AREA
========================================= */

.listing-image-area {
  position: relative;

  margin-bottom: 14px;
}


/* =========================================
   CAROUSEL
========================================= */

.listing-carousel {
  position: relative;

  width: 100%;

  aspect-ratio:
    4 / 3;

  overflow: hidden;

  background-color:
    #eef2f6;

  border:
    1px solid
    #dce4ed;

  border-radius:
    12px;
}


/* =========================================
   SLIDES
========================================= */

.listing-slide {
  width: 100%;
  height: 100%;
}


.listing-slide img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center;

  cursor:
    zoom-in;

  transition:
    transform 0.25s ease;
}


/* slight image movement */

.listing-carousel:hover
.listing-slide img {
  transform:
    scale(1.01);
}


/* =========================================
   NO IMAGE
========================================= */

.listing-no-image {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  aspect-ratio:
    4 / 3;

  color:
    var(--muted);

  background:
    linear-gradient(
      135deg,
      #eef2f6,
      #e2e8f0
    );

  border:
    1px solid
    var(--border);

  border-radius:
    12px;

  font-size:
    0.9rem;

  font-weight:
    700;
}


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

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

  top: 14px;
  right: 14px;

  z-index: 5;

  padding:
    7px 11px;

  border-radius:
    999px;

  font-size:
    0.7rem;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;

  box-shadow:
    0 3px 10px
    rgba(
      15,
      23,
      42,
      0.15
    );
}


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

  background-color:
    #64748b;

  border:
    1px solid
    #64748b;
}


.listing-image-reserved-badge {
  color:
    var(--navy);

  background-color:
    var(--orange);

  border:
    1px solid
    var(--orange);
}


/* =========================================
   CAROUSEL BUTTONS
========================================= */

.listing-carousel-button {
  position: absolute;

  top: 50%;

  z-index: 4;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  transform:
    translateY(-50%);

  color:
    #ffffff;

  background-color:
    rgba(
      15,
      23,
      42,
      0.78
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

  border-radius:
    50%;

  font-size:
    20px;

  cursor:
    pointer;

  box-shadow:
    0 4px 12px
    rgba(
      15,
      23,
      42,
      0.22
    );

  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}


.listing-carousel-button:hover {
  background-color:
    rgba(
      15,
      23,
      42,
      0.95
    );
}


.listing-carousel-button:active {
  transform:
    translateY(-50%)
    scale(0.95);
}


.listing-carousel-left {
  left: 14px;
}


.listing-carousel-right {
  right: 14px;
}


/* =========================================
   IMAGE COUNTER
========================================= */

.listing-image-counter {
  position: absolute;

  right: 14px;
  bottom: 14px;

  z-index: 4;

  padding:
    7px 11px;

  color:
    #ffffff;

  background-color:
    rgba(
      15,
      23,
      42,
      0.84
    );

  border-radius:
    999px;

  font-size:
    0.76rem;

  font-weight:
    800;

  line-height:
    1;

  box-shadow:
    0 2px 8px
    rgba(
      15,
      23,
      42,
      0.15
    );
}


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

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

  .listing-carousel,
  .listing-no-image {
    aspect-ratio:
      4 / 3;
  }


  .listing-carousel-button {
    width: 38px;
    height: 38px;

    font-size:
      18px;
  }


  .listing-carousel-left {
    left: 9px;
  }


  .listing-carousel-right {
    right: 9px;
  }


  .listing-image-counter {
    right: 10px;
    bottom: 10px;
  }


  .listing-image-sold-badge,
  .listing-image-reserved-badge {
    top: 10px;
    right: 10px;
  }

}


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

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

  .listing-carousel-button {
    width: 34px;
    height: 34px;

    font-size:
      16px;
  }

}


/* =========================================
   FULL SCREEN IMAGE VIEWER
========================================= */

.listing-lightbox {
  position:
    fixed;

  inset:
    0;

  z-index:
    3000;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    64px 70px;

  box-sizing:
    border-box;

  background-color:
    rgba(
      7,
      12,
      20,
      0.94
    );
}


.listing-lightbox.is-active {
  display:
    flex;
}


.listing-lightbox-image {
  display:
    block;

  max-width:
    100%;

  max-height:
    calc(100dvh - 110px);

  width:
    auto;

  height:
    auto;

  object-fit:
    contain;

  border-radius:
    8px;

  box-shadow:
    0 16px 50px
    rgba(
      0,
      0,
      0,
      0.38
    );
}


.listing-lightbox-close {
  position:
    absolute;

  top:
    16px;

  right:
    20px;

  z-index:
    2;

  width:
    46px;

  height:
    46px;

  padding:
    0;

  color:
    #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.12
    );

  border:
    0;

  border-radius:
    50%;

  font-size:
    2rem;

  line-height:
    1;

  cursor:
    pointer;
}


.listing-lightbox-button {
  position:
    absolute;

  top:
    50%;

  z-index:
    2;

  width:
    46px;

  height:
    46px;

  transform:
    translateY(-50%);

  color:
    #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.14
    );

  border:
    0;

  border-radius:
    50%;

  font-size:
    1.35rem;

  cursor:
    pointer;
}


.listing-lightbox-left {
  left:
    16px;
}


.listing-lightbox-right {
  right:
    16px;
}


.listing-lightbox-counter {
  position:
    absolute;

  bottom:
    18px;

  left:
    50%;

  transform:
    translateX(-50%);

  padding:
    7px 12px;

  color:
    #ffffff;

  background:
    rgba(
      0,
      0,
      0,
      0.5
    );

  border-radius:
    999px;

  font-size:
    0.78rem;

  font-weight:
    750;
}


body.listing-lightbox-open {
  overflow:
    hidden;
}


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

  .listing-lightbox {
    padding:
      62px 14px
      54px;
  }


  .listing-lightbox-image {
    max-height:
      calc(100dvh - 120px);
  }


  .listing-lightbox-close {
    top:
      10px;

    right:
      10px;
  }


  .listing-lightbox-left {
    left:
      8px;
  }


  .listing-lightbox-right {
    right:
      8px;
  }

}