/* ══════════ مشاركة الاقتباس صورةً — الموقع العام (المدوّنة وصفحات الاقتباسات) ══════════
   منقول عن eqtepas_web/.../quote-share (ونفس تصاميم تطبيق الجوال): 29 تصميماً في 4 عائلات.
   الخطوط والخلفيات من النطاق نفسه كي يضمّنها التصدير صورةً. u = 3.6px على عرض 360 (تُصدَّر ×3 = 1080). */
@font-face { font-family: 'EqAmiri'; font-weight: 400; src: url(/assets/fonts/share/Amiri-Regular.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'EqAmiri'; font-weight: 700; src: url(/assets/fonts/share/Amiri-Bold.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'EqPlex'; font-weight: 400; src: url(/assets/fonts/share/plex-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; font-display: block; }
@font-face { font-family: 'EqPlex'; font-weight: 600; src: url(/assets/fonts/share/plex-arabic-600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; font-display: block; }
@font-face { font-family: 'EqPlex'; font-weight: 700; src: url(/assets/fonts/share/plex-arabic-700.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; font-display: block; }
@font-face { font-family: 'EqPlex'; font-weight: 400; src: url(/assets/fonts/share/plex-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: block; }
@font-face { font-family: 'EqPlex'; font-weight: 600; src: url(/assets/fonts/share/plex-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: block; }
@font-face { font-family: 'EqPlex'; font-weight: 700; src: url(/assets/fonts/share/plex-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: block; }

/* ── زر المشاركة تحت كل اقتباس: واضح يدعو للنقر ── */
.eqq-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 18px; }
.eqq-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px 0 16px; border: 0; border-radius: 12px;
  background: #4F46E5; color: #fff !important; font: 600 .92rem/1 'IBM Plex Sans Arabic', Tajawal, system-ui, sans-serif;
  cursor: pointer; box-shadow: 0 10px 22px -10px rgba(79, 70, 229, .7); transition: background .18s, transform .18s, box-shadow .18s;
  text-decoration: none !important; border-bottom: 0 !important;
}
.eqq-btn:hover { background: #4338CA; transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(79, 70, 229, .75); }
.eqq-btn svg { width: 18px; height: 18px; flex: none; }
.eqq-hint { font-size: .8rem; color: #9CA3AF; }
.eqq-swatches { display: inline-flex; margin-inline-start: 2px; }
.eqq-swatches i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; margin-inline-start: -5px; display: block; }

/* ── النافذة ── */
.eqq-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(15, 14, 42, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.eqq-overlay[hidden] { display: none !important; }
.eqq-modal { width: min(840px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 24px; box-shadow: 0 30px 80px rgba(15, 14, 42, .35); font-family: 'IBM Plex Sans Arabic', Tajawal, system-ui, sans-serif; }
.eqq-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #F0F0F3; position: sticky; top: 0; background: #fff; z-index: 2; }
.eqq-head b { font-size: 16px; color: #1A1A1A; }
.eqq-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #F4F4F6; color: #6B7280; cursor: pointer; font-size: 20px; line-height: 1; }
.eqq-body { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; }
.eqq-preview { flex: 0 0 360px; max-width: 100%; display: flex; justify-content: center; align-items: flex-start; background: repeating-conic-gradient(#F6F6F9 0 25%, #fff 0 50%) 0 0 / 16px 16px; border-radius: 18px; padding: 14px; box-sizing: content-box; overflow: hidden; }
.eqq-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.eqq-fams { display: flex; flex-wrap: wrap; gap: 6px; }
.eqq-fams button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #F4F4F6; color: #1A1A1A; font: 600 13px inherit; font-family: inherit; cursor: pointer; }
.eqq-fams button.on { background: #4F46E5; color: #fff; }
.eqq-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.eqq-sw button { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: inherit; }
.eqq-sw small { font-size: 11px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px; }
.eqq-sw button.on .sw { outline: 2.5px solid #4F46E5; outline-offset: 2px; }
.eqq-sw button.on small { color: #4F46E5; font-weight: 700; }
.eqq-sw .sw { width: 52px; height: 52px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .08); background-size: cover !important; background-position: center !important; display: flex; align-items: center; justify-content: center; }
.eqq-sw .sw i { width: 26px; height: 5px; border-radius: 3px; display: block; }
.eqq-actions { display: flex; flex-direction: column; gap: 8px; }
.eqq-actions > button, .eqq-row > * { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; border-radius: 12px; background: #F4F4F6; color: #1A1A1A !important; font: 600 13.5px inherit; font-family: inherit; text-decoration: none !important; border-bottom: 0 !important; cursor: pointer; }
.eqq-actions > button:hover, .eqq-row > *:hover { background: #EEF0FF; color: #4F46E5 !important; }
.eqq-actions > button:disabled { opacity: .6; cursor: wait; }
.eqq-actions .eqq-primary { background: #4F46E5 !important; color: #fff !important; height: 50px; font-size: 15px; }
.eqq-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.eqq-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.eqq-toast { font-size: 12.5px; color: #0D9488; text-align: center; min-height: 1em; }
@media (max-width: 640px) {
  .eqq-overlay { padding: 0; align-items: flex-end; }
  .eqq-modal { border-radius: 24px 24px 0 0; max-height: 94vh; }
  .eqq-body { padding: 14px; gap: 14px; }
  .eqq-preview { flex-basis: 100%; padding: 10px 0; }
}

/* ── البطاقة (360px) ── */
.cd { --u: 3.6px; position: relative; width: 360px; overflow: hidden; font-family: 'EqPlex', 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif; line-height: 1.45; flex: none; text-align: start; }
.cd * { box-sizing: border-box; }
.cd p { margin: 0; }
.cd .qt { margin: 0; font-family: 'EqAmiri', 'Amiri', 'Times New Roman', serif; font-weight: 700; font-size: calc(var(--u) * 6.2); line-height: 1.95; text-align: center; white-space: pre-line; overflow-wrap: anywhere; }
.cd .qt.long { font-size: calc(var(--u) * 5); }
.cd .au { font-size: calc(var(--u) * 2.7); opacity: .65; }
.cd .pill { padding: calc(var(--u) * .9) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 9); font-size: calc(var(--u) * 2.8); font-weight: 600; }
.cd .ft { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.cd .ft-book { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--u) calc(var(--u) * 1.8); }
/* سطر القارئ والعلامة — كبطاقة التطبيق */
.cd .reader { display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.cd .reader span { font-size: calc(var(--u) * 2.7); font-weight: 600; }
.cd .reader .url { font-size: calc(var(--u) * 2.3); font-weight: 400; opacity: .6; }
.cd .reader.center { align-items: center; text-align: center; }
.cd .reader.start { align-items: flex-start; text-align: start; }
.cd .mark { flex: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: calc(var(--u) * 1.8); display: flex; align-items: center; justify-content: center; }
.cd .mark svg { width: calc(var(--u) * 4); height: calc(var(--u) * 4); }

/* صفحة كتاب */
.cd.fam-page { background-image: linear-gradient(rgba(255, 250, 235, .35), rgba(120, 90, 40, .10)), url(/assets/share_bg/paper_grain.png); background-size: 100% 100%, 80px 80px; }
.pg-wrap { padding: calc(var(--u) * 7) calc(var(--u) * 8) calc(var(--u) * 5); display: flex; flex-direction: column; }
.pg-title { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2.4); margin-bottom: calc(var(--u) * 5); }
.pg-title i { width: calc(var(--u) * 12); height: calc(var(--u) * .18); background: rgba(138, 118, 86, .6); flex: none; }
.pg-title span { font-family: 'EqAmiri', 'Amiri', serif; font-size: calc(var(--u) * 3.4); color: #5C4E3A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-qt { color: rgba(46, 38, 32, .93); }
.pg-qt span { padding: 0 calc(var(--u) * .4); border-radius: calc(var(--u) * .8); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pg-rule { height: calc(var(--u) * .18); background: rgba(110, 94, 70, .25); margin: calc(var(--u) * 5) 0 calc(var(--u) * 2.6); }
.pg-foot { display: flex; align-items: flex-end; gap: calc(var(--u) * 2); }
.pg-book { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.pg-book b { font-family: 'EqAmiri', 'Amiri', serif; font-weight: 700; font-size: calc(var(--u) * 3.4); color: #3E3326; }
.pg-book span { font-size: calc(var(--u) * 2.6); color: #6E5E46; }
.pg-me { display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.pg-me .url { font-size: calc(var(--u) * 2.4); color: rgba(110, 94, 70, .75); }
.pg-brand { display: inline-flex; align-items: center; gap: 2px; font-size: calc(var(--u) * 2.7); font-weight: 700; color: #4F46E5; }
.pg-brand svg { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); }

/* بحاشية */
.pd-wrap { position: relative; padding: calc(var(--u) * 5.5) calc(var(--u) * 6) calc(var(--u) * 5); display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.pd-dot { position: absolute; top: calc(var(--u) * 4.5); left: calc(var(--u) * 4.5); width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; background: #4F46E5; }
.pd-blob { position: absolute; border-radius: 50%; filter: blur(calc(var(--u) * 6)); }
.pd-blob.a { top: calc(var(--u) * -10); right: calc(var(--u) * -8); width: calc(var(--u) * 55); height: calc(var(--u) * 40); background: rgba(220, 216, 255, .75); }
.pd-blob.b { bottom: calc(var(--u) * -12); left: calc(var(--u) * -6); width: calc(var(--u) * 45); height: calc(var(--u) * 35); background: rgba(205, 239, 230, .75); }
.pd-hl { position: relative; }
.pd-hl.on::before { content: ''; position: absolute; inset: calc(var(--u) * -1.4) calc(var(--u) * -2); background: rgba(255, 231, 168, .75); border-radius: calc(var(--u) * 2); }
.pd-hl .qt { position: relative; }

/* بعرض البطاقة */
.wd-qt { padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 3); }
.wd-foot { padding: calc(var(--u) * 3.6) calc(var(--u) * 7) calc(var(--u) * 4); }
.wd-classic { padding: calc(var(--u) * 3.6) calc(var(--u) * 4.4) calc(var(--u) * 4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * .6); }
.wd-classic b { font-family: 'EqAmiri', 'Amiri', serif; font-weight: 700; font-size: calc(var(--u) * 4); }
.wd-classic .reader { margin-top: calc(var(--u) * 1.6); }
.wd-one { padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 3.6); text-align: center; font-size: calc(var(--u) * 2.8); color: #6B6A73; }

/* طبيعة */
.cd.fam-nature { height: 450px; }
.nt-img, .nt-veil { position: absolute; inset: 0; background-size: cover; background-position: center; }
.nt-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; }
.nt-wrap { position: absolute; inset: 0; padding: calc(var(--u) * 9) calc(var(--u) * 8) calc(var(--u) * 6.5); display: flex; flex-direction: column; align-items: center; text-align: center; }
.nt-wrap.light { text-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 2.4) rgba(0, 0, 0, .35); }
.nt-mid { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; }
.nt-qt { font-size: calc(var(--u) * 6.6) !important; line-height: 1.9 !important; }
.nt-qt.long { font-size: calc(var(--u) * 5.2) !important; }
.nt-book { font-family: 'EqAmiri', 'Amiri', serif; font-weight: 700; font-size: calc(var(--u) * 4.2); }
.nt-au { font-size: calc(var(--u) * 3); opacity: .9; }
.nt-foot { width: 100%; margin-top: calc(var(--u) * 5); display: flex; align-items: center; justify-content: space-between; }
.nt-brand { display: inline-flex; align-items: center; gap: 2px; font-size: calc(var(--u) * 3.2); font-weight: 700; }
.nt-brand svg { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
.qt-list .eqq-bar { margin: 12px 0 0; }
.eqq-note { display: block; font-size: 12px; color: #9CA3AF; text-align: center; line-height: 1.7; }