@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap");
/* ==========================================================
   Land Shireel — Mobile UI
   بناءً على بنية Mobile في v51 فقط.
   الألوان والبيانات من Land Shireel.
   Mobile phones only: max-width: 600px
   ========================================================== */

@media (max-width:600px) {
  :root{
    --ls-green:#22c55e;
    --ls-red:#ef4444;
    --ls-blue:#3b82f6;
    --ls-orange:#f97316;
    --ls-ink:#172033;
    --ls-muted:#667085;
    --ls-line:#e2e8ee;
    --ls-white:rgba(255,255,255,.96);
  }

  html,body{
    width:100%;
    height:100%;
    overflow:hidden!important;
    background:#fff!important;
  }

  body.public-map .app,
  body.public-map .map,
  body.public-map #map{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
  }

  /* ---------- top controls: standalone search + menu ---------- */
  body.public-map .menu-btn{
    position:fixed!important;
    top:calc(14px + var(--safe-top,0px))!important;
    right:calc(12px + var(--safe-right,0px))!important;
    left:auto!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:13px!important;
    background:#123f57!important;
    color:#fff!important;
    box-shadow:0 6px 16px rgba(15,23,42,.18)!important;
    z-index:7000!important;
    transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease!important;
  }

  body.public-map .menu-btn::before{
    content:"☰";
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:transparent;
    color:#fff;
    font-size:25px;
    font-weight:800;
    line-height:1;
  }
  body.public-map .menu-btn svg{display:none!important;}
  body.public-map .menu-btn[aria-expanded="true"]{
    transform:scale(.96);
    box-shadow:0 5px 14px rgba(15,23,42,.16)!important;
  }
  body.public-map .menu-btn[aria-expanded="true"]::before{
    content:"×";
    color:#fff;
    font-size:31px;
    font-weight:400;
  }

  body.public-map .sidebar{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    pointer-events:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    z-index:6500!important;
  }

  body.public-map .sidebar .brand,
  body.public-map .sidebar .sub,
  body.public-map .sidebar .logo-pair-card,
  body.public-map .sidebar .statistics-card,
  body.public-map .sidebar .services-panel{
    display:none!important;
  }

  body.public-map .sidebar .search-box{
    position:fixed!important;
    top:calc(14px + var(--safe-top,0px))!important;
    left:calc(12px + var(--safe-left,0px))!important;
    right:calc(68px + var(--safe-right,0px))!important;
    width:auto!important;
    height:48px!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    direction:ltr!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    pointer-events:auto!important;
    z-index:6900!important;
  }

  body.public-map .sidebar .search-box input{
    order:1!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    padding:0 14px!important;
    border:1px solid #e2e8ee!important;
    outline:0!important;
    background:#fff!important;
    color:var(--ls-ink)!important;
    font-family:var(--font-main)!important;
    font-size:13px!important;
    font-weight:700!important;
    text-align:right!important;
    direction:rtl!important;
    border-radius:13px!important;
    box-shadow:0 4px 12px rgba(15,23,42,.08)!important;
  }

  body.public-map .sidebar .search-box button{
    order:0!important;
    flex:0 0 48px!important;
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    padding:0!important;
    border:0!important;
    border-radius:13px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#00bfae!important;
    color:#fff!important;
    box-shadow:0 6px 16px rgba(0,191,174,.20)!important;
  }
  body.public-map .search-icon-svg{width:23px!important;height:23px!important;color:#fff!important;}

  /* ---------- four-status statistics: v51 compact cards, white ---------- */
  body.public-map .statistics-card{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(8px + var(--safe-bottom,0px))!important;
    width:auto!important;
    height:82px!important;
    min-height:82px!important;
    margin:0!important;
    padding:7px!important;
    box-sizing:border-box!important;
    display:block!important;
    background:rgba(255,255,255,.92)!important;
    border:1px solid rgba(226,232,238,.95)!important;
    border-radius:18px!important;
    box-shadow:0 10px 28px rgba(15,23,42,.14)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    pointer-events:none!important;
    overflow:visible!important;
    z-index:4600!important;
  }

  body.public-map .statistics-card .card-title,
  body.public-map .statistics-card .stat-total{
    display:none!important;
  }

  body.public-map .statistics-card .stats-grid{
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    gap:7px!important;
    direction:ltr!important;
    background:transparent!important;
    border:0!important;
    overflow:visible!important;
  }

  body.public-map .statistics-card .stat-item:not(.stat-total){
    position:relative!important;
    grid-row:1!important;
    width:auto!important;
    height:68px!important;
    min-height:68px!important;
    margin:0!important;
    padding:5px 3px 6px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    border:1px solid var(--ls-line)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 3px 10px rgba(15,23,42,.06)!important;
    overflow:hidden!important;
    direction:rtl!important;
    text-align:center!important;
    animation:lsStatIn .55s cubic-bezier(.16,1,.3,1) both!important;
  }

  /* RTL visual order: متاح | مباع | محجوز | حجز مؤقت */
  body.public-map .statistics-card .stat-available{grid-column:4!important;animation-delay:.03s!important;}
  body.public-map .statistics-card .stat-sold{grid-column:3!important;animation-delay:.08s!important;}
  body.public-map .statistics-card .stat-reserved{grid-column:2!important;animation-delay:.13s!important;}
  body.public-map .statistics-card .stat-temporary{grid-column:1!important;animation-delay:.18s!important;}

  body.public-map .statistics-card .stat-item:not(.stat-total)::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:3px!important;
    border-radius:0 0 13px 13px!important;
  }
  body.public-map .statistics-card .stat-available::after{background:var(--ls-green)!important;}
  body.public-map .statistics-card .stat-sold::after{background:var(--ls-red)!important;}
  body.public-map .statistics-card .stat-reserved::after{background:var(--ls-blue)!important;}
  body.public-map .statistics-card .stat-temporary::after{background:var(--ls-orange)!important;}

  body.public-map .statistics-card .stat-item:not(.stat-total) > div{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:1px!important;
    min-width:0!important;
  }

  body.public-map .statistics-card .stat-icon{
    width:29px!important;
    height:29px!important;
    min-width:29px!important;
    min-height:29px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:9px!important;
    color:#fff!important;
    font-size:17px!important;
    line-height:1!important;
    box-shadow:0 4px 10px rgba(15,23,42,.12)!important;
  }
  body.public-map .statistics-card .stat-icon svg{
    width:18px!important;height:18px!important;
  }
  body.public-map .statistics-card .stat-icon-available{background:var(--ls-green)!important;}
  body.public-map .statistics-card .stat-icon-sold{background:var(--ls-red)!important;}
  body.public-map .statistics-card .stat-icon-reserved{background:var(--ls-blue)!important;}
  body.public-map .statistics-card .stat-icon-temporary{background:var(--ls-orange)!important;}

  body.public-map .statistics-card small{
    display:block!important;
    margin:0!important;
    color:var(--ls-muted)!important;
    font-family:var(--font-main)!important;
    font-size:9px!important;
    font-weight:800!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  body.public-map .statistics-card strong{
    display:block!important;
    margin:0!important;
    color:var(--ls-ink)!important;
    font-family:var(--font-main)!important;
    font-size:16px!important;
    font-weight:900!important;
    line-height:1!important;
  }
  body.public-map .temporary-label{
    display:flex!important;
    flex-direction:row!important;
    gap:2px!important;
  }

  @keyframes lsStatIn{
    from{opacity:0;transform:translateY(12px) scale(.94);}
    to{opacity:1;transform:translateY(0) scale(1);}
  }

  /* ---------- menu sheet: white, based on v51 mobile menu structure ---------- */
  body.public-map.menu-open::before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    background:rgba(255,255,255,.58)!important;
    backdrop-filter:blur(7px)!important;
    -webkit-backdrop-filter:blur(7px)!important;
    z-index:6000!important;
    pointer-events:auto!important;
    animation:lsBackdropIn .28s ease both!important;
  }
  @keyframes lsBackdropIn{from{opacity:0}to{opacity:1}}

  body.public-map.menu-open .sidebar{
    pointer-events:auto!important;
    z-index:6500!important;
  }

  body.public-map .sidebar.open{
    position:fixed!important;
    top:calc(74px + var(--safe-top,0px))!important;
    left:12px!important;
    right:12px!important;
    bottom:auto!important;
    width:auto!important;
    height:auto!important;
    max-height:calc(100dvh - 92px - var(--safe-top,0px) - var(--safe-bottom,0px))!important;
    padding:18px!important;
    margin:0!important;
    box-sizing:border-box!important;
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:rgba(255,255,255,.97)!important;
    border:1px solid rgba(226,232,238,.95)!important;
    border-radius:24px!important;
    box-shadow:0 24px 65px rgba(15,23,42,.20)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    animation:lsMenuIn .42s cubic-bezier(.16,1,.3,1) both!important;
  }

  @keyframes lsMenuIn{
    from{opacity:0;transform:translateY(-12px) scale(.975);filter:blur(4px);}
    to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
  }

  body.public-map .sidebar.open .brand{
    display:block!important;
    margin:0 0 3px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    text-align:right!important;
  }
  body.public-map .sidebar.open .brand-title h1{
    margin:0!important;
    color:var(--ls-ink)!important;
    font-family:var(--font-main)!important;
    font-size:22px!important;
    font-weight:900!important;
  }
  body.public-map .sidebar.open .sub{
    display:block!important;
    margin:3px 0 12px!important;
    color:#7a8798!important;
    font-size:10px!important;
    font-weight:700!important;
  }

  body.public-map .sidebar.open .logo-pair-card{
    display:block!important;
    margin:0 0 12px!important;
    padding:8px!important;
    background:#fff!important;
    border:1px solid var(--ls-line)!important;
    border-radius:17px!important;
    box-shadow:0 5px 16px rgba(15,23,42,.05)!important;
  }
  body.public-map .sidebar.open .logo-pair{
    min-height:74px!important;
    height:74px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    direction:ltr!important;
  }
  body.public-map .sidebar.open .logo-pair-item{
    width:105px!important;
    height:66px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.public-map .sidebar.open .logo-pair-item img{
    max-width:100%!important;
    max-height:100%!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
  }
  body.public-map .sidebar.open .logo-pair-divider{
    width:1px!important;
    height:44px!important;
    background:#dbe2e8!important;
  }

  body.public-map .sidebar.open .services-panel{
    display:block!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.public-map .sidebar.open .services-panel .card-title{
    display:block!important;
    margin:0 3px 9px!important;
    color:var(--ls-ink)!important;
    font-size:17px!important;
    font-weight:900!important;
  }
  body.public-map .sidebar.open .services-panel .filter-card{
    display:none!important;
  }
  body.public-map .sidebar.open .quick-action-btn{
    width:100%!important;
    min-height:50px!important;
    margin:0 0 8px!important;
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    border:1px solid rgba(23,32,51,.06)!important;
    border-radius:13px!important;
    color:#fff!important;
    background:#fff!important;
    font-family:var(--font-main)!important;
    font-size:14px!important;
    font-weight:900!important;
    box-shadow:0 6px 16px rgba(15,23,42,.08)!important;
    transition:transform .18s ease,box-shadow .18s ease!important;
    animation:lsMenuItemIn .45s cubic-bezier(.16,1,.3,1) both!important;
  }
  body.public-map .sidebar.open .quick-action-btn:nth-of-type(2){animation-delay:.08s!important;}
  body.public-map .sidebar.open .quick-action-btn:active{
    transform:scale(.985)!important;
    box-shadow:0 3px 10px rgba(15,23,42,.08)!important;
  }
  body.public-map .sidebar.open .compare-action{background:var(--ls-green)!important;}
  body.public-map .sidebar.open .video-action{background:var(--ls-blue)!important;}
  body.public-map .sidebar.open .quick-action-icon{
    width:28px!important;height:28px!important;min-width:28px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:9px!important;
    background:rgba(255,255,255,.18)!important;
    color:#fff!important;
  }
  @keyframes lsMenuItemIn{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
  }

  body.public-map.menu-open .sidebar .search-box,
  body.public-map.menu-open .sidebar .statistics-card,
  body.public-map.menu-open .sidebar .search-message{
    display:none!important;
  }

  /* X stays on the LEFT while menu is open, as requested. */
  body.public-map.menu-open .menu-btn{
    right:auto!important;
    left:calc(12px + var(--safe-left,0px))!important;
    top:calc(14px + var(--safe-top,0px))!important;
    background:#fff!important;
    color:var(--ls-ink)!important;
    z-index:7500!important;
  }

  /* selected plot sheet remains available above the map but below menu */
  body.public-map .plot-info{
    z-index:5200!important;
  }
}

/* Smaller phones */
@media (max-width:430px){
  body.public-map .statistics-card{left:6px!important;right:6px!important;height:80px!important;min-height:80px!important;padding:6px!important;}
  body.public-map .statistics-card .stats-grid{gap:5px!important;}
  body.public-map .statistics-card .stat-item:not(.stat-total){height:66px!important;min-height:66px!important;}
  body.public-map .statistics-card .stat-icon{width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;}
  body.public-map .statistics-card small{font-size:8.5px!important;}
  body.public-map .statistics-card strong{font-size:15px!important;}
}

/* ---------- phone landscape gate: premium portrait rotation animation ---------- */
.portrait-lock{display:none!important;}

@media (orientation:landscape) and (max-height:600px){
  html.mobile-device body.public-map > #portraitLock{
    position:fixed!important;
    inset:0!important;
    z-index:999999!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:22px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 28%,rgba(0,191,174,.075),transparent 28%),
      linear-gradient(180deg,#ffffff 0%,#f8fbfc 100%)!important;
    color:var(--ls-ink)!important;
    direction:rtl!important;
    text-align:center!important;
  }

  html.mobile-device body.public-map > .app,
  html.mobile-device body.public-map > .menu-btn,
  html.mobile-device body.public-map > #loading{
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html.mobile-device .portrait-lock-card{
    position:relative!important;
    width:min(360px,calc(100vw - 36px))!important;
    padding:30px 22px 24px!important;
    background:rgba(255,255,255,.92)!important;
    border:1px solid rgba(15,23,42,.055)!important;
    border-radius:30px!important;
    box-shadow:0 22px 70px rgba(15,23,42,.10),0 5px 20px rgba(15,23,42,.045)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    animation:lsCardEnter .72s cubic-bezier(.16,1,.3,1) both!important;
  }

  html.mobile-device .portrait-lock-card::before{
    content:""!important;
    position:absolute!important;
    width:180px!important;
    height:180px!important;
    left:50%!important;
    top:8px!important;
    transform:translateX(-50%)!important;
    border-radius:50%!important;
    background:radial-gradient(circle,rgba(0,191,174,.09),transparent 68%)!important;
    filter:blur(3px)!important;
    pointer-events:none!important;
  }

  html.mobile-device .portrait-lock-icon{
    position:relative!important;
    width:138px!important;
    height:112px!important;
    margin:0 auto 16px!important;
    filter:drop-shadow(0 14px 22px rgba(15,23,42,.09))!important;
  }

  /* soft orbit/ring around the phone */
  html.mobile-device .portrait-lock-icon::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:82px!important;
    height:82px!important;
    transform:translate(-50%,-50%)!important;
    border:1px solid rgba(0,191,174,.17)!important;
    border-radius:50%!important;
    animation:lsOrbitPulse 2.4s ease-out infinite!important;
  }
  html.mobile-device .portrait-lock-icon::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:108px!important;
    height:52px!important;
    transform:translate(-50%,-50%) rotate(-24deg)!important;
    border:1px solid rgba(0,191,174,.12)!important;
    border-left-color:transparent!important;
    border-right-color:transparent!important;
    border-radius:50%!important;
    animation:lsOrbitSpin 3.6s linear infinite!important;
  }

  html.mobile-device .phone-shape{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:48px!important;
    height:76px!important;
    box-sizing:border-box!important;
    border:2.5px solid #0f172a!important;
    border-radius:13px!important;
    background:linear-gradient(145deg,#ffffff,#f5f8fa)!important;
    transform:translate(-50%,-50%) rotate(90deg) scale(.94)!important;
    transform-origin:center center!important;
    transform-style:preserve-3d!important;
    perspective:800px!important;
    animation:lsPhoneRotatePro 5.2s cubic-bezier(.65,0,.35,1) infinite!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 9px 22px rgba(15,23,42,.12)!important;
    z-index:3!important;
  }

  html.mobile-device .phone-shape::before{
    content:""!important;
    position:absolute!important;
    top:5px!important;
    left:50%!important;
    width:15px!important;
    height:3px!important;
    transform:translateX(-50%)!important;
    border-radius:4px!important;
    background:#0f172a!important;
    opacity:.82!important;
  }
  html.mobile-device .phone-shape::after{
    content:""!important;
    position:absolute!important;
    bottom:6px!important;
    left:50%!important;
    width:5px!important;
    height:5px!important;
    transform:translateX(-50%)!important;
    border-radius:50%!important;
    background:#00bfae!important;
    box-shadow:0 0 10px rgba(0,191,174,.28)!important;
  }
  html.mobile-device .phone-screen{
    position:absolute!important;
    inset:9px 5px 13px!important;
    border-radius:6px!important;
    background:linear-gradient(145deg,#f7fafb,#eaf0f2)!important;
    overflow:hidden!important;
  }
  html.mobile-device .phone-screen::after{
    content:""!important;
    position:absolute!important;
    width:70%!important;
    height:3px!important;
    left:15%!important;
    top:42%!important;
    border-radius:4px!important;
    background:rgba(0,191,174,.22)!important;
    box-shadow:0 9px 0 rgba(15,23,42,.06),0 18px 0 rgba(15,23,42,.045)!important;
  }

  html.mobile-device .rotate-arrow{
    position:absolute!important;
    right:5px!important;
    top:2px!important;
    width:42px!important;
    height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:#00bfae!important;
    color:#fff!important;
    font-size:23px!important;
    line-height:1!important;
    font-weight:900!important;
    box-shadow:0 10px 24px rgba(0,191,174,.24),0 0 0 6px rgba(0,191,174,.07)!important;
    z-index:4!important;
    animation:lsArrowPro 3.8s cubic-bezier(.65,0,.35,1) infinite!important;
  }

  html.mobile-device .portrait-lock-card h2{
    position:relative!important;
    margin:0 0 8px!important;
    color:#101828!important;
    font-size:22px!important;
    font-weight:900!important;
    letter-spacing:-.3px!important;
    animation:lsTextIn .7s .12s cubic-bezier(.16,1,.3,1) both!important;
  }
  html.mobile-device .portrait-lock-card p{
    position:relative!important;
    margin:0 auto 17px!important;
    max-width:292px!important;
    color:#667085!important;
    font-size:12.5px!important;
    line-height:1.9!important;
    font-weight:700!important;
    animation:lsTextIn .7s .2s cubic-bezier(.16,1,.3,1) both!important;
  }
  html.mobile-device .portrait-lock-hint{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    color:#0f766e!important;
    font-size:11px!important;
    font-weight:900!important;
    animation:lsTextIn .7s .28s cubic-bezier(.16,1,.3,1) both!important;
  }
  html.mobile-device .portrait-lock-hint span{
    width:28px!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,#cbd5e1)!important;
  }
  html.mobile-device .portrait-lock-hint span:last-child{
    background:linear-gradient(90deg,#cbd5e1,transparent)!important;
  }

  @keyframes lsPhoneRotatePro{
    0%,10%{transform:translate(-50%,-50%) rotate(90deg) scale(.94);}
    18%{transform:translate(-50%,-50%) rotate(82deg) scale(.96);}
    30%{transform:translate(-50%,-50%) rotate(48deg) scale(.98);}
    42%{transform:translate(-50%,-50%) rotate(14deg) scale(1);}
    48%,68%{transform:translate(-50%,-50%) rotate(0deg) scale(1);}
    74%{transform:translate(-50%,-50%) rotate(-5deg) scale(1.015);}
    80%,86%{transform:translate(-50%,-50%) rotate(0deg) scale(1);}
    100%{transform:translate(-50%,-50%) rotate(90deg) scale(.94);}
  }
  @keyframes lsArrowPro{
    0%,18%{transform:rotate(0deg) scale(1);opacity:1;}
    40%{transform:rotate(90deg) scale(1.08);opacity:.96;}
    58%,70%{transform:rotate(180deg) scale(1);opacity:1;}
    84%{transform:rotate(270deg) scale(1.08);opacity:.96;}
    100%{transform:rotate(360deg) scale(1);opacity:1;}
  }
  @keyframes lsOrbitSpin{
    from{transform:translate(-50%,-50%) rotate(-24deg);}
    to{transform:translate(-50%,-50%) rotate(336deg);}
  }
  @keyframes lsOrbitPulse{
    0%{transform:translate(-50%,-50%) scale(.72);opacity:.65;}
    72%{transform:translate(-50%,-50%) scale(1.16);opacity:0;}
    100%{transform:translate(-50%,-50%) scale(1.16);opacity:0;}
  }
  @keyframes lsCardEnter{
    from{opacity:0;transform:translateY(22px) scale(.94);filter:blur(4px);}
    to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
  }
  @keyframes lsTextIn{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
  }
}

/* ==========================================================
   MOBILE — Search icon visibility fix ONLY
   Keeps the existing v51-inspired mobile style unchanged.
   ========================================================== */
@media (max-width:600px){
  body.public-map .sidebar .search-box button .search-icon-svg{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:20px!important;
    height:20px!important;
    flex:0 0 20px!important;
    overflow:visible!important;
    color:#172033!important;
  }
  body.public-map .sidebar .search-box button .search-icon-svg circle,
  body.public-map .sidebar .search-box button .search-icon-svg path{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    stroke:#172033!important;
  }
}

/* ==========================================================
   MOBILE TOP BAR — exact approved reference style
   Search icon | search field | menu button
   Keeps all other mobile styling unchanged.
   ========================================================== */
@media (max-width:600px){
  body.public-map .sidebar .search-box{
    top:calc(14px + var(--safe-top,0px))!important;
    left:calc(8px + var(--safe-left,0px))!important;
    right:calc(66px + var(--safe-right,0px))!important;
    width:auto!important;
    height:48px!important;
    padding:0!important;
    gap:12px!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  body.public-map .sidebar .search-box input{
    order:1!important;
    height:48px!important;
    min-height:48px!important;
    padding:0 16px!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid #e2e8f0!important;
    border-radius:12px!important;
    color:#243047!important;
    font-size:13px!important;
    font-weight:700!important;
    box-shadow:0 4px 12px rgba(15,23,42,.06)!important;
  }

  body.public-map .sidebar .search-box input::placeholder{
    color:#7b8496!important;
    opacity:1!important;
  }

  body.public-map .sidebar .search-box button{
    order:0!important;
    flex:0 0 50px!important;
    width:50px!important;
    min-width:50px!important;
    height:48px!important;
    min-height:48px!important;
    border:0!important;
    border-radius:12px!important;
    background:#00b8aa!important;
    color:#fff!important;
    box-shadow:0 7px 18px rgba(0,184,170,.22)!important;
    transform:none!important;
  }

  body.public-map .sidebar .search-box button:hover,
  body.public-map .sidebar .search-box button:active{
    background:#00b8aa!important;
    transform:none!important;
  }

  body.public-map .sidebar .search-box button .search-icon-svg{
    width:25px!important;
    height:25px!important;
    display:block!important;
  }

  body.public-map .sidebar .search-box button .search-icon-svg circle,
  body.public-map .sidebar .search-box button .search-icon-svg path{
    stroke:#fff!important;
  }

  body.public-map .menu-btn{
    top:calc(14px + var(--safe-top,0px))!important;
    right:calc(8px + var(--safe-right,0px))!important;
    width:50px!important;
    min-width:50px!important;
    height:48px!important;
    min-height:48px!important;
    border:0!important;
    border-radius:12px!important;
    background:#124f68!important;
    color:#fff!important;
    box-shadow:0 7px 18px rgba(18,79,104,.22)!important;
  }

  body.public-map .menu-btn::before{
    width:50px!important;
    height:48px!important;
    border-radius:12px!important;
    background:transparent!important;
    color:#fff!important;
    font-size:29px!important;
    font-weight:400!important;
    box-shadow:none!important;
  }

  body.public-map .menu-btn[aria-expanded="true"]{
    transform:none!important;
    background:#124f68!important;
    box-shadow:0 7px 18px rgba(18,79,104,.22)!important;
  }

  body.public-map .menu-btn[aria-expanded="true"]::before{
    color:#fff!important;
    font-size:32px!important;
    font-weight:300!important;
  }
}

/* ==========================================================
   MOBILE TOPBAR — remove ALL parent/background shells
   Keep only: teal search button + white input + navy menu.
   ========================================================== */
@media (max-width:600px){
  html body.public-map .sidebar,
  html body.public-map .sidebar .search-box,
  html body.public-map .sidebar .search-box::before,
  html body.public-map .sidebar .search-box::after{
    background:transparent!important;
    background-color:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  html body.public-map .sidebar .search-box{
    padding:0!important;
    margin:0!important;
    outline:0!important;
    overflow:visible!important;
  }

  /* Only the input itself is white. */
  html body.public-map .sidebar .search-box input{
    background:#fff!important;
    border:1px solid #e2e8ee!important;
    box-shadow:0 4px 12px rgba(15,23,42,.06)!important;
  }

  /* Search icon is a standalone colored button. */
  html body.public-map .sidebar .search-box button{
    background:#00b8aa!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* Menu is a standalone colored button. */
  html body.public-map .menu-btn,
  html body.public-map .menu-btn::before,
  html body.public-map .menu-btn::after{
    background:#124f68!important;
    border:0!important;
    box-shadow:none!important;
  }
}

/* ==========================================================
   MOBILE MENU — FINAL SERVICE DESIGN
   Four teal services only. Desktop/tablet untouched.
   ========================================================== */
@media (max-width:600px){
  body.public-map .sidebar.open{
    top:calc(70px + var(--safe-top,0px))!important;
    left:10px!important;
    right:10px!important;
    max-height:calc(100dvh - 84px - var(--safe-top,0px) - var(--safe-bottom,0px))!important;
    padding:18px 16px 20px!important;
    background:rgba(255,255,255,.90)!important;
    border:1px solid rgba(255,255,255,.72)!important;
    border-radius:25px!important;
    box-shadow:0 24px 60px rgba(15,23,42,.18)!important;
    backdrop-filter:blur(22px)!important;
    -webkit-backdrop-filter:blur(22px)!important;
  }

  body.public-map .sidebar.open .brand-title h1{
    font-size:22px!important;
    line-height:1.2!important;
  }
  body.public-map .sidebar.open .sub{
    margin-top:4px!important;
    margin-bottom:14px!important;
    font-size:9px!important;
  }

  /* Logo area: transparent, no white box behind either logo. */
  body.public-map .sidebar.open .logo-pair-card{
    margin:0 0 14px!important;
    padding:2px 0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.public-map .sidebar.open .logo-pair{
    min-height:82px!important;
    height:82px!important;
    gap:18px!important;
    background:transparent!important;
  }
  body.public-map .sidebar.open .logo-pair-item{
    width:112px!important;
    height:76px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.public-map .sidebar.open .logo-pair-item img{
    background:transparent!important;
    filter:drop-shadow(0 2px 4px rgba(15,23,42,.08))!important;
  }
  body.public-map .sidebar.open .logo-pair-divider{
    height:46px!important;
    background:rgba(100,116,139,.24)!important;
  }

  body.public-map .sidebar.open .services-panel{
    padding:0!important;
    margin:0!important;
  }
  body.public-map .sidebar.open .services-panel .card-title{
    margin:0 3px 12px!important;
    font-size:18px!important;
    line-height:1.2!important;
  }

  /* The four visible mobile services. */
  body.public-map .sidebar.open .mobile-service-actions{
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
  }
  body.public-map .sidebar.open .mobile-service-btn{
    width:100%!important;
    min-height:50px!important;
    height:50px!important;
    padding:0 14px!important;
    border:0!important;
    border-radius:13px!important;
    background:#00bfae!important;
    color:#fff!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    font-family:var(--font-main)!important;
    font-size:14px!important;
    font-weight:900!important;
    line-height:1!important;
    box-shadow:0 8px 18px rgba(0,191,174,.18)!important;
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
    animation:lsServiceIn .48s cubic-bezier(.16,1,.3,1) both!important;
  }
  body.public-map .sidebar.open .mobile-service-btn:nth-child(1){animation-delay:.06s!important}
  body.public-map .sidebar.open .mobile-service-btn:nth-child(2){animation-delay:.11s!important}
  body.public-map .sidebar.open .mobile-service-btn:nth-child(3){animation-delay:.16s!important}
  body.public-map .sidebar.open .mobile-service-btn:nth-child(4){animation-delay:.21s!important}
  body.public-map .sidebar.open .mobile-service-btn:hover{filter:brightness(1.03)!important}
  body.public-map .sidebar.open .mobile-service-btn:active{
    transform:scale(.985)!important;
    box-shadow:0 4px 11px rgba(0,191,174,.16)!important;
  }
  body.public-map .sidebar.open .mobile-service-icon{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#fff!important;
    background:rgba(255,255,255,.14)!important;
    border-radius:9px!important;
  }
  body.public-map .sidebar.open .mobile-service-icon svg{
    width:19px!important;
    height:19px!important;
    display:block!important;
  }

  /* Keep the actual filter controls functional, but reveal them only after tapping. */
  body.public-map .sidebar.open .filter-card{
    display:none!important;
    margin:8px 0 0!important;
    border-radius:14px!important;
  }
  body.public-map .sidebar.open .filter-card.mobile-filter-visible{
    display:block!important;
    animation:lsFilterReveal .28s cubic-bezier(.16,1,.3,1) both!important;
  }

  /* Hide the old duplicate action buttons. The new four buttons are used. */
  body.public-map .sidebar.open .services-panel > .compare-action:not(.mobile-service-btn),
  body.public-map .sidebar.open .services-panel > .video-action:not(.mobile-service-btn){
    display:none!important;
  }

  /* Center the X precisely inside the menu button. */
  body.public-map.menu-open .menu-btn{
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:12px!important;
    background:#124f68!important;
    color:#fff!important;
  }
  body.public-map.menu-open .menu-btn svg{display:none!important}
  body.public-map.menu-open .menu-btn::before{
    content:"×"!important;
    position:static!important;
    width:auto!important;
    height:auto!important;
    display:block!important;
    background:transparent!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:31px!important;
    font-weight:300!important;
    line-height:1!important;
    transform:translateY(-1px)!important;
  }
}

@keyframes lsServiceIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes lsFilterReveal{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}

/* Mobile-only service row: never alter desktop/tablet layout. */
.mobile-service-actions{display:none;}
@media (max-width:600px){
  body.public-map .sidebar.open .mobile-service-actions{display:flex!important;}
}


/* ==========================================================
   MOBILE MENU — APPROVED SERVICES + STATISTICS LAYOUT
   Reference: approved Arabic mobile panel.
   Keeps project icons/colors and changes only mobile presentation.
   ========================================================== */
@media (max-width:600px){
  /* The open menu is a single white panel containing:
     title -> logos -> services -> statistics. */
  body.public-map .sidebar.open{
    top:calc(10px + var(--safe-top,0px))!important;
    left:16px!important;
    right:16px!important;
    bottom:calc(10px + var(--safe-bottom,0px))!important;
    width:auto!important;
    height:auto!important;
    max-height:calc(100dvh - 20px - var(--safe-top,0px) - var(--safe-bottom,0px))!important;
    padding:20px 16px 18px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:rgba(255,255,255,.965)!important;
    border:1px solid rgba(226,232,238,.92)!important;
    border-radius:26px!important;
    box-shadow:0 26px 70px rgba(15,23,42,.20)!important;
  }

  body.public-map .sidebar.open .brand{order:1!important;}
  body.public-map .sidebar.open .sub{order:2!important;}
  body.public-map .sidebar.open .logo-pair-card{order:3!important;}
  body.public-map .sidebar.open .services-panel{order:4!important;}
  body.public-map .sidebar.open .statistics-card{order:5!important;}

  /* Keep the logos themselves transparent, with the subtle reference panel. */
  body.public-map .sidebar.open .logo-pair-card{
    display:block!important;
    margin:20px 0 16px!important;
    padding:14px 10px!important;
    background:rgba(255,255,255,.72)!important;
    border:1px solid rgba(226,232,238,.85)!important;
    border-radius:20px!important;
    box-shadow:0 8px 22px rgba(15,23,42,.06)!important;
  }
  body.public-map .sidebar.open .logo-pair{
    height:92px!important;
    min-height:92px!important;
    background:transparent!important;
  }
  body.public-map .sidebar.open .logo-pair-item{
    width:112px!important;
    height:82px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.public-map .sidebar.open .logo-pair-item img{
    background:transparent!important;
  }

  /* Services are before statistics in the open menu. */
  body.public-map .sidebar.open .services-panel{
    display:block!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.public-map .sidebar.open .services-panel .card-title{
    margin:0 4px 14px!important;
    text-align:right!important;
    font-size:20px!important;
    font-weight:900!important;
    color:var(--ls-ink)!important;
  }

  body.public-map .sidebar.open .mobile-service-actions{
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
  }
  body.public-map .sidebar.open .mobile-service-btn{
    position:relative!important;
    width:100%!important;
    min-height:54px!important;
    height:54px!important;
    padding:0 16px 0 14px!important;
    border:0!important;
    border-radius:14px!important;
    background:#00bfae!important;
    color:#fff!important;
    display:flex!important;
    flex-direction:row-reverse!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    font-size:15px!important;
    font-weight:900!important;
    box-shadow:0 8px 18px rgba(0,191,174,.15)!important;
  }
  body.public-map .sidebar.open .mobile-service-icon{
    position:absolute!important;
    right:14px!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border-radius:9px!important;
    background:rgba(255,255,255,.15)!important;
  }
  body.public-map .sidebar.open .mobile-service-icon::after{
    content:""!important;
    position:absolute!important;
    left:-9px!important;
    top:3px!important;
    width:1px!important;
    height:26px!important;
    background:rgba(255,255,255,.65)!important;
  }
  body.public-map .sidebar.open .mobile-service-icon svg{
    width:20px!important;
    height:20px!important;
  }

  /* Hide the old duplicate desktop/mobile controls. */
  body.public-map .sidebar.open .filter-card,
  body.public-map .sidebar.open .quick-action-btn{
    display:none!important;
  }

  /* Statistics now live inside the menu, directly under services. */
  body.public-map .sidebar.open .statistics-card{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:24px 0 0!important;
    padding:0!important;
    display:block!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    pointer-events:none!important;
    overflow:visible!important;
  }
  body.public-map .sidebar.open .statistics-card .card-title{
    display:block!important;
    margin:0 4px 14px!important;
    text-align:right!important;
    color:var(--ls-ink)!important;
    font-family:var(--font-main)!important;
    font-size:20px!important;
    font-weight:900!important;
    line-height:1.2!important;
  }
  body.public-map .sidebar.open .statistics-card .stats-grid{
    width:100%!important;
    height:auto!important;
    min-height:156px!important;
    margin:0!important;
    padding:10px 8px!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    gap:0!important;
    direction:ltr!important;
    background:rgba(255,255,255,.78)!important;
    border:1px solid rgba(226,232,238,.92)!important;
    border-radius:20px!important;
    box-shadow:0 10px 25px rgba(15,23,42,.06)!important;
    overflow:hidden!important;
  }
  body.public-map .sidebar.open .statistics-card .stat-item:not(.stat-total){
    position:relative!important;
    width:auto!important;
    height:136px!important;
    min-height:136px!important;
    margin:0!important;
    padding:7px 4px 10px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow:visible!important;
  }

  /* Right-to-left visual order: available | sold | reserved | temporary. */
  body.public-map .sidebar.open .statistics-card .stat-available{grid-column:4!important;}
  body.public-map .sidebar.open .statistics-card .stat-sold{grid-column:3!important;}
  body.public-map .sidebar.open .statistics-card .stat-reserved{grid-column:2!important;}
  body.public-map .sidebar.open .statistics-card .stat-temporary{grid-column:1!important;}

  /* Vertical separators. */
  body.public-map .sidebar.open .statistics-card .stat-item:not(.stat-total)::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:12px!important;
    bottom:12px!important;
    width:1px!important;
    background:#dce3e9!important;
  }
  body.public-map .sidebar.open .statistics-card .stat-temporary::before{display:none!important;}

  body.public-map .sidebar.open .statistics-card .stat-icon{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
    margin:0 0 8px!important;
    border-radius:12px!important;
    box-shadow:0 5px 12px rgba(15,23,42,.10)!important;
    color:#fff!important;
  }
  body.public-map .sidebar.open .statistics-card .stat-icon svg{
    width:29px!important;
    height:29px!important;
  }
  body.public-map .sidebar.open .statistics-card .stat-item > div{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:4px!important;
    min-width:0!important;
  }
  body.public-map .sidebar.open .statistics-card strong{
    order:1!important;
    margin:0!important;
    font-size:30px!important;
    line-height:1!important;
    font-weight:950!important;
  }
  body.public-map .sidebar.open .statistics-card small{
    order:2!important;
    margin:0!important;
    color:var(--ls-ink)!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  body.public-map .sidebar.open .statistics-card .stat-available strong{color:var(--ls-green)!important;}
  body.public-map .sidebar.open .statistics-card .stat-sold strong{color:var(--ls-red)!important;}
  body.public-map .sidebar.open .statistics-card .stat-reserved strong{color:var(--ls-blue)!important;}
  body.public-map .sidebar.open .statistics-card .stat-temporary strong{color:var(--ls-orange)!important;}

  /* Short colored underline below each statistic. */
  body.public-map .sidebar.open .statistics-card .stat-item:not(.stat-total)::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    bottom:0!important;
    width:42px!important;
    height:3px!important;
    border-radius:10px!important;
    transform:translateX(-50%)!important;
  }
  body.public-map .sidebar.open .statistics-card .stat-available::after{background:var(--ls-green)!important;}
  body.public-map .sidebar.open .statistics-card .stat-sold::after{background:var(--ls-red)!important;}
  body.public-map .sidebar.open .statistics-card .stat-reserved::after{background:var(--ls-blue)!important;}
  body.public-map .sidebar.open .statistics-card .stat-temporary::after{background:var(--ls-orange)!important;}
  body.public-map .sidebar.open .statistics-card .temporary-label{display:block!important;}
  body.public-map .sidebar.open .statistics-card .temporary-label span{display:inline!important;}


  /* Approved close button: teal, with a perfectly centered X on the left. */
  body.public-map.menu-open .menu-btn{
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    left:calc(12px + var(--safe-left,0px))!important;
    right:auto!important;
    top:calc(14px + var(--safe-top,0px))!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:12px!important;
    background:#00bfae!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(0,191,174,.18)!important;
    transform:none!important;
  }
  body.public-map.menu-open .menu-btn::before{
    content:"×"!important;
    position:static!important;
    width:auto!important;
    height:auto!important;
    display:block!important;
    background:transparent!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:31px!important;
    font-weight:300!important;
    line-height:1!important;
    transform:translateY(-1px)!important;
  }

  /* The statistics panel must remain visible when the menu is open. */
  body.public-map.menu-open .sidebar .statistics-card{
    display:block!important;
  }
}

@media (max-width:430px){
  body.public-map .sidebar.open{
    left:10px!important;
    right:10px!important;
    padding-left:13px!important;
    padding-right:13px!important;
  }
  body.public-map .sidebar.open .logo-pair-card{margin-top:16px!important;}
  body.public-map .sidebar.open .statistics-card .stats-grid{min-height:146px!important;padding:8px 5px!important;}
  body.public-map .sidebar.open .statistics-card .stat-item:not(.stat-total){height:126px!important;min-height:126px!important;}
  body.public-map .sidebar.open .statistics-card .stat-icon{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;}
  body.public-map .sidebar.open .statistics-card strong{font-size:27px!important;}
  body.public-map .sidebar.open .statistics-card small{font-size:11px!important;}
  body.public-map .sidebar.open .statistics-card .stat-item:not(.stat-total)::after{width:38px!important;}
}

/* ==========================================================
   MOBILE GLASS FINISH — final approved visual treatment
   Transparent white glass panel + close aligned with title.
   ========================================================== */
@media (max-width:600px){
  /* Keep the map visibly present through the menu. */
  body.public-map.menu-open::before{
    background:rgba(255,255,255,.22)!important;
    backdrop-filter:blur(11px) saturate(115%)!important;
    -webkit-backdrop-filter:blur(11px) saturate(115%)!important;
  }

  body.public-map .sidebar.open{
    background:rgba(255,255,255,.22)!important;
    border:1px solid rgba(255,255,255,.62)!important;
    box-shadow:0 24px 70px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.70)!important;
    backdrop-filter:blur(20px) saturate(125%)!important;
    -webkit-backdrop-filter:blur(20px) saturate(125%)!important;
  }

  /* Logo area: transparent glass, never a solid white rectangle. */
  body.public-map .sidebar.open .logo-pair-card{
    background:rgba(255,255,255,.12)!important;
    border:1px solid rgba(255,255,255,.62)!important;
    box-shadow:0 8px 24px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.65)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }
  body.public-map .sidebar.open .logo-pair,
  body.public-map .sidebar.open .logo-pair-item{
    background:transparent!important;
  }

  /* Statistics container: transparent glass like the reference. */
  body.public-map .sidebar.open .statistics-card .stats-grid{
    background:rgba(255,255,255,.13)!important;
    border:1px solid rgba(255,255,255,.62)!important;
    box-shadow:0 10px 26px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.65)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }

  /* Close button: left side, vertically aligned with the title row. */
  body.public-map.menu-open .menu-btn{
    left:calc(24px + var(--safe-left,0px))!important;
    right:auto!important;
    top:calc(18px + var(--safe-top,0px))!important;
    background:#00bfae!important;
    color:#fff!important;
    border:0!important;
    box-shadow:0 8px 20px rgba(0,191,174,.22)!important;
  }
  body.public-map.menu-open .menu-btn::before{
    font-size:30px!important;
    line-height:48px!important;
    transform:none!important;
  }

  /* Keep the service buttons exactly in the approved project style. */
  body.public-map .sidebar.open .mobile-service-btn{
    background:#00bfae!important;
    box-shadow:0 8px 20px rgba(0,191,174,.16)!important;
  }
}

/* ==========================================================
   MOBILE REFERENCE MATCH — 100% visual finish
   Latest approved reference: translucent panel, outlined teal
   service buttons, right-side icons + separators, RTL stats.
   Mobile only; project behavior remains untouched.
   ========================================================== */
@media (max-width:600px){
  body.public-map .sidebar.open{
    top:calc(14px + var(--safe-top,0px))!important;
    left:18px!important;
    right:18px!important;
    bottom:calc(14px + var(--safe-bottom,0px))!important;
    padding:22px 16px 20px!important;
    border-radius:30px!important;
    background:rgba(255,255,255,.18)!important;
    border:1.5px solid rgba(255,255,255,.72)!important;
    box-shadow:0 22px 60px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.78)!important;
    backdrop-filter:blur(20px) saturate(120%)!important;
    -webkit-backdrop-filter:blur(20px) saturate(120%)!important;
  }

  body.public-map.menu-open::before{
    background:rgba(255,255,255,.12)!important;
    backdrop-filter:blur(12px) saturate(120%)!important;
    -webkit-backdrop-filter:blur(12px) saturate(120%)!important;
  }

  /* Header */
  body.public-map .sidebar.open .brand{
    margin:0 4px 2px!important;
    padding:0!important;
    text-align:right!important;
  }
  body.public-map .sidebar.open .brand-title h1{
    font-size:23px!important;
    line-height:1.15!important;
    letter-spacing:-.3px!important;
  }
  body.public-map .sidebar.open .sub{
    margin:5px 4px 0!important;
    font-size:9px!important;
    color:rgba(102,112,133,.9)!important;
  }

  /* Close: left, aligned to the title row, centered X. */
  body.public-map.menu-open .menu-btn{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    left:calc(24px + var(--safe-left,0px))!important;
    right:auto!important;
    top:calc(24px + var(--safe-top,0px))!important;
    border-radius:13px!important;
    background:#00bfae!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(0,191,174,.22)!important;
  }
  body.public-map.menu-open .menu-btn::before{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:100%!important;
    font-size:30px!important;
    line-height:1!important;
    transform:none!important;
  }

  /* Logo panel */
  body.public-map .sidebar.open .logo-pair-card{
    margin:28px 0 18px!important;
    padding:12px 10px!important;
    border-radius:21px!important;
    background:rgba(255,255,255,.12)!important;
    border:1.5px solid rgba(255,255,255,.66)!important;
    box-shadow:0 8px 24px rgba(15,23,42,.045), inset 0 1px 0 rgba(255,255,255,.70)!important;
    backdrop-filter:blur(11px)!important;
    -webkit-backdrop-filter:blur(11px)!important;
  }
  body.public-map .sidebar.open .logo-pair{
    height:94px!important;
    min-height:94px!important;
  }
  body.public-map .sidebar.open .logo-pair-item{
    width:112px!important;
    height:82px!important;
  }
  body.public-map .sidebar.open .logo-pair-divider{
    height:48px!important;
    background:rgba(255,255,255,.75)!important;
  }

  /* Services */
  body.public-map .sidebar.open .services-panel .card-title{
    margin:0 4px 12px!important;
    font-size:20px!important;
    line-height:1.2!important;
  }
  body.public-map .sidebar.open .mobile-service-actions{
    gap:9px!important;
  }
  body.public-map .sidebar.open .mobile-service-btn{
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    padding:0 16px 0 18px!important;
    border:1.5px solid rgba(255,255,255,.72)!important;
    border-radius:15px!important;
    background:#00bfae!important;
    color:#fff!important;
    box-shadow:0 7px 17px rgba(0,191,174,.16), inset 0 1px 0 rgba(255,255,255,.20)!important;
    font-size:15px!important;
    font-weight:900!important;
  }
  body.public-map .sidebar.open .mobile-service-btn:active{
    transform:scale(.985)!important;
    box-shadow:0 4px 11px rgba(0,191,174,.14)!important;
  }
  body.public-map .sidebar.open .mobile-service-icon{
    right:12px!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.10)!important;
  }
  body.public-map .sidebar.open .mobile-service-icon::after{
    left:-10px!important;
    top:3px!important;
    height:28px!important;
    width:1px!important;
    background:rgba(255,255,255,.72)!important;
  }
  body.public-map .sidebar.open .mobile-service-icon svg{
    width:21px!important;
    height:21px!important;
  }

  /* Statistics */
  body.public-map .sidebar.open .statistics-card{
    margin:25px 0 0!important;
  }
  body.public-map .sidebar.open .statistics-card .card-title{
    margin:0 4px 13px!important;
    font-size:20px!important;
  }
  body.public-map .sidebar.open .statistics-card .stats-grid{
    min-height:146px!important;
    padding:8px 5px!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.12)!important;
    border:1.5px solid rgba(255,255,255,.70)!important;
    box-shadow:0 9px 24px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.70)!important;
    backdrop-filter:blur(11px)!important;
    -webkit-backdrop-filter:blur(11px)!important;
  }
  body.public-map .sidebar.open .statistics-card .stat-item:not(.stat-total){
    height:126px!important;
    min-height:126px!important;
  }
  body.public-map .sidebar.open .statistics-card .stat-icon{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    border-radius:12px!important;
  }
  body.public-map .sidebar.open .statistics-card strong{
    font-size:27px!important;
    font-weight:950!important;
  }
  body.public-map .sidebar.open .statistics-card small{
    font-size:11px!important;
  }
}

@media (max-width:380px){
  body.public-map .sidebar.open{
    left:12px!important;
    right:12px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body.public-map .sidebar.open .brand-title h1{font-size:21px!important;}
  body.public-map .sidebar.open .mobile-service-btn{height:54px!important;min-height:54px!important;font-size:14px!important;}
  body.public-map .sidebar.open .mobile-service-icon{width:32px!important;height:32px!important;min-width:32px!important;}
  body.public-map .sidebar.open .statistics-card .stats-grid{min-height:136px!important;}
  body.public-map .sidebar.open .statistics-card .stat-item:not(.stat-total){height:116px!important;min-height:116px!important;}
  body.public-map .sidebar.open .statistics-card .stat-icon{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;}
  body.public-map .sidebar.open .statistics-card strong{font-size:24px!important;}
  body.public-map .sidebar.open .statistics-card small{font-size:10px!important;}
}

/* ==========================================================
   MOBILE FILTER BOTTOM SHEET
   Tapping price/area closes the menu and brings the selected
   filter up from the bottom. Desktop/tablet are untouched.
   ========================================================== */
@media (max-width:600px){
  body.mobile-filter-sheet-open::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:4990;
    background:rgba(15,23,42,.08);
    /* Do not block Leaflet map gestures. The document click handler closes the sheet. */
    pointer-events:none;
    animation:lsFilterBackdropIn .32s ease both;
  }

  body.public-map .filter-card.mobile-floating-filter{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    top:auto!important;
    z-index:5000!important;
    display:block!important;
    width:auto!important;
    max-height:min(46vh,360px)!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.94)!important;
    border:1px solid rgba(255,255,255,.92)!important;
    box-shadow:0 20px 60px rgba(15,23,42,.25), 0 0 0 1px rgba(0,191,174,.08)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    transform:translate3d(0,115%,0)!important;
    opacity:0!important;
    will-change:transform,opacity;
    transition:transform .48s cubic-bezier(.16,1,.3,1),opacity .30s ease!important;
  }

  body.public-map .filter-card.mobile-floating-filter.mobile-floating-filter-visible{
    transform:translate3d(0,0,0)!important;
    opacity:1!important;
  }

  body.public-map .filter-card.mobile-floating-filter.mobile-floating-filter-closing{
    transform:translate3d(0,115%,0)!important;
    opacity:0!important;
  }

  body.public-map .filter-card.mobile-floating-filter .filter-card-head{
    min-height:52px!important;
    padding:9px 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    font-size:15px!important;
    font-weight:900!important;
    color:#172033!important;
    background:rgba(255,255,255,.38)!important;
    border-bottom:1px solid rgba(15,23,42,.06)!important;
  }

  body.public-map .filter-card.mobile-floating-filter .filter-body{
    display:block!important;
    padding:14px!important;
  }

  body.public-map .filter-card.mobile-floating-filter .mobile-filter-sheet-close{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border:0!important;
    border-radius:10px!important;
    background:#00bfae!important;
    color:#fff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-family:Arial,sans-serif!important;
    font-size:25px!important;
    font-weight:300!important;
    line-height:1!important;
    cursor:pointer!important;
    box-shadow:0 7px 18px rgba(0,191,174,.20)!important;
  }

  body.public-map .filter-card.mobile-floating-filter .land-range{
    width:100%!important;
  }

  @keyframes lsFilterBackdropIn{
    from{opacity:0}
    to{opacity:1}
  }
}

/* ==========================================================
   VIDEO MODAL — NEVER VISIBLE BY DEFAULT
   The project video appears only after clicking the video button.
   ========================================================== */
.video-modal:not(.show){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.video-modal.show{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* ==========================================================
   MOBILE PLOT DETAILS — smooth bottom-to-top sheet
   Filters are reset before opening the parcel details card.
   ========================================================== */
@media (max-width:600px){
  body.public-map .plot-info.mobile-plot-slide{
    display:block!important;
    visibility:visible!important;
    opacity:0!important;
    pointer-events:auto!important;
    transform:translate3d(0,108%,0)!important;
    transition:
      transform .56s cubic-bezier(.16,1,.3,1),
      opacity .28s ease!important;
    will-change:transform,opacity;
  }

  body.public-map .plot-info.mobile-plot-slide.mobile-plot-slide-active{
    opacity:1!important;
    transform:translate3d(0,0,0)!important;
  }

  /* عند فتح حجز مؤقت: صورة القطعة تختفي مع بطاقة التفاصيل ولا تبقى ظاهرة خلف النافذة. */
  body.public-map .plot-info .plot-photo-inline.mobile-reservation-photo-hidden{
    display:none!important;
  }

  /* عند فتح حجز مؤقت: تنزل بطاقة تفاصيل القطعة بسلاسة تحت النافذة المنبثقة. */
  body.public-map .plot-info.mobile-reservation-shift{
    transform:translate3d(0,115%,0)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:
      transform .48s cubic-bezier(.22,1,.36,1),
      opacity .28s ease!important;
  }

  /* نافذة الحجز: دخول لطيف وخروج أنيق عند الضغط على OK/إلغاء. */
  body.public-map .reservation-modal{
    display:flex!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .26s ease, visibility 0s linear .26s!important;
  }
  body.public-map .reservation-modal.show{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transition:opacity .26s ease, visibility 0s linear 0s!important;
  }
  body.public-map .reservation-modal.closing{
    visibility:visible!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body.public-map .reservation-modal .reservation-dialog{
    transform:translate3d(0,22px,0) scale(.97)!important;
    opacity:0!important;
    transition:transform .34s cubic-bezier(.16,1,.3,1), opacity .22s ease!important;
  }
  body.public-map .reservation-modal.show .reservation-dialog{
    transform:translate3d(0,0,0) scale(1)!important;
    opacity:1!important;
  }
  body.public-map .reservation-modal.closing .reservation-dialog{
    transform:translate3d(0,18px,0) scale(.97)!important;
    opacity:0!important;
  }
}

/* ==========================================================
   MOBILE ONLY — Property details pricing + collapsed purchase
   Uses the existing project palette; desktop/tablet untouched.
   ========================================================== */
@media (max-width:600px){
  body.public-map .plot-info .price-box{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    margin-top:12px!important;
    padding:0!important;
    border:1px solid var(--ls-line,#e2e8ee)!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.90)!important;
    overflow:hidden!important;
  }

  body.public-map .plot-info .price-box .info-row,
  body.public-map .plot-info .price-box .price-row.final{
    min-width:0!important;
    min-height:92px!important;
    margin:0!important;
    padding:11px 6px 9px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    text-align:center!important;
  }

  body.public-map .plot-info .price-box > * + *{
    border-inline-start:1px dashed #b8c1cc!important;
  }

  body.public-map .plot-info .price-box .info-row span,
  body.public-map .plot-info .price-box .price-row.final span{
    display:block!important;
    width:100%!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.35!important;
    font-weight:900!important;
    color:#667085!important;
    white-space:nowrap!important;
  }

  body.public-map .plot-info .price-box .info-row b,
  body.public-map .plot-info .price-box .price-row.final b{
    min-width:0!important;
    width:100%!important;
    margin:3px 0 0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:2px!important;
    font-size:19px!important;
    line-height:1.1!important;
    font-weight:900!important;
    direction:ltr!important;
    text-align:center!important;
    white-space:nowrap!important;
    font-variant-numeric:lining-nums tabular-nums!important;
    overflow:visible!important;
  }

  body.public-map .plot-info .price-box .info-row b .value-number,
  body.public-map .plot-info .price-box .price-row.final b .value-number{
    order:1!important;
    display:block!important;
    max-width:100%!important;
    overflow:visible!important;
    font-size:inherit!important;
    color:#172033!important;
    line-height:1.1!important;
  }

  body.public-map .plot-info .price-box .info-row b .value-unit,
  body.public-map .plot-info .price-box .price-row.final b .value-unit{
    order:2!important;
    display:block!important;
    margin:2px 0 0!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:800!important;
    color:#667085!important;
  }

  /* الإجمالي النهائي: الرقم والوحدة باللون الأخضر المعتمد في المشروع. */
  body.public-map .plot-info .price-box .price-row.final span{
    color:#0f766e!important;
  }
  body.public-map .plot-info .price-box .price-row.final b .value-number,
  body.public-map .plot-info .price-box .price-row.final b .value-unit{
    color:#16a34a!important;
  }

  /* حاوية محاسبة الشراء: مغلقة افتراضياً وتفتح بالسهم فقط على الموبايل. */
  body.public-map .plot-info .purchase-box{
    padding:0!important;
    overflow:hidden!important;
    border-color:rgba(15,118,110,.16)!important;
    background:linear-gradient(145deg,rgba(240,253,250,.92),rgba(255,255,255,.90))!important;
  }
  body.public-map .plot-info .purchase-head{
    min-height:64px!important;
    margin:0!important;
    padding:9px 10px 9px 8px!important;
    box-sizing:border-box!important;
    direction:rtl!important;
  }
  body.public-map .plot-info .purchase-head h3{
    font-size:18px!important;
    color:#172033!important;
  }
  body.public-map .plot-info .purchase-head-actions{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    direction:ltr!important;
  }
  body.public-map .plot-info .purchase-percent-badge{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:38px!important;
    height:30px!important;
    padding:0 9px!important;
    border-radius:999px!important;
    box-sizing:border-box!important;
    flex:0 0 auto!important;
  }
  body.public-map .plot-info .purchase-toggle{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(15,118,110,.09)!important;
    color:#0f766e!important;
    box-shadow:none!important;
    cursor:pointer!important;
    font-size:25px!important;
    line-height:1!important;
  }
  body.public-map .plot-info .purchase-toggle span{
    display:block!important;
    transform:translateY(-2px)!important;
  }
  body.public-map .plot-info .purchase-calculator-content{
    padding:0 10px 10px!important;
    max-height:500px!important;
    opacity:1!important;
    overflow:hidden!important;
    transition:max-height .28s ease,opacity .22s ease,padding .28s ease!important;
  }
  body.public-map .plot-info .purchase-box.is-collapsed .purchase-calculator-content{
    max-height:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body.public-map .plot-info .purchase-box.is-collapsed .purchase-toggle span{
    transform:translateY(-1px)!important;
  }
}

/* MOBILE ONLY — final visual refinement */
@media (max-width: 600px){
  /* سهم محاسبة الشراء: Chevron احترافي مرسوم بـ CSS بدل رمز النص. */
  body.public-map .plot-info .purchase-toggle{
    position:relative!important;
    font-size:0!important;
    color:#0f766e!important;
  }
  body.public-map .plot-info .purchase-toggle span{
    display:block!important;
    width:11px!important;
    height:11px!important;
    border-right:3px solid currentColor!important;
    border-bottom:3px solid currentColor!important;
    border-radius:1px!important;
    transform:rotate(45deg) translate(-1px,-1px)!important;
    transform-origin:center!important;
    transition:transform .22s ease!important;
  }
  body.public-map .plot-info .purchase-box:not(.is-collapsed) .purchase-toggle span{
    transform:rotate(225deg) translate(-1px,-1px)!important;
  }

  /* رقم القطعة أكبر بدرجتين على الموبايل فقط. */
  body.public-map .plot-info .plot-number-block #infoNumber{
    font-size:72px!important;
    line-height:.92!important;
    font-weight:950!important;
  }
}

/* ==========================================================
   MOBILE FINAL — Plot Details touches the physical viewport bottom
   Mobile only. Desktop remains completely unchanged.
   ========================================================== */
@media (max-width:800px){
  html, body, body.public-map, body.public-map .app{
    min-height:100dvh!important;
  }

  body.public-map .plot-info{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:0!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    max-height:100dvh!important;
    margin:0!important;
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
    transform:none!important;
  }
}


/* ==========================================================
   VIDEO SAFETY — لا يظهر الفيديو أو طبقة الفيديو خلف المخطط
   ========================================================== */
.video-modal, .video-guide-modal {
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  z-index:-1 !important;
}
.video-modal.show, .video-guide-modal.active {
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:99999 !important;
}


/* Hide video control */
.video-btn,.video-button,.video-control,.btn-video,.video-toggle,
[data-action="video"],[data-video],[data-tool="video"],
button[title*="فيديو"],button[aria-label*="فيديو"],
a[title*="فيديو"],a[aria-label*="فيديو"]{
  display:none!important;
}


/* Planning menu: video controls disabled */
#videoBtn,
#videoGuideBtn,
#mobileVideoBtn,
.video-action,
.video-menu-item,
[data-action="video"],
[data-video="project"],
a[href*="youtube.com"] .video-action{
  display:none !important;
}

/* ==========================================================
   الموبايل: زر «تحديد المعالم» وزر «3D» في صف واحد (نصف عرض لكل زر)
   ========================================================== */
@media (max-width:600px){
  body.public-map .sidebar.open .mobile-service-actions{
    flex-direction:row!important;
    flex-wrap:wrap!important;
    gap:9px!important;
  }
  body.public-map .sidebar.open .mobile-service-actions > .mobile-service-btn{
    flex:0 0 100%!important;
  }
  body.public-map .sidebar.open .mobile-service-actions > #landmarksServiceBtn,
  body.public-map .sidebar.open .mobile-service-actions > #view3dServiceBtn{
    flex:0 0 calc(50% - 4.5px)!important;
    width:calc(50% - 4.5px)!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:0 46px 0 6px!important;   /* (أعلى يمين أسفل يسار): مساحة للأيقونة على اليمين ليتوسط النص بقية الزر */
    justify-content:center!important;
    text-align:center!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }
  body.public-map .sidebar.open #landmarksServiceBtn .mobile-service-icon,
  body.public-map .sidebar.open #view3dServiceBtn .mobile-service-icon{
    right:8px!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
  }
  body.public-map .sidebar.open #landmarksServiceBtn .mobile-service-icon::after,
  body.public-map .sidebar.open #view3dServiceBtn .mobile-service-icon::after{
    left:-7px!important;
    top:2px!important;
    height:26px!important;
  }
  body.public-map .sidebar.open #landmarksServiceBtn .mobile-service-icon svg,
  body.public-map .sidebar.open #view3dServiceBtn .mobile-service-icon svg{
    width:18px!important;
    height:18px!important;
  }
}

/* ==========================================================
   الموبايل: رفع «الإحصائيات» للأعلى بضغط المسافات حتى تختفي سكرول القائمة
   ========================================================== */
@media (max-width:600px){
  /* أي عنصر خفي داخل الخدمات (غير العنوان والأزرار ورسالة المقارنة) لا يشغل مساحة */
  html body.public-map .sidebar.open .services-panel > :not(.card-title):not(.mobile-service-actions):not(#comparePrompt){
    display:none!important;
  }
  html body.public-map .sidebar.open{
    padding-top:16px!important;
    padding-bottom:12px!important;
  }
  html body.public-map .sidebar.open .logo-pair-card{
    margin:12px 0 10px!important;
    padding:8px 10px!important;
  }
  html body.public-map .sidebar.open .services-panel .card-title{
    margin:0 4px 8px!important;
  }
  html body.public-map .sidebar.open .mobile-service-actions{
    gap:7px!important;
  }
  html body.public-map .sidebar.open .mobile-service-btn{
    height:48px!important;
    min-height:48px!important;
  }
  html body.public-map .sidebar.open .statistics-card{
    margin:10px 0 0!important;
  }
  html body.public-map .sidebar.open .statistics-card .card-title{
    margin:0 4px 8px!important;
  }
  html body.public-map .sidebar.open .statistics-card .stats-grid{
    min-height:112px!important;
    padding:6px 5px!important;
  }
  html body.public-map .sidebar.open .statistics-card .stat-item:not(.stat-total){
    height:100px!important;
    min-height:100px!important;
  }
  html body.public-map .sidebar.open .statistics-card .stat-icon{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
  html body.public-map .sidebar.open .statistics-card strong{font-size:22px!important;}
}