/* ═══════════════════════════════════════════════════════════════════
   ⁕ دعاء الرابطة ⁕ ستايل البطاقات الموحَّد ⁕
   - ملف ستايل مشترك لكل بطاقات رجال الدعوة
   - مستوحى من تصميم مشروع دروس الفلسفة
═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0f0b0a;
  --bg2:#14100e;
  --bg3:#1a0e0c;
  --burgundy:#5c1a1b;
  --burgundy-dark:#3d0f10;
  --burgundy-light:#7a2324;
  --rust:#8b3a1f;
  --gold:#c9a961;
  --gold-soft:#b89550;
  --ink:#e8ddc9;
  --ink-dim:#a89a82;
  --ink-faint:#726452;
  --line:#2a201d;
  --green:#2d5a3d;
  --green-light:#4a8560;
  --blue:#2a4265;
  --blue-light:#4568a0;
  --purple:#3d2a4d;
  --purple-light:#6b4a82;
}

*{box-sizing:border-box;margin:0;padding:0}

body.bitaqa-page{
  background:var(--bg);
  color:var(--ink);
  font-family:'Tajawal',sans-serif;
  line-height:1.8;
  padding:40px 20px;
  min-height:100vh;
  background-image:
    radial-gradient(ellipse at top right, rgba(107,74,130,0.12), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(139,58,31,0.08), transparent 50%);
}

.wrapper{max-width:1100px;margin:0 auto}

/* ═════════════════════════════════════════════
   زر العودة إلى الرئيسية (ثابت في الزاوية)
   ═════════════════════════════════════════════ */
.back-home{
  position:fixed;
  top:20px;right:20px;
  z-index:9999;
  background:rgba(15,11,10,0.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--gold);
  color:var(--gold);
  padding:8px 18px;
  border-radius:8px;
  text-decoration:none;
  font-family:'Amiri',serif;
  font-size:14px;
  font-weight:700;
  transition:all 0.2s;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.back-home:hover{
  background:var(--gold);
  color:var(--bg);
}

/* ═════════════════════════════════════════════
   Hero — متغيِّر اللون حسب المرحلة من السيرة
   ═════════════════════════════════════════════ */
.hero{
  border-radius:14px;
  padding:36px 40px;
  margin-bottom:28px;
  text-align:center;
  border:1px solid var(--purple-light);
  background:linear-gradient(135deg,#1a0e0c 0%, #2a1a2c 60%, #3d2a4d 100%);
}
/* الألوان الخمسة لمراحل السيرة */
.hero-purple{
  border-color:var(--purple-light);
  background:linear-gradient(135deg,#1a0e0c 0%, #2a1a2c 60%, #3d2a4d 100%);
}
.hero-blue{
  border-color:var(--blue-light);
  background:linear-gradient(135deg,#1a0e0c 0%, #1a2436 60%, #2a4265 100%);
}
.hero-burgundy{
  border-color:var(--burgundy-light);
  background:linear-gradient(135deg,#1a0e0c 0%, #2a110f 50%, #5c1a1b 100%);
}
.hero-rust{
  border-color:var(--gold-soft);
  background:linear-gradient(135deg,#1a0e0c 0%, #2a1a0c 50%, #8b3a1f 100%);
}
.hero-green{
  border-color:var(--green-light);
  background:linear-gradient(135deg,#1a0e0c 0%, #1a2a1c 60%, #2d5a3d 100%);
}

.hero .label{
  color:var(--gold-soft);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:14px;
  margin-bottom:6px;
  letter-spacing:1px;
}
.hero .pretitle{
  color:var(--ink-dim);
  font-family:'Amiri',serif;
  font-size:17px;
  margin-bottom:8px;
}
.hero h1{
  font-family:'Amiri',serif;
  font-size:38px;
  color:var(--ink);
  margin-bottom:10px;
  line-height:1.4;
}
.hero .kunya{
  color:var(--gold);
  font-family:'Amiri',serif;
  font-size:20px;
  margin-bottom:14px;
  font-style:italic;
}
.hero p{
  color:var(--ink-dim);
  font-size:15px;
  max-width:780px;
  margin:0 auto;
  line-height:1.95;
}
.hero p em{color:var(--gold-soft);font-style:normal}

/* ═════════════════════════════════════════════
   Cards (sections)
   ═════════════════════════════════════════════ */
.card{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px 32px;
  margin-bottom:24px;
}
.card-title{
  display:flex;align-items:center;gap:12px;
  padding-bottom:16px;margin-bottom:20px;
  border-bottom:1px solid var(--burgundy-dark);
}
.card-title .num{
  background:var(--burgundy);
  color:var(--ink);
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
  font-size:16px;
  flex-shrink:0;
  font-family:'Amiri',serif;
}
.card-title h2{
  font-family:'Amiri',serif;
  font-size:22px;
  color:var(--ink);
  flex:1;
}

/* ═════════════════════════════════════════════
   جدول البيانات الأساسية (id-table)
   ═════════════════════════════════════════════ */
.id-table{
  width:100%;
  border-collapse:collapse;
  margin:6px 0;
}
.id-table tr{border-bottom:1px dashed var(--burgundy-dark)}
.id-table tr:last-child{border-bottom:none}
.id-table th{
  text-align:right;
  padding:14px 16px;
  background:#0a0605;
  color:var(--gold-soft);
  font-family:'Amiri',serif;
  font-weight:700;
  font-size:14.5px;
  width:180px;
  vertical-align:top;
}
.id-table td{
  padding:14px 16px;
  color:var(--ink);
  font-size:14.5px;
  line-height:1.85;
  vertical-align:top;
}
.id-table td b{color:var(--gold)}
.id-table td em{color:var(--gold-soft);font-style:normal}

/* ═════════════════════════════════════════════
   صندوق سياق المرحلة (context-box)
   ═════════════════════════════════════════════ */
.context-box{
  background:linear-gradient(135deg,#1a0b0a,#2a1a2c);
  border:2px solid var(--gold-soft);
  border-radius:12px;
  padding:24px 28px;
  margin:18px 0;
  position:relative;
}
.context-box::before{
  content:"⁕";
  position:absolute;
  top:-16px;right:30px;
  background:var(--bg);
  color:var(--gold);
  font-size:32px;
  font-weight:700;
  padding:0 10px;
  font-family:'Amiri',serif;
}
.context-box .main-text{
  font-family:'Amiri',serif;
  color:var(--ink);
  font-size:18px;
  line-height:1.95;
  margin-bottom:12px;
}
.context-box .main-text b{color:var(--gold)}
.context-box .sub-text{
  color:var(--ink-dim);
  font-size:14px;
  font-style:italic;
  line-height:1.85;
  padding-top:10px;
  border-top:1px dashed var(--burgundy-dark);
}

/* ═════════════════════════════════════════════
   صندوق التوضيح (reform)
   ═════════════════════════════════════════════ */
.reform{
  background:#0f0b0a;
  border-right:4px solid var(--gold);
  border-radius:6px;
  padding:16px 20px;
  margin:16px 0;
}
.reform .label{
  color:var(--gold);
  font-weight:700;
  font-size:13px;
  font-family:'Amiri',serif;
  margin-bottom:8px;
}
.reform p{
  font-size:14.5px;
  color:var(--ink);
  line-height:1.95;
}
.reform b{color:var(--gold-soft)}
.reform em{color:var(--ink-dim);font-style:italic}

/* ═════════════════════════════════════════════
   موقفان متقابلان (positions)
   ═════════════════════════════════════════════ */
.positions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:20px 0;
}
.position{
  background:#0f0b0a;
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px 26px;
  position:relative;
}
.position.pos-1{border-right:4px solid var(--blue-light)}
.position.pos-2{border-right:4px solid var(--green-light)}
.position .tag{
  display:inline-block;
  font-size:12px;
  padding:3px 10px;
  border-radius:12px;
  margin-bottom:10px;
  font-weight:700;
  font-family:'Amiri',serif;
}
.position.pos-1 .tag{background:rgba(69,104,160,0.2);color:var(--blue-light)}
.position.pos-2 .tag{background:rgba(74,133,96,0.2);color:var(--green-light)}
.position h3{
  font-family:'Amiri',serif;
  font-size:19px;
  margin-bottom:12px;
  color:var(--ink);
}
.position .thesis{
  background:#1a0e0c;
  border-radius:6px;
  padding:12px 16px;
  margin-bottom:14px;
  font-size:14px;
  color:var(--ink);
  line-height:1.85;
}
.position .thesis b{color:var(--gold)}
.position .quote-block{
  margin-top:10px;
  padding:12px 16px;
  background:#130c0a;
  border-radius:6px;
}
.position .quote-block .src{
  font-family:'Amiri',serif;
  color:var(--gold-soft);
  font-size:14px;
  font-weight:700;
  margin-bottom:6px;
}
.position .quote-block p{
  font-size:13.5px;
  color:var(--ink-dim);
  line-height:1.85;
}

/* ═════════════════════════════════════════════
   صندوق الحديث الشريف (formula-box)
   ═════════════════════════════════════════════ */
.formula-box{
  background:linear-gradient(135deg, #0a0605, #14100e);
  border:2px dashed var(--gold);
  border-radius:12px;
  padding:24px 28px;
  margin:18px 0;
  text-align:center;
}
.formula-box .label{
  color:var(--gold);
  font-family:'Amiri',serif;
  font-size:15px;
  font-weight:700;
  margin-bottom:12px;
}
.formula-box .formula{
  font-family:'Amiri',serif;
  color:var(--ink);
  font-size:19px;
  line-height:2;
  margin-bottom:10px;
}
.formula-box .formula b{color:var(--gold)}
.formula-box .formula em{color:var(--gold-soft);font-style:italic}
.formula-box .note{
  font-size:13.5px;
  color:var(--ink-dim);
  font-style:italic;
  padding-top:12px;
  border-top:1px dashed var(--burgundy-dark);
  margin-top:12px;
  line-height:1.9;
}

/* ═════════════════════════════════════════════
   التسلسل المنطقي (chain)
   ═════════════════════════════════════════════ */
.chain{
  background:#0a0605;
  border:1px solid var(--burgundy-dark);
  border-radius:12px;
  padding:28px;
  margin:20px 0;
}
.chain-item{
  background:#1a0e0c;
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px 20px;
  margin-bottom:12px;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:14px;
  align-items:center;
}
.chain-item:last-child{margin-bottom:0}
.chain-num{
  background:var(--burgundy);
  color:var(--ink);
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
  font-size:15px;
  font-family:'Amiri',serif;
}
.chain-body{font-size:14.5px;color:var(--ink);line-height:1.85}
.chain-body b{color:var(--gold)}
.chain-body em{color:var(--gold-soft);font-style:italic}
.chain-arrow{
  text-align:center;
  color:var(--gold-soft);
  margin:6px 0;
  font-size:16px;
}

/* ═════════════════════════════════════════════
   صندوق المحطات (example-box)
   ═════════════════════════════════════════════ */
.example-box{
  background:linear-gradient(135deg, #14100e, #1a0e0c);
  border:1px dashed var(--gold-soft);
  border-radius:10px;
  padding:20px 24px;
  margin:16px 0;
}
.example-box .label{
  color:var(--gold);
  font-family:'Amiri',serif;
  font-size:16px;
  font-weight:700;
  margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.example-box p{
  font-size:14.5px;
  color:var(--ink);
  line-height:1.95;
}
.example-box p b{color:var(--gold-soft)}
.example-box p em{color:var(--ink-dim);font-style:italic}
.example-box .narration-line{
  margin:12px 0;
  padding:10px 14px;
  background:rgba(201,169,97,0.07);
  border-radius:6px;
  font-size:13.5px;
  font-style:italic;
  color:var(--gold-soft);
  text-align:center;
  font-family:'Amiri',serif;
}

/* ═════════════════════════════════════════════
   صناديق الأقوال النبوية (quote-grand)
   ═════════════════════════════════════════════ */
.quote-grand{
  background:linear-gradient(135deg, #0a0605, #1a0e0c);
  border:1px solid var(--gold-soft);
  border-radius:10px;
  padding:22px 28px;
  margin:18px 0;
  text-align:center;
}
.quote-grand .text{
  font-family:'Amiri',serif;
  color:var(--gold);
  font-size:18px;
  line-height:2;
  font-style:italic;
}
.quote-grand .text b{color:var(--ink)}
.quote-grand .src{
  color:var(--ink-dim);
  font-size:13px;
  font-style:italic;
  margin-top:10px;
  font-family:'Cormorant Garamond',serif;
}

/* ═════════════════════════════════════════════
   صيغة الدعاء (synthesis)
   ═════════════════════════════════════════════ */
.synthesis{
  background:linear-gradient(135deg,#1a0b0a,#2a1a2c);
  border:2px solid var(--gold);
  border-radius:12px;
  padding:30px 36px;
  margin-top:24px;
}
.synthesis h2{
  font-family:'Amiri',serif;
  color:var(--gold);
  font-size:24px;
  margin-bottom:18px;
  text-align:center;
}
.synthesis .dua-text{
  background:#0f0b0a;
  border:1px solid var(--gold-soft);
  border-radius:10px;
  padding:24px 28px;
  margin-bottom:14px;
  font-family:'Amiri',serif;
  color:var(--ink);
  font-size:18px;
  line-height:2.1;
  text-align:center;
}
.synthesis .dua-text b{color:var(--gold)}
.synthesis .dua-text em{color:var(--gold-soft);font-style:italic}
.synthesis .dua-note{
  color:var(--ink-dim);
  font-size:13.5px;
  font-style:italic;
  text-align:center;
  font-family:'Cormorant Garamond',serif;
  padding-top:8px;
}

/* ═════════════════════════════════════════════
   نصائح للداعي (exam-tip)
   ═════════════════════════════════════════════ */
.exam-tip{
  background:linear-gradient(135deg, #2a1a0c, #1a0e0c);
  border:1px solid var(--gold-soft);
  border-radius:10px;
  padding:22px 26px;
  margin-top:22px;
}
.exam-tip .title{
  color:var(--gold);
  font-family:'Amiri',serif;
  font-size:18px;
  font-weight:700;
  margin-bottom:14px;
}
.exam-tip p{
  font-size:14.5px;
  color:var(--ink);
  line-height:2;
}
.exam-tip b{color:var(--gold-soft)}
.exam-tip em{color:var(--ink-dim);font-style:italic}

/* ═════════════════════════════════════════════
   فوتر
   ═════════════════════════════════════════════ */
.footer-note{
  text-align:center;
  color:var(--ink-faint);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:13.5px;
  margin-top:30px;
  padding:14px;
}

/* ═════════════════════════════════════════════
   استجابة الأجهزة الصغيرة
   ═════════════════════════════════════════════ */
@media(max-width:820px){
  .positions{grid-template-columns:1fr}
  .hero h1{font-size:26px}
  .hero .kunya{font-size:17px}
  body.bitaqa-page{padding:20px 10px}
  .card{padding:20px 18px}
  .id-table th{width:130px;font-size:13px;padding:10px 10px}
  .id-table td{font-size:13.5px;padding:10px 10px}
  .chain-item{grid-template-columns:36px 1fr}
  .back-home{top:12px;right:12px;padding:6px 14px;font-size:13px}
}