/* OceaniQ final polish layer — loaded last so it can refine the existing system. */
:root{--oq-cyan:#0ed9e7;--oq-ink:#2e3748;--oq-sage:#738d78;--oq-paper:#fff;--oq-soft:#f4f7f7}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--oq-paper);color:var(--oq-ink)}
button,a,input,select,textarea{font-variant-numeric:tabular-nums}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--oq-cyan);outline-offset:3px}
.header{box-shadow:0 1px 0 rgba(46,55,72,.03),0 10px 28px rgba(46,55,72,.035)}
.brand-lockup{filter:drop-shadow(0 4px 9px rgba(46,55,72,.08))}
.nav-button,.collection-trigger,.locale-trigger,.header-action,.map-tool-button,.hotel-explore-button,.view-toggle-button,.map-control-text,.map-zoom button,.primary-button,.secondary-button,.property-action,.villa-card,.apartment-card{transition:transform .2s cubic-bezier(.2,.8,.2,1),background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}
.is-pressing{transform:scale(.97)!important}
.map-topbar{box-shadow:0 1px 0 rgba(46,55,72,.02)}
.map-heading h1{max-width:19ch}
.map-actions{align-items:stretch}
.map-tool-button,.hotel-explore-button,.view-toggle{box-shadow:0 5px 18px rgba(46,55,72,.06)}
.map-tool-button:hover,.hotel-explore-button:hover,.hotel-explore-button.is-highlighted,.view-toggle-button:hover{transform:translateY(-1px)}
.view-toggle{border-radius:10px;padding:4px;gap:2px}
.view-toggle-button{min-height:32px;border-radius:7px;font-weight:600}
.view-toggle-button.active{box-shadow:0 5px 13px rgba(46,55,72,.22)}
.map-mode-badge{display:inline-flex;align-items:center;gap:7px;color:var(--oq-ink);font-size:10px;font-weight:800;letter-spacing:1.3px;white-space:nowrap}
.map-mode-badge:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--oq-cyan);box-shadow:0 0 0 4px rgba(14,217,231,.13)}
.map-mode-badge[data-mode=sky]:before{background:#d6bda8;box-shadow:0 0 0 4px rgba(214,189,168,.18)}
.map-help{gap:13px}
.map-help #mapHint{opacity:.82}
.map-image-status{font-variant-numeric:tabular-nums;opacity:.64;letter-spacing:.04em;font-size:10px}
.keyboard-hints{display:inline-flex;align-items:center;gap:4px;opacity:.58;font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.keyboard-hints kbd{min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:4px;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:0;text-transform:none}
.map-image-status:empty{display:none}
.master-image.image-failed{opacity:0!important}
.map-viewport{isolation:isolate}
.map-viewport:focus-visible{outline:3px solid var(--oq-cyan);outline-offset:-3px}
.map-world{backface-visibility:hidden}
.map-world .masterplan-sky-backdrop{background-image:none!important}
body.masterplan-skyview .map-world .masterplan-sky-backdrop{background-image:url('assets/bright/masterplan-skyview.webp')!important}
.map-world>#skyHotspots{overflow:visible}
.sky-hotel-hit{cursor:pointer;outline:none}
.sky-hotel-hit>polygon{fill:rgba(14,217,231,.001);stroke:rgba(14,217,231,0);stroke-width:3;vector-effect:non-scaling-stroke;pointer-events:all;transition:fill .22s ease,stroke .22s ease,filter .22s ease}
.sky-hotel-hit:hover>polygon,.sky-hotel-hit:focus-visible>polygon{fill:rgba(14,217,231,.12);stroke:rgba(183,255,244,.94);filter:drop-shadow(0 0 9px rgba(14,217,231,.45))}
.sky-hotel-callout{pointer-events:none;opacity:.92;transition:opacity .2s ease,transform .2s ease}
.sky-hotel-callout rect{fill:rgba(46,55,72,.9);stroke:rgba(255,255,255,.84);stroke-width:1.2;vector-effect:non-scaling-stroke}
.sky-hotel-callout path{fill:rgba(46,55,72,.9);stroke:rgba(255,255,255,.84);stroke-width:1.2;vector-effect:non-scaling-stroke}
.sky-hotel-callout text{fill:#fff;font:700 14px 'DM Sans',sans-serif;letter-spacing:.2px}
.sky-hotel-hit:hover .sky-hotel-callout,.sky-hotel-hit:focus-visible .sky-hotel-callout{opacity:1;transform:translateY(-3px)}
.hover-card{border:1px solid rgba(14,217,231,.42);box-shadow:0 25px 70px rgba(46,55,72,.22),0 0 0 1px rgba(255,255,255,.65) inset}
.hover-card.visible{animation:polishCardIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes polishCardIn{from{opacity:.35;transform:translateY(10px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
.detail-panel{box-shadow:-18px 0 52px rgba(46,55,72,.1)}
.detail-top{box-shadow:0 5px 16px rgba(46,55,72,.035)}
.detail-top-actions{display:flex;align-items:center;gap:8px}
.detail-top-enquire{min-height:38px;padding:0 12px;border:1px solid rgba(14,217,231,.55);border-radius:999px;background:rgba(14,217,231,.12);color:var(--oq-ink);font-size:12px;font-weight:800;letter-spacing:.15px;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.detail-top-enquire:hover{background:var(--oq-cyan);border-color:var(--oq-cyan);transform:translateY(-1px)}
.detail-title>.property-actions{padding-bottom:2px}
.detail-panel .whatsapp-enquiry,.apt-info-column .whatsapp-enquiry{box-shadow:0 10px 22px rgba(14,217,231,.2);font-weight:700}
.detail-panel .whatsapp-enquiry:hover,.apt-info-column .whatsapp-enquiry:hover{transform:translateY(-2px);box-shadow:0 13px 27px rgba(14,217,231,.28)}
.detail-pagination,.apt-dialog-footer{position:relative}
.detail-pagination:after,.apt-dialog-footer:after{content:' ';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(14,217,231,.08),transparent 35%,transparent 65%,rgba(214,189,168,.08))}
.detail-pagination>* ,.apt-dialog-footer>*{position:relative;z-index:1}
.property-action:hover{transform:translateY(-1px)}
.villa-card,.apartment-card{box-shadow:0 8px 22px rgba(46,55,72,.045)}
.villa-card:hover,.apartment-card:hover{box-shadow:0 20px 42px rgba(46,55,72,.14)}
.villa-card.is-current{border-color:var(--oq-cyan);box-shadow:0 0 0 2px rgba(14,217,231,.14),0 16px 36px rgba(46,55,72,.11)}
.villa-card-open{height:100%}
.villa-result-count{font-variant-numeric:tabular-nums}
.collection-dialog,.share-dialog,.enquiry-dialog,.tour-dialog,.locale-panel,.layer-panel,.about-dialog{box-shadow:0 30px 90px rgba(46,55,72,.22),0 0 0 1px rgba(255,255,255,.55) inset}
.collection-tabs,.detail-tabs,.residence-modes{scrollbar-width:none}
.collection-tabs::-webkit-scrollbar,.detail-tabs::-webkit-scrollbar,.residence-modes::-webkit-scrollbar{display:none}
.media-dialog{background:#242c3b}
.media-dialog::backdrop{backdrop-filter:blur(10px)}
.gallery-loading{letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:rgba(255,255,255,.68)}
.media-stage[aria-busy=true] .gallery-loading{animation:polishPulse 1.35s ease-in-out infinite}
@keyframes polishPulse{0%,100%{opacity:.45}50%{opacity:1}}
.media-thumbs button{transition:opacity .2s ease,transform .2s ease,border-color .2s ease}
.media-thumbs button:hover{opacity:1;transform:translateY(-2px)}
.toast{border:1px solid rgba(14,217,231,.38);backdrop-filter:blur(12px);box-shadow:0 18px 42px rgba(46,55,72,.18)}
.welcome-overlay{backdrop-filter:blur(3px)}
.welcome-card{box-shadow:0 36px 120px rgba(46,55,72,.24),0 0 0 1px rgba(255,255,255,.65) inset}
.welcome-actions .primary-button,.welcome-actions .secondary-button{min-height:50px}
.layer-option{border:1px solid transparent;transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
.layer-option:has(input:focus-visible){outline:3px solid var(--oq-cyan);outline-offset:2px}
.layer-option:hover{transform:translateY(-1px)}
.hotel-view{scrollbar-color:rgba(214,189,168,.6) transparent}
.list-view,.hotel-view{content-visibility:auto;contain-intrinsic-size:900px}
.map-viewport{overscroll-behavior:contain;touch-action:none}
.map-bottom-bar{scrollbar-gutter:stable}
.apartment-card:focus-within,.villa-card:focus-within{outline:3px solid rgba(14,217,231,.55);outline-offset:3px}
body.masterplan-skyview .map-mode-badge{color:#fff;text-shadow:0 1px 10px rgba(6,36,30,.75)}
body.masterplan-skyview .map-help #mapHint{color:#fff;text-shadow:0 1px 10px rgba(6,36,30,.75)}
body.theme-night .map-mode-badge{color:#fff}
@media(max-width:900px){.map-heading h1{max-width:16ch}.map-mode-badge{font-size:9px}.map-help{gap:9px}.keyboard-hints{display:none}.map-image-status{font-size:9px}.detail-panel{box-shadow:-10px 0 35px rgba(46,55,72,.11)}}
@media(max-width:700px){
 .header{box-shadow:0 1px 0 rgba(46,55,72,.06),0 7px 18px rgba(46,55,72,.06)}
 .nav{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-width:0;padding-bottom:1px}
 .nav::-webkit-scrollbar{display:none}
 .nav-button{flex:0 0 auto}
 .map-mode-badge{font-size:9px;letter-spacing:1px}
 .map-help{justify-content:center;flex-wrap:wrap;row-gap:4px;column-gap:8px}
 .map-help #mapHint{max-width:30ch;text-align:center}
 .map-image-status{width:100%;text-align:center}
 .map-topbar .map-actions{align-items:stretch}
 .map-actions .map-tool-button,.map-actions .hotel-explore-button{min-height:42px}
 .view-toggle{width:100%;justify-content:center}
 .view-toggle-button{flex:1}
 .detail-panel .detail-title>.property-actions{gap:5px}
 .detail-panel .detail-title>.property-actions .property-action{min-height:40px}
 .detail-top-enquire{min-height:40px;padding-inline:11px}
 .collection-dialog,.share-dialog,.enquiry-dialog,.tour-dialog,.about-dialog{box-shadow:0 25px 80px rgba(46,55,72,.26)}
 .media-thumbs{padding-bottom:max(5px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.hover-card.visible,.media-stage[aria-busy=true] .gallery-loading{animation:none}.nav-button,.collection-trigger,.locale-trigger,.header-action,.map-tool-button,.hotel-explore-button,.view-toggle-button,.map-control-text,.map-zoom button,.primary-button,.secondary-button,.property-action,.villa-card,.apartment-card{transition:none}}
