/* =====================================================================
   site.css — الهيكل الموحّد لمنصة وسيلة × بن عبدالله (يُحمَّل بعد home.css)
   الألوان تتبع لون الموقع من لوحة الإدارة
   ===================================================================== */

/* ---------- الشريط العلوي ---------- */
.ws-lock{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ws-lock>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-lock small{font:700 .7rem var(--f-ui);color:var(--a-text);white-space:nowrap}
.ws-lang{min-width:44px;height:44px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--l1);font:800 .8rem var(--f-ui);text-decoration:none;letter-spacing:.5px;transition:background .25s,border-color .25s}
.ws-lang:hover{border-color:var(--border-s);background:var(--surface-h)}
.ws-menu-btn{display:none}
@media(max-width:1099px){.hx-nav{display:none}.ws-menu-btn{display:grid}}
@media(max-width:640px){.hx-bar-in .hx-btn.sm{display:none}}
@media(max-width:400px){.ws-lang{display:none}}

/* ---------- الختم تحت البطل ---------- */
.ws-seal{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.2rem;padding:.4rem 1rem .4rem .45rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.88rem;color:var(--l2);text-decoration:none;transition:border-color .25s}
.ws-seal:hover{border-color:var(--border-s)}
.ws-seal b{color:var(--l1)}
.ws-seal u{color:var(--a-text);font-weight:800;text-decoration:none}
.ws-seal-mk{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#1b1b20,#2a2a31);border:1px solid color-mix(in srgb,var(--a1) 55%,transparent)}
.ws-seal-mk img{width:100%;height:100%;object-fit:contain;padding:4px}
.ws-seal-mk b{font:800 .95rem var(--f-ui);color:var(--a2)}

/* ---------- رؤوس الأقسام (عنوان + أزرار تمرير) ---------- */
.ws-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.ws-start{justify-content:flex-start}
.ws-left{text-align:start}
.ws-sub{color:var(--l2);margin:0;max-width:36rem;line-height:1.8}
.ws-railnav{display:flex;gap:.4rem;flex:none}
html[dir=ltr] .ws-railnav i{transform:scaleX(-1)}

/* ---------- شرائح الفلترة ---------- */
.ws-chips{display:flex;gap:.45rem;margin:0 0 1.2rem;overflow-x:auto;scrollbar-width:none;padding:2px;-webkit-mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.ws-chips::-webkit-scrollbar{display:none}
.ws-chips button{flex:none;min-height:40px;padding:0 1rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--l2);font:800 .86rem var(--f-ui);cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.ws-chips button:hover{border-color:var(--border-s);color:var(--l1)}
.ws-chips button[aria-pressed=true]{background:var(--a1);border-color:transparent;color:var(--on)}
.ws-chips button:focus-visible,.ag-seg button:focus-visible,.ws-rail:focus-visible{outline:3px solid var(--a1);outline-offset:2px}
[data-tags][hidden]{display:none!important}

/* ---------- التمرير الأفقي ---------- */
.ws-rail{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(14.5rem,15.5rem);grid-template-columns:none!important;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:4px 2px 1rem;scrollbar-width:none;overscroll-behavior-x:contain}
.ws-rail::-webkit-scrollbar{display:none}
.ws-rail>*{scroll-snap-align:start}
@media(max-width:759px){
  .ws-rail-m{display:grid!important;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none!important;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 1rem;scrollbar-width:none;overscroll-behavior-x:contain}
  .ws-rail-m::-webkit-scrollbar{display:none}
  .ws-rail-m>*{scroll-snap-align:center}
  .ws-head .ws-railnav{display:none}
  #templates .ws-head .ws-railnav{display:flex}
  .hx-plans.ws-rail-m{grid-auto-columns:86%;margin-top:1.2rem}
}
@media(min-width:760px){#services .ws-railnav,#work .ws-railnav{display:none}}

/* ---------- المميزات (شريط مختصر) ---------- */
.ws-feats-s{margin-top:clamp(2rem,5vw,3rem)!important}
.ws-feats{list-style:none;margin:0;padding:.4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));border-radius:26px;background:var(--surface);border:1px solid var(--border)}
.ws-feats li{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.1rem}
.ws-feats li+li{border-inline-start:1px solid var(--border)}
.ws-feats .hx-ic{margin:0;flex:none;width:44px;height:44px;font-size:1rem}
.ws-feats h3{font:800 1rem var(--f-ui);margin:.1rem 0 .25rem}
.ws-feats p{margin:0;color:var(--l2);font-size:.9rem;line-height:1.7}
@media(max-width:759px){.ws-feats li+li{border-inline-start:0;border-top:1px solid var(--border)}}

/* ---------- من نحن ---------- */
.ws-about-card{display:grid;gap:1.6rem;padding:clamp(1rem,3vw,1.4rem);border-radius:32px;background:var(--surface);border:1px solid var(--border)}
@media(min-width:880px){.ws-about-card{grid-template-columns:20rem 1fr;gap:2.4rem;align-items:center}}
.ws-about-media{position:relative;aspect-ratio:4/5;max-height:26rem;border-radius:24px;overflow:hidden;background:var(--bg-soft)}
@media(max-width:879px){.ws-about-media{aspect-ratio:16/10}}
.ws-about-media>img:first-child{width:100%;height:100%;object-fit:cover}
.ws-about-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.ws-about-logo{position:absolute;z-index:1;inset-inline-start:1rem;bottom:1rem;height:48px;width:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.ws-about-copy{padding:0 .4rem .4rem}
.ws-h{margin:0 0 .5rem;font:700 clamp(1.8rem,4.6vw,2.6rem)/1.3 var(--f-display)}
.ws-lead{margin:0 0 1rem;color:var(--l2);line-height:1.85;max-width:40rem}
.ws-pts{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.5rem 1.2rem!important;margin-bottom:1rem!important;font-size:.95rem}
.ws-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem}
.ws-tags span{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:999px;font:700 .78rem var(--f-ui);color:var(--l2);background:var(--bg-soft);border:1px solid var(--border)}
.ws-tags i{color:var(--a-text);font-size:.75rem}
.ws-stats{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin:0 0 1.3rem;padding:.9rem 0;border-block:1px solid var(--border)}
.ws-stats div{display:flex;flex-direction:column-reverse}
.ws-stats dd{margin:0;font:700 1.6rem/1.2 var(--f-display);color:var(--a-text)}
.ws-stats dt{font-size:.82rem;color:var(--l2);font-weight:700}

/* ---------- عناصر مشتركة ---------- */
.ag-pts{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.55rem}
.ag-pts li{display:flex;gap:.65rem;align-items:flex-start;line-height:1.7}
.ag-pts li>i{flex:none;width:22px;height:22px;margin-top:.15rem;border-radius:50%;display:grid;place-items:center;font-size:.62rem;color:var(--on);background:linear-gradient(135deg,var(--a1),var(--a3))}
.ag-ph{display:grid;place-items:center;width:100%;height:100%;min-height:8rem;color:color-mix(in srgb,var(--a1) 70%,var(--l1));font-size:2.2rem;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--a1) 30%,transparent),transparent 60%),radial-gradient(circle at 80% 90%,color-mix(in srgb,var(--a3) 28%,transparent),transparent 55%),var(--bg-soft)}
.ag-ph.big{font-size:3.6rem}
.ag-note{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 1rem;padding:.9rem 1rem;border-radius:16px;font-size:.92rem;line-height:1.8;color:var(--l1);background:color-mix(in srgb,#FF9F0A 12%,transparent);border:1px solid color-mix(in srgb,#FF9F0A 35%,transparent)}
.ag-note>i{color:#FF9F0A;margin-top:.3rem}
.ag-q{font-style:italic;color:var(--l3)!important;margin-top:1rem!important}

/* ---------- كتالوج الخدمات ---------- */
.ws-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.ws-svc{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--surface);border:1px solid var(--border);transition:border-color .3s,box-shadow .3s,transform .35s var(--spring)}
.ws-svc:hover{border-color:var(--border-s);box-shadow:var(--shadow);transform:translateY(-3px)}
.ws-svc-m{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-soft)}
.ws-svc-m>img,.ws-svc-m>.ag-ph{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ws-svc:hover .ws-svc-m>img{transform:scale(1.05)}
.ws-cat{position:absolute;top:.7rem;inset-inline-start:.7rem;display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem;border-radius:999px;font:800 .72rem var(--f-ui);color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ws-svc-m.is-pages{background:linear-gradient(135deg,color-mix(in srgb,var(--a1) 85%,#000),color-mix(in srgb,var(--a3) 70%,#000))}
.ws-mini{position:absolute;inset:14% 34% -10%;display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 12px;border-radius:22px 22px 0 0;background:rgba(10,10,14,.82);border:1px solid rgba(255,255,255,.2);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.ws-mini i{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--a2),var(--a1));margin-bottom:4px}
.ws-mini b{width:100%;height:13px;border-radius:7px;background:rgba(255,255,255,.16)}
.ws-mini em{width:100%;height:13px;border-radius:7px;background:#25D366;opacity:.9}
.ws-svc-b{display:flex;flex-direction:column;flex:1;padding:1.1rem 1.2rem 1.2rem}
.ws-svc-b h3{font:800 1.04rem/1.5 var(--f-ui);margin:0 0 .35rem}
.ws-svc-b p{margin:0 0 1rem;color:var(--l2);line-height:1.75;font-size:.92rem;flex:1}
.ws-svc-a{display:flex;gap:.5rem}
.ws-svc-a .hx-btn{flex:1;padding-inline:.6rem}

/* ---------- القوالب (شريط أفقي) ---------- */
#templates .hx-tc{text-align:center}
#templates .hx-tc .mk{margin-inline:auto}

/* ---------- أعمالنا ---------- */
.ws-tiles{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.ws-tile{position:relative;margin:0;aspect-ratio:1;border-radius:24px;overflow:hidden;background:var(--bg-soft);border:1px solid var(--border);display:block;color:#fff;text-decoration:none}
.ws-tile>img,.ws-tile>.ag-ph{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ws-tile:hover>img{transform:scale(1.05)}
.ws-tile figcaption{position:absolute;inset:auto 0 0;padding:2.4rem 1rem .9rem;display:flex;flex-direction:column;gap:.1rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78))}
.ws-tile figcaption b{font:800 1rem var(--f-ui)}
.ws-tile figcaption span{font-size:.82rem;opacity:.85}
.ws-tile.is-page{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1.2rem;text-align:center;color:var(--l1);background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--a1) 26%,transparent),transparent 70%),var(--surface);transition:border-color .3s,transform .35s var(--spring)}
.ws-tile.is-page:hover{border-color:var(--border-s);transform:translateY(-3px)}
.ws-tile-av{width:84px;height:84px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--a1),var(--a3));border:3px solid var(--bg-soft);box-shadow:0 0 0 2px var(--a1)}
.ws-tile-av img{width:100%;height:100%;object-fit:cover}
.ws-tile-av b{font:800 1.8rem var(--f-ui);color:var(--on)}
.ws-tile-c{display:flex;flex-direction:column;gap:.15rem}
.ws-tile-c b{font:800 1rem var(--f-ui)}
.ws-tile-c b i{color:#0A84FF}
.ws-tile-c small{color:var(--l3)}
.ws-tile-c span{margin-top:.3rem;font-size:.78rem;color:var(--a-text);font-weight:700}

/* ---------- كيف نعمل (تبويبات) ---------- */
.ag-seg{display:flex;width:max-content;max-width:100%;margin:1rem auto 1.4rem;padding:4px;gap:2px;border-radius:16px;background:var(--surface);border:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.ag-seg::-webkit-scrollbar{display:none}
.ag-seg button{flex:none;min-height:44px;padding:0 1.1rem;border:0;border-radius:12px;background:transparent;color:var(--l2);font:800 .9rem var(--f-ui);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.ag-seg button[aria-selected=true]{background:var(--glass-s);color:var(--l1);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.ag-panel[hidden]{display:none}
#process .hx-sec+.ag-panel{margin-top:1.4rem}
@media(min-width:1000px){.ws-steps.ws-s4{grid-template-columns:repeat(4,1fr)}.ws-steps.ws-s3{grid-template-columns:repeat(3,1fr)}}

/* ---------- الأسئلة ---------- */
.ws-faq-tools{max-width:46rem;margin:1.2rem auto 0}
.ws-search{display:flex;align-items:center;gap:.6rem;min-height:50px;padding:0 1rem;margin-bottom:.8rem;border-radius:16px;background:var(--surface);border:1px solid var(--border);transition:border-color .25s}
.ws-search:focus-within{border-color:var(--a1);box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 22%,transparent)}
.ws-search i{color:var(--l3)}
.ws-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--l1);font:500 1rem var(--f-body);outline:0;-webkit-appearance:none;appearance:none}
.ws-search input::placeholder{color:var(--l3)}
.ws-faq-tools .ws-chips{margin-bottom:.4rem}
.ws-faq{margin-top:.6rem}
.ws-faq mark{background:color-mix(in srgb,var(--a1) 30%,transparent);color:inherit;border-radius:4px;padding:0 2px}
.ws-empty{text-align:center;color:var(--l2);padding:1.4rem;border-radius:20px;border:1px dashed var(--border)}

/* ---------- التواصل ---------- */
.ws-close .hx-eyebrow{margin-bottom:.3rem}
.ws-close h2{position:relative}
.ws-soc{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.4rem}
.ws-soc a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--l1);text-decoration:none;font:700 .88rem var(--f-ui);transition:border-color .25s,transform .3s var(--spring)}
.ws-soc a:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent);transform:translateY(-2px)}
.ws-soc i{color:var(--c);font-size:1.05rem}
html:not(.dark) .ws-soc a[style*="FFFC00"] i{color:#000;background:#FFFC00;border-radius:6px;padding:2px}
.ws-note{position:relative;margin:1.1rem 0 0!important;color:var(--l2);font-size:.9rem}

/* ---------- التذييل ---------- */
@media(min-width:900px){.hx-foot-in{grid-template-columns:minmax(16rem,1.6fr) repeat(auto-fit,minmax(8rem,1fr))}}
.ws-foot-tag{text-align:center;font:700 1rem var(--f-display);color:var(--a-text);margin:2rem 0 .4rem}
.ws-disc{max-width:48rem;margin:0 auto .8rem;text-align:center;color:var(--l3);font-size:.78rem;line-height:1.8}
.ws-disc i{color:var(--a-text)}

/* ---------- النوافذ ---------- */
.ag-dlg{width:min(40rem,calc(100% - 2rem));max-height:min(86vh,50rem);padding:0;border:1px solid var(--border);border-radius:28px;background:var(--glass-s);color:var(--l1);box-shadow:0 30px 80px rgba(0,0,0,.45);font-family:var(--f-body);overflow:hidden;display:none;flex-direction:column}
.ag-dlg[open]{display:flex;animation:wsIn .35s var(--ease)}
.ag-dlg::backdrop{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ag-dlg-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem .8rem 1.4rem;border-bottom:1px solid var(--border)}
.ag-dlg-h h2{margin:0;font:800 1.1rem/1.5 var(--f-ui)}
.ag-dlg-h h2 small{color:var(--a-text);font-size:.85rem}
.ag-dlg-b{padding:1.2rem 1.4rem;overflow-y:auto;line-height:1.9}
.ag-dlg-b p{margin:0 0 1rem;color:var(--l2)}
.ag-dlg-b h3{font:800 1rem var(--f-ui);margin:1.1rem 0 .6rem;color:var(--a-text)}
.ag-dlg-f{display:flex;gap:.6rem;justify-content:flex-end;padding:.9rem 1.2rem calc(.9rem + var(--safe-bottom));border-top:1px solid var(--border)}
.ws-dgal{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -1.4rem 1.1rem;padding:0 1.4rem;scrollbar-width:none}
.ws-dgal::-webkit-scrollbar{display:none}
.ws-dgal img{flex:0 0 78%;aspect-ratio:16/10;object-fit:cover;border-radius:18px;scroll-snap-align:center}
@keyframes wsIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes wsUp{from{transform:translateY(100%)}}
@media(max-width:640px){
  .ag-dlg{width:100%;max-width:100%;max-height:90vh;margin:auto 0 0;border-radius:28px 28px 0 0;border-bottom:0}
  .ag-dlg[open]{animation:wsUp .4s var(--ease)}
  .ag-dlg-f .hx-btn{flex:1}
}
.ws-sheet{max-width:26rem}
.ws-menu{display:flex;flex-direction:column;padding:.6rem}
.ws-menu a{display:flex;align-items:center;gap:.9rem;min-height:52px;padding:0 .9rem;border-radius:14px;color:var(--l1);text-decoration:none;font:700 1rem var(--f-ui)}
.ws-menu a:hover,.ws-menu a:focus-visible{background:var(--surface-h)}
.ws-menu a>i:first-child{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:.85rem;color:var(--on);background:linear-gradient(135deg,var(--a1),var(--a3))}
.ws-menu a span{flex:1}
.ws-chev{color:var(--l3);font-size:.75rem}
html[dir=ltr] .ws-chev{transform:scaleX(-1)}
.ws-sheet-cta{margin:.2rem 1.2rem calc(1.2rem + var(--safe-bottom))}

/* ---------- واتساب العائم ---------- */
.ws-wa{position:fixed;z-index:95;bottom:calc(24px + var(--safe-bottom));inset-inline-start:22px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;color:#fff;background:#25D366;box-shadow:0 12px 30px rgba(37,211,102,.45);text-decoration:none;transition:transform .35s var(--spring)}
.ws-wa:hover{transform:scale(1.08)}
.ws-wa:focus-visible{outline:3px solid var(--l1);outline-offset:3px}

/* ---------- تخفيف وإتاحة ---------- */
html.lite .ws-cat,html.lite .ag-dlg::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-reduced-motion:reduce){.ag-dlg[open],.ws-svc,.ws-tile,.ws-tile>img,.ws-svc-m>img{animation:none!important;transition:none!important}}
@media (prefers-reduced-transparency:reduce){.ag-dlg{background:var(--bg-soft)}.ws-cat{background:#000}}

/* ---------- النسخة الإنجليزية والصفحات القانونية ---------- */
html[dir=ltr] .hx-btn:hover i{transform:translateX(4px)}
.lg{max-width:48rem;margin:0 auto;padding-top:clamp(2rem,6vw,3.5rem)}
.lg h1{font:700 clamp(1.9rem,5vw,2.6rem)/1.35 var(--f-display);margin:0 0 .3rem}
.lg .upd{color:var(--l3);font-size:.9rem;margin:0 0 1.6rem}
.lg article{padding:clamp(1.3rem,4vw,2rem);border-radius:28px;background:var(--surface);border:1px solid var(--border)}
.lg h2{font:800 1.12rem var(--f-ui);margin:1.6rem 0 .5rem;color:var(--a-text)}
.lg h2:first-child{margin-top:0}
.lg p,.lg li{color:var(--l2);line-height:1.95}
.lg ul{padding-inline-start:1.2rem}
.ws-steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.ws-steps>li,.ws-steps>li>div{min-width:0}
@media(min-width:760px){.ws-tiles{grid-template-columns:repeat(3,1fr)}.ws-tile:not(.is-page){aspect-ratio:4/3}.ws-tile.is-page{aspect-ratio:4/3}}