/* «مطلوب الجديد» (اعتماد الرئيس التنفيذي ١٢ نوفمبر ٢٠٢٦): العددُ في العنوان، شريطُ سعود، المشهدُ المجسّم مكان الخريطة،
   رسمُ البطاقة مجسّمُها، الضماناتُ الثلاث وطيُّ النصوص القانونية. يُحمَّل بعد matloob.css وmatloob_v2.css ويبني عليهما.
   الحالةُ بالشكل لا باللون (قرار ٩ أكتوبر): الشراء مصمت والإيجار مفرّغ بخط متقطع — بألوان الهوية وحدها. */

/* ── الصدر: العدد في العنوان ── */
.mlt-h em{ font-style:normal; color:var(--s4-sky,#0DA4DB); }
.mlt-hero .in{ padding-block-end:64px; }

/* ── شريط سعود ثم المشهد ── */
.mlt{ display:flex; flex-direction:column; gap:18px; margin-block-start:-38px; position:relative; z-index:2; }
.mla{ background:#fff; border-radius:22px; padding:14px 16px 12px; box-shadow:0 2px 4px rgba(16,21,58,.06), 0 18px 40px -18px rgba(16,21,58,.35); border:1px solid #E3E8F1; }
.mla-row{ display:flex; gap:10px; align-items:center; }
.mla-av, .mls-av{ flex:none; width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--s4-sky,#0DA4DB); background:#E6F5FC; }
.mla-row input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:1.06rem; color:var(--s4-ink,#10153A); padding:10px 4px; }
.mla-row input::placeholder{ color:#6B7590; }
.mla-row input:focus-visible{ box-shadow:inset 0 -2px 0 var(--s4-sky,#0DA4DB); }
.mla-go{ flex:none; border-radius:12px; white-space:nowrap; }
.mla.busy .mla-go{ opacity:.6; pointer-events:none; }
.mla-tries{ display:flex; gap:8px; margin-block-start:10px; overflow-x:auto; scrollbar-width:none; padding-block-end:2px; }
.mla-tries::-webkit-scrollbar{ display:none; }
.mla-tries button{ flex:none; border:1px solid #DCE2EE; background:#F5F8FB; color:#3B4763; border-radius:999px; padding:6px 14px; font:inherit; font-size:.84rem; white-space:nowrap; cursor:pointer; min-height:34px; }
.mla-tries button:hover{ border-color:var(--s4-sky,#0DA4DB); color:var(--s4-link,#0A6E96); }
.mla-under{ margin-block-start:12px; padding-block-start:12px; border-block-start:1px dashed #DCE2EE; }
.mla-say{ margin:0 0 10px; font-size:.96rem; line-height:1.9; color:var(--s4-ink,#10153A); }
.mla-say b{ color:var(--s4-link,#0A6E96); }
.mla-act{ display:inline-block; margin-inline-start:6px; }
.mla-act .ml-btn{ min-height:36px; padding:6px 14px; font-size:.86rem; text-decoration:none; }
.mla-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.mla-tag{ background:#E6F5FC; color:#0A5F82; border-radius:8px; padding:3px 10px; font-size:.82rem; border:0; font-family:inherit; }
.mla-tag.lock{ background:#10153A; color:#fff; }
.mla-tag.x{ background:transparent; color:#4E5473; border:1px solid #DCE2EE; cursor:pointer; }

/* ── المشهد المجسّم: لوحٌ كحليٌّ واحد وسعود عند مدخله ── */
.mls{ position:relative; height:440px; padding:0; border-radius:22px; overflow:hidden; color:#EAF2FB;
  background:radial-gradient(120% 90% at 50% 0%, #1A2466 0%, #10153A 45%, #080B22 100%);
  box-shadow:0 30px 60px -44px rgba(16,21,58,.7); }
.mls canvas{ display:block; position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; cursor:grab; }
.mls canvas:active{ cursor:grabbing; }
.mls-saud{ position:absolute; top:14px; inset-inline-start:14px; max-width:42%; display:flex; gap:10px; align-items:flex-start; pointer-events:none; }
.mls-av{ border-color:rgba(255,255,255,.55); }
.mls-saud p{ margin:0; background:rgba(8,11,34,.78); border:1px solid rgba(159,176,204,.22); border-radius:14px; padding:8px 14px; font-size:.86rem; line-height:1.85; max-width:560px; color:#EAF2FB; }
.mls-tools{ position:absolute; top:16px; inset-inline-end:14px; display:flex; gap:6px; }
.mls-tools button{ border:1px solid rgba(159,176,204,.3); background:rgba(8,11,34,.78); color:#EAF2FB; border-radius:999px; padding:6px 14px; font:inherit; font-size:.82rem; cursor:pointer; min-height:34px; white-space:nowrap; }
.mls-tools button:hover{ border-color:var(--s4-sky,#0DA4DB); }
.mls-leg{ position:absolute; bottom:0; inset-inline:0; padding:22px 14px 12px; background:linear-gradient(180deg, rgba(8,11,34,0), rgba(8,11,34,.9) 60%); display:flex; gap:6px 16px; flex-wrap:wrap; font-size:.72rem; color:#9FB0CC; pointer-events:none; }
.mls-leg i{ display:inline-block; width:14px; height:10px; border-radius:2px; margin-inline-end:5px; vertical-align:middle; }
.mls-leg .s{ background:#0DA4DB; }
.mls-leg .r{ border:1.5px dashed #0DA4DB; background:rgba(13,164,219,.18); }
.mls-leg .g{ border:1px solid rgba(159,176,204,.6); }
.mls-leg .rd{ background:rgba(255,255,255,.3); }
/* العرض المبسّط (وبلا جافاسكربت): سعود وجملتُه وحدهما، والبطاقاتُ بلا رسم */
.mls.mls-flat{ height:auto; }
.mls.mls-flat canvas, .mls.mls-flat .mls-leg, .mls.mls-flat .mls-hint{ display:none; }
.mls.mls-flat .mls-saud{ position:static; padding:14px; pointer-events:auto; max-width:none; }
.mls.mls-flat{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mls.mls-flat .mls-tools{ position:static; padding:14px; justify-content:flex-end; margin-inline-start:auto; }
.mlx.ml-flat .mlm-art{ display:none; }

/* ── البطاقة: مجسّمُ الطلب مصغّراً ── */
.mlx-cards .ml-card{ cursor:pointer; }
.mlx-cards .ml-card.sel{ border-color:var(--s4-sky,#0DA4DB); box-shadow:0 0 0 2px var(--s4-sky,#0DA4DB), 0 24px 44px -30px rgba(16,21,58,.55); }
.mlm-art{ position:relative; height:156px; margin:-18px -18px 14px; background:linear-gradient(135deg, #E6F5FC, #F7FBFE); overflow:hidden; }
.mlm-art.rent{ background:linear-gradient(135deg, #EEF1F8, #FAFBFD); }
.mlm-art:focus-visible{ outline:2px solid var(--s4-sky,#0DA4DB); outline-offset:-2px; }
.mlm-cv{ position:absolute; inset:0; width:100%; height:100%; }
.mlm-rib{ position:absolute; top:14px; inset-inline-start:14px; background:var(--s4-navy,#10153A); color:#fff; border-radius:8px; padding:3px 11px; font-size:.76rem; font-family:'Lama Bold','LamaSans',Tajawal,sans-serif; }
.mlm-art.rent .mlm-rib{ background:#fff; color:var(--s4-navy,#10153A); border:1.5px dashed var(--s4-navy,#10153A); }
.mlm-band{ position:absolute; bottom:10px; inset-inline-end:12px; background:rgba(255,255,255,.92); border-radius:8px; padding:2px 10px; font-size:.78rem; color:var(--s4-ink,#10153A); font-family:'Lama Bold','LamaSans',Tajawal,sans-serif; }

/* ── الضمانات الثلاث وطيّ النصوص القانونية ── */
.mlg{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-block-start:28px; }
.mlg > div{ display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid #E3E8F1; border-radius:16px; padding:14px 16px; }
.mlg p{ margin:0; font-size:.84rem; line-height:1.75; color:var(--s4-mute,#4E5473); }
.mlg b{ display:block; color:var(--s4-ink,#10153A); font-size:.95rem; }
.mlg .sgi{ flex:none; }
.mlt-fold{ margin-block-start:16px; border:1px solid #E3E8F1; border-radius:16px; padding:12px 16px; background:#fff; }
.mlt-fold summary{ cursor:pointer; display:flex; align-items:center; gap:8px; color:var(--s4-ink,#10153A); font-family:'Lama Bold','LamaSans',Tajawal,sans-serif; font-size:.95rem; list-style:none; }
.mlt-fold summary::-webkit-details-marker{ display:none; }
.mlt-fold summary::after{ content:"+"; margin-inline-start:auto; font-size:1.2rem; color:var(--s4-link,#0A6E96); }
.mlt-fold[open] summary::after{ content:"−"; }
.mlt-fold h3{ font-size:.95rem; margin:14px 0 4px; color:var(--s4-ink,#10153A); }
.mlt-fold p{ margin:0 0 6px; line-height:1.9; }

/* ── الخريطة أعمدةً: بطاقةُ الحي على قاعدة عموده بأيقونة SG ── */
.mlx-cols{ margin-block-start:4px; }
.ml-bub.ml-col{ flex-direction:row; align-items:center; gap:6px; background:var(--s4-navy,#10153A); color:#fff; border-radius:999px; padding:4px 12px 4px 10px; box-shadow:0 6px 16px rgba(16,21,58,.35); }
.ml-bub.ml-col b{ font:700 14px LamaSans, Tahoma, sans-serif; color:#fff; }
.ml-bub.ml-col span{ margin:0; color:#EAF2FB; text-shadow:none; font-weight:400; }
.ml-bub.ml-col.on{ background:#C9A227; }
.ml-bub.ml-col.on b, .ml-bub.ml-col.on span{ color:#10153A; }

@media (max-width:900px){
  /* الجوال: المشهدُ 300px بعد العنوان، ثم سعود، ثم البطاقات عموداً واحداً */
  .mlt-hero .in{ padding-block-end:32px; }
  .mlt{ margin-block-start:14px; gap:12px; }
  .mlt .mls{ order:1; } .mlt .mla{ order:2; }
  .mls{ height:auto; display:flex; flex-direction:column; border-radius:18px; }
  .mls canvas{ position:static; height:300px; order:1; }
  .mls-saud{ position:static; order:2; padding:4px 12px 0; pointer-events:auto; max-width:none; }
  .mls-saud p{ font-size:.8rem; max-width:none; }
  .mls-tools{ position:static; order:3; padding:8px 12px 0; justify-content:flex-end; }
  .mls-leg{ position:static; order:4; background:none; padding:8px 12px 12px; font-size:.66rem; gap:4px 10px; }
  .mla{ border-radius:18px; padding:12px; }
  .mla-row input{ font-size:1rem; }
  .mla-go{ padding-inline:14px; }
  .mla-go span{ display:none; }
  .mla-row input{ font-size:.92rem; }
  .mlm-art{ height:150px; }
  .mlg{ grid-template-columns:1fr; gap:10px; margin-block-start:20px; }
  /* مساحةٌ تحت آخر عنصر كي لا يحجبه الشريطُ العائم */
  .mlt-fold{ margin-block-end:72px; }
}
@media (prefers-reduced-motion:reduce){
  .mlx-cards .ml-card{ transition:none; }
}