/**
 * share.css
 *
 * "اشتراک‌گذاری محصول" (#btn-share) — single product page.
 *
 * Only used as a FALLBACK when navigator.share() isn't available
 * (e.g. desktop Firefox, or a non-HTTPS context). On any device that
 * supports the Web Share API, the OS's own native share sheet opens
 * instead and none of this UI is shown.
 *
 * Depends on dnd-tokens.css custom properties, same as
 * notify-me.css / wishlist.css.
 */

/* ------------------------------------------------------------------ */
/* Fallback menu                                                       */
/* ------------------------------------------------------------------ */

.dnd-share-menu {
  position: fixed;
  z-index: 9999;
  min-width: 190px;
  background: var(--dnd-white);
  border: 1px solid var(--dnd-border);
  border-radius: var(--dnd-radius-md);
  box-shadow: 0 8px 24px rgba(20, 20, 30, 0.14);
  padding: 6px;
  direction: rtl;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.dnd-share-menu[hidden] {
  display: none;
}

.dnd-share-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dnd-share-menu__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: calc(var(--dnd-radius-md) - 4px);
  font-family: inherit;
  font-size: 14px;
  color: var(--dnd-text);
  cursor: pointer;
  text-decoration: none;
}

.dnd-share-menu__item:hover,
.dnd-share-menu__item:focus-visible {
  background: var(--dnd-bg-soft);
  outline: none;
}

.dnd-share-menu__icon {
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
}

.dnd-share-menu__icon svg {
  width: 15px;
  height: 15px;
}

.dnd-share-menu__icon--whatsapp {
  background: #25d366;
}

.dnd-share-menu__icon--telegram {
  background: #29a9eb;
}

.dnd-share-menu__icon--copy {
  background: var(--dnd-muted);
}

/* ------------------------------------------------------------------ */
/* Toast (mirrors .notify-me-toast in notify-me.css)                   */
/* ------------------------------------------------------------------ */

.dnd-share-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--dnd-text);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--dnd-radius-pill);
  font-size: 13px;
  max-width: 90vw;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 10000;
}

.dnd-share-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}