/*
 * JUST AQAR — Unified App/PWA Home Cards v14
 * <= 900px only: app + PWA + mobile share exactly the same layout.
 * Desktop remains on the previous property-card design.
 */

@media (max-width: 900px) {

  #cardsContainer.ja-unified-mobile-cards {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 3px 0 14px !important;
    margin: 0 !important;
  }

  .ja-mobile-property-card {
    direction: ltr;
    position: relative;
    width: 100%;
    height: 148px;
    min-height: 148px;
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(144px, 1fr);
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(2,52,58,.055);
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(2,52,58,.065);
    font-family: "Almarai", Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
  }

  /* صورة نظيفة وواضحة بدون أي شارات أو أزرار */
  .ja-mobile-property-photo {
    grid-column: 2;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0 21px 21px 0;
    background: #eef3f2;
    text-decoration: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  .ja-mobile-property-photo img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .ja-mobile-property-info {
    grid-column: 1;
    direction: rtl;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 8px 9px 7px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
  }

  /* النوع ثم المدينة/الحي ثم السعر - كلها على اليمين */
  .ja-mobile-head {
    direction: rtl;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
  }

  .ja-mobile-head-text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: right;
  }

  .ja-mobile-type-line {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
  }

  .ja-mobile-type,
  .ja-mobile-status {
    min-height: 19px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1;
    font-size: 8px;
    font-weight: 800;
  }

  .ja-mobile-type {
    color: #315954;
    background: #eff7f5;
  }

  .ja-mobile-status {
    color: #087553;
    background: #e9faf3;
  }

  .ja-mobile-status.sold,
  .ja-mobile-status.rented {
    color: #677674;
    background: #f0f3f2;
  }

  .ja-mobile-status.reserved {
    color: #8a6111;
    background: #fff7df;
  }

  .ja-mobile-location {
    direction: rtl;
    width: 100%;
    min-width: 0;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    overflow: hidden;
    color: #17413f;
  }

  .ja-mobile-location .material-symbols-rounded {
    flex: 0 0 auto;
    color: #10b97f;
    font-size: 12px;
  }

  .ja-mobile-location b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8.2px;
    font-weight: 800;
  }

  /* السعر مضبوط: الرقم والرمز لا يتداخلان */
  .ja-mobile-price {
    direction: rtl;
    width: 100%;
    min-width: 0;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    color: #073e3f;
    overflow: visible;
  }

  .ja-mobile-price strong {
    display: inline-block;
    min-width: 0;
    max-width: calc(100% - 22px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.25px;
  }

  .ja-mobile-riyal-img {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    flex: 0 0 16px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* المفضلة في جهة المعلومات فقط */
  .ja-mobile-fav.fav-circle {
    position: static !important;
    flex: 0 0 27px !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #e3ecea !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #e3aa00 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .ja-mobile-info-link {
    color: inherit;
    text-decoration: none;
    display: block;
    min-width: 0;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  /* 3 مواصفات فقط وبنص صغير */
  .ja-mobile-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 3px;
  }

  .ja-mobile-specs > span {
    min-width: 0;
    height: 24px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    border: 1px solid #e4ecea;
    border-radius: 9px;
    background: #fcfdfd;
    color: #31514f;
    overflow: hidden;
    white-space: nowrap;
  }

  .ja-mobile-specs .material-symbols-rounded {
    flex: 0 0 auto;
    color: #0b5552;
    font-size: 13px;
  }

  .ja-mobile-specs b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 7.7px;
    font-weight: 800;
  }

  .ja-mobile-specs small {
    flex: 0 0 auto;
    font-size: 6.6px;
    color: #667a78;
    font-weight: 700;
  }

  /* الترخيص قصير مستقل عن زر النسخ */
  .ja-mobile-bottom {
    direction: rtl;
    width: 100%;
    min-width: 0;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .ja-mobile-license {
    direction: rtl;
    width: auto;
    max-width: calc(100% - 34px);
    min-width: 0;
    height: 24px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    box-sizing: border-box;
    border: 1px solid #e1eae8;
    border-radius: 8px;
    background: #fcfdfd;
    color: #214c4a;
  }

  .ja-mobile-license > span:last-child {
    min-width: 0;
    max-width: 115px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 7.8px;
    font-weight: 800;
  }

  .ja-mobile-license-ok {
    flex: 0 0 auto;
    color: #12b97f;
    font-size: 13px;
  }

  .ja-mobile-copy {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #e1eae8;
    border-radius: 8px;
    background: #fff;
    color: #073f40;
    box-shadow: none;
  }

  .ja-mobile-copy .material-symbols-rounded {
    font-size: 14px;
  }
}

@media (max-width: 380px) {
  .ja-mobile-property-card {
    height: 140px;
    min-height: 140px;
    grid-template-columns: minmax(0,1.5fr) minmax(126px,1fr);
    border-radius: 19px;
  }

  .ja-mobile-property-photo {
    border-radius: 0 19px 19px 0;
  }

  .ja-mobile-property-info {
    padding: 6px 7px;
    gap: 4px;
  }

  .ja-mobile-price strong {
    font-size: 16.5px;
  }

  .ja-mobile-specs > span {
    height: 22px;
  }

  .ja-mobile-specs b {
    font-size: 7px;
  }

  .ja-mobile-license > span:last-child {
    max-width: 96px;
    font-size: 7.2px;
  }
}