/* =========================================
   PUBLIC LISTING CARD
========================================= */

.public-profile-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;
}


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

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

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


/* =========================================
   ACTIVE LISTING ACCENT
========================================= */

.public-profile-listing-card:not(
  .public-profile-listing-reserved
):not(
  .public-profile-listing-sold
)::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  z-index:
    3;

  width:
    100%;

  height:
    4px;

  background-color:
    var(--green);
}


/* =========================================
   PUBLIC CARD IMAGE
========================================= */

.public-profile-listing-image {
  position:
    relative;

  display:
    block;

  width:
    100%;

  height:
    220px;

  overflow:
    hidden;

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


.public-profile-listing-image
img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform 0.3s ease;
}


.public-profile-listing-card:hover
.public-profile-listing-image
img {
  transform:
    scale(1.025);
}


/* =========================================
   RESERVED LISTING
========================================= */

.public-profile-listing-reserved {
  background:
    linear-gradient(
      180deg,
      #fffaf5 0%,
      #ffffff 35%
    );

  border-color:
    #fdba74;
}


.public-profile-listing-reserved::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  z-index:
    3;

  width:
    100%;

  height:
    4px;

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


.public-profile-listing-reserved
.public-profile-listing-image
img {
  opacity:
    0.86;
}


.public-profile-reserved-badge {
  position:
    absolute;

  top:
    14px;

  right:
    14px;

  z-index:
    2;

  padding:
    6px 11px;

  color:
    var(--navy);

  background-color:
    var(--orange);

  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
    );
}


/* =========================================
   SOLD LISTING
========================================= */

.public-profile-listing-sold {
  background-color:
    #f8fafc;

  border-color:
    #dbe2ea;
}


.public-profile-listing-sold::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  z-index:
    3;

  width:
    100%;

  height:
    4px;

  background-color:
    #64748b;
}


.public-profile-listing-sold
.public-profile-listing-image {
  background-color:
    #e8edf2;
}


.public-profile-listing-sold
.public-profile-listing-image
img {
  opacity:
    0.72;

  filter:
    saturate(0.65);
}


.public-profile-sold-badge {
  position:
    absolute;

  top:
    14px;

  right:
    14px;

  z-index:
    2;

  padding:
    6px 11px;

  color:
    #ffffff;

  background-color:
    #64748b;

  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
    );
}


/* =========================================
   PUBLIC LISTING TITLE
========================================= */

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

  margin:
    0 0 10px;

  overflow:
    hidden;

  color:
    var(--navy);

  font-size:
    1.05rem;

  font-weight:
    800;

  line-height:
    1.25;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;
}


/* =========================================
   PUBLIC ACTIONS
========================================= */

.public-profile-listing-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    auto;

  margin-bottom:
    0 !important;

  padding-top:
    18px;
}


.public-profile-listing-actions
.button {
  flex:
    1;

  min-height:
    40px;

  margin:
    0;

  border-radius:
    8px;

  font-size:
    0.8rem;

  font-weight:
    750;

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


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





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

  flex:
    1 1 0;

  min-width:
    0;

  width:
    0;

  margin:
    0;
}


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


/* =========================================
   VIEW LISTING BUTTON
========================================= */

.public-profile-view-button {
  color:
    #ffffff;

  background-color:
    var(--blue);

  border-color:
    var(--blue);
}


.public-profile-view-button:hover {
  color:
    #ffffff;

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

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


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

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

  .public-profile-listing-actions {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      7px;
  }


  .public-profile-listing-actions
  .button {
    flex:
      none;

    width:
      100%;
  }


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

    width:
      100%;

    min-width:
      0;

    margin:
      0;
  }


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

}
/* =========================================
   PUBLIC PROFILE LISTING TABS
========================================= */

.public-profile-listing-tabs {
  display:
    grid;

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

  gap:
    8px;

  width:
    100%;

  margin-bottom:
    22px;
}


.public-profile-listing-tab {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    44px;

  padding:
    10px 14px;

  color:
    var(--navy);

  background-color:
    #ffffff;

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

  border-radius:
    9px;

  font-size:
    0.82rem;

  font-weight:
    800;

  cursor:
    pointer;

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


.public-profile-listing-tab:hover {
  transform:
    translateY(-1px);

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

  background-color:
    #f8fafc;
}


.public-profile-listing-tab.is-active {
  color:
    #ffffff;

  background-color:
    var(--navy);

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


.public-profile-listing-tab
span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    24px;

  height:
    24px;

  padding:
    0 7px;

  color:
    var(--navy);

  background-color:
    #eef2f7;

  border-radius:
    999px;

  font-size:
    0.7rem;

  font-weight:
    850;
}


.public-profile-listing-tab.is-active
span {
  color:
    var(--navy);

  background-color:
    #ffffff;
}


/* =========================================
   PUBLIC PROFILE PANELS
========================================= */

.public-profile-listing-panel {
  display:
    none;

  width:
    100%;
}


.public-profile-listing-panel.is-active {
  display:
    block;
}


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

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

  .public-profile-listing-tabs {
    gap:
      6px;

    margin-bottom:
      18px;
  }


  .public-profile-listing-tab {
    min-height:
      42px;

    padding:
      8px;

    font-size:
      0.74rem;
  }


  .public-profile-listing-tab
  span {
    min-width:
      21px;

    height:
      21px;

    padding:
      0 6px;

    font-size:
      0.64rem;
  }

}


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

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

  .public-profile-listing-tabs {
    grid-template-columns:
      1fr;
  }


  .public-profile-listing-tab {
    width:
      100%;
  }

}


/* =========================================
   PUBLIC PROFILE MOBILE HEART
========================================= */

.public-profile-card-heart {
  display:
    none;
}


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

  .public-profile-listing-card {
    cursor:
      pointer;
  }


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


  .public-profile-card-heart {
    position:
      absolute;

    top:
      10px;

    right:
      10px;

    z-index:
      6;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      34px;

    height:
      34px;

    padding:
      0;

    color:
      var(--navy);

    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;
  }


  .public-profile-card-heart.is-favourited {
    color:
      var(--orange-dark);
  }


  .public-profile-card-heart:active {
    transform:
      scale(0.92);
  }

}