/* ==========================================================================
   BROCA — "back to top" 3D button (footer)
   Same gold 3D language as the "تواصل معنا" button in the header.
   TO REMOVE: delete the <button class="to-top"> from the footer in index.html
   and the <link>/<script> lines for back-to-top.css / back-to-top.js.
   ========================================================================== */
.to-top{
  --face:#d4b67c;--edge:#80602d;--ink:#302512;
  position:relative;display:inline-flex;align-items:center;gap:12px;
  min-height:48px;padding:12px 20px 12px 14px;
  font:inherit;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;color:var(--ink);
  background:linear-gradient(165deg,#f0dfba 0%,var(--face) 52%,#bc9855 100%);
  border:1px solid #dcc18c;border-bottom-color:#b38b48;border-radius:12px;
  box-shadow:0 6px 0 var(--edge),0 12px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.65);
  transform:translateY(-4px);
  transition:transform .18s ease,box-shadow .18s ease,background .25s ease;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.to-top__icon{
  display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;
  background:rgba(48,37,18,.1);box-shadow:inset 0 1px 2px rgba(48,37,18,.22),0 1px 0 rgba(255,255,255,.55);
}
.to-top__icon svg{width:15px;height:15px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.to-top:hover{
  background:linear-gradient(165deg,#f8e9cb,var(--face) 60%,#c7a05b);
  transform:translateY(-6px);
  box-shadow:0 8px 0 var(--edge),0 16px 26px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.75);
}
.to-top:hover .to-top__icon svg{transform:translateY(-2px)}
.to-top:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 var(--edge),0 3px 7px rgba(0,0,0,.18),inset 0 1px 3px rgba(90,55,10,.2);
}
.to-top:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
[data-theme=light] .to-top{--edge:#7a5e2f;box-shadow:0 6px 0 var(--edge),0 12px 20px rgba(104,77,30,.18),inset 0 1px 0 rgba(255,255,255,.75)}
[data-theme=light] .to-top:hover{box-shadow:0 8px 0 var(--edge),0 16px 24px rgba(104,77,30,.2),inset 0 1px 0 rgba(255,255,255,.8)}

@media (max-width:760px){
  .to-top{align-self:stretch;justify-content:center;margin-block:4px 6px}
}
@media (prefers-reduced-motion:reduce){
  .to-top,.to-top__icon svg{transition:none}
}