/**
 * OIC Elements CSS — مكتبة العناصر
 * Heading A (01-15)
 * المتغيرات: --el-color-1 (أول) | --el-color-2 (ثاني) | --el-text | --el-size
 */

/* ── متغيرات العناصر ── */
.oic-element {
  --el-color-1: var(--c-primary,    #2f61ff);
  --el-color-2: var(--c-secondary,  #6d44ff);
  --el-text:    var(--c-text,       #10233c);
  --el-muted:   var(--c-text-light, #66768d);
  --el-size:    0px;
}

/* حجم مخصص لو حُدّد (غير صفر) */
.oic-element .title { font-size: var(--el-font-size, unset); }

/* ════════════════════════════════
   A-01: خط مركزي تحت العنوان
   اللون 1 → الخط المركزي
   ════════════════════════════════ */
.oic-heading-a-01 .title {
  margin: 0;
  font-size: clamp(28px, 6vw, 58px);
  line-height: 1.15;
  font-weight: 800;
  color: var(--el-text);
}
.oic-heading-a-01 .under {
  width: 210px; height: 16px;
  margin: 14px auto 0; position: relative;
}
.oic-heading-a-01 .under::before,
.oic-heading-a-01 .under::after {
  content: ""; position: absolute; top: 7px;
  width: 84px; height: 2px; background: #c9ced8;
}
.oic-heading-a-01 .under::before { right: 0; }
.oic-heading-a-01 .under::after  { left:  0; }
.oic-heading-a-01 .under span {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 6px; width: 60px; height: 4px; border-radius: 10px;
  background: var(--el-color-1);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--el-color-1) 12%, transparent);
}

/* ════════════════════════════════
   A-02: شارة + عنوان Bold
   اللون 1 → الشارة + النص Bold
   ════════════════════════════════ */
.oic-heading-a-02 .badge {
  display: inline-block; padding: 8px 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--el-color-1) 10%, white);
  color: var(--el-color-1); font-size: 15px;
  margin-bottom: 16px; font-weight: 700;
}
.oic-heading-a-02 .title {
  margin: 0; font-size: clamp(28px, 6vw, 60px);
  line-height: 1.15; font-weight: 300; color: #5d6676;
  position: relative; z-index: 1;
}
.oic-heading-a-02 .title strong {
  color: var(--el-color-1); font-weight: 900;
}
.oic-heading-a-02 .title-wrap { display: inline-block; position: relative; }
.oic-heading-a-02 .title-wrap::after {
  content: ""; position: absolute;
  left: -12px; right: -12px; bottom: 8px; height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--el-color-1) 8%, transparent);
  z-index: -1;
}

/* ════════════════════════════════
   A-03: شريط لوني + عنوان
   اللون 1 → لون الشريط + العنوان
   ════════════════════════════════ */
.oic-heading-a-03 .row {
  display: flex; align-items: center;
  justify-content: flex-start; gap: 14px;
}
.oic-heading-a-03 .bar {
  width: 60px; height: 10px;
  background: var(--el-color-1); flex: 0 0 auto;
}
.oic-heading-a-03 .title {
  margin: 0; color: var(--el-color-1);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 900; letter-spacing: .06em;
}

/* ════════════════════════════════
   A-04: kicker صغير + عنوان كبير
   اللون 1 → العنوان الكبير
   اللون 2 → الـ kicker + الخط
   ════════════════════════════════ */
.oic-heading-a-04 .kicker {
  display: flex; align-items: center; gap: 12px;
  color: var(--el-muted); font-size: clamp(14px, 2vw, 20px);
  font-weight: 700; letter-spacing: .04em; margin-bottom: 14px;
}
.oic-heading-a-04 .kicker .line {
  width: 44px; height: 3px;
  background: var(--el-color-2); border-radius: 99px;
}
.oic-heading-a-04 .title {
  margin: 0; font-size: clamp(30px, 6vw, 64px);
  line-height: 1.08; font-weight: 900; color: var(--el-text);
}

/* ════════════════════════════════
   A-05: تدرج لوني على النص
   اللون 1 → بداية التدرج
   اللون 2 → نهاية التدرج
   ════════════════════════════════ */
.oic-heading-a-05 .title {
  margin: 0; font-size: clamp(28px, 7vw, 74px);
  line-height: 1.08; font-weight: 900; letter-spacing: -.02em;
  background: linear-gradient(90deg,
    var(--el-color-1) 0%,
    var(--el-color-2) 50%,
    var(--el-color-1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ════════════════════════════════
   A-06: كلمة خلفية ضخمة + عنوان
   اللون 1 → العنوان الأمامي
   اللون 2 → الكلمة الخلفية الشفافة
   ════════════════════════════════ */
.oic-heading-a-06 {
  position: relative; min-height: 160px;
  display: flex; align-items: center; justify-content: center;
}
.oic-heading-a-06 .bg-word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(70px, 18vw, 220px); font-weight: 900;
  color: color-mix(in srgb, var(--el-color-2) 12%, transparent);
  pointer-events: none; user-select: none;
  white-space: nowrap; overflow: hidden;
}
.oic-heading-a-06 .title {
  position: relative; margin: 0; z-index: 1;
  font-size: clamp(28px, 6vw, 66px);
  line-height: 1.1; font-weight: 400;
  color: var(--el-color-1);
}
.oic-heading-a-06 .title strong { font-weight: 900; }

/* ════════════════════════════════
   A-07: خطان جانبيان + عنوان مركزي
   اللون 1 → الخطان الجانبيان
   ════════════════════════════════ */
.oic-heading-a-07 .line-wrap {
  display: flex; align-items: center;
  justify-content: center; gap: 18px; width: 100%;
}
.oic-heading-a-07 .line {
  flex: 1 1 100px; max-width: 340px;
  height: 2px;
  background: var(--el-color-1); opacity: .5;
}
.oic-heading-a-07 .title {
  margin: 0; font-size: clamp(20px, 3.5vw, 40px);
  font-weight: 800; letter-spacing: .08em;
  color: var(--el-text); white-space: nowrap;
}

/* ════════════════════════════════
   A-08: خلفية تدرج + عنوان أبيض
   اللون 1 → بداية الخلفية
   اللون 2 → نهاية الخلفية
   ════════════════════════════════ */
.oic-heading-a-08 {
  background: linear-gradient(135deg,
    var(--el-color-2) 0%,
    var(--el-color-1) 100%
  );
  border-radius: inherit; padding: 20px;
}
.oic-heading-a-08 .row {
  display: flex; align-items: center; gap: 16px; width: 100%;
}
.oic-heading-a-08 .title {
  margin: 0; font-size: clamp(22px, 4.2vw, 48px);
  font-weight: 500; color: #fff;
  letter-spacing: .02em; white-space: nowrap;
}
.oic-heading-a-08 .line {
  height: 2px; flex: 1 1 auto;
  background: rgba(255,255,255,.85);
}

/* ════════════════════════════════
   A-09: خطان رأسيان جانبا العنوان
   اللون 1 → الخطان الرأسيان
   ════════════════════════════════ */
.oic-heading-a-09 .title {
  margin: 0; font-size: clamp(28px, 6vw, 64px);
  font-weight: 900; color: var(--el-text);
  line-height: 1.12; display: inline-block;
  position: relative; padding-inline: 18px;
}
.oic-heading-a-09 .title::before,
.oic-heading-a-09 .title::after {
  content: ""; position: absolute; top: 50%;
  width: 8px; height: 70%; transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg,
    var(--el-color-1), var(--el-color-2)
  );
}
.oic-heading-a-09 .title::before { right: -2px; }
.oic-heading-a-09 .title::after  { left:  -2px; }

/* ════════════════════════════════
   A-10: خط تدرجي تحت العنوان
   اللون 1 → بداية الخط التدرجي
   اللون 2 → نهاية الخط التدرجي
   ════════════════════════════════ */
.oic-heading-a-10 .title {
  margin: 0; font-size: clamp(28px, 6vw, 62px);
  line-height: 1.1; font-weight: 900; color: var(--el-text);
  position: relative; display: inline-block; padding-bottom: 14px;
}
.oic-heading-a-10 .title::after {
  content: ""; position: absolute;
  right: 0; bottom: 0; width: 58%; height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--el-color-1), var(--el-color-2)
  );
  box-shadow: 0 8px 18px color-mix(in srgb,
    var(--el-color-1) 22%, transparent
  );
}

/* ════════════════════════════════
   A-11: chip صغيرة + عنوان
   اللون 1 → لون الـ chip
   ════════════════════════════════ */
.oic-heading-a-11 .chip {
  display: inline-block;
  background: color-mix(in srgb, var(--el-color-1) 8%, white);
  color: var(--el-color-1);
  border: 1px solid color-mix(in srgb, var(--el-color-1) 20%, white);
  border-radius: 999px; padding: 6px 14px;
  font-size: 14px; font-weight: 700; margin-bottom: 14px;
}
.oic-heading-a-11 .title {
  margin: 0; font-size: clamp(28px, 6vw, 58px);
  font-weight: 900; line-height: 1.15; color: var(--el-text);
}
.oic-heading-a-11 .title .lite {
  font-weight: 400; color: var(--el-muted);
}

/* ════════════════════════════════
   A-12: كلمة مظللة داخل العنوان
   اللون 1 → خلفية الـ mark
   ════════════════════════════════ */
.oic-heading-a-12 .title {
  margin: 0; font-size: clamp(30px, 6vw, 64px);
  font-weight: 900; line-height: 1.08; color: var(--el-text);
}
.oic-heading-a-12 .title .mark {
  display: inline-block;
  background: var(--el-color-1);
  color: #fff; padding: .05em .22em .08em; border-radius: 6px;
}

/* ════════════════════════════════
   A-13: pill بخلفية تدرج + خطان
   اللون 1 → نهاية الخلفية
   اللون 2 → بداية الخلفية
   ════════════════════════════════ */
.oic-heading-a-13 {
  background: linear-gradient(90deg,
    var(--el-color-2) 0%,
    var(--el-color-1) 100%
  );
  border-radius: inherit; padding: 16px 20px;
}
.oic-heading-a-13 .pill-row {
  display: flex; align-items: center;
  justify-content: center; gap: 0; width: 100%;
}
.oic-heading-a-13 .pill-row::before,
.oic-heading-a-13 .pill-row::after {
  content: ""; height: 6px;
  flex: 1 1 auto; background: rgba(255,255,255,.9);
}
.oic-heading-a-13 .pill {
  margin: 0 18px; padding: 8px 24px; border-radius: 999px;
  background: #fff; color: var(--el-color-2);
  font-size: clamp(20px, 3.5vw, 40px); font-weight: 700;
  white-space: nowrap; box-shadow: 0 10px 20px rgba(0,0,0,.09);
}

/* ════════════════════════════════
   A-14: نقاط زخرفية + نص طويل
   اللون 1 → لون النقاط
   ════════════════════════════════ */
.oic-heading-a-14 .row {
  display: flex; align-items: flex-start; gap: 20px;
}
.oic-heading-a-14 .dots {
  width: 18px; min-height: 58px; flex: 0 0 auto;
  background-image: radial-gradient(circle,
    var(--el-color-1) 1.2px, transparent 1.2px
  );
  background-size: 6px 6px; opacity: .6; margin-top: 8px;
}
.oic-heading-a-14 .title {
  margin: 0; font-size: clamp(20px, 4vw, 42px);
  font-weight: 500; color: var(--el-text); line-height: 1.45;
}

/* ════════════════════════════════
   A-15: عنوان + سطر ملون + خط
   اللون 1 → السطر الملون (accent)
   اللون 2 → خط الزخرفة
   ════════════════════════════════ */
.oic-heading-a-15 .title {
  margin: 0; font-size: clamp(28px, 6vw, 58px);
  font-weight: 700; color: var(--el-text); line-height: 1.1;
}
.oic-heading-a-15 .title .accent {
  display: block; color: var(--el-color-1); font-weight: 900;
}
.oic-heading-a-15 .under {
  display: flex; align-items: center; gap: 4px; margin-top: 14px;
}
.oic-heading-a-15 .under .long {
  width: 64px; height: 6px; background: var(--el-color-2);
}
.oic-heading-a-15 .under .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--el-color-2);
  box-shadow: 10px 0 0 var(--el-color-2), 20px 0 0 var(--el-color-2);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .oic-heading-a-01 .under { width: 160px; }
  .oic-heading-a-01 .under::before,
  .oic-heading-a-01 .under::after { width: 56px; }
  .oic-heading-a-07 .title,
  .oic-heading-a-08 .title { white-space: normal; }
}
/* ══ Badge Element ══ */
.oic-badge-bg-01 .badge-inner,.oic-badge-bg-02 .badge-inner,
.oic-badge-bg-03 .badge-inner,.oic-badge-bg-04 .badge-inner {
    display:inline-block;text-decoration:none;font-weight:700;font-size:.82em;transition:opacity .2s;
}
/* bg-01: ممتلئ */
.oic-badge-bg-01 .badge-inner { padding:4px 14px;background:var(--el-bg,var(--c-primary,#2563eb));color:var(--el-color,#fff);border-radius:20px; }
/* bg-02: محدد */
.oic-badge-bg-02 .badge-inner { padding:4px 14px;background:transparent;color:var(--el-color,var(--c-primary,#2563eb));border:2px solid var(--el-bg,var(--c-primary,#2563eb));border-radius:6px; }
/* bg-03: خلفية فاتحة */
.oic-badge-bg-03 .badge-inner { padding:4px 14px;background:var(--el-bg,#eff6ff);color:var(--el-color,var(--c-primary,#2563eb));border-radius:6px; }
/* bg-04: نقطة + نص */
.oic-badge-bg-04 { display:flex;align-items:center;gap:6px; }
.oic-badge-bg-04::before { content:'';width:8px;height:8px;border-radius:50%;background:var(--el-bg,var(--c-primary,#2563eb));flex-shrink:0; }
.oic-badge-bg-04 .badge-inner { color:var(--el-color,inherit); }
/* ══ Button Element ══ */
.oic-btn { display:inline-block;text-decoration:none;cursor:pointer;transition:all .2s;font-weight:600;line-height:1; }
.oic-btn-sm  { padding:6px 16px;font-size:.82rem; }
.oic-btn-md  { padding:10px 24px;font-size:.9rem; }
.oic-btn-lg  { padding:14px 32px;font-size:1rem; }
.oic-btn-xl  { padding:18px 40px;font-size:1.1rem; }
/* btn-01: ممتلئ */
.oic-btn-btn-01 { background:var(--c-primary,#2563eb);color:#fff;border-radius:6px;border:2px solid var(--c-primary,#2563eb); }
.oic-btn-btn-01:hover { opacity:.88;transform:translateY(-1px); }
/* btn-02: محدد */
.oic-btn-btn-02 { background:transparent;color:var(--c-primary,#2563eb);border-radius:6px;border:2px solid var(--c-primary,#2563eb); }
.oic-btn-btn-02:hover { background:var(--c-primary,#2563eb);color:#fff; }
/* btn-03: pill */
.oic-btn-btn-03 { background:var(--c-primary,#2563eb);color:#fff;border-radius:50px;border:2px solid var(--c-primary,#2563eb); }
.oic-btn-btn-03:hover { opacity:.88;transform:translateY(-1px); }
/* btn-04: رابط */
.oic-btn-btn-04 { background:transparent;color:var(--c-primary,#2563eb);border:none;text-decoration:underline;padding-inline:0; }
.oic-btn-btn-04:hover { opacity:.75; }
/* btn-05: تدرج */
.oic-btn-btn-05 { background:linear-gradient(135deg,var(--c-primary,#2563eb),#7c3aed);color:#fff;border:none;border-radius:6px; }
.oic-btn-btn-05:hover { opacity:.88;transform:translateY(-1px); }
/* ══ Title Element ══ */
.oic-title-t-01 .title-text,
.oic-title-t-02 .title-text,
.oic-title-t-03 .title-text,
.oic-title-t-04 .title-text {
    margin: 0; padding: 0;
    font-size: var(--el-font-size, inherit);
    color: var(--el-color, inherit);
    line-height: 1.3;
}
/* t-02: تدرج */
.oic-title-t-02 .title-text {
    background: linear-gradient(135deg, var(--c-primary, #2563eb), #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* t-03: خط سفلي */
.oic-title-t-03 { display: inline-block; }
.oic-title-t-03 .title-line {
    display: block; width: 60px; height: 3px;
    background: var(--c-primary, #2563eb);
    margin-top: 8px;
    border-radius: 2px;
}
/* t-04: شريط جانبي */
.oic-title-t-04 {
    border-inline-end: 4px solid var(--c-primary, #2563eb);
    padding-inline-end: 12px;
}
/* ══ Subtitle Element ══ */
.oic-subtitle-st-01 .subtitle-text {
    font-size: .85em;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--el-color, var(--c-primary, #2563eb));
    display: block;
}
.oic-subtitle-st-02 .subtitle-text {
    display: inline-block;
    padding: 4px 16px;
    background: color-mix(in srgb, var(--el-color, var(--c-primary,#2563eb)) 12%, transparent);
    color: var(--el-color, var(--c-primary, #2563eb));
    border: 1px solid var(--el-color, var(--c-primary, #2563eb));
    border-radius: 20px;
    font-size: .8em;
    font-weight: 700;
}
.oic-subtitle-st-03 {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.oic-subtitle-st-03::before,
.oic-subtitle-st-03::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--el-color, var(--c-primary, #2563eb));
    opacity: .4;
}
.oic-subtitle-st-03 .subtitle-text {
    font-size: .82em;
    font-weight: 700;
    color: var(--el-color, var(--c-primary, #2563eb));
    white-space: nowrap;
}
/* ══ Description Element ══ */
.oic-desc-d-01 .desc-text,
.oic-desc-d-02 .desc-text {
    margin: 0;
    line-height: 1.7;
    color: var(--el-color, var(--c-text-muted, #64748b));
}
.oic-desc-d-02 {
    border-inline-end: 3px solid var(--c-primary, #2563eb);
    padding-inline-end: 14px;
}
/* ══ Paragraph Element ══ */
.oic-para-p-01 .para-content,
.oic-para-p-02 .para-content {
    line-height: 1.8;
    color: var(--el-color, var(--c-text, inherit));
}
.oic-para-p-01 .para-content p,
.oic-para-p-02 .para-content p { margin-bottom: .8em; }
.oic-para-p-01 .para-content p:last-child,
.oic-para-p-02 .para-content p:last-child { margin-bottom: 0; }
.oic-para-p-02 {
    border-inline-end: 3px solid var(--c-primary, #2563eb);
    padding-inline-end: 16px;
}

/* ══ Image Element ══ */
.oic-img-im-01 img,.oic-img-im-02 img,.oic-img-im-03 img,.oic-img-im-04 img {
    max-width:100%;height:auto;display:inline-block;
}
.img-caption { display:block; }

/* ══ Icon Element ══ */
.oic-icon-el-ic-01,.oic-icon-el-ic-02,
.oic-icon-el-ic-03,.oic-icon-el-ic-04 { display:block; }

/* ══ Divider Element ══ */
.oic-divider-dv-01,.oic-divider-dv-02,
.oic-divider-dv-03,.oic-divider-dv-04,
.oic-divider-dv-05 { display:block;width:100%; }

/* ══ Spacer Element ══ */
.oic-spacer { display:block;width:100%; }

/* ── Heading Style a-16: نيون + توهج ── */
.oic-heading-a-16 {
    background: #0f172a;
    border-radius: 10px;
    padding: 20px 28px 16px;
    text-align: center;
}
.oic-heading-a-16 .neon-title {
    color: #38bdf8;
    text-shadow:
        0 0 8px rgba(56,189,248,.6),
        0 0 20px rgba(56,189,248,.3),
        0 0 40px rgba(56,189,248,.15);
    margin-bottom: 10px;
}
.oic-heading-a-16 .neon-line {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to left, #38bdf8, #818cf8);
    box-shadow:
        0 0 8px rgba(56,189,248,.7),
        0 0 16px rgba(56,189,248,.4);
    width: 80%;
    margin: 0 auto;
}