/* ===== CosmaLore References Pro v4.0 ===== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

/* ── Citation: simple [N] like Wikipedia ── */
sup.ref { display:inline!important; vertical-align:super!important; font-size:.72em!important; line-height:0!important; }
sup.ref a { color:#0645ad!important; text-decoration:none!important; font-size:.9em!important; font-weight:400!important; font-family:inherit!important; cursor:pointer!important; padding:0 1px!important; border-radius:2px!important; transition:background .12s!important; }
sup.ref a:hover  { background:#e8f0fe!important; color:#0645ad!important; }
sup.ref a.csm-on { background:#0645ad!important; color:#fff!important; border-radius:2px!important; }

/* ── Overlay ── */
#csm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.32); backdrop-filter:blur(2px); display:none; z-index:99990; }

/* ── Popup ── */
#csm-pop {
  position:fixed; z-index:99999;
  width:min(94vw,340px);
  background:#fff; border-radius:18px;
  box-shadow:0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  direction:rtl; font-family:'Tajawal',Tahoma,sans-serif;
  overflow:hidden; opacity:0;
  transform:translateY(8px) scale(.97);
  transition:opacity .18s ease, transform .18s ease;
  display:none;
}
#csm-pop.csm-show { opacity:1; transform:translateY(0) scale(1); display:block; }
.csm-bar { width:40px; height:4px; background:#d1d5db; border-radius:999px; margin:10px auto 0; }
.csm-ph { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 8px; border-bottom:1px solid #f3f4f6; }
.csm-pnum { font-size:13px; font-weight:700; color:#374151; }
.csm-plabel { font-size:12px; color:#9ca3af; }
.csm-pclose { background:#f3f4f6; border:none; color:#6b7280; width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.csm-pclose:hover { background:#e5e7eb; color:#111; }
.csm-pb { padding:10px 14px 14px; max-height:55vh; overflow-y:auto; }
.csm-field { margin-bottom:9px; }
.csm-fl { font-size:10.5px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px; }
.csm-fv { font-size:14px; line-height:1.65; color:#111827; word-break:break-word; }
.csm-fv a { color:#0645ad; text-decoration:none; font-size:12.5px; word-break:break-all; display:block; }
.csm-fv a:hover { text-decoration:underline; }
.csm-open-btn { display:block; width:100%; margin-top:12px; background:#0645ad; color:#fff!important; text-decoration:none!important; padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:700; text-align:center; transition:background .15s; }
.csm-open-btn:hover { background:#0533a0!important; }

/* ── Reference Section ── */
.csm-ref-section { margin-top:36px!important; border-top:1px solid #d1d5db!important; direction:rtl!important; font-family:'Tajawal',Tahoma,sans-serif!important; clear:both!important; }
.csm-ref-header { display:flex; align-items:center; justify-content:space-between; padding:13px 2px; cursor:pointer; user-select:none; }
.csm-ref-title { font-size:19px; font-weight:700; color:#111827; }
.csm-ref-arrow { font-size:14px; color:#6b7280; transition:transform .25s; display:inline-block; }
.csm-ref-arrow.open { transform:rotate(180deg); }

/* CLOSED by default */
.csm-ref-body { max-height:0; overflow:hidden; opacity:0; transition:max-height .42s ease, opacity .3s ease; }
.csm-ref-body.open { max-height:99999px; opacity:1; }

.csm-ref-list { list-style:none; padding:0; margin:4px 0 8px; }
.csm-ref-item { display:flex; gap:10px; padding:12px 0; border-bottom:1px solid #f3f4f6; font-size:14px; line-height:1.75; color:#1f2937; align-items:flex-start; }
.csm-ref-item:last-child { border-bottom:none; }
.csm-ref-badge { background:#f3f4f6; color:#374151; font-size:12px; font-weight:700; min-width:26px; height:26px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; border:1px solid #e5e7eb; }
.csm-ref-content { flex:1; }
.csm-ref-name { font-weight:600; color:#111827; display:block; margin-bottom:2px; font-size:14px; }
.csm-ref-meta { font-size:12.5px; color:#6b7280; display:block; margin-bottom:2px; }
.csm-ref-url { color:#0645ad; font-size:12px; word-break:break-all; text-decoration:none; display:block; }
.csm-ref-url:hover { text-decoration:underline; }
.csm-ref-back { color:#0645ad; font-size:11px; text-decoration:none; opacity:.55; margin-right:4px; }
.csm-ref-back:hover { opacity:1; }

@media(max-width:600px){
  .csm-ref-title{font-size:17px;}
  .csm-ref-name{font-size:13.5px;}
}