html,body{margin:0;background:#0b1622}
#openseadragon-viewer{background:#0b1622}
.openseadragon-container{background:#0b1622 !important}
.marker-container{position:absolute}
.marker-container svg{overflow:visible}
#markers{overflow:visible}
#loader{background:#0b1622}
.no-scrollbar::-webkit-scrollbar{display:none}
body.ui-hidden header,
body.ui-hidden #zoomrail,
body.ui-hidden #filters,
body.ui-hidden #viewtabs-wrap,
body.ui-hidden #markers{opacity:0;pointer-events:none;transition:opacity .3s}

/* --- house style overrides on top of Aldar's compiled CSS --- */

/* Explore stays the light blue from the approved composite, not Aldar's orange */
button[data-explore]{background-color:#86c8ee !important;border-radius:8px}
button[data-explore] span{color:#0e2a3c !important;font-weight:500}
button[data-explore]:hover{background-color:#9ed4f2 !important}

/* area cards and their panels get real rounded corners */
.marker-container .rounded-sm{border-radius:12px}
.marker-container .w-56{border-radius:14px}
.marker-container .rounded-sm > .inline-flex{border-radius:10px}

/* Masdar City / Burtville mode */
#masdar-button.on{border-color:#86c8ee !important;background:rgba(10,26,38,.9) !important}
#masdar-button:hover{border-color:rgba(255,255,255,.5)}
body.burtville-mode #viewtabs-wrap{display:none !important}

/* Rules for the classes this clone adds. Aldar's compiled CSS only carries the utilities
   Aldar itself uses, so anything new has to bring its own rule or it silently does nothing
   (the unit card lost its background this way). */
.bg-\[\#161616\]\/95{background-color:rgba(22,22,22,.95)}
.bg-white\/5{background-color:rgba(255,255,255,.05)}
.backdrop-blur-lg{backdrop-filter:blur(16px)}
.aspect-square{aspect-ratio:1/1}
.pb-5{padding-bottom:1.25rem}
.-right-2{right:-.5rem}
.min-h-\[280px\]{min-height:280px}
.max-h-\[88vh\]{max-height:88vh}
.max-h-\[92vh\]{max-height:92vh}
.w-\[min\(900px\2c 92vw\)\]{width:min(900px,92vw)}
.w-\[min\(1200px\2c 94vw\)\]{width:min(1200px,94vw)}
#alraha-button.on{border-color:#86c8ee !important;background:rgba(10,26,38,.9) !important}
#alraha-button:hover{border-color:rgba(255,255,255,.5)}

/* an area card sizes to its title so Al Ghadeer Gardens stays on one line */
.marker-container .w-56{width:auto !important;min-width:14rem;white-space:nowrap}
.marker-container .w-56 p{white-space:nowrap}