/* ============================================================
   08 — SHARE CARD  (ملف جديد)
   share-card.js يبني مودالًا كاملًا + بطاقة قصة، ولم يكن له
   سطر CSS واحد في القالب. هذه هي الطبقة المفقودة كاملةً.
   ============================================================ */

/* قفل تمرير الصفحة أثناء فتح المودال */
html.royal-share-card-open,
html.royal-share-card-open body{overflow:hidden}

/* ---------- غلاف المودال ---------- */
.royal-share-card-modal{
  position:fixed;
  inset:0;
  z-index:var(--ibn-z-modal);
  display:grid;
  place-items:center;
  padding:var(--ibn-gutter);
  direction:rtl;
}
.royal-share-card-modal[hidden]{display:none}

.royal-share-card-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,12,24,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  cursor:pointer;
}

/* ---------- اللوحة ---------- */
.royal-share-card-panel{
  position:relative;
  z-index:1;
  display:grid;
  gap:14px;
  width:min(460px,100%);
  max-height:calc(100dvh - (var(--ibn-gutter) * 2));
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:18px;
  border-radius:26px;
  background:linear-gradient(160deg,rgba(12,38,70,.96),rgba(4,17,33,.97));
  border:1px solid var(--ibn-border-strong);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation:ibn-share-in .22s ease both;
}
@keyframes ibn-share-in{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}

.royal-share-card-close{
  position:absolute;
  inset-block-start:12px;
  inset-inline-start:12px;      /* يسار في RTL — منطقي */
  z-index:2;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--ibn-radius-pill);
  background:rgba(255,255,255,.10);
  color:var(--ibn-on-dark);
  font-size:20px;
  line-height:1;
}
.royal-share-card-close:hover{background:rgba(255,255,255,.20);border-color:var(--ibn-gold-2)}

.royal-share-card-preview{display:grid;place-items:center}

/* ---------- أزرار الإجراءات ---------- */
.royal-share-card-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
  gap:8px;
}
.royal-share-card-actions button{
  min-height:42px;
  padding:9px 12px;
  border-radius:var(--ibn-radius-sm);
  border:1px solid rgba(241,210,124,.34);
  background:rgba(255,255,255,.08);
  color:var(--ibn-on-dark);
  font-size:14px;
  font-weight:var(--ibn-w-strong);
  transition:background var(--ibn-ease),border-color var(--ibn-ease),transform var(--ibn-ease);
}
.royal-share-card-actions button:hover{
  background:linear-gradient(135deg,var(--ibn-gold),var(--ibn-gold-2));
  border-color:var(--ibn-gold-2);
  color:#111827;
  transform:translateY(-1px);
}
/* الإجراء الأساسي: حفظ الصورة */
.royal-share-card-actions button[data-card-action="save"]{
  grid-column:1 / -1;
  background:linear-gradient(135deg,var(--ibn-gold),var(--ibn-gold-2));
  color:#111827;
  border-color:var(--ibn-gold-2);
}

.royal-share-card-message{
  min-height:20px;
  text-align:center;
  font-size:14px;
  font-weight:var(--ibn-w-strong);
  color:var(--ibn-gold-3);
}
.royal-share-card-message.is-error{color:#ff9d9d}

/* ============================================================
   بطاقة القصة (المعاينة) — تطابق مخرجات renderCanvas
   الكانفاس: 430×780، البطل 405، إطار 16، أنصاف 28/22.
   ============================================================ */
.royal-story-card{
  width:100%;
  max-width:430px;
  aspect-ratio:430 / 780;
  display:grid;
  grid-template-rows:auto 1fr;
  padding:16px;
  border-radius:28px;
  background:linear-gradient(180deg,#071827 0%,#102b46 56%,#06111f 100%);
  border:1px solid rgba(241,210,124,.26);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
  color:#f8efd8;
}

.royal-story-hero{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#0d2238;
  aspect-ratio:398 / 405;
}
.royal-story-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.royal-story-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.08) 0%,
    rgba(0,0,0,.18) 72%,
    rgba(6,17,31,.86) 100%
  );
}
.royal-story-brand{
  position:absolute;
  inset-block-start:14px;
  inset-inline-end:18px;
  font-size:16px;
  font-weight:var(--ibn-w-strong);
  color:rgba(237,201,100,.94);
}

.royal-story-body{
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:8px;
  padding:16px 6px 0;
  align-content:start;
}
.royal-story-title{
  font-size:20px;
  line-height:1.35;
  font-weight:var(--ibn-w-title);
  color:#f8efd8;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.royal-story-excerpt{
  font-size:14px;
  line-height:1.6;
  font-weight:var(--ibn-w-body);
  color:#d8d0bd;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.royal-story-footer{
  align-self:end;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:20px;
  background:rgba(255,250,240,.94);
}
.royal-story-qr{
  flex:0 0 auto;
  width:72px;
  height:72px;
  border-radius:10px;
  overflow:hidden;
  background:#fffaf0;
}
.royal-story-qr img{width:100%;height:100%;object-fit:contain}
.royal-story-link{
  direction:ltr;
  unicode-bidi:isolate;
  font-size:14px;
  font-weight:var(--ibn-w-title);
  color:#071827;
  letter-spacing:.02em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:520px){
  .royal-share-card-panel{padding:14px;border-radius:22px}
  .royal-story-title{font-size:18px}
  .royal-story-qr{width:62px;height:62px}
}