/* Calm, light look built from the project's own colours: warm stone, deep sky navy, sand gold. */
:root{
  --bg:#f6f3ed; --surface:#ffffff; --ink:#1c2b36; --muted:#5a6873; --line:#e4dfd5;
  --navy:#16324a; --navy-soft:#e9eef2; --gold:#8a6a1f; --gold-soft:#f5efe0; --green:#157347; --red:#a23b2e; --red-soft:#faf0ee;
  --display:"Readex Pro","IBM Plex Sans Arabic",Tahoma,sans-serif; --body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--body)}
h1,h2,p,ul,dl,dd,figure{margin:0;padding:0}
h2{font:700 1.05rem/1.4 var(--display);color:var(--navy);margin-bottom:10px}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit}

/* header */
.hero{position:relative;height:200px;overflow:hidden;background:var(--navy);border-radius:0 0 22px 22px;box-shadow:0 10px 26px rgb(22 50 74 / .2)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 50%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(16 37 54 / .78),rgb(16 37 54 / .28) 42%,rgb(16 37 54 / 0) 72%)}
.heroText{position:absolute;inset:auto 18px 14px;text-shadow:0 1px 8px rgb(10 25 38 / .55);z-index:1;color:#fff;max-width:600px;margin-inline:auto}
.brand{display:block;font:500 .85rem var(--display);letter-spacing:.3px;opacity:.9;direction:ltr;text-align:right}
.heroText h1{font:700 1.5rem/1.3 var(--display)}
.heroText p{font-size:.92rem;opacity:.92}

.wrap{max-width:600px;margin:0 auto;padding:18px 14px 28px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 4px 18px rgb(22 50 74 / .06)}

/* choices */
#pick{display:grid;gap:14px}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chips.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.chips+.chips{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.moreUnits{width:100%;min-height:50px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--navy-soft);border:1.5px solid var(--navy);border-radius:10px;color:var(--navy);font:700 1rem var(--display);cursor:pointer}
.moreUnits::after{content:"";width:9px;height:9px;border-inline-end:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:translateY(-2px) rotate(-45deg)}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.chip,.plan{min-height:44px;padding:6px 4px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;cursor:pointer;font-weight:500;line-height:1.3}
.chip[aria-pressed="true"],.plan[aria-pressed="true"],.unitBtn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.unitBtns{display:grid;gap:8px}
.unitBtn{width:100%;min-height:48px;padding:6px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;cursor:pointer;text-align:right}
.unitBtn b{font-weight:700;direction:ltr}
.unitBtn small{font-size:.85rem;opacity:.8;margin-inline-start:6px}
.unitBtn span:last-child{font-weight:700;white-space:nowrap}
select{width:100%;min-height:50px;font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:8px 12px}
.chip:focus-visible,.plan:focus-visible,.unitBtn:focus-visible,select:focus-visible,summary:focus-visible,.wa:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* the answer */
.answer{border:1.5px solid var(--navy);display:grid;gap:4px}
.unitLine{color:var(--muted);font-size:.92rem;margin-bottom:8px}
.mainLabel{font:700 1rem var(--display);color:var(--navy)}
.mainNum{color:var(--gold);line-height:1.2}
.mainNum b{font:700 2.3rem/1.2 var(--display)}
.mainNum span{font-size:1rem}
.mainNote{color:var(--muted);font-size:.9rem}
.rows{margin-top:12px;border-top:1px solid var(--line)}
.rows div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.rows dt small{display:block;color:var(--muted);font-size:.84rem}
.rows dd{font-weight:700;white-space:nowrap}
.wa{display:flex;align-items:center;justify-content:center;min-height:54px;background:var(--green);color:#fff;font:700 1.05rem var(--display);text-decoration:none;border-radius:11px;padding:8px 14px;text-align:center}
.answer .wa{margin-top:14px}
.waBar{position:fixed;inset:auto 0 0;z-index:5;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgb(22 50 74 / .1);padding:8px 14px calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:12px}
.waBar small{display:block;color:var(--muted);font-size:.82rem;line-height:1.2}
.waBar b{font:700 1.1rem var(--display);color:var(--gold)}
.waBar .wa{min-height:46px;font-size:.95rem;flex:0 0 auto}
body.barOn{padding-bottom:70px}

/* sold units */
.soldout{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 4px 18px rgb(22 50 74 / .06);display:grid;gap:10px}
.soldHead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.soldHead h2{color:var(--red);margin:0}
.soldBtn{flex:0 0 auto;min-height:40px;padding:4px 14px;background:var(--surface);border:1.5px solid var(--red);border-radius:9px;color:var(--red);font-weight:700;font-size:.92rem;cursor:pointer}
.soldBtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.soldGrid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.soldTile{background:var(--red);color:#fff;border-radius:9px;padding:8px 2px;text-align:center;display:grid;gap:1px;line-height:1.35}
.soldTile s{text-decoration-color:rgb(255 255 255 / .75);text-decoration-thickness:1.5px}
.soldTile .code{font-weight:700;font-size:.78rem;direction:ltr}
.soldTile .area{font-size:.8rem}
.soldTile .price{font-size:.76rem;opacity:.95}

/* the unit */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.specs div{background:var(--bg);border-radius:10px;padding:8px 12px}
.specs span{display:block;color:var(--muted);font-size:.82rem}
.specs b{font-weight:700}
.fig{display:grid;gap:6px;margin-top:12px}
.zoomable{display:block;width:100%;padding:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:zoom-in}
.zoomable img{width:100%;height:auto}
figcaption,.note{color:var(--muted);font-size:.88rem}

/* more details */
.more{display:grid;gap:8px}
.drop{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.drop summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;min-height:56px}
.drop summary::-webkit-details-marker{display:none}
.dt b{display:block;font:700 1rem var(--display);color:var(--navy)}
.dt small{display:block;color:var(--muted);font-size:.84rem}
.chev{flex:0 0 auto;width:10px;height:10px;border-inline-end:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg);transition:transform .15s}
.drop[open] .chev{transform:rotate(135deg)}
.dbody{padding:0 16px 16px;display:grid;gap:10px}
.sched{display:grid}
.sched h3{font:700 .95rem var(--display);color:var(--navy);background:var(--navy-soft);border-radius:7px;padding:4px 10px;margin:10px 0 2px}
.schedRow{display:flex;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line)}
.schedRow small{display:block;color:var(--muted);font-size:.85rem}
.schedRow>b{white-space:nowrap}
.schedRow.big{background:var(--gold-soft);border-radius:7px;padding-inline:8px}
.schedTotal{display:flex;justify-content:space-between;gap:12px;padding:10px 8px;margin-top:8px;background:var(--navy);color:#fff;border-radius:8px;font-weight:700}
.notes{padding-inline-start:18px;display:grid;gap:7px;font-size:.93rem}
.videos,.photos,.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:8px}
.videos{grid-template-columns:minmax(0,1fr)}
.videos figure{display:grid;gap:4px}
.videos video{width:100%;border-radius:9px;background:#000}
.videos figcaption{font-size:.84rem}
.photos button{padding:0;border:0;background:none;cursor:zoom-in}
.photos img,.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;cursor:zoom-in}

/* zoomed picture */
.lightbox{position:fixed;inset:0;z-index:10;background:rgb(10 20 30 / .94);display:flex;flex-direction:column}
.lbBar{display:flex;gap:8px;justify-content:flex-end;padding:10px 12px}
.lbBar button{min-width:46px;min-height:44px;background:#fff;color:var(--navy);border:0;border-radius:9px;font-weight:700;padding:0 14px;cursor:pointer}
.lbScroll{flex:1;overflow:auto;display:flex;align-items:safe center;justify-content:safe center;padding:8px}
.lbScroll img{height:auto;max-width:none}

@media (min-width:640px){
  .hero{height:280px}
  .heroText{inset-inline:calc(50% - 286px)}
  .hero{border-radius:0 0 28px 28px}
  .chips{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}