/* «تملّك» — البحث بالخريطة أولاً (Figma 14:3 مكتب · 16:35 جوال، ٢٠ أكتوبر ٢٠٢٦) + حالات البطاقة (15:2).
   الرموزُ من tokens.scss (--sg-*)، والخطُّ LamaSans عبر --sg-font. RTL: اللوحةُ يميناً والخريطةُ يساراً.
   الخريطةُ نفسُها بشكل الخريطة الواحدة (sgreco_portal/static/src/css/sg_mapkit.css — P7، ٢٩ أكتوبر ٢٠٢٦):
   زالت من هنا النقاطُ بألوان الإشارة والدبابيسُ الخاصة بهذه الصفحة. */
.om{ display:grid; grid-template-columns:380px 1fr; grid-template-areas:"side map" "sheet sheet"; gap:18px; font-family:var(--sg-font); margin-bottom:24px; }
.om-side{ grid-area:side; background:var(--sg-sheet,#fff); border:1px solid #E6EAF2; border-radius:18px; padding:18px; align-self:start; position:sticky; top:90px; }
.om-mapcol{ grid-area:map; }
.om-sheet{ grid-area:sheet; }
.om-h{ font-family:var(--sg-font-bd); font-size:1.4rem; color:var(--sg-ink); margin:0 0 4px; }
.om-sub{ color:var(--sg-margin); font-size:var(--sg-t1); margin:0 0 12px; }
.om-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 14px; }
.om-crumb a, .om-crumb span{ padding:6px 14px; border-radius:999px; border:1px solid #D5DAE8; color:var(--sg-ink); text-decoration:none; font-size:var(--sg-t1); }
.om-crumb .on{ background:var(--sg-ink); color:#fff; border-color:var(--sg-ink); }
.om-crumb i{ font-style:normal; color:var(--sg-margin); }
.om-fld{ border:0; padding:0; margin:0 0 12px; }
.om-fld legend, .om-fld > label{ display:block; font-family:var(--sg-font-md); font-size:var(--sg-t1); color:var(--sg-ink); margin-bottom:6px; }
.om-fld input[type=search], .om-fld select{ width:100%; box-sizing:border-box; border:1px solid #D5DAE8; border-radius:12px; padding:9px 12px; font:inherit; }
.om-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.om-chips label{ cursor:pointer; padding:5px 12px; border-radius:999px; border:1px solid #D5DAE8; font-size:var(--sg-t1); color:var(--sg-ink); }
.om-chips label.on{ background:var(--sg-ink); color:#fff; border-color:var(--sg-ink); }
.om-chips input{ position:absolute; opacity:0; width:1px; height:1px; }
.om-range{ display:flex; align-items:center; gap:8px; }
.om-range input{ flex:1; width:40%; box-sizing:border-box; border:1px solid #D5DAE8; border-radius:12px; padding:8px 10px; font:inherit; text-align:center; }
.om-range i{ font-style:normal; color:var(--sg-margin); }
.om-go{ width:100%; justify-content:center; margin:6px 0 8px; }
.om-map{ --sgmk-h:560px; --sgmk-hm:50vh; font-family:var(--sg-font); }
.om-count{ font-family:var(--sg-font-md); color:var(--sg-ink); margin:4px 0 12px; }
.om-cards{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.om-empty{ background:#fff; border:1px dashed #C9D2E3; border-radius:18px; padding:28px; text-align:center; color:var(--sg-margin); }
.om-empty b{ display:block; color:var(--sg-ink); font-size:1.1rem; margin-bottom:6px; }
.om-grip{ display:none; }
/* حالاتُ البطاقة */
.s4-pc{ transition:box-shadow .15s, outline-color .15s; outline:2px solid transparent; }
.s4-pc.on{ outline-color:var(--sg-blue); box-shadow:0 18px 40px -24px rgba(13,164,219,.7); }
.s4-pc .ph{ position:relative; }
.s4-pc.st-ph .ph img{ object-fit:cover; }
.s4-pc .ph-note{ position:absolute; bottom:8px; left:8px; background:rgba(16,21,58,.7); color:#fff; font-size:11px; border-radius:999px; padding:2px 8px; }
.s4-pc.is-hold .ph::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(16,21,58,.22) 0 2px, transparent 2px 9px); }
.s4-pc.is-sold{ opacity:.55; filter:grayscale(.7); }
.s4-pc.is-loading .ph, .s4-pc.is-loading .bd > *{ background:linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 50%, #EEF1F6 75%); background-size:200% 100%; animation:om-sk 1.2s linear infinite; color:transparent !important; border-color:transparent; }
.s4-pc.is-loading img{ visibility:hidden; }
@keyframes om-sk{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
@media (max-width:1100px){ .om-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* شرائحُ التصفية النشطة وحالةُ الفراغ و«خيارات أخرى» (٢٣ أكتوبر ٢٠٢٦) */
.om-active{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px; }
.om-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#EEF3F9; color:var(--sg-ink); text-decoration:none; font-size:var(--sg-t1); border:1px solid #D5DAE8; }
.om-chip i{ font-style:normal; font-weight:700; color:var(--sg-margin); }
.om-chip:hover, .om-chip:focus-visible{ background:var(--sg-ink); color:#fff; border-color:var(--sg-ink); }
.om-chip:hover i, .om-chip:focus-visible i{ color:#fff; }
.om-clear{ color:var(--sg-blue); font-size:var(--sg-t1); text-decoration:underline; }
.om-acts{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px; }
.om-more{ margin:0 0 12px; border-top:1px solid #E6EAF2; padding-top:10px; }
.om-more summary{ cursor:pointer; font-family:var(--sg-font-md); color:var(--sg-ink); font-size:var(--sg-t1); margin-bottom:10px; }
.om-fld select[disabled]{ background:#F4F6FA; color:var(--sg-margin); }
.om-staff{ margin:14px 0 0; padding:10px 14px; border-radius:14px; background:#FFF7E6; color:#5B3B00; font-size:var(--sg-t1); }
/* الجوال: النموذجُ ثم النتائجُ ثم الخريطة — لا ورقةَ ثابتةً تغطّي النموذج (كانت تغطي ~70% من الشاشة) */
@media (max-width:767px){
  .om{ display:flex; flex-direction:column; gap:12px; }
  .om-side{ position:static; order:1; padding:14px; }
  .om-sheet{ order:2; }
  .om-mapcol{ order:3; }
  .om-grip{ display:none; }
  .om-cards{ grid-template-columns:1fr; }
}