/* شريط المشاركة (2026-09-27)
 *
 * WHY IT EXISTS
 *
 * The whole site had one share control, on programs-detail: a button that
 * copied the URL. For a charity, a supporter who forwards a campaign brings
 * another donor at no cost, so this is the cheapest channel the association
 * has and it was missing everywhere it mattered — the campaign page, the
 * receipt, the news.
 *
 * TWO SHAPES, ONE STYLESHEET
 *
 *   .mb-share        a quiet row inside a page, on white.
 *   .mb-share-card   a navy invitation with a gold rule, for the two moments
 *                    that deserve to ask out loud: the end of a campaign page
 *                    and the receipt after a donation.
 *
 * Every control is 44×44, the accepted minimum touch target, and carries its
 * own Arabic aria-label — the icons are unlabelled to the eye by design.
 */

.mb-share {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mb-share__label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-grey-600, #5A6B74);
}

.mb-share__list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mb-share__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--ds-line, #E3EAEC);
  background: #fff;
  color: var(--ds-teal-800, #12525C);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease,
              background-color 0.18s ease, transform 0.18s ease;
}

.mb-share__btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.mb-share__btn:hover,
.mb-share__btn:focus-visible {
  border-color: var(--ds-gold-500, #C9A227);
  color: var(--ds-gold-500, #C9A227);
  transform: translateY(-2px);
  outline: none;
}

.mb-share__btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.3);
}

/* «نسخ الرابط» widens, because it has to be able to say «تم النسخ». */
.mb-share__copy {
  width: auto;
  padding-inline: 16px;
  border-radius: 22px;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.mb-share__copy.is-done {
  border-color: var(--ds-gold-500, #C9A227);
  color: var(--ds-gold-500, #C9A227);
}

/* The system's own share sheet, on the devices that have one. A desktop gets
   the four channels and the copy button instead, which is the whole point of
   not relying on navigator.share alone. */
.mb-share__native { display: none; }

@media (hover: none) and (pointer: coarse) {
  .mb-share__native { display: inline-flex; }
}

/* ---- the invitation ---- */

.mb-share-card {
  background: linear-gradient(165deg, #0A2A3D 0%, var(--ds-teal-800, #12525C) 100%);
  color: #fff;
  border-radius: 18px;
  border-block-start: 3px solid var(--ds-gold-500, #C9A227);
  padding: 26px 24px;
  text-align: center;
}

.mb-share-card h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

.mb-share-card p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 300;
  opacity: 0.78;
}

.mb-share-card .mb-share { justify-content: center; }
.mb-share-card .mb-share__label { display: none; }

.mb-share-card .mb-share__btn {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.mb-share-card .mb-share__btn:hover,
.mb-share-card .mb-share__btn:focus-visible {
  background: rgba(201, 162, 39, 0.14);
  border-color: var(--ds-gold-500, #C9A227);
  color: var(--ds-gold-500, #C9A227);
}

@media (prefers-reduced-motion: reduce) {
  .mb-share__btn { transition: none; }
  .mb-share__btn:hover { transform: none; }
}