/* صفحة البايو — الألوان من متغيرات القالب */
*{box-sizing:border-box}
html,body{margin:0}
body{color:var(--ink);font-family:var(--font),system-ui,sans-serif;font-size:15px;line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:3px solid var(--a);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:520px;margin:0 auto;padding:0 18px 36px;display:flex;flex-direction:column;gap:14px}

/* الهيدر */
.hd{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:34px}
.av{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#fff;border:4px solid var(--ring);flex:none;box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
.av.ph{display:flex;align-items:center;justify-content:center;background:var(--a);color:var(--on);font-weight:800;font-size:38px}
.sq-av .av{border-radius:22px}
.nm{font-family:var(--head),var(--font),sans-serif;font-size:23px;font-weight:800;margin:4px 0 0;line-height:1.3}
.ds{margin:0;font-size:14px;opacity:.8}
.h-banner .hd{padding-top:0}
.h-banner .cv{width:calc(100% + 36px);margin:0 -18px;height:170px;background:linear-gradient(135deg,var(--a),color-mix(in srgb,var(--a) 50%,#000)) center/cover;border-radius:0 0 26px 26px}
.h-banner .av{margin-top:-52px}
.h-hero .hd{position:relative;padding-top:0;margin:0 -18px}
.h-hero .hero{align-self:stretch;height:300px;background:linear-gradient(135deg,var(--a),#000) center/cover}
.h-hero .hero::after{content:"";position:absolute;inset:150px 0 auto 0;height:152px;background:linear-gradient(transparent,var(--fade))}
.h-hero .hero-in{align-self:stretch;margin-top:-96px;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 18px}
.h-hero .av{width:84px;height:84px}
.hd.side{flex-direction:row;text-align:right;align-items:center;gap:14px;padding-top:30px}
.hd.side .av{width:78px;height:78px}
.hd.side .nm{margin:0}
.hd.ttl{align-items:flex-start;text-align:right;padding-top:28px}
.mini{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.mini .av{width:40px;height:40px;border-width:2px;box-shadow:none}
.mini .av.ph{font-size:16px}
.big{font-family:var(--head),var(--font),sans-serif;font-size:44px;line-height:1.1;font-weight:800;margin:10px 0 2px;color:var(--a)}

/* السوشيال */
.soc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.soc a{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--soc-bg);color:var(--soc-ink);text-decoration:none}
.sq-soc .soc a{border-radius:12px;border:2px solid #111;box-shadow:3px 3px 0 #111}

/* التبويبات */
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:13px;padding:9px 16px;min-height:40px;border-radius:999px;background:var(--soft);color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--a);color:var(--on)}

/* البلوكات */
.blocks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.blk{grid-column:span 6;min-width:0}
.blk.s-half{grid-column:span 3}.blk.s-circle{grid-column:span 2}
.bento .blk.s-full.t-link,.bento .blk.s-full.t-whatsapp,.bento .blk.s-full.t-call,.bento .blk.s-full.t-review,.bento .blk.s-full.t-vcard,.bento .blk.s-full.t-reserve{grid-column:span 3}
.bento .blk.feat{grid-column:span 6}
.bento .blk:not(.feat) .bb{flex-direction:column;align-items:flex-start;min-height:118px;padding:14px;border-radius:22px;background:var(--card);color:var(--card-ink);box-shadow:0 6px 18px -12px rgba(0,0,0,.35);border:0}
.bento .blk:not(.feat) .bb .ar{display:none}
.bento .blk:not(.feat) .bb .tx{margin-top:auto}
.bb{width:100%;display:flex;align-items:center;gap:10px;min-height:58px;padding:7px 9px;font:inherit;font-weight:700;font-size:15px;text-decoration:none;border-radius:var(--r);cursor:pointer;text-align:right;border:0;transition:transform .15s}
.bb:active{transform:scale(.98)}
.bb .ic,.bb .th{width:42px;height:42px;border-radius:var(--rs);display:inline-flex;align-items:center;justify-content:center;flex:none;background:rgba(127,127,127,.15)}
.bb .th{object-fit:cover;background:none}
.bb .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.bb .tx small{font-size:12px;font-weight:500;opacity:.75}
.bb .ar{font-size:22px;opacity:.5;padding:0 6px}
/* أشكال الأزرار */
.b-fill .bb{background:var(--btn-bg);color:var(--btn-ink)}
.b-outline .bb{background:transparent;color:var(--ink);border:2px solid currentColor}
.b-soft .bb{background:var(--soft);color:var(--ink)}
.b-shadow .bb{background:var(--card);color:var(--card-ink);box-shadow:0 8px 22px -12px rgba(0,0,0,.45)}
.b-glass .bb{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.b-hard .bb{background:var(--card);color:#111;border:2px solid #111;box-shadow:4px 4px 0 #111}
.bb.main{background:var(--a)!important;color:var(--on)!important;border-color:var(--a)}
.bb.main .ic{background:rgba(255,255,255,.2)}
.pulse{animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 55%,transparent)}60%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}
.sec{font-family:var(--head),var(--font);font-size:17px;margin:8px 0 0;font-weight:800}
.txt{margin:0;font-size:14px;opacity:.85;text-align:center}
.pic{display:block;margin:0;border-radius:var(--rs);overflow:hidden}
.pic img{display:block;width:100%;height:auto}
.pic figcaption{font-size:13px;padding:8px 2px 0;opacity:.8}
.car{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -18px;padding:0 18px}
.car::-webkit-scrollbar{display:none}
.car img{flex:none;width:82%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rs);scroll-snap-align:center}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.vid{display:flex;flex-direction:column;gap:8px;background:var(--card);color:var(--card-ink);border-radius:var(--rs);padding:8px}
.yt{position:relative;display:block;border:0;padding:0;cursor:pointer;border-radius:calc(var(--rs) - 4px);overflow:hidden;aspect-ratio:16/9;background:#000;width:100%}
.yt img{width:100%;height:100%;object-fit:cover;display:block}
.yt iframe{width:100%;height:100%;border:0;display:block}
.play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center}
.vt{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;text-decoration:none;padding:4px 4px 2px}
.map{display:flex;flex-direction:column;gap:8px}
.map iframe{width:100%;height:210px;border:0;border-radius:var(--rs);background:rgba(127,127,127,.15)}
.apps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.apps a{text-decoration:none;font-weight:700;font-size:14px;text-align:center;padding:12px 8px;border-radius:var(--rs);background:var(--card);color:var(--card-ink);box-shadow:0 6px 16px -12px rgba(0,0,0,.4)}
.frm{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--rs);background:var(--card);color:var(--card-ink)}
.frm small{opacity:.75;font-size:12px}
.in{width:100%;font:inherit;font-size:15px;padding:12px 14px;border-radius:12px;border:1.5px solid rgba(127,127,127,.3);background:transparent;color:inherit;min-height:48px}
.in:focus{outline:0;border-color:var(--a)}
.ok-m{font-weight:700;color:#1E9E55}
.brand{display:block;text-align:center;font-size:12px;opacity:.6;text-decoration:none;margin-top:10px}
/* نافذة الحجز */
.ov{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:min(520px,100%);max-height:90vh;overflow-y:auto;background:#fff;color:#2A1712;border-radius:24px 24px 0 0;padding:18px;display:flex;flex-direction:column;gap:10px;animation:up .25s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.sheet .in{border-color:#E8DED4}
.sheet .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sheet .go{border:0;cursor:pointer;font:inherit;font-weight:800;padding:14px;border-radius:14px;background:var(--a);color:var(--on);min-height:50px}
.sheet .wa{background:#25D366;color:#fff;text-decoration:none;text-align:center}
.sheet .x{align-self:flex-start;border:0;background:#F3ECE4;width:38px;height:38px;border-radius:50%;cursor:pointer}

/* قائمة أسعار + عقار */
.prices{background:var(--card);color:var(--card-ink,var(--ink));border-radius:var(--r,16px);padding:16px;display:flex;flex-direction:column;gap:10px}
.prices h3{margin:0 0 4px;font-size:16px}
.pr-row{display:flex;align-items:baseline;gap:8px;font-size:15px}.pr-row i{flex:1;border-bottom:1.5px dotted currentColor;opacity:.35;transform:translateY(-4px)}.pr-row b{white-space:nowrap}
.prices small{opacity:.7;font-size:12px}
.prop{background:var(--card);color:var(--card-ink,var(--ink));border-radius:var(--r,16px);overflow:hidden}
.prop .car{border-radius:0}
.prop-in{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.prop-p{font-size:22px;color:var(--a)}.prop-in h3{margin:0;font-size:17px}.prop-l{opacity:.8;font-size:14px}
.prop-f{display:flex;flex-wrap:wrap;gap:6px}.prop-f span{background:rgba(127,127,127,.12);border-radius:999px;padding:4px 10px;font-size:13px}
.prop-in p{margin:0;font-size:14px;opacity:.85;line-height:1.7}
.prop-a{display:grid;gap:8px}

/* المربعات والدواير والبانرات */
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;overflow:hidden;text-decoration:none;color:var(--card-ink,var(--ink));background:var(--card);border:0;padding:0;font:inherit;text-align:right;cursor:pointer;border-radius:max(var(--rs),18px);box-shadow:0 10px 24px -16px rgba(0,0,0,.45);transition:transform .15s}
.tile:active{transform:scale(.97)}
.tile.s-half{aspect-ratio:1}
.tile.s-wide{aspect-ratio:16/9}
.tile .ti-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile.has-img::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.tile .ti-tx{position:relative;z-index:1;display:flex;flex-direction:column;padding:12px 14px;line-height:1.35}
.tile .ti-tx b{font-size:15px;font-weight:800}
.tile .ti-tx small{font-size:12px;opacity:.85;font-weight:500}
.tile.has-img .ti-tx{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.tile.s-wide .ti-tx b{font-size:19px}
.tile .ti-ic{position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--a) 14%,transparent);color:var(--a)}
.tile.main:not(.has-img){background:var(--a);color:var(--on)}
.tile.main:not(.has-img) .ti-ic{background:rgba(255,255,255,.18);color:var(--on)}
.tile .ti-badge{position:absolute;top:12px;left:12px;z-index:1;background:var(--a);color:var(--on);font-weight:800;font-size:13px;padding:6px 12px;border-radius:999px;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
/* الدواير: صورة مدورة والاسم تحتها */
.tile.s-circle{background:none;box-shadow:none;border-radius:0;align-items:center;justify-content:flex-start;gap:6px;overflow:visible}
.tile.s-circle .ti-img,.tile.s-circle .ti-ic{position:relative;inset:auto;top:auto;right:auto;width:100%;height:auto;aspect-ratio:1;border-radius:50%;border:3px solid var(--card);box-shadow:0 10px 22px -14px rgba(0,0,0,.55)}
.tile.s-circle .ti-ic{display:grid;place-items:center;background:var(--card);color:var(--a)}
.tile.s-circle::after{display:none}
.tile.s-circle .ti-tx{padding:0;text-align:center;color:var(--ink)!important;text-shadow:none!important}
.tile.s-circle .ti-tx b{font-size:13px}
.tile.s-circle .ti-badge{top:0;left:0;font-size:11px;padding:4px 8px}
.tiles .soc a{width:52px;height:52px}

/* هيدر: صورة متلاشية في الخلفية + اسم كبير */
.h-fade .hd{padding-top:0;margin:0 -18px;gap:4px}
.fade-img{align-self:stretch;height:290px;background:center/cover;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.big-nm{font-family:var(--head),var(--font);font-size:40px;line-height:1.05;margin:-38px 18px 2px;position:relative;letter-spacing:.5px}
.h-fade .ds{padding:0 18px}
/* هيدر: الاسم ضخم فوق الغلاف */
.h-poster .hd{padding-top:14px}
.poster{align-self:stretch;min-height:250px;border-radius:calc(var(--rs) + 10px);background:color-mix(in srgb,var(--a) 30%,var(--bg)) center/cover;display:grid;place-items:center;padding:18px;position:relative;overflow:hidden}
.poster::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.28))}
.poster-nm{position:relative;font-family:var(--head),var(--font);font-size:58px;line-height:.95;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.35);margin:0;text-align:center}
.h-poster .ds{font-weight:700;font-size:15px;margin-top:6px}
/* سوشيال من غير دواير */
.soc-plain .soc a{background:none;width:40px;height:40px;color:var(--soc-ink,var(--ink))}
/* تبويبات متقسمة (الروابط | المتجر) */
.tab-seg .tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:0}
.tab-seg .tabs button{min-height:46px;font-size:15px;border-radius:999px;background:color-mix(in srgb,var(--card) 55%,transparent);color:var(--ink);box-shadow:none}
.tab-seg .tabs button[aria-selected="true"]{background:var(--card);color:var(--card-ink,var(--ink));box-shadow:0 6px 16px -10px rgba(0,0,0,.35)}
/* كروت منتجات: الصورة جوه الكارت والاسم تحتها */
.tile-card .tile.s-half{aspect-ratio:auto;justify-content:flex-start;padding:9px 9px 4px;background:var(--card)}
.tile-card .tile.s-half .ti-img{position:relative;inset:auto;aspect-ratio:1;height:auto;border-radius:max(calc(var(--rs) - 4px),12px)}
.tile-card .tile.s-half::after{display:none}
.tile-card .tile.s-half .ti-tx{color:var(--card-ink,var(--ink));text-shadow:none;text-align:center;padding:8px 4px}
.tile-card .tile.s-half .ti-tx b{font-size:14px}
.tile-card .tile.s-half:not(.has-img){aspect-ratio:1;justify-content:flex-end}
.tile-card .tile.s-half.main:not(.has-img) .ti-tx{color:var(--on)}
/* فورم الاشتراك ككارت */
.frm{border-radius:max(var(--rs),18px);padding:18px;text-align:center}
.frm .in{text-align:right}
/* البلوك اللي بيتعدّل دلوقتي في المعاينة */
.is-draft{outline:3px dashed var(--a);outline-offset:4px;border-radius:max(var(--rs),18px);animation:drp 1.6s ease-in-out infinite}
@keyframes drp{50%{outline-color:transparent}}