/* =========================================================
   eQuran — Fitur BAGIKAN AYAT (share.css)  [V21]
   ---------------------------------------------------------
   File ini TERISOLASI: semua kelas berawalan "mq-share" / "mq-toast",
   hanya memakai design token milik style.css (--surface, --border,
   --primary, dst.), sehingga otomatis mengikuti mode terang/gelap.
   Dimuat oleh: surah.html, juz.html, pilihan-surat.html
   Logika: assets/js/share.js
   ========================================================= */

/* ---------- 1) Tombol Share di bilah aksi ayat ---------- */
/* Ukuran/lingkaran diwarisi dari ".ayat-actions button" (style.css) agar
   sejajar & seragam dengan tombol 🔖 — di sini hanya pemusatan ikon SVG. */
.ayat-actions .mq-share-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; color: var(--text-muted);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.ayat-actions .mq-share-btn svg{ display: block; pointer-events: none; }
.ayat-actions .mq-share-btn:hover{
  color: var(--primary-strong); border-color: var(--primary); background: var(--primary-tint);
}
.ayat-actions .mq-share-btn:active{ transform: scale(.92); }
.ayat-actions .mq-share-btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- 2) Overlay (blur halus) + sheet ---------- */
.mq-share-overlay{
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 18, 14, .40);
  opacity: 0; transition: opacity .22s ease;
}
.mq-share-overlay[hidden]{ display: none; }
.mq-share-overlay.is-open{ opacity: 1; }
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .mq-share-overlay{ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

.mq-share-sheet{
  position: relative; width: 100%; max-width: 520px;
  max-height: 88vh; max-height: 88dvh;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px clamp(16px, 5vw, 22px) calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .22);
  font-family: var(--font-ui);
  outline: none;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.mq-share-overlay.is-open .mq-share-sheet{ transform: translateY(0); }
.mq-share-sheet.is-dragging{ transition: none; }
/* Efek kaca (glassmorphism) bila browser mendukung; bila tidak -> solid. */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .mq-share-sheet{
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
  }
}

/* Desktop / tablet lebar: dialog di tengah layar */
@media (min-width: 720px){
  .mq-share-overlay{ align-items: center; }
  .mq-share-sheet{
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding-top: 20px;
    opacity: 0; transform: translateY(12px) scale(.97);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
  }
  .mq-share-overlay.is-open .mq-share-sheet{ opacity: 1; transform: none; }
}

/* ---------- 3) Isi sheet ---------- */
.mq-share-top{ touch-action: pan-y; }
.mq-share-grab{
  display: block; width: 40px; height: 4px; margin: 4px auto 10px;
  border-radius: 999px; background: var(--border);
}
@media (min-width: 720px){ .mq-share-grab{ display: none; } }   /* handle hanya untuk bottom sheet mobile */
.mq-share-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.mq-share-title{
  margin: 0; font-family: var(--font-body); font-size: 1.08rem; font-weight: 600; line-height: 1.3;
}
.mq-share-ref{ margin: 3px 0 0; font-size: .82rem; color: var(--primary-strong); font-weight: 600; }
.mq-share-close{
  flex: 0 0 auto; width: 40px; height: 40px; margin: -4px -6px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text-muted); cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.mq-share-close:hover{ background: var(--surface-2); color: var(--text); }
.mq-share-close:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

.mq-share-preview{
  margin: 0 0 14px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-m);
}
.mq-share-preview-ar{
  margin: 0 0 6px; direction: rtl; text-align: right;
  font-family: var(--font-arabic); font-size: 1.25rem; line-height: 1.9;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.mq-share-preview-id{
  margin: 0; font-size: .85rem; line-height: 1.5; color: var(--text-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* Tombol pilihan (WhatsApp / Salin / Native) — min. tinggi 60px: nyaman disentuh */
.mq-share-opt{
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 60px; margin: 0 0 10px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--surface); color: var(--text);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.mq-share-opt:hover{ border-color: var(--primary); background: var(--primary-tint); }
.mq-share-opt:active{ transform: scale(.985); }
.mq-share-opt:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.mq-share-opt[hidden]{ display: none; }

.mq-share-opt-icon{
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.mq-share-opt-icon--wa{ background: #25D366; color: #fff; }
.mq-share-opt-icon--copy{ background: var(--primary-tint); color: var(--primary-strong); }
.mq-share-opt-icon--native{ background: var(--surface-2); color: var(--text); }
.mq-share-opt-text{ min-width: 0; }
.mq-share-opt-text strong{ display: block; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.mq-share-opt-text small{ display: block; margin-top: 1px; font-size: .78rem; color: var(--text-muted); line-height: 1.35; }
.mq-share-opt.is-done{ border-color: var(--primary); background: var(--primary-tint); }

.mq-share-link{
  margin: 6px 0 0; text-align: center; font-size: .74rem; color: var(--text-muted);
  word-break: break-all; user-select: all; -webkit-user-select: all;
}

/* ---------- 4) Toast "Berhasil disalin!" ---------- */
.mq-toast{
  position: fixed; left: 50%; z-index: 1200;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 32px);
  padding: 11px 18px; border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-family: var(--font-ui); font-size: .88rem; font-weight: 500; text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity .2s ease, transform .2s ease;
}
.mq-toast.is-show{ opacity: 1; transform: translate(-50%, 0); }

/* ---------- 5) Aksesibilitas: kurangi gerak ---------- */
@media (prefers-reduced-motion: reduce){
  .mq-share-overlay, .mq-share-sheet, .mq-share-opt, .mq-toast,
  .ayat-actions .mq-share-btn{ transition: none !important; }
}