FLOATING CONTACT — Ali photo + direct WhatsApp (every page)
   RTL-aware via CSS logical properties
   ============================================================ */
.floating-contact {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem 0.375rem 0.375rem;
  background: #1a1f2e; /* ink */
  border: 1px solid rgba(168, 136, 79, 0.4); /* gold border */
  border-radius: 999px;
  color: #FAF7F2; /* cream */
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.floating-contact:hover,
.floating-contact:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24), 0 4px 10px rgba(0, 0, 0, 0.10);
  background: #232a3e;
  outline: none;
}
.floating-contact__avatar {
  display: block;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(168, 136, 79, 0.6);
  flex-shrink: 0;
}
.floating-contact__avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.floating-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 999px;
  background: #A8884F; /* gold */
  color: #1a1f2e; /* ink */
  flex-shrink: 0;
}
[dir="rtl"] .floating-contact {
  /* logical properties already handle this — block stays */
}
@media (prefers-reduced-motion: reduce) {
  .floating-contact { transition: none; }
}
@media (max-width: 480px) {
  .floating-contact {
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    padding: 0.3125rem 0.4375rem 0.3125rem 0.3125rem;
  }
  .floating-contact__avatar { inline-size: 40px; block-size: 40px; }
  .floating-contact__icon { inline-size: 34px; block-size: 34px; }
}
/* End of floating-contact.css */