/* ============================================================
   FLOATING CONTACT MENU (inc/contact-menu.php, assets/contact-menu.js)
   Colours come from Settings > Contact button as CSS variables.
   Bottom-right; bottom-left and opening the other way in Arabic.
   ============================================================ */
.qm{ --qm-main:#123C2E; --qm-main-fg:#F5F0E6; --qm-item:#F5F0E6; --qm-item-fg:#123C2E; --qm-hover:#C6A15B; position:fixed; right:24px; bottom:24px; z-index:9998; }
[dir="rtl"] .qm{ right:auto; left:24px; }

.qm-btn{ position:relative; z-index:2; width:56px; height:56px; padding:0; border:0; border-radius:50%; background:var(--qm-main); color:var(--qm-main-fg); cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.35); transition:transform .2s; }
.qm-btn:hover{ transform:scale(1.05); }
.qm-btn:focus-visible{ outline:2px solid var(--qm-hover); outline-offset:3px; }
.qm-btn span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.qm-close{ opacity:0; transform:rotate(-90deg) scale(.6); }
.qm.is-open .qm-open{ opacity:0; transform:rotate(90deg) scale(.6); }
.qm.is-open .qm-close{ opacity:1; transform:none; }

.qm-item{ position:absolute; right:4px; bottom:4px; z-index:1; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; background:var(--qm-item); color:var(--qm-item-fg); box-shadow:0 3px 10px rgba(0,0,0,.3); opacity:0; transform:translate(0,0) scale(.4); pointer-events:none; transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s, background-color .2s, color .2s; }
[dir="rtl"] .qm-item{ right:auto; left:4px; }
.qm.is-open .qm-item{ opacity:1; transform:translate(var(--tx), var(--ty)) scale(1); pointer-events:auto; }
.qm-item:hover, .qm-item:focus-visible{ background:var(--qm-hover); color:var(--qm-main); outline:none; }
.qm-item .qm-img{ width:26px; height:26px; object-fit:contain; border-radius:50%; }
.qm-btn .qm-main-img{ width:62%; height:62%; object-fit:contain; border-radius:50%; }

/* label beside a button on hover / keyboard focus (desktop) */
.qm-label{ position:absolute; right:calc(100% + 0.6rem); top:50%; transform:translateY(-50%); white-space:nowrap; padding:0.35rem 0.65rem; background:var(--charcoal); color:var(--ivory); font-family:var(--sans); font-size:calc(0.7rem * var(--madar-fs-small, 1)); letter-spacing:0.02em; opacity:0; pointer-events:none; transition:opacity .2s; }
[dir="rtl"] .qm-label{ right:auto; left:calc(100% + 0.6rem); }
.qm-item:hover .qm-label, .qm-item:focus-visible .qm-label{ opacity:1; }

@media (max-width:760px){
  .qm{ right:16px; bottom:16px; }
  [dir="rtl"] .qm{ left:16px; right:auto; }
  .qm-label{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .qm-item, .qm-btn span{ transition:opacity .2s; } }
@media print{ .qm{ display:none; } }