/* ==========================================================
   RESPONSIVE SYSTEM — phones, tablets, iPad and touch devices
   Keeps the map full-screen and turns panels into touch-friendly sheets.
   ========================================================== */

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html,body,#map,.app,.map{min-height:100%;}
html,body{height:100%;height:100dvh;}
body{overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;}
button,a,input,select,textarea{touch-action:manipulation;}
button,.leaflet-control a{min-width:44px;min-height:44px;}

/* Large tablets / small laptops */
@media (min-width:801px) and (max-width:1180px){
  .sidebar{
    top:12px!important;
    right:12px!important;
    width:min(330px,calc(100vw - 24px))!important;
    max-height:calc(100dvh - 24px)!important;
    padding:15px!important;
    border-radius:20px!important;
  }
  .plot-info{
    left:12px!important;
    right:auto!important;
    width:min(370px,calc(100vw - 380px))!important;
    max-height:calc(100dvh - 24px)!important;
  }
  .brand h1{font-size:20px!important}
  .card-title{font-size:14px!important}
  .quick-action-btn{min-height:48px!important;font-size:13px!important}
  .logo-pair{gap:8px!important;min-height:66px!important}
  .logo-pair-item{height:62px!important}
  .plot-info .plot-number-block #infoNumber{font-size:48px!important}
}

/* Phones + iPad/tablet portrait */
@media (max-width:800px){
  html,body{height:100dvh;}
  .map,#map{height:100dvh!important;min-height:100dvh!important;}

  /* Floating menu */
  .menu-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    top:calc(10px + var(--safe-top))!important;
    right:calc(10px + var(--safe-right))!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    border-radius:14px!important;
    background:rgba(15,23,42,.92)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:0 10px 28px rgba(15,23,42,.28)!important;
    backdrop-filter:blur(14px)!important;
  }

  /* Sidebar becomes a bottom sheet when opened */
  .sidebar{
    z-index:4000!important;
    top:auto!important;
    right:calc(8px + var(--safe-right))!important;
    bottom:calc(8px + var(--safe-bottom))!important;
    left:calc(8px + var(--safe-left))!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(88dvh,820px)!important;
    padding:14px!important;
    padding-bottom:calc(14px + var(--safe-bottom))!important;
    border-radius:22px!important;
    transform:translateY(calc(100% + 30px))!important;
    transition:transform .28s cubic-bezier(.2,.75,.25,1),opacity .2s ease!important;
    opacity:0!important;
    visibility:hidden!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    box-shadow:0 22px 70px rgba(15,23,42,.30)!important;
  }
  .sidebar.open{
    transform:translateY(0)!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .sidebar .brand{padding-right:2px;}
  .brand h1{font-size:19px!important;}
  .sub{font-size:11px!important;margin-bottom:10px!important;}

  .search-box{gap:8px!important;}
  .search-box input{min-height:48px!important;font-size:16px!important;border-radius:13px!important;}
  .search-box button{width:50px!important;min-width:50px!important;height:48px!important;min-height:48px!important;border-radius:13px!important;}

  .card{padding:11px!important;border-radius:15px!important;margin-top:9px!important;}
  .card-title{font-size:14px!important;margin-bottom:8px!important;}
  .logo-pair{min-height:62px!important;gap:8px!important;}
  .logo-pair-item{height:58px!important;}
  .logo-pair-divider{height:34px!important;}

  .stats-grid{gap:7px!important;}
  .statistics-card .stat-item{min-height:58px!important;padding:9px!important;}
  .statistics-card .stat-item strong{font-size:18px!important;}
  .statistics-card .stat-item small{font-size:10px!important;}

  .filter-card-head{min-height:44px!important;font-size:13px!important;padding:8px 10px!important;}
  .filter-values input{height:42px!important;font-size:14px!important;}
  .filter-actions button{height:42px!important;font-size:11px!important;}
  .land-range{height:8px!important;}
  .land-range::-webkit-slider-runnable-track{height:8px!important;}
  .land-range::-webkit-slider-thumb{width:24px!important;height:24px!important;margin-top:-8px!important;}
  .land-range::-moz-range-track{height:8px!important;}
  .land-range::-moz-range-thumb{width:18px!important;height:18px!important;}
  .quick-action-btn{min-height:50px!important;font-size:13px!important;border-radius:13px!important;}

  /* Map controls stay inside the thumb-safe area */
  .leaflet-control-zoom{
    margin-right:calc(8px + var(--safe-right))!important;
    margin-bottom:calc(8px + var(--safe-bottom))!important;
  }
  .leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important;font-size:21px!important;}
  .leaflet-control-attribution{font-size:8px!important;max-width:70vw!important;}

  /* Plot details = mobile bottom sheet */
  .plot-info{
    z-index:4500!important;
    left:calc(8px + var(--safe-left))!important;
    right:calc(8px + var(--safe-right))!important;
    bottom:calc(8px + var(--safe-bottom))!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(78dvh,760px)!important;
    padding:14px!important;
    border-radius:22px!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }
  .plot-info h2{font-size:18px!important;}
  .plot-info .close{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;}
  .plot-summary-head{min-height:72px!important;}
  .plot-info .plot-number-block #infoNumber{font-size:44px!important;}
  .plot-info .plot-status-block .info-status{font-size:14px!important;padding:6px 11px!important;}
  .plot-info .status-pulse-dot{width:12px!important;height:12px!important;}
  .plot-info .price-box .info-row{padding:9px 8px!important;font-size:13px!important;}
  .plot-info .price-box .info-row b{font-size:14px!important;}
  .plot-info .price-row.final{padding:10px 8px!important;}
  .plot-info .price-row.final b{font-size:17px!important;}
  .plot-info .plot-photo-wrap{max-height:180px!important;}
  .plot-info .plot-photo{max-height:180px!important;object-fit:cover!important;}

  .purchase-box{padding:10px!important;border-radius:14px!important;}
  .purchase-range{height:8px!important;}
  .purchase-range::-webkit-slider-runnable-track{height:8px!important;}
  .purchase-range::-webkit-slider-thumb{width:24px!important;height:24px!important;margin-top:-8px!important;}
  .purchase-range::-moz-range-track{height:8px!important;}
  .purchase-range::-moz-range-thumb{width:18px!important;height:18px!important;}

  .plot-actions{grid-template-columns:1fr!important;gap:7px!important;}
  .plot-actions button,.plot-actions a{width:100%!important;min-height:48px!important;font-size:13px!important;}

  .reservation-countdown{padding:11px 9px!important;}
  .countdown-units{gap:3px!important;}
  .countdown-unit b{font-size:18px!important;}

  /* Modals */
  .compare-modal,.video-modal,.reservation-modal,.reservation-success-modal{
    padding:8px!important;
    padding-top:calc(8px + var(--safe-top))!important;
    padding-bottom:calc(8px + var(--safe-bottom))!important;
  }
  .compare-dialog,.video-dialog,.reservation-dialog,.reservation-success-dialog{
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom))!important;
    border-radius:20px!important;
    padding:14px!important;
  }
  .youtube-grid{padding:12px!important;}
  .youtube-card{padding:12px!important;border-radius:17px!important;}

  /* Touch-friendly country/duration menus */
  .country-picker-button,.reservation-duration-button{min-height:46px!important;}
  .country-picker-menu,.reservation-duration-menu{max-height:42dvh!important;}
}

/* Small phones */
@media (max-width:430px){
  .sidebar{max-height:91dvh!important;padding:11px!important;border-radius:20px!important;}
  .sidebar .logo-pair-card{display:none!important;}
  .sidebar .sub{font-size:10px!important;}
  .statistics-card .stat-item{min-height:54px!important;padding:7px!important;}
  .statistics-card .stat-item strong{font-size:16px!important;}
  .statistics-card .stat-item small{font-size:9px!important;}
  .filter-body{padding-left:8px!important;padding-right:8px!important;}
  .quick-action-btn{min-height:48px!important;font-size:12px!important;}

  .plot-info{max-height:84dvh!important;padding:12px!important;border-radius:20px!important;}
  .plot-info .plot-number-block #infoNumber{font-size:38px!important;}
  .plot-info .plot-number-label{font-size:10px!important;}
  .plot-info .plot-status-block .info-status{font-size:13px!important;}
  .plot-info .price-box .info-row{font-size:12px!important;padding:8px 6px!important;}
  .plot-info .price-box .info-row b{font-size:13px!important;}
  .plot-info .price-row.final b{font-size:15px!important;}
  .plot-info .plot-photo-wrap,.plot-info .plot-photo{max-height:140px!important;}
  .countdown-unit b{font-size:16px!important;}
  .countdown-unit span{font-size:7px!important;}
}

/* Landscape phones / compact tablets */
@media (max-width:900px) and (orientation:landscape) and (max-height:600px){
  .menu-btn{top:8px!important;right:8px!important;}
  .sidebar{
    left:auto!important;
    right:8px!important;
    bottom:8px!important;
    width:min(390px,58vw)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:18px!important;
  }
  .sidebar .logo-pair-card{display:none!important;}
  .plot-info{
    left:8px!important;
    right:auto!important;
    bottom:8px!important;
    width:min(440px,58vw)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:18px!important;
  }
  .plot-info .plot-photo-wrap,.plot-info .plot-photo{max-height:110px!important;}
  .plot-info .plot-number-block #infoNumber{font-size:34px!important;}
  .plot-actions{grid-template-columns:1fr 1fr!important;}
  .reservation-countdown{padding:8px!important;}
  .countdown-unit b{font-size:15px!important;}
}

/* iPad / tablets in portrait and medium-width touch screens */
@media (min-width:601px) and (max-width:800px){
  .sidebar{max-width:620px!important;margin:auto;}
  .plot-info{max-width:620px!important;margin:auto;}
  .sidebar .logo-pair-card{display:block!important;}
  .logo-pair{min-height:72px!important;}
  .logo-pair-item{height:68px!important;}
  .plot-info .plot-photo-wrap,.plot-info .plot-photo{max-height:220px!important;}
  .plot-info .plot-number-block #infoNumber{font-size:52px!important;}
  .plot-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Avoid browser double-tap zoom and accidental horizontal overflow */
@media (pointer:coarse){
  .leaflet-container{touch-action:pan-x pan-y;}
  .leaflet-marker-icon,.leaflet-marker-shadow{touch-action:none;}
  input,select,textarea{font-size:16px;}
}

@media (max-width:800px){
  body.public-map .plot-label span{font-size:clamp(13px,3.8vw,17px)!important;}
  body.public-map .plot-label em{font-size:clamp(10px,2.8vw,13px)!important;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

/* ==========================================================
   MOBILE UI — compact map-first style (reference layout)
   ========================================================== */
@media (max-width:480px){
  :root{
    --mobile-bg:#eef3f6;
    --mobile-teal:#00bfae;
    --mobile-navy:#101b2d;
    --mobile-line:#dbe5e8;
  }

  html,body{background:var(--mobile-bg)!important;overflow:hidden!important;}
  body.public-map .app{
    position:relative!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  body.public-map .map,
  body.public-map #map{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
  }

  /* Top search bar: exactly the map-first mobile composition */
  body.public-map .sidebar{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
    z-index:4300!important;
  }
  body.public-map .sidebar.open{
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }

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

  body.public-map .sidebar .search-box{
    position:absolute!important;
    top:calc(14px + var(--safe-top))!important;
    left:12px!important;
    right:58px!important;
    height:48px!important;
    display:flex!important;
    flex-direction:row!important;
    gap:7px!important;
    pointer-events:auto!important;
    z-index:10!important;
  }
  body.public-map .sidebar .search-box input{
    order:1!important;
    flex:1 1 auto!important;
    height:48px!important;
    min-height:48px!important;
    padding:0 14px!important;
    border:1px solid rgba(15,23,42,.10)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 5px 16px rgba(15,23,42,.12)!important;
    color:#172033!important;
    font-size:14px!important;
    text-align:right!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;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:12px!important;
    background:var(--mobile-teal)!important;
    box-shadow:0 7px 18px rgba(0,191,174,.24)!important;
  }
  body.public-map .search-icon-svg{width:23px!important;height:23px!important;}

  /* Hamburger */
  body.public-map .menu-btn{
    position:fixed!important;
    top:calc(14px + var(--safe-top))!important;
    right:12px!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:12px!important;
    background:var(--mobile-navy)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 8px 22px rgba(15,23,42,.22)!important;
    font-size:23px!important;
    line-height:1!important;
    pointer-events:auto!important;
    z-index:4500!important;
  }

  /* Bottom statistics: one clean row + total pill above */
  body.public-map .sidebar .statistics-card{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    bottom:calc(7px + var(--safe-bottom))!important;
    width:auto!important;
    height:112px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
    z-index:15!important;
  }
  body.public-map .statistics-card .card-title{display:none!important;}
  body.public-map .statistics-card .stats-grid{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:58px!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:1px!important;
    padding:0!important;
    background:#dbe5e8!important;
    border:1px solid #dbe5e8!important;
    border-radius:14px 14px 0 0!important;
    overflow:hidden!important;
    box-shadow:0 -4px 18px rgba(15,23,42,.10)!important;
  }
  body.public-map .statistics-card .stat-item{
    min-width:0!important;
    min-height:58px!important;
    height:58px!important;
    padding:5px 4px!important;
    border:0!important;
    border-radius:0!important;
    background:rgba(255,255,255,.97)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:1px!important;
    text-align:center!important;
  }
  body.public-map .statistics-card .stat-item::after{
    height:2px!important;
    opacity:.8!important;
  }
  body.public-map .statistics-card .stat-item small{
    order:2!important;
    margin:0!important;
    font-size:8px!important;
    line-height:1.1!important;
    color:#667085!important;
    white-space:nowrap!important;
  }
  body.public-map .statistics-card .stat-item strong{
    order:3!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1!important;
    color:#172033!important;
  }
  body.public-map .statistics-card .stat-icon{
    order:1!important;
    flex:0 0 32px!important;
    width:32px!important;
    height:32px!important;
    border-radius:10px!important;
    font-size:18px!important;
    box-shadow:0 4px 10px rgba(15,23,42,.12)!important;
  }

  /* Order in RTL: temporary, reserved, sold, available */
  body.public-map .statistics-card .stat-temporary{grid-column:1!important;grid-row:1!important;}
  body.public-map .statistics-card .stat-reserved{grid-column:2!important;grid-row:1!important;}
  body.public-map .statistics-card .stat-sold{grid-column:3!important;grid-row:1!important;}
  body.public-map .statistics-card .stat-available{grid-column:4!important;grid-row:1!important;}

  /* Total strip */
  body.public-map .statistics-card .stat-total{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:61px!important;
    width:100%!important;
    height:54px!important;
    min-height:54px!important;
    padding:5px 9px!important;
    display:flex!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:9px!important;
    border:1px solid #dbe5e8!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 4px 14px rgba(15,23,42,.08)!important;
    color:#0f766e!important;
  }
  body.public-map .statistics-card .stat-total .stat-icon{
    order:1!important;
    margin-right:auto!important;
    background:#0f766e!important;
  }
  body.public-map .statistics-card .stat-total > div{
    order:2!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
  }
  body.public-map .statistics-card .stat-total small{
    order:1!important;
    font-size:9px!important;
    color:#667085!important;
  }
  body.public-map .statistics-card .stat-total strong{
    order:2!important;
    font-size:17px!important;
    color:#172033!important;
  }

  /* Map remains visually dominant and bottom controls do not cover parcel labels */
  body.public-map .leaflet-control-zoom{
    display:none!important;
  }
  body.public-map .leaflet-control-attribution{
    bottom:118px!important;
    right:4px!important;
    font-size:7px!important;
    opacity:.65!important;
  }

  /* Labels: compact and readable like the reference */
  body.public-map .plot-label span{
    min-width:0!important;
    width:max-content!important;
    height:auto!important;
    padding:1px 3px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    color:#fff!important;
    font-size:clamp(10px,3vw,14px)!important;
    line-height:1.1!important;
    font-weight:900!important;
    text-shadow:0 1px 2px rgba(0,0,0,.50)!important;
  }
  body.public-map .plot-label em{
    background:transparent!important;
    box-shadow:none!important;
    color:#fff!important;
    padding:0!important;
    font-size:clamp(8px,2.4vw,11px)!important;
    text-shadow:0 1px 2px rgba(0,0,0,.50)!important;
  }

  /* Hide desktop plot details until a plot is selected; selected details stay as a sheet */
  body.public-map .plot-info{
    left:10px!important;
    right:10px!important;
    bottom:calc(72px + var(--safe-bottom))!important;
    top:auto!important;
    width:auto!important;
    max-height:calc(100dvh - 150px)!important;
    border-radius:18px!important;
  }

  /* Modals stay inside the phone viewport */
  body.public-map .compare-modal,
  body.public-map .video-modal,
  body.public-map .reservation-modal,
  body.public-map .reservation-success-modal{
    padding:8px!important;
  }
}

/* Desktop browser preview of the mobile style: centered phone canvas */
@media (min-width:481px) and (max-width:600px) and (pointer:coarse){
  body.public-map{
    background:#252525!important;
  }
  body.public-map .app{
    width:min(408px,100vw)!important;
    height:min(884px,100dvh)!important;
    margin:auto!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    box-shadow:0 0 0 14px #eef3f6,0 18px 60px rgba(0,0,0,.32)!important;
  }
}

/* ==========================================================
   FINAL MOBILE REFERENCE STYLE
   Search icon left + menu right + full bottom statistics
   ========================================================== */
@media (max-width:480px){
  body.public-map .sidebar .search-box{
    top:calc(14px + var(--safe-top))!important;
    left:12px!important;
    right:64px!important;
    height:48px!important;
    direction:ltr!important;
    gap:8px!important;
  }
  body.public-map .sidebar .search-box button{
    order:0!important;
    flex:0 0 48px!important;
    width:48px!important;
    height:48px!important;
    border-radius:13px!important;
  }
  body.public-map .sidebar .search-box input{
    order:1!important;
    min-width:0!important;
    direction:rtl!important;
    text-align:right!important;
    border-radius:13px!important;
  }

  body.public-map .menu-btn{
    top:calc(14px + var(--safe-top))!important;
    right:12px!important;
    left:auto!important;
    width:48px!important;
    height:48px!important;
    border-radius:13px!important;
    font-size:23px!important;
  }

  /* Give the map maximum usable area while keeping the dashboard complete. */
  body.public-map .statistics-card{
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + var(--safe-bottom))!important;
    height:116px!important;
  }

  /* Total card: always visible above the four status cards. */
  body.public-map .statistics-card .stat-total{
    left:0!important;
    right:0!important;
    bottom:61px!important;
    height:55px!important;
    min-height:55px!important;
    padding:5px 10px!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.97)!important;
    box-shadow:0 5px 18px rgba(15,23,42,.10)!important;
  }
  body.public-map .statistics-card .stat-total .stat-icon{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:11px!important;
    margin-left:0!important;
    margin-right:auto!important;
    font-size:20px!important;
  }
  body.public-map .statistics-card .stat-total > div{
    gap:8px!important;
  }
  body.public-map .statistics-card .stat-total small{
    font-size:10px!important;
    font-weight:600!important;
  }
  body.public-map .statistics-card .stat-total strong{
    font-size:19px!important;
    font-weight:900!important;
  }

  /* Four status cards: temporary | reserved | sold | available. */
  body.public-map .statistics-card .stats-grid{
    bottom:0!important;
    height:58px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:2px!important;
    background:transparent!important;
    border:0!important;
    overflow:visible!important;
  }
  body.public-map .statistics-card .stat-item{
    height:58px!important;
    min-height:58px!important;
    padding:4px 3px!important;
    border-radius:0!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 2px 12px rgba(15,23,42,.08)!important;
  }
  body.public-map .statistics-card .stat-item:first-child{border-radius:0 13px 0 0!important;}
  body.public-map .statistics-card .stat-item:last-child{border-radius:13px 0 0 0!important;}
  body.public-map .statistics-card .stat-icon{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    flex-basis:32px!important;
    border-radius:10px!important;
    font-size:18px!important;
  }
  body.public-map .statistics-card .stat-item small{
    font-size:8px!important;
    font-weight:600!important;
  }
  body.public-map .statistics-card .stat-item strong{
    font-size:14px!important;
    font-weight:900!important;
  }

  /* Keep attribution above the dashboard. */
  body.public-map .leaflet-control-attribution{
    bottom:124px!important;
    right:4px!important;
    font-size:7px!important;
    z-index:900!important;
  }

  /* Slightly cleaner parcel labels on narrow phones. */
  body.public-map .plot-label span{
    font-size:clamp(9px,2.8vw,13px)!important;
    font-weight:900!important;
    color:#fff!important;
    text-shadow:0 1px 2px rgba(0,0,0,.52)!important;
  }
  body.public-map .plot-label em{
    font-size:clamp(8px,2.2vw,10px)!important;
    color:#fff!important;
    text-shadow:0 1px 2px rgba(0,0,0,.52)!important;
  }
}

/* Tablet / iPad portrait: preserve the same composition at a larger scale. */
@media (min-width:481px) and (max-width:900px) and (orientation:portrait){
  body.public-map .sidebar .search-box{
    position:absolute!important;
    top:calc(20px + var(--safe-top))!important;
    left:20px!important;
    right:78px!important;
    height:56px!important;
    direction:ltr!important;
  }
  body.public-map .sidebar .search-box input{
    height:56px!important;
    min-height:56px!important;
    font-size:17px!important;
    border-radius:16px!important;
  }
  body.public-map .sidebar .search-box button{
    width:56px!important;
    min-width:56px!important;
    height:56px!important;
    min-height:56px!important;
    border-radius:16px!important;
  }
  body.public-map .menu-btn{
    top:calc(20px + var(--safe-top))!important;
    right:20px!important;
    width:56px!important;
    height:56px!important;
    border-radius:16px!important;
  }
  body.public-map .statistics-card{
    left:20px!important;
    right:20px!important;
    bottom:calc(16px + var(--safe-bottom))!important;
    height:132px!important;
  }
  body.public-map .statistics-card .stat-total{
    height:64px!important;
    min-height:64px!important;
    bottom:69px!important;
    border-radius:17px!important;
  }
  body.public-map .statistics-card .stats-grid{
    height:64px!important;
  }
  body.public-map .statistics-card .stat-item{
    height:64px!important;
    min-height:64px!important;
  }
  body.public-map .statistics-card .stat-icon{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    flex-basis:38px!important;
  }
  body.public-map .statistics-card .stat-item small{font-size:10px!important;}
  body.public-map .statistics-card .stat-item strong{font-size:17px!important;}
  body.public-map .leaflet-control-attribution{bottom:142px!important;}
}

/* ==========================================================
   MOBILE FINAL LIGHT STATISTICS STYLE
   White dashboard + total on one line + four status items
   side-by-side with icon beside the label.
   ========================================================== */
@media (max-width:800px){
  body.public-map .statistics-card{
    position:fixed!important;
    z-index:3000!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + var(--safe-bottom))!important;
    height:auto!important;
    min-height:0!important;
    padding:10px!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid rgba(15,118,110,.10)!important;
    box-shadow:0 12px 38px rgba(15,23,42,.16)!important;
    overflow:visible!important;
  }

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

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

  /* الإجمالي: النص والرقم في نفس السطر */
  body.public-map .statistics-card .stat-total{
    grid-column:1 / -1!important;
    grid-row:1!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    padding:0 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:13px!important;
    flex-direction:row!important;
    border-radius:14px!important;
    background:#f7fbfb!important;
    border:1px solid rgba(15,118,110,.10)!important;
    box-shadow:none!important;
    color:#0f766e!important;
  }
  body.public-map .statistics-card .stat-total::after{display:none!important;}
  body.public-map .statistics-card .stat-total .stat-icon{display:none!important;}
  body.public-map .statistics-card .stat-total > div{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:row!important;
    gap:12px!important;
  }
  body.public-map .statistics-card .stat-total small{
    display:block!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1!important;
    color:#344054!important;
    font-weight:800!important;
  }
  body.public-map .statistics-card .stat-total strong{
    display:block!important;
    margin:0!important;
    font-size:24px!important;
    line-height:1!important;
    color:#0faaa4!important;
    font-weight:950!important;
  }
  body.public-map .statistics-card .stat-total > div::before{
    content:"";
    width:1px;
    height:22px;
    background:rgba(15,118,110,.20);
    order:1;
  }
  body.public-map .statistics-card .stat-total small{order:2;}
  body.public-map .statistics-card .stat-total strong{order:0;}

  /* الحالات الأربع في صف واحد، والأيقونة بجانب الكتابة */
  body.public-map .statistics-card .stat-item:not(.stat-total){
    grid-row:2!important;
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    height:62px!important;
    min-height:62px!important;
    padding:6px 5px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    flex-direction:row!important;
    border-radius:13px!important;
    background:#fff!important;
    border:1px solid rgba(15,23,42,.08)!important;
    box-shadow:0 3px 12px rgba(15,23,42,.07)!important;
    overflow:hidden!important;
  }
  body.public-map .statistics-card .stat-item:not(.stat-total)::after{
    height:3px!important;
    opacity:.9!important;
  }
  body.public-map .statistics-card .stat-item .stat-icon{
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    border-radius:9px!important;
    font-size:16px!important;
    box-shadow:none!important;
    order:0!important;
  }
  body.public-map .statistics-card .stat-item > div{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:1px!important;
    line-height:1!important;
  }
  body.public-map .statistics-card .stat-item small{
    display:block!important;
    margin:0!important;
    white-space:nowrap!important;
    font-size:9px!important;
    line-height:1.1!important;
    font-weight:800!important;
    color:#475467!important;
  }
  body.public-map .statistics-card .stat-item strong{
    display:block!important;
    margin:1px 0 0!important;
    font-size:16px!important;
    line-height:1!important;
    font-weight:950!important;
    color:#172033!important;
  }

  /* الترتيب المرئي RTL: متاح | مباع | محجوز | حجز مؤقت */
  body.public-map .statistics-card .stat-available{grid-column:1!important;grid-row:2!important;}
  body.public-map .statistics-card .stat-sold{grid-column:2!important;grid-row:2!important;}
  body.public-map .statistics-card .stat-reserved{grid-column:3!important;grid-row:2!important;}
  body.public-map .statistics-card .stat-temporary{grid-column:4!important;grid-row:2!important;}

  /* ألوان الأزرار/الأيقونات بنفس هوية التريكواز */
  body.public-map .menu-btn{
    background:#0faaa4!important;
    border-color:#0faaa4!important;
    color:#fff!important;
    box-shadow:0 8px 22px rgba(15,170,164,.25)!important;
  }
  body.public-map .sidebar .search-box button{
    background:#0faaa4!important;
    border-color:#0faaa4!important;
    color:#fff!important;
    box-shadow:0 8px 22px rgba(15,170,164,.22)!important;
  }

  body.public-map .leaflet-control-attribution{
    bottom:calc(145px + var(--safe-bottom))!important;
  }
}

@media (max-width:380px){
  body.public-map .statistics-card{left:6px!important;right:6px!important;padding:7px!important;border-radius:18px!important;}
  body.public-map .statistics-card .stats-grid{gap:4px!important;grid-template-rows:44px 57px!important;}
  body.public-map .statistics-card .stat-total{height:44px!important;min-height:44px!important;}
  body.public-map .statistics-card .stat-total small{font-size:12px!important;}
  body.public-map .statistics-card .stat-total strong{font-size:21px!important;}
  body.public-map .statistics-card .stat-item:not(.stat-total){height:57px!important;min-height:57px!important;padding:5px 3px!important;gap:3px!important;}
  body.public-map .statistics-card .stat-item .stat-icon{flex-basis:26px!important;width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;font-size:14px!important;border-radius:8px!important;}
  body.public-map .statistics-card .stat-item small{font-size:8px!important;}
  body.public-map .statistics-card .stat-item strong{font-size:14px!important;}
}

/* ==========================================================
   MOBILE LIGHT MAP UI — approved reference style
   Mobile only: desktop/tablet layout remains unchanged.
   ========================================================== */
@media (max-width:800px){
  :root{
    --mobile-teal:#00bfae;
    --mobile-navy:#0f2f3b;
    --mobile-panel:#ffffff;
  }

  body{background:#eef3f6!important;}

  /* Floating top shell: search only. */
  .sidebar{
    position:fixed!important;
    inset:0!important;
    z-index:4000!important;
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
  }

  .sidebar > .brand,
  .sidebar > .sub,
  .sidebar > .search-message,
  .sidebar > .logo-pair-card,
  .sidebar > .services-panel,
  .sidebar > .quick-actions-card,
  .sidebar > .customer-card,
  .sidebar > .card:not(.statistics-card){display:none!important;}

  .search-box{
    position:absolute!important;
    top:calc(16px + var(--safe-top))!important;
    left:calc(16px + var(--safe-left))!important;
    right:calc(16px + var(--safe-right))!important;
    height:64px!important;
    padding:8px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:10px!important;
    background:rgba(255,255,255,.97)!important;
    border:1px solid rgba(15,23,42,.07)!important;
    border-radius:22px!important;
    box-shadow:0 12px 32px rgba(15,23,42,.16)!important;
    backdrop-filter:blur(16px)!important;
    pointer-events:auto!important;
  }

  .search-box input{
    order:2!important;
    flex:1 1 auto!important;
    height:48px!important;
    min-height:48px!important;
    border:1px solid rgba(15,23,42,.08)!important;
    border-radius:15px!important;
    background:#fff!important;
    color:#172033!important;
    text-align:right!important;
    padding:8px 16px!important;
    font-size:15px!important;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.03)!important;
  }

  .search-box input::placeholder{color:#667085!important;opacity:.9!important;}

  .search-box button{
    order:1!important;
    flex:0 0 48px!important;
    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:0!important;
    border-radius:14px!important;
    background:var(--mobile-teal)!important;
    color:#fff!important;
    box-shadow:0 7px 18px rgba(0,191,174,.24)!important;
  }

  .search-icon-svg{width:24px!important;height:24px!important;}

  .menu-btn{
    position:fixed!important;
    z-index:5000!important;
    top:calc(24px + var(--safe-top))!important;
    right:calc(24px + var(--safe-right))!important;
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:14px!important;
    background:var(--mobile-teal)!important;
    color:#fff!important;
    font-size:24px!important;
    line-height:1!important;
    box-shadow:0 7px 18px rgba(0,191,174,.24)!important;
    pointer-events:auto!important;
  }

  /* Statistics panel: white, rounded, total row + four cards. */
  .statistics-card{
    position:fixed!important;
    z-index:4100!important;
    left:calc(10px + var(--safe-left))!important;
    right:calc(10px + var(--safe-right))!important;
    bottom:calc(10px + var(--safe-bottom))!important;
    width:auto!important;
    margin:0!important;
    padding:13px 10px 10px!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid rgba(15,23,42,.07)!important;
    border-radius:24px!important;
    box-shadow:0 16px 45px rgba(15,23,42,.18)!important;
    backdrop-filter:blur(16px)!important;
    overflow:hidden!important;
    pointer-events:auto!important;
  }

  .statistics-card .card-title{display:none!important;}

  .statistics-card .stats-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:auto auto!important;
    gap:8px!important;
    align-items:stretch!important;
  }

  .statistics-card .stat-item{
    min-width:0!important;
    min-height:70px!important;
    padding:9px 5px 8px!important;
    border:1px solid rgba(15,23,42,.07)!important;
    border-radius:16px!important;
    background:#fff!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:4px!important;
    text-align:center!important;
    box-shadow:0 4px 12px rgba(15,23,42,.055)!important;
  }

  /* Total: label and number on one line, exactly above the four cards. */
  .statistics-card .stat-total{
    grid-column:1 / -1!important;
    grid-row:1!important;
    min-height:44px!important;
    padding:5px 12px!important;
    border:0!important;
    border-radius:14px!important;
    background:rgba(0,191,174,.045)!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:row!important;
    justify-content:center!important;
    align-items:center!important;
    gap:12px!important;
  }

  .statistics-card .stat-total::after{display:none!important;}
  .statistics-card .stat-total .stat-icon{display:none!important;}
  .statistics-card .stat-total div{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
  }
  .statistics-card .stat-total small{
    order:2!important;
    display:block!important;
    margin:0!important;
    color:#172033!important;
    font-size:15px!important;
    font-weight:800!important;
  }
  .statistics-card .stat-total strong{
    order:1!important;
    display:block!important;
    margin:0!important;
    color:var(--mobile-teal)!important;
    font-size:27px!important;
    line-height:1!important;
    font-weight:900!important;
  }
  .statistics-card .stat-total div::after{
    content:"";
    width:1px;
    height:24px;
    background:rgba(15,23,42,.15);
    margin:0 2px;
  }

  /* Four statuses in one row. */
  .statistics-card .stat-available{grid-column:4!important;grid-row:2!important;}
  .statistics-card .stat-sold{grid-column:3!important;grid-row:2!important;}
  .statistics-card .stat-reserved{grid-column:2!important;grid-row:2!important;}
  .statistics-card .stat-temporary{grid-column:1!important;grid-row:2!important;}

  .statistics-card .stat-item::after{
    height:3px!important;
    opacity:1!important;
    border-radius:0 0 16px 16px!important;
  }

  .statistics-card .stat-icon{
    flex:0 0 34px!important;
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
    margin:0!important;
    font-size:19px!important;
    box-shadow:none!important;
  }
  .statistics-card .stat-item > div{
    min-width:0!important;
    width:100%!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
  }
  .statistics-card .stat-item small{
    display:block!important;
    min-width:0!important;
    color:#344054!important;
    font-size:10px!important;
    line-height:1.25!important;
    font-weight:800!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .statistics-card .stat-item strong{
    display:block!important;
    color:#172033!important;
    font-size:18px!important;
    line-height:1.1!important;
    margin:0!important;
    font-weight:900!important;
  }

  .statistics-card .stat-available .stat-icon{background:#22c55e!important;}
  .statistics-card .stat-sold .stat-icon{background:#ef4444!important;}
  .statistics-card .stat-reserved .stat-icon{background:#3b82f6!important;}
  .statistics-card .stat-temporary .stat-icon{background:#f97316!important;}

  /* Remove the old dark/black mobile treatment entirely. */
  .statistics-card,
  .statistics-card *{text-shadow:none!important;}

  /* Keep the map visible behind the fixed UI. */
  .map,#map{height:100dvh!important;}
}

@media (max-width:430px){
  .search-box{
    top:calc(12px + var(--safe-top))!important;
    left:calc(10px + var(--safe-left))!important;
    right:calc(10px + var(--safe-right))!important;
    height:58px!important;
    padding:5px!important;
    border-radius:19px!important;
    gap:7px!important;
  }
  .search-box input{height:46px!important;min-height:46px!important;font-size:14px!important;padding-inline:12px!important;}
  .search-box button{flex-basis:46px!important;width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important;border-radius:13px!important;}
  .menu-btn{top:calc(18px + var(--safe-top))!important;right:calc(18px + var(--safe-right))!important;width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;}
  .statistics-card{left:calc(7px + var(--safe-left))!important;right:calc(7px + var(--safe-right))!important;bottom:calc(7px + var(--safe-bottom))!important;padding:10px 7px 8px!important;border-radius:20px!important;}
  .statistics-card .stats-grid{gap:6px!important;}
  .statistics-card .stat-total{min-height:39px!important;}
  .statistics-card .stat-total small{font-size:12px!important;}
  .statistics-card .stat-total strong{font-size:22px!important;}
  .statistics-card .stat-total div{gap:7px!important;}
  .statistics-card .stat-total div::after{height:20px!important;}
  .statistics-card .stat-item{min-height:64px!important;padding:7px 3px 7px!important;border-radius:14px!important;gap:3px!important;}
  .statistics-card .stat-icon{width:30px!important;height:30px!important;flex-basis:30px!important;font-size:17px!important;border-radius:9px!important;}
  .statistics-card .stat-item small{font-size:8.5px!important;}
  .statistics-card .stat-item strong{font-size:16px!important;}
}

/* ==========================================================
   FINAL MOBILE REFERENCE — clean white professional layout
   ========================================================== */
@media (max-width:480px){
  :root{
    --ref-teal:#08b7ae;
    --ref-green:#20bd6b;
    --ref-red:#ef4147;
    --ref-blue:#4285f4;
    --ref-orange:#ff9416;
  }

  body.public-map{
    background:#eef3f7!important;
  }

  /* Top: one unified white capsule, search on left, menu on right */
  body.public-map .sidebar .search-box{
    position:fixed!important;
    top:calc(16px + var(--safe-top))!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    height:58px!important;
    padding:6px 56px 6px 6px!important;
    box-sizing:border-box!important;
    gap:7px!important;
    border-radius:19px!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid rgba(19,38,56,.08)!important;
    box-shadow:0 8px 24px rgba(31,50,65,.13)!important;
    z-index:20!important;
  }
  body.public-map .sidebar .search-box input{
    height:46px!important;
    min-height:46px!important;
    width:100%!important;
    padding:0 14px!important;
    border:1px solid #e1e7ec!important;
    border-radius:13px!important;
    background:#fff!important;
    box-shadow:none!important;
    font-size:14px!important;
    font-weight:600!important;
    color:#465568!important;
    text-align:right!important;
  }
  body.public-map .sidebar .search-box button{
    flex:0 0 46px!important;
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    border-radius:13px!important;
    background:var(--ref-teal)!important;
    color:#fff!important;
    box-shadow:none!important;
    order:0!important;
  }
  body.public-map .search-icon-svg{width:22px!important;height:22px!important;}

  body.public-map .menu-btn{
    top:calc(22px + var(--safe-top))!important;
    right:18px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    border-radius:13px!important;
    background:var(--ref-teal)!important;
    color:#fff!important;
    border:0!important;
    box-shadow:none!important;
    font-size:24px!important;
    z-index:50!important;
  }

  /* Bottom white panel: total row + four status cards */
  body.public-map .sidebar .statistics-card{
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + var(--safe-bottom))!important;
    height:137px!important;
    padding:0!important;
    background:#fff!important;
    border:1px solid rgba(24,44,59,.08)!important;
    border-radius:18px!important;
    box-shadow:0 10px 28px rgba(31,50,65,.14)!important;
    overflow:hidden!important;
  }

  body.public-map .statistics-card .stats-grid{
    position:absolute!important;
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    height:58px!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  body.public-map .statistics-card .stat-item{
    position:relative!important;
    min-width:0!important;
    min-height:58px!important;
    height:58px!important;
    padding:6px 3px 4px!important;
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    grid-template-rows:28px 22px!important;
    column-gap:4px!important;
    align-items:center!important;
    justify-items:center!important;
    border:1px solid #e7ecef!important;
    border-radius:13px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(31,50,65,.08)!important;
    text-align:center!important;
  }
  body.public-map .statistics-card .stat-item::after{
    height:3px!important;
    opacity:1!important;
    border-radius:0 0 13px 13px!important;
  }
  body.public-map .statistics-card .stat-icon{
    grid-column:1!important;
    grid-row:1!important;
    width:30px!important;
    height:30px!important;
    flex:none!important;
    border-radius:9px!important;
    margin:0!important;
    font-size:17px!important;
    box-shadow:none!important;
    align-self:center!important;
  }
  body.public-map .statistics-card .stat-item > div{
    grid-column:2!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    flex-direction:row!important;
  }
  body.public-map .statistics-card .stat-item small{
    display:block!important;
    order:0!important;
    margin:0!important;
    max-width:100%!important;
    font-size:8px!important;
    line-height:1!important;
    color:#465568!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }
  body.public-map .statistics-card .stat-item strong{
    grid-column:1 / 3!important;
    grid-row:2!important;
    display:block!important;
    order:0!important;
    margin:0!important;
    font-size:16px!important;
    line-height:1!important;
    color:#1b2b3d!important;
    font-weight:900!important;
  }

  /* exact status order: temporary | reserved | sold | available */
  body.public-map .statistics-card .stat-temporary{grid-column:1!important;grid-row:1!important;color:var(--ref-orange)!important;}
  body.public-map .statistics-card .stat-reserved{grid-column:2!important;grid-row:1!important;color:var(--ref-blue)!important;}
  body.public-map .statistics-card .stat-sold{grid-column:3!important;grid-row:1!important;color:var(--ref-red)!important;}
  body.public-map .statistics-card .stat-available{grid-column:4!important;grid-row:1!important;color:var(--ref-green)!important;}
  body.public-map .statistics-card .stat-temporary .stat-icon{background:var(--ref-orange)!important;}
  body.public-map .statistics-card .stat-reserved .stat-icon{background:var(--ref-blue)!important;}
  body.public-map .statistics-card .stat-sold .stat-icon{background:var(--ref-red)!important;}
  body.public-map .statistics-card .stat-available .stat-icon{background:var(--ref-green)!important;}

  /* Total: compact, centered, same line — exactly above the four cards */
  body.public-map .statistics-card .stat-total{
    position:absolute!important;
    left:8px!important;
    right:8px!important;
    top:8px!important;
    bottom:auto!important;
    width:auto!important;
    height:51px!important;
    min-height:51px!important;
    padding:0 20px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:16px!important;
    border:0!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:none!important;
    color:#172033!important;
  }
  body.public-map .statistics-card .stat-total .stat-icon{display:none!important;}
  body.public-map .statistics-card .stat-total > div{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:row!important;
    gap:16px!important;
    width:auto!important;
    min-width:0!important;
  }
  body.public-map .statistics-card .stat-total > div::before{
    content:""!important;
    width:1px!important;
    height:27px!important;
    background:#d7dee4!important;
    order:2!important;
  }
  body.public-map .statistics-card .stat-total small{
    order:3!important;
    display:block!important;
    font-size:14px!important;
    line-height:1!important;
    color:#25364a!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
  body.public-map .statistics-card .stat-total strong{
    order:1!important;
    display:block!important;
    font-size:23px!important;
    line-height:1!important;
    color:var(--ref-teal)!important;
    font-weight:900!important;
    margin:0!important;
  }

  body.public-map .leaflet-control-attribution{
    bottom:151px!important;
    right:3px!important;
    font-size:6px!important;
    opacity:.55!important;
  }
}

/* ==========================================================
   FIX — MOBILE STATISTICS VISIBILITY
   Prevent the four status cards from being clipped by the
   older absolute-position mobile rules.
   ========================================================== */
@media (max-width:800px){
  body.public-map .statistics-card{
    overflow:visible!important;
    height:auto!important;
    min-height:0!important;
  }
  body.public-map .statistics-card .stats-grid,
  .statistics-card .stats-grid{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:auto auto!important;
    gap:8px!important;
    overflow:visible!important;
  }
  body.public-map .statistics-card .stat-total{
    position:relative!important;
    grid-column:1 / -1!important;
    grid-row:1!important;
    inset:auto!important;
    width:100%!important;
  }
  body.public-map .statistics-card .stat-available{grid-column:4!important;grid-row:2!important;}
  body.public-map .statistics-card .stat-sold{grid-column:3!important;grid-row:2!important;}
  body.public-map .statistics-card .stat-reserved{grid-column:2!important;grid-row:2!important;}
  body.public-map .statistics-card .stat-temporary{grid-column:1!important;grid-row:2!important;}

  /* Ensure the icons are always visible beside their labels. */
  body.public-map .statistics-card .stat-item:not(.stat-total) .stat-icon{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* ==========================================================
   DESKTOP — Temporary Reservation visual parity with Mobile
   Only applies to desktop; mobile styles remain untouched.
   ========================================================== */
@media (min-width: 901px){
  #map .plot-glow-status-5{
    --glow-main:#f97316 !important;
    --glow-fill:#f97316 !important;
    --glow-soft:rgba(249,115,22,.20) !important;
  }

  /* Same temporary-reservation label treatment used by Mobile:
     orange plot + clear white, soft glow around "حجز مؤقت". */
  #map .plot-status-label-temporary{
    color:#f4f6f8 !important;
    -webkit-text-fill-color:#f4f6f8 !important;
    /* Desktop: very soft white light, no visible halo. */
    text-shadow:
      0 -1px 0 rgba(255,255,255,.48),
      0 1px 0 rgba(255,255,255,.16),
      0 0 1px rgba(255,255,255,.18) !important;
    filter:none !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;
}