/* JUST AQAR unified finishing layer — loaded after page-specific styles. */
:root {
  --just-deep: #02343a;
  --just-deep-2: #02403c;
  --just-green: #2ad067;
  --just-mint: #19bc95;
  --just-bg: #f4f8f7;
  --just-line: rgba(2, 52, 58, .10);
}

.header-action,
.header-avatar-btn,
.header-action .material-symbols-rounded,
.header-avatar-btn .material-symbols-rounded {
  color: var(--just-green) !important;
}

.header-action,
.header-avatar-btn {
  background: #fff !important;
  border: 1px solid rgba(42, 208, 103, .20) !important;
}

/* Home cards share the compact favorites proportions on desktop. */
@media (min-width: 1100px) {
  .property-grid {
    gap: 16px !important;
  }

  .property-card:not(.project-card) {
    border-radius: 24px !important;
    box-shadow: 0 8px 24px rgba(2, 52, 58, .06) !important;
  }

  .property-card:not(.project-card) .property-cover {
    aspect-ratio: 1.6 / 1 !important;
  }

  .property-card:not(.project-card) .property-body {
    padding: 15px !important;
    gap: 10px !important;
  }

  .property-card:not(.project-card) .property-title {
    font-size: 17px !important;
  }

  .property-card:not(.project-card) .property-price {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 20px !important;
  }

  .property-card:not(.project-card) .spec-chip {
    min-height: 52px !important;
    border-radius: 15px !important;
  }
}

/* App-only behavior: header on home only; no motion or shadows anywhere. */
html.just-native-app:not(.just-app-home) .app-header,
html.just-native-app:not(.just-app-home) header.app-header,
html.just-native-app:not(.just-app-home) .app-sidebar,
html.just-native-app:not(.just-app-home) .mobile-drawer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.just-native-app:not(.just-app-home) body {
  padding-top: env(safe-area-inset-top, 0px) !important;
}

html.just-native-app:not(.just-app-home) .app-main {
  padding-top: 12px !important;
}

html.just-native-app *,
html.just-native-app *::before,
html.just-native-app *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.just-native-app .property-card:hover,
html.just-native-app .property-card:hover .property-cover img,
html.just-native-app button:hover,
html.just-native-app a:hover {
  transform: none !important;
  filter: none !important;
}

html.just-native-app .app-bottom-nav {
  background: #fff !important;
  border: 1px solid #e2ece9 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Services become a clean native list in the app. */
html.just-native-app .services-main {
  width: calc(100% - 20px) !important;
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

html.just-native-app .services-hero {
  padding: 16px !important;
  margin-bottom: 12px !important;
  border-radius: 22px !important;
}

html.just-native-app .services-stat-box,
html.just-native-app .services-card-head p {
  display: none !important;
}

html.just-native-app .services-card {
  padding: 14px !important;
  border-radius: 22px !important;
  background: #fff !important;
}

html.just-native-app .services-list {
  gap: 8px !important;
}

html.just-native-app .service-item {
  min-height: 68px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: #f8fbfa !important;
}

html.just-native-app .service-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
}

html.just-native-app .service-title {
  font-size: 14px !important;
}

html.just-native-app .service-desc {
  font-size: 11px !important;
  line-height: 1.55 !important;
}

/* Login: one centered card, no app chrome. */
html.just-app-login .app-header,
html.just-app-login .app-sidebar,
html.just-app-login .mobile-drawer,
html.just-app-login .app-bottom-nav,
html.just-app-login .app-loader,
html.just-app-login .login-side-panel {
  display: none !important;
}

html.just-app-login body {
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: auto !important;
  background: linear-gradient(180deg, #edf7f4, #fbfdfc) !important;
}

html.just-app-login .login-main-only.app-main {
  width: 100% !important;
  min-height: 100dvh !important;
  height: auto !important;
  padding: calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 18px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.just-app-login .login-shell-card {
  width: min(100%, 440px) !important;
  border: 0 !important;
  border-radius: 28px !important;
  overflow: visible !important;
  background: transparent !important;
}

html.just-app-login .login-grid {
  display: block !important;
  min-height: 0 !important;
}

html.just-app-login .login-form-panel {
  padding: 0 !important;
}

html.just-app-login .login-card-box {
  width: 100% !important;
  max-width: none !important;
  padding: 26px 20px 22px !important;
  border-radius: 28px !important;
  background: #fff !important;
  border: 1px solid #e0ece8 !important;
}

html.just-app-login .modal-bg {
  align-items: flex-end !important;
  padding: 0 !important;
  background: rgba(3, 18, 22, .42) !important;
}

html.just-app-login .modal-box {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 !important;
  border-radius: 30px 30px 0 0 !important;
  transform: none !important;
}

@media (max-width: 600px) {
  html.just-native-app .property-card,
  html.just-native-app .property-card.project-card {
    box-shadow: none !important;
  }
}

/* Favorites cards: same visual language, slightly smaller and fully clickable. */
.favorites-main .custom-card {
  cursor: pointer;
  border-radius: 22px !important;
}

.favorites-main .custom-card-img {
  aspect-ratio: 1.72 / 1 !important;
}

.favorites-main .custom-card-body {
  padding: 13px !important;
  gap: 9px !important;
}

.favorites-main .custom-card-details {
  min-height: 0 !important;
  -webkit-line-clamp: 1 !important;
}

.favorites-main .custom-card-actions-flex {
  justify-content: flex-end !important;
}

.favorites-main .custom-card-specs {
  display: none !important;
}

@media (min-width: 700px) {
  .favorites-main .custom-card-icon-info {
    min-height: 48px !important;
  }
}

@media (max-width: 600px) {
  .favorites-main .fav-cards-container {
    gap: 10px !important;
  }

  .favorites-main .custom-card {
    display: grid !important;
    grid-template-columns: 36% minmax(0, 1fr) !important;
    min-height: 136px !important;
    overflow: hidden !important;
  }

  .favorites-main .custom-card-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 136px !important;
    aspect-ratio: auto !important;
  }

  .favorites-main .custom-card-body {
    min-width: 0 !important;
    padding: 10px !important;
  }

  .favorites-main .custom-card-info-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .favorites-main .custom-card-icon-info {
    min-height: 27px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
  }

  .favorites-main .custom-card-details,
  .favorites-main .custom-license-number {
    display: none !important;
  }

  .favorites-main .custom-price {
    font-size: 16px !important;
  }
}


/* ===== JUST AQAR final unified patch 2026-07-12 ===== */
html, body, main, section, article, p, h1, h2, h3, h4, h5, h6,
.page-content, .content, .description, .property-description, .custom-card-details,
.property-title, .property-subtitle, .service-title, .service-desc,
.favorites-hero-text, .terms-content, .privacy-content, .faq-answer {
  -webkit-user-select: text !important;
  user-select: text !important;
}
button, input, select, textarea, label, .material-symbols-rounded,
.app-bottom-nav, .app-sidebar, .header-action, .header-avatar-btn {
  -webkit-user-select: none !important;
  user-select: none !important;
}
::selection { background: rgba(42,208,103,.28); color:#02343a; }

/* Header icons use the logo green on every public page. */
.app-header .material-symbols-rounded,
.app-header svg, .app-header i,
.header-action, .header-avatar-btn { color:#2ad067 !important; fill:#2ad067 !important; }

/* Smaller favorites cards, without a specifications/details button. */
.favorites-main .custom-card { max-width: 430px; margin-inline:auto; }
.favorites-main .custom-card-actions-flex .custom-details,
.favorites-main [class*="specification"],
.favorites-main button[title*="مواصفات"],
.favorites-main a[title*="مواصفات"] { display:none !important; }
@media (min-width:1200px){
  .favorites-main .fav-cards-container{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
  .favorites-main .custom-card-img{aspect-ratio:1.78/1!important}
  .favorites-main .custom-card-body{padding:12px!important}
}

/* Home desktop cards match the compact favorites family. */
@media (min-width:1000px){
  #cardsContainer.property-grid,.property-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
  .property-card:not(.project-card){border-radius:22px!important;overflow:hidden!important;background:#fff!important;border:1px solid #e3eeeb!important;box-shadow:0 8px 22px rgba(2,52,58,.06)!important}
  .property-card:not(.project-card) .property-cover{aspect-ratio:1.78/1!important}
  .property-card:not(.project-card) .property-body{padding:12px!important;gap:8px!important}
  .property-card:not(.project-card) .property-specs{gap:6px!important}
  .property-card:not(.project-card) .spec-chip{min-height:42px!important;padding:6px!important;border-radius:12px!important}
}

/* Native/PWA: no header outside home, no motion or decorative shadows. */
html.just-native-app:not(.just-app-home) .app-header,
html.just-native-app:not(.just-app-home) .app-sidebar,
html.just-native-app:not(.just-app-home) .mobile-drawer{display:none!important}
html.just-native-app *,html.just-native-app *::before,html.just-native-app *::after{
 animation:none!important;transition:none!important;scroll-behavior:auto!important;
 box-shadow:none!important;text-shadow:none!important;filter:none!important
}
html.just-native-app body{overscroll-behavior:none;background:#f4f8f7!important}
html.just-native-app .app-main{width:calc(100% - 20px)!important;margin-inline:auto!important;padding-bottom:calc(92px + env(safe-area-inset-bottom))!important}
html.just-native-app:not(.just-app-home) .app-main{padding-top:calc(10px + env(safe-area-inset-top))!important}

/* Native services: clean, compact and touch friendly. */
html.just-native-app .services-main{width:calc(100% - 16px)!important}
html.just-native-app .services-hero{padding:14px!important;border-radius:20px!important;margin-bottom:10px!important}
html.just-native-app .services-card{padding:12px!important;border-radius:20px!important;border:1px solid #e3eeeb!important}
html.just-native-app .service-item{min-height:66px!important;padding:10px!important;border-radius:16px!important;border:1px solid #e8f0ee!important}
html.just-native-app .service-item:active{transform:none!important}

/* Native login: one centered card and iOS-style bottom OTP sheet. */
html.just-app-login body{min-height:100dvh!important;background:#f3f8f6!important}
html.just-app-login .login-main-only{min-height:100dvh!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom))!important}
html.just-app-login .login-card-box{width:min(100%,430px)!important;border-radius:26px!important;border:1px solid #dfece8!important;background:#fff!important;padding:24px 18px!important}
html.just-app-login .modal-bg{align-items:flex-end!important;padding:0!important}
html.just-app-login .modal-box{width:100%!important;max-width:520px!important;border-radius:28px 28px 0 0!important;margin:0!important;padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}

/* =========================================================
   JUST AQAR responsive desktop + scroll safety — 2026-07-12
========================================================= */
html {
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: auto !important;
}

body {
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto;
  touch-action: pan-x pan-y !important;
}

body.drawer-open {
  overflow: hidden !important;
  touch-action: none !important;
}

.app-shell {
  min-height: calc(100vh - var(--header-h, 76px)) !important;
  height: auto !important;
  overflow: visible !important;
}

.app-main {
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* السماح بالتمرير الرأسي عند بدء اللمس فوق أزرار أقسام الرئيسية. */
.hero-actions {
  touch-action: pan-x pan-y !important;
  overscroll-behavior-y: auto !important;
}

/* إلغاء حركة بطاقات الرئيسية بالكامل على الجوال والدسكتوب. */
html.just-app-home .property-card,
html.just-app-home .property-card *,
html.just-app-home .property-card::before,
html.just-app-home .property-card::after {
  animation: none !important;
  transition: none !important;
}

html.just-app-home .property-card:hover,
html.just-app-home .property-card:hover .property-cover img,
html.just-app-home .property-card:focus,
html.just-app-home .property-card:active {
  transform: none !important;
  filter: none !important;
}

/* أفضل خمسة عقارات */
.top-properties-btn.active {
  background: linear-gradient(135deg, #02343a, #029990) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.top-property-rank {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #02343a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(2,52,58,.22);
}

.top-property-metrics {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.top-property-metrics > span {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.94);
  color: #02343a;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(2,52,58,.14);
}

.top-property-metrics .material-symbols-rounded {
  font-size: 16px;
  color: #029990;
}

@media (min-width: 1100px) {
  :root {
    --page-gutter-desktop: 24px;
  }

  .app-main,
  main.app-main,
  .services-main,
  .favorites-main,
  .bank-main,
  .terms-main,
  .faq-main,
  .client-request-main,
  .notifications-main,
  .project-view-main,
  .unit-view-main {
    width: calc(100% - (var(--page-gutter-desktop) * 2)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-right: calc(var(--desktop-sidebar-w, 110px) + 28px) !important;
    padding-left: 0 !important;
  }

  .app-header-inner {
    width: calc(100% - (var(--page-gutter-desktop) * 2)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-right: calc(var(--desktop-sidebar-w, 110px) + 28px) !important;
    padding-left: 0 !important;
    grid-template-columns: 58px minmax(0, 1fr) 58px !important;
    gap: 18px !important;
  }

  .app-header {
    width: 100% !important;
    right: 0 !important;
    left: 0 !important;
  }

  .header-brand {
    min-width: 0 !important;
    justify-content: center !important;
  }

  .header-brand img {
    height: 46px !important;
    max-width: 230px !important;
  }

  .app-sidebar {
    right: var(--page-gutter-desktop) !important;
  }

  body.sidebar-collapsed .app-main,
  body.sidebar-collapsed main.app-main,
  body.sidebar-collapsed .app-header-inner {
    padding-right: 0 !important;
  }

  .home-hero,
  .hero-card,
  .search-card,
  .section-card,
  .services-layout,
  .services-card,
  .favorites-hero,
  .favorites-toolbar {
    max-width: none !important;
    width: 100% !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
}

@media (min-width: 1400px) {
  body.top-properties-mode #cardsContainer.property-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1099px) {
  .app-main,
  main.app-main {
    overflow: visible !important;
  }
}

@media (max-width: 600px) {
  .top-property-rank {
    top: 8px;
    left: 8px;
    min-width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 11px;
  }

  .top-property-metrics {
    left: 8px;
    bottom: 8px;
  }

  .top-property-metrics > span {
    min-height: 25px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 9px;
  }
}

/* =========================================================
   ULTRA-WIDE DESKTOP LOCK
   Any viewport wider than 1700px keeps the exact same geometry
   used at 1700px, centered without stretching cards or header.
========================================================= */
@media (min-width: 1701px) {
  :root {
    /* At a 1700px viewport the desktop gutters are 24px per side. */
    --laptop-layout-width: 1652px;
  }

  .app-main,
  main.app-main,
  .app-header-inner {
    width: var(--laptop-layout-width) !important;
    max-width: var(--laptop-layout-width) !important;
    margin-inline: auto !important;
  }

  /* Keep the fixed sidebar on the same right edge it has at 1700px. */
  .app-sidebar {
    right: calc((100vw - var(--laptop-layout-width)) / 2) !important;
  }

  /* Prevent page-level wrappers from introducing a second wide-screen scale. */
  .home-hero,
  .hero-card,
  .search-card,
  .section-card,
  .services-layout,
  .services-card,
  .favorites-hero,
  .favorites-toolbar {
    max-width: 100% !important;
  }
}

/* Header notification button and live unread badge. */
.header-notification-btn{
  position:relative!important;
  text-decoration:none!important;
  overflow:visible!important;
}
.header-notification-badge{
  position:absolute!important;
  top:-5px!important;
  left:-5px!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#e53935!important;
  color:#fff!important;
  border:2px solid #fff!important;
  box-shadow:0 4px 12px rgba(229,57,53,.28)!important;
  font:800 10px/1 'Almarai',sans-serif!important;
  direction:ltr!important;
  z-index:3!important;
}
.header-notification-badge[hidden]{display:none!important}
.header-notification-btn .material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24!important}

/* ===== Home cards: exact favorites layout in mobile/PWA ===== */
@media (max-width: 600px) {
  .app-main.favorites-main .fav-cards-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .app-main.favorites-main .custom-card {
    display: grid !important;
    grid-template-columns: 36% minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 136px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  .app-main.favorites-main .custom-card-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 136px !important;
    aspect-ratio: auto !important;
  }

  .app-main.favorites-main .custom-card-body {
    min-width: 0 !important;
    padding: 10px !important;
    gap: 9px !important;
  }

  .app-main.favorites-main .custom-card-info-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .app-main.favorites-main .custom-card-icon-info {
    min-height: 27px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
  }

  .app-main.favorites-main .custom-license-number,
  .app-main.favorites-main .custom-card-details {
    display: none !important;
  }

  .app-main.favorites-main .custom-price {
    font-size: 16px !important;
  }

  .app-main.favorites-main .custom-card-actions-flex {
    margin-top: auto !important;
    justify-content: flex-end !important;
  }
}

/* Copy button: compact, clean, and touch-friendly */
.custom-copy {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(2, 52, 58, .10) !important;
  background: #f5faf8 !important;
  color: #02343a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  line-height: 1 !important;
  -webkit-tap-highlight-color: transparent;
}

.custom-copy:hover,
.custom-copy:focus-visible {
  background: #e8f4f0 !important;
  border-color: rgba(2, 52, 58, .18) !important;
  transform: none !important;
  outline: none !important;
}

.custom-copy:active {
  transform: scale(.96) !important;
}

.custom-copy.copied {
  background: #2ad067 !important;
  color: #fff !important;
  border-color: #2ad067 !important;
}

.custom-copy .material-symbols-rounded {
  font-size: 18px !important;
  line-height: 1 !important;
}