/* Styles for homepage city map */
#home-city-map-wrapper { padding:18px 0; }
#home-city-map-wrapper h3 { margin-bottom:8px; }
#home-city-map-wrapper .map-note { margin-top:8px; font-size:90%; color:#666; }
#home-city-map { width:100%; height:520px; border:1px solid #ddd; border-radius:8px; }

/* cluster and marker styles */
.home-map .dev-cluster-icon { background: transparent; border: none; display:flex; align-items:center; justify-content:center; min-width:120px; height:56px; }
.home-map .cluster-multi { display:flex; flex-direction:row; align-items:center; gap:8px; padding:4px 8px; border-radius:10px; background: transparent; box-shadow:none; white-space:nowrap; }
.home-map .cluster-part { 
    display:flex; 
    flex-direction:column; 
    align-items:center;
 }
.home-map .cluster-num { 
    color:#fff; 
    background:rgba(0,0,0,0.7); 
    padding:3px 6px; 
    border-radius:10px; 
    line-height:1; 
    box-shadow:0 3px 8px rgba(0,0,0,0.28); 
}
.home-map .cluster-icon .icon-bg { border-radius:50%; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 40% 30%, rgba(0,200,255,0.35), rgba(0,140,200,0.08) 60%, transparent 70%); box-shadow: 0 6px 18px rgba(0,110,150,0.14), 0 0 22px rgba(0,200,255,0.18); position:relative; }
.home-map .cluster-icon .icon-bg::after { content: ""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background: radial-gradient(circle, rgba(0,200,255,0.18), rgba(0,140,200,0.04)); filter: blur(8px); z-index:-1; }
.home-map .dev-marker .icon-bg { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 40% 30%, rgba(0,200,255,0.35), rgba(0,140,200,0.08) 60%, transparent 70%); box-shadow: 0 8px 18px rgba(0,110,150,0.16), 0 0 36px rgba(0,200,255,0.14); position:relative; }
.home-map .dev-marker .icon-bg::after { content: ""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100px; height:100px; border-radius:50%; background: radial-gradient(circle, rgba(0,200,255,0.16), rgba(0,140,200,0.03)); filter: blur(10px); z-index:-1; }

/* modal common */
.dev-modal { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:99999; background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 6px 36px rgba(0,0,0,0.28); overflow:hidden; }
.dev-modal .modal-close { float:right; margin:8px; }
.dev-modal .modal-header { padding:8px 12px; border-bottom:1px solid #eee; }
.dev-modal .modal-body { padding:8px; }

.dev-review-modal { max-width:560px; width:80%; max-height:25vh; }
.dev-review-modal .modal-body { height:calc(25vh - 64px); }
.dev-review-modal .review-viewport { overflow:hidden; height:100%; }
.dev-review-modal .review-scroller { display:flex; gap:12px; height:100%; transition:transform 300ms ease; }
.dev-review-modal .modal-left, .dev-review-modal .modal-right { position:absolute; top:50%; transform:translateY(-50%); z-index:5; padding:6px 10px; }
.dev-review-modal .modal-left { left:12px; }
.dev-review-modal .modal-right { right:12px; }

.dev-review-modal .review-card { min-width:100%; box-sizing:border-box; padding:12px; border:1px solid #eee; border-radius:6px; }
.dev-review-modal .review-card .snippet { margin-top:8px; }
.modal-empty { padding:24px; }

.dev-gallery-modal { max-width:920px; width:94%; max-height:78vh; }
.dev-gallery-modal .modal-body { padding:12px; height:calc(78vh - 64px); }
.dev-gallery-modal .gallery-viewport { flex:1; overflow:hidden; position:relative; }
.dev-gallery-modal .gallery-scroller { display:flex; height:100%; transition:transform 300ms ease; }
.dev-gallery-modal .gallery-left, .dev-gallery-modal .gallery-right { position:absolute; top:50%; transform:translateY(-50%); z-index:5; padding:6px 10px; }
.dev-gallery-modal .gallery-left { left:8px; }
.dev-gallery-modal .gallery-right { right:8px; }

.dev-gallery-modal .gallery-cell { min-width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dev-gallery-modal img { max-width:100%; max-height:calc(100% - 48px); object-fit:contain; }
.dev-gallery-modal .gallery-caption { padding:8px 0; font-size:13px; color:#333; }

.home-map .popup-thumb { width:120px; height:auto; border-radius:6px; margin-top:6px; }
.home-map .popup-examples { padding-left:18px; margin:6px 0; }

/* simple responsive tweaks */
@media (max-width:600px){
  .home-map .dev-cluster-icon { min-width:90px; height:56px; }
  .home-map .cluster-icon .icon-bg::after { width:56px; height:56px; }
}