/* JUST AQAR — Home property card inspired by supplied mobile reference.
   Scope: native app / installed PWA home only. Desktop/web layout stays unchanged. */
:root{
  --ja-home-card-green:#26bb99;
  --ja-home-riyal-green:#1ed1a7;
  --ja-home-card-ink:#02343a;
  --ja-home-card-chip:#e8f3ef;
  --ja-home-card-line:rgba(2,52,58,.08);
}

/* Mobile-only duplicates stay out of normal desktop/web rendering. */
.custom-fav-mobile,
.custom-city-body{display:none;}

/* Riyal on the index: exact green sampled from the supplied reference. */
.custom-price .sar-sign-home-green{
  width:18px;
  height:20px;
  object-fit:contain;
  flex:0 0 auto;
}


/* =====================================================
   PROPERTY IMAGE FRAME — SINGLE CLEAR COVER IMAGE
   Desktop + Native App + Installed PWA
   One image only: no blurred duplicate/background copy.
===================================================== */
.home-property-card .custom-card-img{
  position:relative!important;
  isolation:auto!important;
  overflow:hidden!important;
  background:#edf5f2!important;
  background-image:none!important;
  background-size:auto!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

.home-property-card .custom-card-img::before,
.home-property-card .custom-card-img::after{
  content:none!important;
  display:none!important;
  background:none!important;
  filter:none!important;
  opacity:0!important;
}

.home-property-card .custom-card-img > img{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:inherit!important;
  transform:none!important;
  filter:none!important;
  transition:none!important;
  image-rendering:auto!important;
}

.home-property-card:hover .custom-card-img > img,
.home-property-card:active .custom-card-img > img,
.home-property-card:focus .custom-card-img > img{
  transform:none!important;
  filter:none!important;
}

.home-property-card .custom-status-row,
.home-property-card .custom-city-image{
  z-index:4!important;
}

/* Desktop: a single, clear cover photo fills the card frame. */
@media (min-width:901px){
  .app-main.favorites-main .home-property-card > .custom-card-img,
  .favorites-main .home-property-card > .custom-card-img{
    height:clamp(210px,16vw,280px)!important;
    min-height:210px!important;
    aspect-ratio:1.72 / 1!important;
    border-radius:22px 22px 0 0!important;
    background:#edf5f2!important;
    background-image:none!important;
  }

  .app-main.favorites-main .home-property-card .custom-card-img > img,
  .favorites-main .home-property-card .custom-card-img > img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    padding:0!important;
    border-radius:inherit!important;
  }
}

@media (max-width:900px){
  html.just-native-app.just-app-home .app-main.favorites-main .fav-cards-container{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
    width:100%!important;
    padding-inline:0!important;
  }

  html.just-native-app.just-app-home .app-main.favorites-main .home-property-card{
    direction:rtl!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:224px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid rgba(2,52,58,.045)!important;
    border-radius:28px!important;
    background:#fff!important;
    box-shadow:0 8px 24px rgba(2,52,58,.045)!important;
    transform:none!important;
  }

  html.just-native-app.just-app-home .app-main.favorites-main .home-property-card:hover,
  html.just-native-app.just-app-home .app-main.favorites-main .home-property-card:active,
  html.just-native-app.just-app-home .app-main.favorites-main .home-property-card:focus{
    transform:none!important;
    box-shadow:0 8px 24px rgba(2,52,58,.045)!important;
  }

  /* Image on the right, matching the reference. */
  html.just-native-app.just-app-home .app-main.favorites-main .home-property-card > .custom-card-img{
    order:1!important;
    flex:0 0 37%!important;
    width:37%!important;
    height:auto!important;
    min-height:224px!important;
    aspect-ratio:auto!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#eef6f3!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-card-img img{
    width:100%!important;
    height:100%!important;
    min-height:224px!important;
    object-fit:cover!important;
    object-position:center center!important;
    border-radius:0!important;
    transform:none!important;
    padding:0!important;
  }

  html.just-native-app.just-app-home .home-property-card:hover .custom-card-img img{
    transform:none!important;
  }

  /* Status is the only control over the image in app mode. */
  html.just-native-app.just-app-home .home-property-card .custom-status-row{
    top:14px!important;
    right:12px!important;
    left:auto!important;
    width:auto!important;
    display:block!important;
    z-index:3!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-badge{
    min-height:38px!important;
    padding:0 16px!important;
    border-radius:16px!important;
    background:var(--ja-home-card-green)!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:800!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-badge.reserved{background:#c69b32!important;}
  html.just-native-app.just-app-home .home-property-card .custom-badge.sold{background:#d94b4b!important;}
  html.just-native-app.just-app-home .home-property-card .custom-badge.rented{background:#4f8ea0!important;}
  html.just-native-app.just-app-home .home-property-card .custom-fav-image,
  html.just-native-app.just-app-home .home-property-card .custom-city-image{display:none!important;}

  /* Information panel on the left. */
  html.just-native-app.just-app-home .app-main.favorites-main .home-property-card > .custom-card-body{
    order:2!important;
    flex:1 1 63%!important;
    width:63%!important;
    min-width:0!important;
    padding:14px 12px 12px!important;
    gap:9px!important;
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    background:#fff!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-fav-mobile{
    display:flex!important;
    position:absolute!important;
    top:14px!important;
    left:12px!important;
    right:auto!important;
    width:40px!important;
    height:40px!important;
    padding:0!important;
    border:1px solid rgba(2,52,58,.08)!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#d8aa18!important;
    align-items:center!important;
    justify-content:center!important;
    box-shadow:0 4px 12px rgba(2,52,58,.055)!important;
    z-index:8!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    font-size:0!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-fav-mobile::before{
    content:"♥"!important;
    display:block!important;
    color:#d8aa18!important;
    font-size:21px!important;
    line-height:1!important;
    font-family:Arial, sans-serif!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-fav-mobile.active{
    background:#fff9e7!important;
    color:#d8aa18!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-fav-mobile .material-symbols-rounded{
    display:none!important;
    font-size:20px!important;
    font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-card-row.card-row-top{
    order:1!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:9px!important;
    width:100%!important;
    min-height:72px!important;
    padding-left:48px!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-unit-type{
    min-height:36px!important;
    max-width:100%!important;
    padding:0 12px!important;
    border-radius:14px!important;
    background:#eef6f3!important;
    color:var(--ja-home-card-ink)!important;
    font-size:13px!important;
    font-weight:800!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    align-self:flex-start!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-price{
    direction:ltr!important;
    display:inline-flex!important;
    flex-direction:row-reverse!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    color:var(--ja-home-card-ink)!important;
    font-size:21px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:-.35px!important;
    white-space:nowrap!important;
    align-self:flex-start!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-price .sar-sign-home-green{
    width:17px!important;
    height:20px!important;
    margin:0!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-card-info-row{
    order:2!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-card-icon-info{
    min-width:0!important;
    min-height:34px!important;
    padding:0 9px!important;
    border-radius:999px!important;
    background:var(--ja-home-card-chip)!important;
    color:#17282d!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    font-size:10.5px!important;
    font-weight:700!important;
    text-align:right!important;
    white-space:nowrap!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-card-icon-info .material-symbols-rounded{
    color:var(--ja-home-card-green)!important;
    font-size:18px!important;
    flex:0 0 auto!important;
    font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-card-icon-info > span:last-child{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-city-body{
    order:3!important;
    display:block!important;
    width:100%!important;
    color:var(--ja-home-card-ink)!important;
    font-size:15px!important;
    font-weight:900!important;
    line-height:1.3!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:right!important;
    padding-top:1px!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-card-footer{
    order:4!important;
    width:100%!important;
    min-width:0!important;
    margin-top:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    direction:rtl!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-license-number{
    order:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-width:0!important;
    max-width:calc(100% - 50px)!important;
    min-height:27px!important;
    padding:0 8px!important;
    border-radius:10px!important;
    background:rgba(30,209,167,.08)!important;
    border:1px solid rgba(30,209,167,.22)!important;
    color:var(--ja-home-card-ink)!important;
    font-size:8.7px!important;
    font-weight:800!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    box-shadow:none!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-license-number::before{
    color:var(--ja-home-card-green)!important;
    font-size:14px!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-license-spacer{
    display:block!important;
    min-width:0!important;
    flex:1 1 auto!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-card-actions-flex{
    order:2!important;
    position:static!important;
    flex:0 0 auto!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    justify-content:flex-start!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-copy{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    border-radius:13px!important;
    background:#f7fbfa!important;
    border:1px solid rgba(2,52,58,.12)!important;
    color:var(--ja-home-card-ink)!important;
    box-shadow:none!important;
  }

  html.just-native-app.just-app-home .home-property-card .custom-copy .material-symbols-rounded{
    font-size:18px!important;
  }
}

/* Narrow iPhones: keep all four facts visible without squeezing the photo. */
@media (max-width:375px){
  html.just-native-app.just-app-home .app-main.favorites-main .home-property-card{
    min-height:218px!important;
  }
  html.just-native-app.just-app-home .app-main.favorites-main .home-property-card > .custom-card-img{
    flex-basis:36%!important;
    width:36%!important;
    min-height:218px!important;
  }
  html.just-native-app.just-app-home .home-property-card .custom-card-img img{min-height:218px!important;}
  html.just-native-app.just-app-home .app-main.favorites-main .home-property-card > .custom-card-body{
    flex-basis:64%!important;
    width:64%!important;
    padding:12px 10px 10px!important;
    gap:7px!important;
  }
  html.just-native-app.just-app-home .home-property-card .custom-card-icon-info{
    padding-inline:7px!important;
    gap:4px!important;
    font-size:9.5px!important;
  }
  html.just-native-app.just-app-home .home-property-card .custom-price{font-size:19px!important;}
  html.just-native-app.just-app-home .home-property-card .custom-city-body{font-size:14px!important;}
  html.just-native-app.just-app-home .home-property-card .custom-license-number{font-size:7.8px!important;max-width:calc(100% - 48px)!important;}
}