/* Dar Al-Aqiq public page. The navy-and-ice brand from the agreed mockup, Arabic first, RTL,
   phone first. Fonts are self-hosted: a web-font request would be a third party watching every
   visitor, and it tripled the measured load time on the Haraj page. */

@font-face{font-family:"Readex Pro";src:url(fonts/readex-pro-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Readex Pro";src:url(fonts/readex-pro-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-024F,U+2000-206F}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-024F,U+2000-206F}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-024F,U+2000-206F}

:root{
  --bg:#F2F6F8;--surface:#FFFFFF;--surface-2:#E8EFF3;--ink:#12222C;--muted:#52636E;--line:#D3DEE5;--line-2:#B9C8D2;
  --brand:#162834;--brand-ink:#CEECF7;--brand-line:rgb(206 236 247 / .28);
  --ice:#CEECF7;--ice-soft:#E1F1F8;
  --accent:#A6472A;--on-accent:#FFFFFF;--accent-soft:#F6E5DD;
  --ok:#15745A;--ok-bg:#DDF0E8;--warn:#845500;--warn-bg:#F8ECD1;--info:#1A5899;--info-bg:#DEEAF7;
  --star:#E2B03F;--focus:#1A5899;--scrim:rgb(8 16 22 / .55);
  --shadow:0 1px 2px rgb(18 34 44 / .06),0 12px 32px rgb(18 34 44 / .12);
  --f-display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,"Segoe UI",Tahoma,sans-serif;
  --r1:8px;--r2:12px;--r3:18px;
  --gl:max(16px,env(safe-area-inset-left,0px));--gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B151C;--surface:#122029;--surface-2:#192A35;--ink:#E3EEF4;--muted:#9AAFBC;--line:#253847;--line-2:#3A5062;
  --brand:#0F1D27;--brand-line:rgb(206 236 247 / .22);--ice-soft:#173342;
  --accent:#E58C68;--on-accent:#1E0E07;--accent-soft:#3A2017;
  --ok:#5FC9A1;--ok-bg:#10302A;--warn:#E7B862;--warn-bg:#33270F;--info:#86B8EE;--info-bg:#13283D;
  --star:#E9BD55;--focus:#86B8EE;--scrim:rgb(0 0 0 / .62);
  --shadow:0 1px 2px rgb(0 0 0 / .5),0 12px 32px rgb(0 0 0 / .45);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B151C;--surface:#122029;--surface-2:#192A35;--ink:#E3EEF4;--muted:#9AAFBC;--line:#253847;--line-2:#3A5062;
  --brand:#0F1D27;--brand-line:rgb(206 236 247 / .22);--ice-soft:#173342;
  --accent:#E58C68;--on-accent:#1E0E07;--accent-soft:#3A2017;
  --ok:#5FC9A1;--ok-bg:#10302A;--warn:#E7B862;--warn-bg:#33270F;--info:#86B8EE;--info-bg:#13283D;
  --star:#E9BD55;--focus:#86B8EE;--scrim:rgb(0 0 0 / .62);
  --shadow:0 1px 2px rgb(0 0 0 / .5),0 12px 32px rgb(0 0 0 / .45);
  color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
/* Arabic needs more leading than Latin for the same legibility. */
body{font-family:var(--f-body);font-size:15px;line-height:1.95;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--f-display);line-height:1.35;margin:0;text-wrap:balance;font-weight:600}
h1{font-size:clamp(28px,6.4vw,50px)}h2{font-size:21px}h3{font-size:20px}
p{margin:0}
/* height:auto is load-bearing: the width/height ATTRIBUTES on an <img> are presentational
   hints that set the CSS height, so aspect-ratio is ignored and every photo renders at its
   intrinsic 1067px. The page looked merely long rather than broken. */
img{display:block;max-width:100%;height:auto}
a{color:var(--info)}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
/* NEVER letter-space Arabic: it pulls the cursive joins apart and the word stops being readable. */
.eyebrow,.lbl,.pill{letter-spacing:normal;text-transform:none}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1160px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.ic{width:20px;height:20px;flex:none}
.muted{color:var(--muted)}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}
.ghead :focus-visible,.hero :focus-visible,.gfoot :focus-visible{outline-color:var(--ice)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 18px;border-radius:12px;border:1.5px solid transparent;font-weight:600;font-size:15px;line-height:1.4;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn .ic{width:18px;height:18px}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-ice{background:var(--ice);color:var(--brand)}
.btn-lg{min-height:52px;padding:12px 26px;font-size:16.5px}
.btn-sm{min-height:38px;padding:6px 12px;font-size:14px}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--brand-line);background:transparent;color:var(--brand-ink);cursor:pointer;flex:none}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}

.ghead{background:var(--brand);color:var(--brand-ink);border-bottom:1px solid var(--brand-line)}
.ghead-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--brand-ink);text-decoration:none}
.lg-mark{width:25px;height:43px;fill:currentColor;flex:none}
.lg-word{width:96px;height:21px;fill:currentColor;flex:none}
.lg-full{fill:currentColor}
.ghead-a{display:flex;align-items:center;gap:8px}

.hero{background:var(--brand);color:var(--brand-ink)}
.hero-in{display:grid;gap:26px;padding-block:26px 34px}
.eyebrow{font-size:13.5px;color:var(--brand-ink)}
.hero h1{color:var(--ice);margin:6px 0 12px}
.lead{font-size:16.5px;max-width:33em;color:var(--brand-ink)}
.facts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--brand-line);border-radius:999px;font-size:14px}
.facts .ic{width:18px;height:18px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.rating{display:inline-flex;align-items:center;gap:6px;font-size:14.5px}
.rating .ic{color:var(--star);width:19px;height:19px}
.hero-fig{margin:0;border-radius:var(--r3);overflow:hidden;border:1px solid var(--brand-line);min-width:0}
.hero-fig img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (min-width:880px){.hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:44px;padding-block:46px 54px}}

.linkbar{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin-top:22px}
@media (min-width:620px){.linkbar{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}}
.linkbar a{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:var(--r2);border:1px solid var(--brand-line);color:var(--brand-ink);text-decoration:none;font-weight:600;font-size:15px;background:rgb(206 236 247 / .06)}
.linkbar a:hover{background:rgb(206 236 247 / .14)}
.linkbar .go{margin-inline-start:auto;opacity:.7}

.sec{padding-block:34px 6px}
.sec>h2{margin-bottom:6px}
.sec>p.muted{margin-bottom:14px;font-size:14.5px}
.urgent{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding:13px 15px;border-radius:var(--r2);background:var(--accent-soft);color:var(--ink);font-size:15px}
.urgent .ic{color:var(--accent);margin-top:5px}

.units{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.units{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.units{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ucard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.ucard>button.shot{padding:0;border:0;background:none;cursor:zoom-in;display:block}
.ucard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ucard-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.ucard-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.price b{font-family:var(--f-display);font-size:23px;font-weight:600}
.sub{font-size:14px;color:var(--muted)}
.amen{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted)}
.amen span{display:inline-flex;align-items:center;gap:5px}
.amen .ic{width:16px;height:16px}
.ucard-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.ucard-a .btn{flex:1 1 140px}

.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:760px){.strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.strip button{padding:0;border:0;background:none;cursor:zoom-in}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r2)}

.info-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.icard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);align-content:start}
.icard>.ic{grid-row:span 3;color:var(--accent);width:22px;height:22px;margin-top:6px}
.icard a{font-weight:600;justify-self:start}

.vac{display:grid;gap:10px}
.vac .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)}
.vac .row b{font-family:var(--f-display);font-size:17px}

.gfoot{margin-top:44px;background:var(--brand);color:var(--brand-ink)}
.gfoot-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding-block:28px}
.gfoot .lg-full{width:92px;height:90px}
.gfoot p{font-size:14px}
.foot-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;border-top:1px solid var(--brand-line);padding-block:12px 18px;font-size:12.5px}
.foot-sub span{opacity:.8}
.admin-link{color:var(--brand-ink);opacity:.8;text-underline-offset:3px;font-size:12.5px}

dialog{border:0;padding:0;background:transparent;max-width:100%;max-height:100%}
dialog::backdrop{background:var(--scrim)}
.modal{width:min(820px,100vw);max-height:100dvh;overflow:auto;background:var(--surface);color:var(--ink);border-radius:var(--r3);box-shadow:var(--shadow);padding:18px 20px 22px}
@media (max-width:620px){.modal{width:100vw;min-height:100dvh;border-radius:0;padding:calc(14px + env(safe-area-inset-top,0px)) var(--gr) calc(22px + env(safe-area-inset-bottom,0px)) var(--gl)}}
.m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.m-head h2{font-size:21px}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:620px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r2)}
.gallery button{padding:0;border:0;background:none;cursor:zoom-in}
.big img{width:100%;max-height:72dvh;object-fit:contain;border-radius:var(--r2);background:var(--surface-2)}
.cal{margin-top:6px}
.months{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.months{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mt{font-family:var(--f-display);font-weight:600;margin-bottom:6px}
.wk,.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wk span{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.3}
.d{aspect-ratio:1/1;display:grid;place-items:center;border-radius:10px;background:var(--surface-2);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.d.pad{background:transparent}
.d.past{background:transparent;color:var(--line-2)}
.d.busy{background:transparent;color:var(--muted);text-decoration:line-through}
.d.today{box-shadow:inset 0 0 0 2px var(--accent)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:12.5px;color:var(--muted);margin-top:12px}
.legend i{display:inline-block;width:13px;height:13px;border-radius:4px;margin-inline-end:5px;vertical-align:-2px}
.legend .l-free{background:var(--surface-2)}
.legend .l-busy{border:1.5px solid var(--line-2)}
.m-foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:18px}