/* OPET identity on the supplied Apple component and spacing system. */
@font-face{font-family:OPET Inter;src:url('./brand/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:OPET Inter;src:url('./brand/Inter-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:OPET Inter;src:url('./brand/Inter-SemiBold.ttf') format('truetype');font-weight:600 800;font-display:swap}
:root,[data-theme=night]{
 --bg:#000;--surface:#000;--surface-warm:#202627;--fg:#fff;--fg-2:#e5e5e5;--muted:#a9b6b7;--meta:#a9b6b7;
 --accent:#00f3ff;--accent-on:#000;--accent-hover:#73f9ff;--accent-active:#2d6b70;--opet-teal:#2d6b70;
 --border:rgba(229,229,229,.18);--border-soft:rgba(229,229,229,.09);--panel:#000;--paper:#000;--ink:#fff;
 --font-body:'Arboria','OPET Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --font-display:'Arboria','OPET Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --radius-card:24px;--radius-control:12px;--radius-pill:980px;--focus-ring:0 0 0 3px rgba(0,243,255,.4);
 --elev-raised:0 8px 32px rgba(0,0,0,.18);--motion-base:180ms;--ease-standard:cubic-bezier(.28,0,.22,1);
 color-scheme:dark;
}
html,body{font-family:var(--font-body);color:var(--fg);background:var(--bg)}
button,input,textarea,select{font-family:inherit}
button,a,input,textarea{transition:background-color var(--motion-base) var(--ease-standard),color var(--motion-base),border-color var(--motion-base),box-shadow var(--motion-base)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
button:active:not(:disabled){filter:brightness(.9)}
button:disabled{cursor:not-allowed;opacity:.55}
.bg-bg1{background:var(--panel)!important}
.bg-gray1{background:rgba(229,229,229,.1)!important}
.bg-gray2{background:rgba(45,107,112,.46)!important}
.text-text-secondary{color:var(--muted)!important}
.hover\:bg-gray1:hover,.hover\:bg-gray2:hover{background:rgba(45,107,112,.5)!important}
[class*='border-[#393939]'],[class*='border-[#222222]']{border-color:var(--border)!important}
[class*='bg-[#222222]'],[class*='bg-[#232323DB]']{background:rgba(229,229,229,.055)!important}
/* Navigation: quiet glass, a properly spaced wordmark, and pill breadcrumbs. */
.opet-navigation{top:24px!important;left:24px!important;max-width:calc(100vw - 160px);z-index:220}
.opet-nav-bar{height:72px!important;gap:0!important;border-radius:var(--radius-card)!important;background:var(--panel)!important;border:1px solid var(--border);box-shadow:var(--elev-raised);backdrop-filter:blur(24px);overflow:hidden}
.opet-brand{padding:24px!important;min-width:126px;background:transparent!important;border-radius:0!important;border-right:1px solid var(--border-soft)}
.opet-brand img{height:24px!important;width:auto!important;max-width:none;object-fit:contain}
.opet-nav-bar>.bg-bg1{background:transparent!important;border-radius:0!important}
.opet-nav-bar>.bg-bg1>div{padding:12px 16px!important;gap:12px!important}
.opet-navigation a,.opet-navigation button{font-size:13px;font-weight:500;letter-spacing:-.015em;border-radius:var(--radius-pill)!important;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.opet-navigation a.bg-gray1{background:rgba(0,243,255,.12)!important;color:var(--accent)!important}
.opet-navigation button[data-ui-more]{margin:12px 10px 12px 0;min-height:40px;padding:0 12px;background:transparent!important}
.opet-navigation>div:nth-child(2){border-radius:20px!important;backdrop-filter:blur(24px)}
.opet-navigation>div:nth-child(2):not(.max-h-0){border:1px solid var(--border);box-shadow:var(--elev-raised)}
.opet-navigation>div:nth-child(2) a{justify-content:flex-start;padding:12px 18px}
/* Toolbars use circular 44px hit areas rather than tiny square buttons. */
.opet-icon-button{width:44px!important;height:44px!important;border-radius:50%!important;background:transparent!important;color:var(--fg)}
.opet-icon-button svg{width:19px;height:19px}
.opet-icon-button.bg-gray1{background:rgba(0,243,255,.16)!important;color:var(--accent)}
.opet-icon-button.bg-gray1 svg [stroke=white]{stroke:var(--accent)}
.opet-icon-button:hover{background:rgba(229,229,229,.13)!important}
.absolute.bg-bg1:has(>.group),.absolute.bg-bg1:has(>.opet-icon-button){padding:6px!important;border:1px solid var(--border);border-radius:30px!important;box-shadow:var(--elev-raised);backdrop-filter:blur(24px)}
.absolute.right-4{right:24px}
.absolute.bottom-4{bottom:24px}
.absolute.top-4:not(.opet-navigation){top:24px}
.absolute.left-4:not(.opet-navigation){left:24px}
[class*='top-[calc(50px_+_2rem)]'],[class*='top-[calc(2rem_+_50px)]']{top:112px!important}
.group>div.invisible{border:1px solid var(--border);border-radius:10px;min-height:36px;padding:0 12px;background:var(--surface)!important;color:var(--fg-2);font-size:12px;box-shadow:var(--elev-raised)}
.group>div.invisible::before{display:none}
/* Light configurator cards provide the second, quieter Apple surface. */
.opet-filter-panel{background:rgba(250,250,252,.97)!important;color:var(--ink);border-radius:var(--radius-card);border:1px solid rgba(255,255,255,.65);box-shadow:var(--elev-raised);overflow:hidden}
.opet-filter-panel>h3{font-size:18px;letter-spacing:-.03em;font-weight:600;padding:20px 20px 16px;border-color:rgba(29,29,31,.1)!important}
.opet-filter-panel>div>div{gap:12px;padding:16px}
.opet-filter-panel button{min-height:36px;border-radius:10px;font-size:12px;color:var(--ink);font-weight:500}
.opet-filter-panel button:hover{background:rgba(45,107,112,.1)!important}
.opet-filter-panel .bg-gray1,.opet-filter-panel .bg-gray2{background:rgba(45,107,112,.13)!important;color:var(--ink)}
.opet-filter-panel .text-white,.opet-filter-panel .text-text-primary,.opet-filter-panel .label-text{color:var(--ink)!important}
.opet-filter-panel .text-text-secondary{color:#62666a!important}
.opet-filter-panel svg [stroke=white]{stroke:var(--opet-teal)}
.opet-filter-panel svg [fill=white]{fill:var(--opet-teal)}
.opet-filter-panel>button:last-child{background:rgba(29,29,31,.035)!important;border-radius:0;min-height:32px;border-top:1px solid rgba(29,29,31,.08)}
.opet-filter-panel [class*='border-[#393939]']{border-color:rgba(29,29,31,.14)!important}
.opet-filter-panel [role=slider]{border-color:var(--opet-teal)!important;background:var(--opet-teal)!important}
.opet-filter-panel input[type=checkbox]{accent-color:var(--opet-teal)}
@media(min-width:768px){.opet-filter-panel{width:232px!important;max-width:232px!important}[class*='md:left-[calc(1.75rem_+_200px)]']{left:272px!important}}
/* Selected controls and content dialogs. */
button.bg-gray1:not(.opet-icon-button){box-shadow:inset 0 0 0 1px rgba(0,243,255,.24)}
.opet-filter-panel button.bg-gray1{box-shadow:inset 0 0 0 1px rgba(45,107,112,.3)}
.modal{font-family:var(--font-body)}
.modal::backdrop{background:rgba(0,0,0,.58);backdrop-filter:blur(8px)}
.modal-backdrop{background:rgba(0,0,0,.4)!important;backdrop-filter:blur(6px)}
.modal-box{background:var(--surface)!important;color:var(--fg);border:1px solid var(--border);border-radius:28px!important;box-shadow:0 24px 80px rgba(0,0,0,.4)}
form.modal-box{padding:32px;max-width:580px}
form.modal-box>h3{text-align:left;font-size:28px;letter-spacing:-.035em;font-weight:600;margin-bottom:12px}
.modal-box .input,.modal-box .textarea{background:rgba(229,229,229,.055);border:1px solid var(--border);border-radius:12px;color:var(--fg);font-size:14px;min-height:46px}
.modal-box .label-text{font-size:12px;color:var(--muted)}
.modal-box .btn{border:0;border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-on);font-weight:600;min-height:44px}
.modal-action{min-height:64px;border-bottom:1px solid var(--border-soft)}
.modal-action>p{font-size:18px;font-weight:500}
.modal-box [class*='border-gray']{border-color:var(--border)!important;background:rgba(45,107,112,.13)!important;border-radius:12px}
.opet-offline-note{font-size:13px;line-height:1.5;margin:8px 0 20px;color:var(--muted);padding-left:12px;border-left:2px solid var(--opet-teal)}
.opet-signature{display:flex;align-items:center;gap:22px;height:64px;padding:20px 24px;left:24px!important;bottom:24px!important;width:auto;max-width:calc(100vw - 130px);background:var(--panel);border:1px solid var(--border);border-radius:22px;backdrop-filter:blur(24px);box-shadow:var(--elev-raised)}
.opet-signature.hidden{display:none!important}
.opet-signature img{height:24px!important;width:auto!important;object-fit:contain}
.opet-signature-label{font-size:11px;letter-spacing:.01em;color:var(--muted);white-space:nowrap}
.first-time-loading{background:var(--bg)}
.first-time-loading>img{opacity:.3}
.first-time-loading>div img{width:160px!important;height:auto;filter:none}
.first-time-loading .loader{color:var(--accent)}
#nprogress .bar{background:var(--accent)}
#nprogress .peg{box-shadow:none}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:rgba(45,107,112,.45);border-radius:10px}
@media(max-width:767px){
 .opet-navigation{left:16px!important;top:16px!important;width:calc(100vw - 32px)!important;max-width:none}
 .opet-nav-bar{height:64px!important;border-radius:22px!important}
 .opet-brand{padding:20px!important;min-width:116px}
 .opet-brand img{height:24px!important}
 .opet-nav-bar>.bg-bg1{min-width:0}
 .opet-nav-bar>.bg-bg1>div{padding:8px 10px!important;gap:8px!important}
 .opet-navigation button{font-size:12px}
 .opet-navigation button.relative{padding:8px 22px 8px 10px;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
 .opet-navigation>div:nth-child(2) a{font-size:14px}
 [class*='top-[calc(50px_+_2rem)]'],[class*='top-[calc(2rem_+_50px)]']{top:96px!important}
 .absolute.right-4{right:16px}.absolute.left-4:not(.opet-navigation){left:16px}.absolute.bottom-4{bottom:16px}
 .opet-signature{left:16px!important;bottom:16px!important;height:60px;padding:18px 20px;gap:18px;border-radius:20px}
 .opet-signature-label{display:none}
 .opet-filter-panel{max-height:calc(100svh - 210px);overflow-y:auto}
 form.modal-box{padding:24px}.modal-box{max-width:calc(100vw - 24px)}
 form.modal-box>h3{font-size:24px}
}
@media(max-width:374px){.opet-brand{padding:20px 16px!important;min-width:108px}.opet-navigation button{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Refinements from desktop and touch-target QA. */
.opet-filter-panel button.opet-type-button{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;min-height:36px;padding:8px 10px;background:transparent!important;border:1px solid transparent}
.opet-type-button::before{content:'';width:9px;height:9px;flex-shrink:0;border-radius:50%;background:var(--unit-color)}
.opet-type-button::after{content:'✓';margin-left:auto;color:var(--opet-teal);font-size:13px}
.opet-type-button[aria-pressed=false]{opacity:.45}
.opet-type-button[aria-pressed=false]::after{content:'+'}
.opet-filter-panel button.opet-type-button[aria-pressed=true]{background:rgba(45,107,112,.065)!important}
.opet-filter-panel .peer[data-tab]{color:transparent}
.opet-filter-panel .peer[data-tab]~button{color:#62666a!important;min-height:36px;font-size:12px}
.opet-filter-panel .peer[data-tab=type]~button:nth-of-type(1),.opet-filter-panel .peer[data-tab=availability]~button:nth-of-type(2){color:var(--ink)!important;background:#e5e5e5!important;font-weight:600;border-radius:10px}
.opet-filter-panel button[role=slider]{width:16px!important;height:16px!important;min-height:16px!important;border-radius:50%!important;border:3px solid white!important;box-shadow:0 1px 5px rgba(0,0,0,.25)}
.opet-filter-panel button[role=slider]::after{content:'';position:absolute;inset:-12px}
.opet-filter-panel .mb-2.flex.flex-col.gap-6{gap:34px;padding-bottom:14px}
.absolute.right-16,.absolute[class*='right-[68px]']{right:94px!important}
.absolute.bottom-4[class*='right-[68px]']{border:1px solid var(--border);border-radius:24px!important;padding:12px!important;min-height:56px;backdrop-filter:blur(24px);box-shadow:var(--elev-raised)}
@media(min-width:768px){.absolute[class*='md:top-4']:not(.opet-navigation){top:24px!important}}
@media(max-width:767px){.absolute.right-16,.absolute[class*='right-[68px]']{right:86px!important}}
/* Keep map overlays compositor-safe above the accelerated canvas. */
.opet-nav-bar,.opet-navigation>div:nth-child(2),.absolute.bg-bg1,.opet-signature,.modal-backdrop{backdrop-filter:none!important}
.opet-nav-bar,.opet-signature,.absolute.bg-bg1:has(>.group){background:#000!important}
@media(max-width:767px){
 .opet-navigation button[data-ui-more]{display:none!important}
 .absolute.bottom-4[class*='right-[68px]']{width:calc(100vw - 232px);max-width:166px;min-width:0;padding:8px!important;min-height:60px}
 .absolute.bottom-4[class*='right-[68px]']>div,.absolute.bottom-4[class*='right-[68px]'] button{min-width:0;max-width:100%;font-size:12px}
}
.opet-filter-panel{background:var(--paper)!important}
.opet-dialog-close{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;background:rgba(229,229,229,.08);color:var(--fg);font-size:24px;line-height:1}
form.modal-box>h3{padding-right:36px}

/* Black panels and OPET / CUBE partnership lockup. */
.opet-filter-panel{background:#000!important;color:#fff;border-color:var(--border)}
.opet-filter-panel>h3,.opet-filter-panel [class*='border-[#393939]']{border-color:var(--border)!important}
.opet-filter-panel .text-text-secondary,.opet-filter-panel .peer[data-tab]~button{color:#a9b6b7!important}
.opet-filter-panel .peer[data-tab=type]~button:nth-of-type(1),.opet-filter-panel .peer[data-tab=availability]~button:nth-of-type(2){background:#163438!important;color:#00f3ff!important}
.opet-filter-panel button.opet-type-button[aria-pressed=true]{background:#101b1c!important}
.opet-filter-panel button:hover{background:#163438!important}
.opet-filter-panel>button:last-child{background:#090d0d!important;border-color:var(--border)}
.opet-type-button::after{color:#00f3ff}
.opet-filter-panel svg [stroke=white]{stroke:#00f3ff}.opet-filter-panel svg [fill=white]{fill:#00f3ff}
.opet-filter-panel button[role=slider]{border-color:#e5e5e5!important}
.opet-brand{gap:14px;padding:8px 18px!important;flex-shrink:0}
.opet-brand img.cube-brand-logo,.opet-signature img.cube-brand-logo{width:112px!important;height:56px!important;object-fit:contain}
.opet-signature{gap:14px;padding:4px 18px;background:#000!important}
@media(max-width:767px){
 .opet-brand{gap:10px;padding:8px 12px!important;min-width:0}
 .opet-brand img:not(.cube-brand-logo),.opet-signature img:not(.cube-brand-logo){height:20px!important}
 .opet-brand img.cube-brand-logo,.opet-signature img.cube-brand-logo{width:96px!important;height:48px!important}
 .opet-signature{padding:6px 12px;gap:10px}
 .absolute.bottom-4[class*='right-[68px]']{width:calc(100vw - 306px);max-width:166px}
}

@media(min-width:768px){.opet-filter-panel{max-height:calc(100svh - 210px);overflow-y:auto}}

/* CUBE appears only in the footer; show the logo without the service label. */
.cube-logo-crop{display:block;width:112px;height:24px;overflow:hidden;flex-shrink:0}
.opet-signature .cube-logo-crop img.cube-brand-logo{display:block;transform:translateY(-12px)}
@media(max-width:767px){.cube-logo-crop{width:96px;height:22px}.opet-signature .cube-logo-crop img.cube-brand-logo{transform:translateY(-10px)}}

/* Original compact filter geometry: fit both availability rows and slider labels. */
.opet-filter-panel .opet-availability-grid{gap:4px}
.opet-filter-panel .opet-availability-button{min-height:28px;height:28px;padding:4px 6px;border-radius:4px;line-height:18px;box-sizing:border-box}
.opet-filter-panel .opet-availability-button[aria-pressed=true]{background:#2d6b70!important;color:#fff!important;border-color:#58b7be!important}
.opet-filter-panel .opet-availability-button[aria-pressed=false]{background:#080b0b!important;color:#a9b6b7!important;border-color:#333!important}
.opet-filter-panel .opet-range-controls{gap:24px;padding:4px 2px 8px}
.opet-filter-panel .opet-range-field{height:auto;min-height:32px;padding-top:4px}
.opet-filter-panel .opet-range-field>div:first-child{margin:0 4px}
.opet-filter-panel button[role=slider]{width:12px!important;height:12px!important;min-height:12px!important;padding:0!important;border:0!important;background:#424242!important;border-radius:50%!important;box-shadow:none;touch-action:none;transition:none}
.opet-filter-panel button[role=slider]:hover,.opet-filter-panel button[role=slider]:focus-visible{background:#00f3ff!important}
.opet-filter-panel button[role=slider]::after{inset:-8px}
.opet-filter-panel .opet-map-filter-button{min-height:38px;text-align:left;background:#000!important;border:1px solid #292f30!important;transition:background-color .15s,border-color .15s}
.opet-filter-panel .opet-map-filter-button[aria-pressed=true]{background:#163438!important;border-color:#2d6b70!important;color:#fff!important}
.opet-filter-panel .opet-map-filter-button::after{content:'+';margin-left:auto;color:#819394;font-size:16px}
.opet-filter-panel .opet-map-filter-button[aria-pressed=true]::after{content:'✓';color:#00f3ff}
.opet-filter-panel .opet-map-filter-button[aria-pressed=false]{color:#a9b6b7!important}
.opet-filter-panel .opet-map-filter-button[aria-pressed=false] svg{color:#819394}
.opet-filter-panel .opet-map-filter-button:active{transform:scale(.98)}
.opet-filter-panel .toggle:checked{background-color:#00f3ff!important;--tglbg:#163438!important;border-color:#00f3ff!important}

/* Keep one scrolling body, with the title and collapse control fixed. */
.opet-filter-panel{display:flex;flex-direction:column;overflow:hidden!important}
.opet-filter-panel>h3,.opet-filter-panel>button:last-child{flex-shrink:0}
.opet-filter-panel>div{min-height:0;overflow-y:auto}
.opet-filter-panel>div:not(.max-h-0){max-height:none!important}
.opet-filter-panel>div>div{flex-shrink:0}

/* Handles face outwards, so even a one-step interval keeps both controls distinct. */
.opet-filter-panel .opet-range-field>div:first-child{margin:0 12px}
.opet-filter-panel button[role=slider]::after{inset:-8px 0}

/* Restored original Al Abrar project identity in the navigation. */
.opet-brand{min-width:72px!important;padding:10px 18px!important}
.opet-brand img.abrar-header-logo{height:44px!important;width:auto!important;max-width:48px;object-fit:contain}
@media(max-width:767px){.opet-brand{min-width:64px!important;padding:10px 14px!important}.opet-brand img.abrar-header-logo{height:40px!important}}

/* Reserve the right toolbar lane when showing villa or apartment details. */
.opet-property-card{top:112px!important;right:94px!important;bottom:auto!important;width:288px;max-width:calc(100vw - 118px);max-height:calc(100svh - 224px);overflow-y:auto!important;border:1px solid var(--border);border-radius:20px!important}
.opet-property-card>div:first-child{width:100%!important}
.opet-property-card>div:last-child a{min-width:0;white-space:normal!important;text-align:center}
@media(max-width:767px){.opet-property-card{top:168px!important;right:86px!important;width:288px;max-width:calc(100vw - 102px);max-height:calc(100svh - 280px)}.opet-property-card>div:first-child{padding:12px}.opet-property-card>div:last-child{flex-wrap:wrap}.opet-property-card>div:last-child a{flex-basis:90px}}

/* Let project information fit its content instead of clipping the video CTA at 260px. */
.opet-project-info-open{max-height:calc(100svh - 200px);overflow-y:auto!important;border:1px solid var(--border);border-radius:16px}
.opet-project-info>div{max-width:calc(100vw - 32px)}
.opet-project-info button{min-height:40px;margin-bottom:2px}

/* Master-plan polygon styles supplied by the user. */
.master-plan-svg>[data-name*=VILLA]{opacity:.35}
.master-plan-svg>[data-name*=VILLA]:not([data-type=unavailable],[data-type=building]){stroke:#fff;stroke-width:.4}
.master-plan-svg>[data-name*=VILLA][data-type="type a"]{fill:#fcf214}