/* =========================================
   OWNER LISTING CARD
========================================= */

.listing-card {
  position: relative;

  display: flex;

  flex-direction: column;

  min-width: 0;

  height: 100%;

  overflow: hidden;

  background-color:
    #ffffff;

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

  border-radius:
    14px;

  box-shadow:
    0 4px 16px
    rgba(
      15,
      23,
      42,
      0.06
    );

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}


.listing-card:hover {
  transform:
    translateY(-4px);

  border-color:
    var(--border-dark);

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


/* =========================================
   OWNER CARD STATES
========================================= */

.listing-card.is-reserved {
  background:
    linear-gradient(
      180deg,
      #fffaf5 0%,
      #ffffff 38%
    );

  border-color:
    #fdba74;
}


.listing-card.is-sold {
  background-color:
    #f8fafc;

  border-color:
    #cbd5e1;
}


/* =========================================
   OWNER CARD IMAGE
========================================= */

.listing-card-image {
  position: relative;

  display: block;

  flex-shrink: 0;

  width: 100%;

  height: 220px;

  overflow: hidden;

  color: inherit;

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

  text-decoration: none;
}


.listing-card-photo {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform 0.3s ease;
}


.listing-card:hover
.listing-card-photo {
  transform:
    scale(1.025);
}


.listing-card.is-sold
.listing-card-photo {
  opacity: 0.72;

  filter:
    saturate(0.7);
}


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

.profile-image-status {
  position: absolute;

  top: 14px;

  right: 14px;

  z-index: 2;

  padding:
    6px 11px;

  border-radius:
    999px;

  font-size:
    0.68rem;

  font-weight: 850;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;

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


.profile-image-status.active {
  color:
    #166534;

  background-color:
    #dcfce7;

  border:
    1px solid
    #86efac;
}


.profile-image-status.reserved {
  color:
    var(--navy);

  background-color:
    var(--orange);

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


.profile-image-status.sold {
  color:
    #ffffff;

  background-color:
    #64748b;

  border:
    1px solid
    #64748b;
}


/* =========================================
   OWNER LISTING TITLE
========================================= */

.profile-listing-title {
  display:
    -webkit-box;

  margin:
    0 0 10px !important;

  overflow: hidden;

  color:
    var(--navy);

  font-size:
    1.05rem !important;

  font-weight: 800;

  line-height: 1.25;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;
}


/* =========================================
   OWNER ACTIONS
========================================= */

.profile-listing-actions {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-top: auto;

  padding-top: 18px;
}


.profile-listing-actions
.button {
  width: 100%;

  min-height: 38px;

  margin: 0;

  border-radius: 8px;

  font-size:
    0.78rem;

  font-weight: 750;

  box-shadow: none;

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


.profile-listing-actions
.button:hover {
  transform:
    translateY(-1px);
}


.profile-listing-action-form {
  display: flex;

  width: 100%;

  margin: 0;
}


.profile-listing-action-form
.button {
  width: 100%;
}


.profile-listing-actions
.favourite-action-form {
  display: flex;

  width: 100%;

  margin: 0;
}


.profile-listing-actions
.favourite-action-form
.button {
  width: 100%;
}


.profile-listing-actions
> :only-child {
  grid-column:
    1 / -1;
}


/* saved listing only has
   view and saved */

.saved-listing-card
.profile-listing-actions {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


/* sold listing only has delete */

.listing-card.is-sold
.profile-listing-actions {
  grid-template-columns:
    1fr;
}





/* =========================================
   SAVED VIEW BUTTON
========================================= */

.saved-listing-card
.button.home-view-button {
  color:
    #ffffff;

  background-color:
    var(--navy);

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


.saved-listing-card
.button.home-view-button:hover {
  color:
    #ffffff;

  background-color:
    var(--navy-light);

  border-color:
    var(--navy-light);
}


.saved-listing-card
.button.home-view-button:focus {
  color:
    #ffffff;
}


/* =========================================
   HOME INVOICE BUTTON
========================================= */

.button.home-invoice-button {
  color:
    #ffffff;

  background-color:
    var(--navy);

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


.button.home-invoice-button:hover {
  color:
    #ffffff;

  background-color:
    var(--navy-light);

  border-color:
    var(--navy-light);
}


.listing-card.is-sold
.profile-listing-actions.has-invoice {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


/* =========================================
   SOLD BUTTON
========================================= */

.button.home-sold-button {
  color:
    var(--navy);

  background-color:
    var(--orange);

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


.button.home-sold-button:hover {
  color:
    #ffffff;

  background-color:
    var(--orange-dark);

  border-color:
    var(--orange-dark);
}


/* =========================================
   DELETE BUTTON
========================================= */

.button.home-delete-button {
  color:
    #ffffff;

  background-color:
    var(--red);

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


.button.home-delete-button:hover {
  color:
    #ffffff;

  background-color:
    var(--red-dark);

  border-color:
    var(--red-dark);
}


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

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

  .listing-card {
    cursor:
      pointer;
  }


  .listing-card:active {
    transform:
      scale(0.99);
  }


  .profile-listing-title {
    min-height:
      2.35em;

    max-height:
      2.35em;

    margin-bottom:
      7px !important;

    font-size:
      0.88rem !important;

    line-height:
      1.18;
  }


  .profile-image-price {
    left:
      8px;

    bottom:
      8px;

    padding:
      6px 8px;

    font-size:
      0.84rem;
  }


  .profile-image-status {
    top:
      8px;

    right:
      8px;

    padding:
      4px 7px;

    font-size:
      0.56rem;
  }


  .profile-listing-info-row {
    display:
      block;
  }


  .profile-listing-delivery,
  .listing-posted-time {
    display:
      none;
  }


  .profile-listing-actions {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      6px;

    padding-top:
      10px;
  }


  .listing-card.is-sold
  .profile-listing-actions {
    grid-template-columns:
      1fr;
  }


  .listing-card.is-sold
  .profile-listing-actions.has-invoice {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .profile-listing-actions
  .button {
    min-height:
      34px;

    padding-left:
      6px;

    padding-right:
      6px;

    font-size:
      0.7rem;
  }

}


/* =========================================
   SAVED CARD MOBILE CLEANUP
========================================= */

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

  .saved-listing-card
  .profile-listing-detail,

  .saved-listing-card
  .profile-listing-seller {
    display:
      none;
  }

}



/* =========================================
   SAVED CARD MOBILE HEART
========================================= */

.saved-listing-card-heart {
  display:
    none;
}


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

  .saved-listing-card
  .profile-listing-actions {
    display:
      none !important;
  }


  .saved-listing-card-heart {
    position:
      absolute;

    top:
      8px;

    right:
      8px;

    z-index:
      6;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      34px;

    height:
      34px;

    padding:
      0;

    color:
      var(--orange-dark);

    background-color:
      rgba(
        255,
        255,
        255,
        0.94
      );

    border:
      0;

    border-radius:
      999px;

    font-size:
      1.2rem;

    line-height:
      1;

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

    cursor:
      pointer;
  }


  .saved-listing-card-heart:active {
    transform:
      scale(0.92);
  }

}



/* =========================================
   DESKTOP SAVED CARD POLISH
========================================= */

@media screen and (min-width: 1060px) {

  .saved-listing-card {
    align-self:
      start;

    height:
      auto;
  }


  .saved-listing-card
  .listing-card-image {
    height:
      auto;

    aspect-ratio:
      4 / 3;
  }


  .saved-listing-card
  .listing-card-content {
    flex:
      none;

    padding:
      12px 14px 13px;
  }


  .saved-listing-card
  .profile-listing-title {
    min-height:
      0;

    max-height:
      none;

    margin-bottom:
      6px !important;

    font-size:
      0.92rem !important;

    line-height:
      1.2;
  }


  .saved-listing-card
  .profile-listing-location {
    margin-bottom:
      4px;

    font-size:
      0.78rem;
  }


  .saved-listing-card
  .profile-listing-detail {
    margin:
      0;

    color:
      var(--muted);

    font-size:
      0.74rem;

    line-height:
      1.3;
  }


  .saved-listing-card
  .saved-listing-sold-message {
    margin-top:
      5px;

    font-size:
      0.76rem;
  }


  .saved-listing-card
  .profile-listing-actions {
    margin-top:
      12px;

    padding-top:
      0;
  }


  .saved-listing-card
  .profile-listing-actions
  .button {
    min-height:
      34px;

    font-size:
      0.72rem;
  }

}



/* =========================================
   SOLD SAVED CARD ACTION FIX
========================================= */

@media screen and (min-width: 1060px) {

  .saved-listing-card.is-sold
  .profile-listing-actions {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}



/* =========================================
   ALIGN SOLD SAVED CARD
========================================= */

@media screen and (min-width: 1060px) {

  .saved-listing-card.is-sold
  .saved-listing-sold-message {
    display:
      none;
  }


  .saved-listing-card.is-sold
  .listing-card-content {
    padding-bottom:
      13px;
  }


  .saved-listing-card.is-sold
  .profile-listing-actions {
    margin-top:
      12px;
  }

}