/* =====================================================================
   v13.css : gold-framed look (top bar, section headings, app cards, footer line).
   The site background (bg.jpg) is untouched. Loaded after v9.css.
   The top bar is always left-to-right so the logo, the language button and the
   menu button stay in the same place in English and in Arabic.
   ===================================================================== */

/* ---------- gold corner marks around the window (decoration only, never catches clicks) ---------- */
.frame{position:fixed;inset:7px;z-index:30;pointer-events:none;--c:#D4AF37cc;--n:46px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--n) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) top left/2px var(--n) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--n) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/2px var(--n) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--n) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/2px var(--n) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--n) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/2px var(--n) no-repeat}
@media(max-width:640px){.frame{inset:4px;--n:30px}}

/* ---------- top bar ---------- */
header.bar{position:sticky;top:max(10px,env(safe-area-inset-top,0px));z-index:45;display:flex;align-items:center;gap:12px;
  width:min(1180px,calc(100% - 32px));margin:14px auto 0;padding:7px 8px 7px 14px;border:1px solid #D4AF3799;border-radius:99px;
  background:linear-gradient(180deg,#17150ee6,#0b0b0de6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -22px #000,inset 0 0 26px -14px #D4AF37}
.brand{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.brand img{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid #D4AF3799;box-shadow:0 0 18px -6px #D4AF37}
.brand span{font:700 20px/1 Cinzel,serif;font-style:italic;letter-spacing:.05em;color:var(--soft);white-space:nowrap}
.bnav{flex:1;min-width:0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:4px;margin:0;overflow-x:auto;scrollbar-width:none;color:#f3f1ea}
.bnav::-webkit-scrollbar{display:none}
.bn{flex:none;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;font-size:15px;font-weight:600;white-space:nowrap;color:#f3f1ea;unicode-bidi:plaintext;transition:background .2s,color .2s}
.bn svg{flex:none;color:var(--gold);transition:color .2s}
.bn:hover{background:#D4AF3722;color:var(--soft)}
.bn.on{background:linear-gradient(180deg,var(--soft),var(--gold));color:var(--ink);box-shadow:0 8px 20px -10px #D4AF37}
.bn.on svg{color:var(--ink)}
header.bar .topbtns{position:static;margin-inline-start:0;margin-left:auto;direction:ltr;gap:8px;flex:none}
header.bar .langsw,header.bar .burger{height:42px}
header.bar .burger{width:42px}
header.bar .langsw span{min-width:40px;padding:0 10px}
@media(max-width:1040px){.bnav{display:none}.brand{margin-right:auto}}
@media(max-width:480px){
  header.bar{width:calc(100% - 22px);gap:8px;padding:6px 6px 6px 10px;margin-top:11px}
  .brand img{width:36px;height:36px}.brand span{font-size:16px}
  header.bar .langsw,header.bar .burger{height:38px}header.bar .burger{width:38px}
  header.bar .langsw span{min-width:34px;padding:0 8px;font-size:12px}
}
@media(max-width:350px){.brand span{display:none}}

/* ---------- section heading: label, big gold title, short text, ornament ---------- */
.sh{text-align:center;max-width:760px;margin:6px auto 30px}
.eb{display:flex;align-items:center;justify-content:center;gap:14px;direction:ltr;font:600 12.5px/1.4 Cinzel,serif;letter-spacing:.26em;color:var(--soft);unicode-bidi:plaintext}
.eb span{max-width:min(70vw,460px);overflow-wrap:anywhere}
@media(max-width:480px){.eb{letter-spacing:.16em;gap:10px;font-size:11.5px}.eb i{width:clamp(16px,6vw,40px)}}
.eb i{flex:none;width:clamp(30px,12vw,120px);height:1px;background:linear-gradient(90deg,transparent,#D4AF37)}
.eb i:last-child{transform:scaleX(-1)}
.sh h2{margin:12px 0 12px;font-size:clamp(34px,7vw,60px);line-height:1.2;font-weight:800;font-style:italic;letter-spacing:.01em;overflow-wrap:anywhere}
.sh h2 a{color:inherit}
.sd{max-width:600px;margin:0 auto;color:#d9d5c8;line-height:1.9;font-size:clamp(15px,2.2vw,18px)}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px auto 0;width:min(520px,80%)}
.orn b{flex:1;height:1px;background:linear-gradient(90deg,transparent,#D4AF37aa)}.orn b:last-child{transform:scaleX(-1)}
.orn u{flex:none;width:9px;height:9px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 14px #D4AF37}
.sec .sh+.grid{margin-top:4px}

/* ---------- app cards ---------- */
.grid.agr{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px}
.uc.appc.ac{flex:1 1 270px;max-width:370px;min-width:0;position:relative;padding:26px 22px 22px;text-align:center;overflow:hidden;
  border:1px solid #D4AF3788;border-radius:20px;background:radial-gradient(130% 70% at 50% 0,#241e0f 0,#101012 62%);
  box-shadow:0 34px 60px -38px #000,0 0 0 1px #000,inset 0 0 40px -26px #D4AF37}
.uc.appc.ac .bd{display:flex;flex-direction:column;align-items:center;padding:0;flex:1}
.aic{flex:none;width:96px;height:96px;border-radius:24px;overflow:hidden;display:grid;place-items:center;background:#0d0d10;border:1px solid var(--gold);box-shadow:0 0 30px -8px #D4AF37cc;font:700 38px Cinzel,serif;color:var(--soft)}
.aic img{width:100%;height:100%;object-fit:cover;display:block}
.aic.sm{width:52px;height:52px;border-radius:14px;box-shadow:0 0 16px -6px #D4AF37}
.uc.appc.ac .chips{justify-content:center;margin:12px 0 0}
.uc.appc.ac h3{margin:16px 0 6px;font-size:clamp(21px,3vw,26px);line-height:1.3;font-weight:700;color:var(--soft)}
.ac h3 a{color:inherit}
.sd2{color:#d9d5c8;font-size:14.5px;line-height:1.75;margin:0 0 4px}
.afs{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:8px;width:100%;max-width:280px;text-align:start}
.afs li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.6;color:#e6e3da}
.afs svg{flex:none;margin-top:3px;color:var(--gold)}
.uc.appc.ac .price{margin-top:12px;padding-top:0}
.uc.appc.ac .rsum{margin-top:8px;padding-top:0;position:relative;z-index:2}
.abtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:99px;padding:11px 30px}
.uc.appc.ac .bd>.abtn{margin-top:auto}.uc.appc.ac .bd>:nth-last-child(2){margin-bottom:20px}
.uc.appc.ac .afs+.price,.uc.appc.ac .sd2+.price{margin-top:12px}
@media(hover:hover){.uc.appc.ac:hover{transform:translateY(-6px);border-color:var(--gold);background:radial-gradient(130% 70% at 50% 0,#2a2312 0,#111113 62%);box-shadow:0 40px 64px -36px #000,0 0 0 1px #D4AF3755,inset 0 0 46px -22px #D4AF37}}
@media(max-width:560px){.uc.appc.ac{flex-basis:100%;max-width:420px;padding:22px 18px 20px}.aic{width:88px;height:88px}}

/* other cards (services, content): same gold frame */
.card.svc.uc{border-color:#D4AF3766;background:linear-gradient(165deg,#18170f,#0e0e11 70%)}
.card.svc.uc h3{color:var(--soft)}

/* ---------- problems page ---------- */
.why{margin-bottom:34px}.why h2{margin-bottom:14px}
.why .wh2{font-size:clamp(24px,4vw,32px);text-align:center;margin-bottom:18px}
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;align-items:start}
.wcard{border:1px solid #D4AF3777;border-radius:20px;padding:20px;background:radial-gradient(130% 60% at 50% 0,#211c0e 0,#101012 60%);box-shadow:0 30px 56px -38px #000,inset 0 0 36px -26px #D4AF37;min-width:0}
.whead{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #D4AF3733}
.whead h3{font-size:clamp(19px,3vw,23px);color:var(--soft);line-height:1.3;overflow-wrap:anywhere}
.wcard .prob{gap:10px}
.wcard .prob li{position:relative;padding:14px 16px;border-radius:14px;border:1px solid #D4AF3733;background:#0e0e11bb;gap:6px}
.wcard .prob li strong{font-size:16px;line-height:1.55;color:#f3ecd2}
.wcard .prob li span{position:relative;padding-inline-start:26px;color:#cfcabb;font-size:14.5px;line-height:1.75}
.wcard .prob li span::before{content:"";position:absolute;inset-inline-start:2px;top:.55em;width:11px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
[dir=rtl] .wcard .prob li span::before{transform:rotate(-45deg)}
.why .stories{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

/* ---------- search bar and bio sit closer to the heading ---------- */
.srch-wrap{padding-top:18px}.srch{margin-bottom:6px}
.bio{padding-top:22px}

/* ---------- footer line ---------- */
.ftag{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,22px);width:min(1000px,calc(100% - 40px));margin:0 auto 26px;
  font:500 clamp(10.5px,2.6vw,16px)/1.4 Cinzel,serif;font-style:italic;letter-spacing:.3em;color:var(--soft);text-align:center}
.ftag i{flex:1;height:1px;min-width:12px;background:linear-gradient(90deg,transparent,#D4AF37aa)}.ftag i:last-child{transform:scaleX(-1)}
.ftag span{flex:none;max-width:78%}
footer#ft{border-top:0;margin-top:56px;padding:6px 0 30px}
@media(max-width:640px){.ftag{letter-spacing:.18em}}

/* the drawer and its dim layer sit above the bar and the corner marks */
div.scrim{z-index:70}aside.drawer{z-index:75}

/* offers section uses the same gold heading (old red heading rules switched off) */
section.offers .sh h2 a{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
section.offers .sh h2::after{display:none}
/* readable headings over the background picture */
.sh h2{filter:drop-shadow(0 3px 14px #000c)}
.sh .sd,.sh .eb{text-shadow:0 2px 12px #000}

/* ---------- app card: two buttons (Details + Download) ---------- */
.uc.appc.ac .bd>.abtns{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;position:relative;z-index:2}
.uc.appc.ac .bd>.abtns:last-child{margin-bottom:0}
.uc.appc.ac .abtns .abtn{flex:0 1 auto;min-width:min(190px,100%);max-width:100%;padding:11px 16px;font-size:15px;line-height:1.2;white-space:nowrap;font-family:inherit}
.uc.appc.ac .bd>:nth-last-child(2):not(.abtns){margin-bottom:20px}

/* ---------- per-app page background (set in the admin); the default site picture is replaced only on that app's page ---------- */
body.hasbg::after{background:linear-gradient(#0b0b0dc4,#0b0b0dc4),var(--appbg) center/cover no-repeat;-webkit-mask-image:none;mask-image:none;opacity:1}

/* card text: two lines at most */
.uc.appc.ac .sd2.cl{-webkit-line-clamp:2}
/* the small gap above the floating top bar hides what scrolls under it */
.frame::before{content:"";position:absolute;left:-7px;right:-7px;top:-7px;height:calc(max(10px,env(safe-area-inset-top,0px)) + 7px);background:linear-gradient(#0b0b0d 72%,#0b0b0d00)}
@media(max-width:640px){.frame::before{left:-4px;right:-4px;top:-4px;height:calc(max(10px,env(safe-area-inset-top,0px)) + 4px)}}

/* ===== v22: app page layout, read-more, gallery, lightbox, discount ribbon ===== */
.ahd{display:flex;align-items:flex-start;gap:clamp(14px,3vw,24px);margin:18px 0 34px}
.ahd .ahb{min-width:0;flex:1}.ahd h1{font-size:clamp(26px,5vw,38px);line-height:1.2;overflow-wrap:anywhere}
.asec{margin-bottom:38px}.asec>h2{margin-bottom:14px}
.dlrow{margin:16px 0 4px}.dlrow .btn{min-width:min(260px,100%)}
@media(max-width:560px){.ahd{flex-direction:column;align-items:center;text-align:center}.ahd .chips{justify-content:center}.ahd .acts,.ahd .lks{justify-content:center}.dlrow .btn{width:100%}}
.rm{margin-top:8px}
.rm .rmt{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.rm.open .rmt{display:block;-webkit-line-clamp:unset;overflow:visible}
.rmb{margin-top:6px;padding:4px 0;background:none;border:0;color:var(--gold,#D4AF37);font:700 14px/1.4 inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rmb:hover,.rmb:focus-visible{color:var(--soft,#f3d98a)}
[data-lb] img{cursor:zoom-in}
.sl img.ph{height:auto;aspect-ratio:16/10;max-height:320px}
@media(max-width:640px){.sl{padding:18px}.sl p{font-size:18px}.arw{width:38px;height:38px;margin-top:-19px}}
/* lightbox */
html.lb-open{overflow:hidden}
#lbx{position:fixed;inset:0;z-index:9999;background:#05050af2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;animation:lbin .18s ease-out}
#lbx[hidden]{display:none}
@keyframes lbin{from{opacity:0}}
#lbx .lbt{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;color:var(--soft,#f3d98a);font:700 14px/1 Cairo,sans-serif;position:relative;z-index:2}
#lbx .lbtl{display:flex;gap:8px}
#lbx button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #D4AF3780;background:#0b0b0de6;color:var(--soft,#f3d98a);cursor:pointer;padding:0}
#lbx button:hover,#lbx button:focus-visible{background:var(--gold,#D4AF37);color:#0b0b0d;outline:0}
#lbx .lbs{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:none;cursor:zoom-in}
#lbx.zm .lbs{cursor:grab}
#lbx .lbi{max-width:min(100%,1600px);max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;transition:transform .12s ease-out;will-change:transform;border-radius:6px}
#lbx .lbn{position:absolute;top:50%;margin-top:-22px;z-index:2}
#lbx .lbp{left:12px}#lbx .lbq{right:12px}#lbx.one .lbn{display:none}
@media(max-width:640px){#lbx .lbn{top:auto;bottom:16px;margin:0}#lbx .lbp{left:16px}#lbx .lbq{right:16px}}
@media(prefers-reduced-motion:reduce){#lbx,#lbx .lbi{animation:none;transition:none}}
/* discount ribbon on the home cards (only rendered while a discount is live) */
.rib{position:absolute;top:24px;inset-inline-start:-48px;width:176px;transform:rotate(-45deg);background:linear-gradient(135deg,#ff5a75,#c81e45);color:#fff;text-align:center;padding:5px 0 4px;box-shadow:0 8px 18px -8px #c81e45;z-index:3;pointer-events:none;font-family:Cairo,sans-serif}
[dir=rtl] .rib{transform:rotate(45deg)}
.rib span{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:800;line-height:1.2}
.rib b{font-weight:800;direction:ltr;unicode-bidi:isolate}
.rib small{display:block;font-size:10px;font-weight:700;line-height:1.2;opacity:.92}
.ordq{display:block;margin:0 0 14px}.ordq .in{width:100%}
.cert .ono{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:var(--soft);letter-spacing:.06em}
.cert .cp{margin-inline-start:8px;background:none;border:1px solid var(--line);color:var(--soft);border-radius:8px;padding:0 8px;cursor:pointer;font-size:15px;line-height:1.6}
.cert .cp:hover{border-color:var(--gold)}
.cert[hidden]{display:none}

/* v23 license page */
.lsteps{display:grid;gap:10px;margin:18px 0 8px;padding:0;list-style:none;counter-reset:ls}.lsteps li{counter-increment:ls;display:flex;gap:12px;align-items:flex-start;color:var(--mute)}.lsteps li:before{content:counter(ls);flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--gold);color:var(--soft);display:grid;place-items:center;font-size:13px}
#licSel{width:100%;max-width:520px}.licapp{display:flex;gap:14px;align-items:center;margin-top:12px}.licapp img{width:48px;height:48px;border-radius:12px;object-fit:cover;flex:none}.lnote{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}