/* hrai — الفوتر (من SiteFooter بنسخة «logo»: أعمدة روابط + سطر الحقوق + شعار كبير يطلع ويتلاشى في أسفل الصفحة) */
.sf{
  --sf-bg:#FAFAFA; --sf-fg:#111; --sf-muted:#7a7a7a; --sf-link:#3d3d3d; --sf-line:rgba(0,0,0,.07);
  --sf-mark-from:#111; --sf-mark-to:#8f8f8f;
  position:relative; overflow:hidden; background:var(--sf-bg); color:var(--sf-fg);
  border-top:1px solid var(--sf-line); padding:64px 60px 0;
}
html[data-theme="dark"] .sf{
  --sf-bg:#141518; --sf-fg:#f2f2f2; --sf-muted:#8c8c8c; --sf-link:#c9c9c9; --sf-line:rgba(255,255,255,.08);
  --sf-mark-from:#f2f2f2; --sf-mark-to:#5c5c5c;
}
.sf-in{max-width:1200px; margin:0 auto}
.sf-top{display:grid; grid-template-columns:minmax(220px,1.25fr) 2fr; gap:56px; padding-bottom:48px}
.sf-brand{display:inline-flex; color:var(--sf-fg); text-decoration:none; border-radius:8px}
.sf-brand svg{width:76px; height:auto; display:block}
.sf-brand svg g{stroke:currentColor} .sf-brand svg circle:last-child{fill:currentColor}
.sf-tagline{margin-top:16px; max-width:32ch; font-size:13.5px; line-height:1.85; color:var(--sf-muted)}

.sf-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
.sf-col h2{font-size:12px; font-weight:600; letter-spacing:0; color:var(--sf-muted); margin:0 0 14px}
.sf-col ul, .sf-inline{list-style:none; margin:0; padding:0}
.sf-col li + li{margin-top:2px}

.sf-link{
  display:inline-flex; align-items:center; gap:4px; padding:5px 0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13.5px; color:var(--sf-link); text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:5px; text-decoration-thickness:1px;
  transition:color .2s cubic-bezier(.2,.8,.2,1), text-decoration-color .2s cubic-bezier(.2,.8,.2,1);
}
.sf-link:hover{color:var(--sf-fg); text-decoration-color:color-mix(in srgb, currentColor 35%, transparent)}
.sf-link:focus-visible, .sf-brand:focus-visible{outline:2px solid var(--sf-fg); outline-offset:3px; border-radius:4px}
.sf-ext{width:13px; height:13px; flex:none; opacity:.55; transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s}
.sf-link:hover .sf-ext{opacity:1; transform:translate(1px,-1px)}
[dir="rtl"] .sf-ext, html[dir="rtl"] .sf-ext{transform:scaleX(-1)}
html[dir="rtl"] .sf-link:hover .sf-ext{transform:scaleX(-1) translate(1px,-1px)}

.sf-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap;
  border-top:1px solid var(--sf-line); padding:18px 0; font-size:12.5px; color:var(--sf-muted)}
.sf-bottom-start, .sf-bottom-end{display:flex; align-items:center; gap:6px 20px; flex-wrap:wrap}
.sf-inline{display:flex; align-items:center; gap:4px 18px; flex-wrap:wrap}
.sf-bottom .sf-link{font-size:12.5px; color:var(--sf-muted)}
.sf-bottom .sf-link:hover{color:var(--sf-fg)}

/* الشعار الكبير: أعلى الحروف بس، مقصوص من تحت ويتلاشى في الصفحة */
.sf-stage{margin-top:8px; overflow:hidden; pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 100%); mask-image:linear-gradient(to bottom,#000 30%,transparent 100%)}
.sf-big{display:block; width:100%; max-width:920px; margin:0 auto; height:auto; transform:translateY(0); opacity:1}
.sf.sf-js .sf-big{opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1)}
.sf.sf-js.sf-seen .sf-big{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .sf.sf-js .sf-big{transition:none; opacity:1; transform:none} }

@media (max-width:860px){
  .sf{padding:48px 22px 0}
  .sf-top{grid-template-columns:1fr; gap:36px; padding-bottom:36px}
  .sf-cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px}
}
@media (max-width:420px){ .sf-bottom{flex-direction:column; align-items:flex-start} }
/* المستشار: الفوتر يختفي بس لما تبدأ المحادثة (قبلها يطلع عادي تحت) */
body.adn-mode:has(#adnan-shell.has-msgs) .sf{display:none}
.sf-social{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:2px}
.sf-soc{display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:var(--sf-muted);
  transition:color .2s cubic-bezier(.2,.8,.2,1), background-color .2s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1)}
.sf-soc svg{width:16px; height:16px; display:block}
.sf-soc:hover{color:var(--sf-fg); background:color-mix(in srgb, var(--sf-fg) 6%, transparent)}
.sf-soc:active{transform:scale(.92)}
.sf-soc:focus-visible{outline:2px solid var(--sf-fg); outline-offset:2px}

/* وثيقة العمل الحر: لوقو صغير جنب الحسابات + رمز الوثيقة يطلع عند المرور/الضغط */
.sf-cred{position:relative; display:inline-flex}
.sf-cred-btn{display:grid; place-items:center; height:32px; padding:0 6px; border:0; border-radius:9px; background:none; cursor:pointer;
  transition:background-color .2s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1)}
.sf-cred-btn:hover,.sf-cred.open .sf-cred-btn{background:color-mix(in srgb, var(--sf-fg) 6%, transparent)}
.sf-cred-btn:active{transform:scale(.95)}
.sf-cred-btn:focus-visible{outline:2px solid var(--sf-fg); outline-offset:2px}
.sf-cred-logo{display:grid; place-items:center; border-radius:6px}
.sf-cred-logo img{display:block; height:20px; width:auto}
html[data-theme="dark"] .sf-cred-logo{background:#fff; padding:3px 6px}
html[data-theme="dark"] .sf-cred-logo img{height:16px}
.sf-cred-pop{position:absolute; bottom:calc(100% + 8px); inset-inline-end:0; z-index:5; width:max-content; max-width:calc(100vw - 44px);
  padding:6px; border-radius:14px; background:var(--sf-bg); color:var(--sf-fg); font-size:12.5px; text-align:start;
  border:1px solid color-mix(in srgb, var(--sf-fg) 12%, transparent); box-shadow:0 12px 32px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s}
.sf-cred-pop::after{content:""; position:absolute; inset:auto 0 -10px; height:10px}
html[data-theme="dark"] .sf-cred-pop{background:#1b1c20; box-shadow:0 12px 32px rgba(0,0,0,.45)}
.sf-cred.open .sf-cred-pop{opacity:1; visibility:visible; transform:none; transition:opacity .18s ease, transform .18s ease}
@media (hover:hover){ .sf-cred:hover .sf-cred-pop,.sf-cred:focus-within .sf-cred-pop{opacity:1; visibility:visible; transform:none; transition:opacity .18s ease, transform .18s ease} }
@media (max-width:860px){ .sf-bottom{position:relative} .sf-cred{position:static} .sf-cred-pop{inset-inline-end:auto; inset-inline-start:0} }
.sf-cred-k{font-size:11px; color:var(--sf-muted)}
.sf-cred-code{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 6px 6px 10px;
  border-radius:10px; background:color-mix(in srgb, var(--sf-fg) 5%, transparent)}
.sf-cred-code code{font:600 15px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; color:var(--sf-fg)}
.sf-cred-copy{display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:7px; background:none; color:var(--sf-muted); cursor:pointer}
.sf-cred-copy:hover{color:var(--sf-fg); background:color-mix(in srgb, var(--sf-fg) 7%, transparent)}
.sf-cred-copy svg{width:15px; height:15px}
.sf-cred-copy.ok{color:#1f9d55}
.sf-cred-dl{margin:12px 0 0; display:grid; gap:7px}
.sf-cred-dl div{display:flex; justify-content:space-between; gap:12px; font-size:12px}
.sf-cred-dl dt{color:var(--sf-muted); flex:none}
.sf-cred-dl dd{margin:0; text-align:end; color:var(--sf-fg)}
.sf-cred-go{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px; padding:9px 12px; border-radius:10px;
  background:var(--sf-fg); color:var(--sf-bg); font-size:12.5px; font-weight:600; text-decoration:none; transition:opacity .2s}
.sf-cred-go:hover{opacity:.88}
.sf-cred-go svg{width:14px; height:14px}
html[dir="rtl"] .sf-cred-go svg{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){ .sf-cred-pop{transition:none} }
.sf-cred-link{color:inherit; text-decoration:none}
.sf-cred-link:hover code{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
