/**
 * OIC Backgrounds Library — مكتبة الخلفيات المتدرجة
 * 23 خلفية جاهزة — تُفعّل من الإعدادات → الهوية البصرية
 * v1.1.032.2
 */

/* ═══ Linear Gradients ═══ */
.b-01{ background: linear-gradient(135deg, #22c55e, #3b82f6 55%, #a855f7) !important; }
.b-02{ background: linear-gradient(135deg, #0ea5e9, #22c55e 55%, #fde047) !important; }
.b-03{ background: linear-gradient(135deg, #111827, #334155 40%, #0f172a) !important; }
.b-04{ background: linear-gradient(135deg, #ef4444, #f97316, #f59e0b) !important; }
.b-05{ background: linear-gradient(135deg, #ec4899, #8b5cf6 55%, #22c55e) !important; }

/* ═══ Radial Gradients ═══ */
.b-06{
    background:
        radial-gradient(circle at 20% 20%, rgba(59,130,246,.95), transparent 55%),
        radial-gradient(circle at 80% 30%, rgba(236,72,153,.8), transparent 60%),
        radial-gradient(circle at 50% 90%, rgba(34,197,94,.7), transparent 55%),
        #0b1020 !important;
}
.b-07{
    background:
        radial-gradient(700px 300px at 20% 20%, rgba(250,204,21,.75), transparent 60%),
        radial-gradient(700px 300px at 80% 60%, rgba(56,189,248,.60), transparent 60%),
        linear-gradient(135deg, #0b1220, #111827) !important;
}
.b-08{
    background:
        radial-gradient(circle at 30% 25%, rgba(168,85,247,.75), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(20,184,166,.55), transparent 60%),
        #090a1a !important;
}

/* ═══ Conic Gradients ═══ */
.b-09{ background: conic-gradient(from 200deg at 50% 50%, #22c55e, #0ea5e9, #a855f7, #ec4899, #22c55e) !important; }
.b-10{
    background: conic-gradient(from 90deg at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,0), rgba(255,255,255,.08)) !important;
    background-color: #0b1220 !important;
}

/* ═══ Mesh Gradients ═══ */
.b-11{
    background:
        radial-gradient(circle at 15% 20%, rgba(99,102,241,.85), transparent 55%),
        radial-gradient(circle at 70% 15%, rgba(34,197,94,.55), transparent 55%),
        radial-gradient(circle at 85% 75%, rgba(236,72,153,.65), transparent 55%),
        radial-gradient(circle at 25% 85%, rgba(250,204,21,.55), transparent 55%),
        #070b16 !important;
}
.b-12{
    background:
        radial-gradient(600px 260px at 15% 15%, rgba(56,189,248,.65), transparent 70%),
        radial-gradient(600px 260px at 85% 30%, rgba(244,114,182,.55), transparent 70%),
        radial-gradient(800px 380px at 55% 90%, rgba(34,197,94,.30), transparent 70%),
        linear-gradient(135deg, #0b1220, #0b1020) !important;
}

/* ═══ Aurora / Sunset / Ocean ═══ */
.b-13{
    background:
        radial-gradient(900px 260px at 10% 20%, rgba(56,189,248,.55), transparent 60%),
        radial-gradient(900px 260px at 90% 40%, rgba(34,197,94,.45), transparent 65%),
        radial-gradient(900px 260px at 40% 90%, rgba(168,85,247,.35), transparent 65%),
        linear-gradient(135deg, #070b16, #0b1220) !important;
}
.b-14{
    background:
        radial-gradient(700px 300px at 30% 35%, rgba(251,146,60,.85), transparent 60%),
        radial-gradient(900px 420px at 70% 65%, rgba(236,72,153,.65), transparent 65%),
        linear-gradient(135deg, #0b1220, #111827) !important;
}
.b-15{
    background:
        radial-gradient(900px 380px at 20% 30%, rgba(14,165,233,.75), transparent 65%),
        radial-gradient(900px 380px at 70% 70%, rgba(34,197,94,.40), transparent 65%),
        linear-gradient(135deg, #081026, #0b1220) !important;
}
.b-16{
    background:
        radial-gradient(circle at 20% 30%, rgba(168,85,247,.75), transparent 60%),
        radial-gradient(circle at 80% 35%, rgba(59,130,246,.55), transparent 65%),
        radial-gradient(circle at 55% 80%, rgba(236,72,153,.35), transparent 65%),
        #070a16 !important;
}

/* ═══ Light / Special ═══ */
.b-17{
    background:
        radial-gradient(700px 260px at 20% 30%, rgba(186,230,253,.95), transparent 60%),
        radial-gradient(700px 260px at 80% 45%, rgba(251,207,232,.90), transparent 60%),
        radial-gradient(700px 260px at 55% 85%, rgba(187,247,208,.85), transparent 60%),
        #f8fafc !important;
}
.b-18{
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) !important;
    background-color: #0b1220 !important;
}

/* ═══ Patterns ═══ */
.b-19{
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 8px, rgba(255,255,255,0) 8px 16px),
        linear-gradient(135deg, #0b1220, #111827) !important;
}
.b-20{
    background:
        radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.2px),
        linear-gradient(135deg, #0b1220, #111827) !important;
    background-size: 14px 14px, auto !important;
}
.b-21{
    background:
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(135deg, #0b1220, #111827) !important;
    background-size: 18px 18px, 18px 18px, auto !important;
}

/* ═══ Spotlights ═══ */
.b-22{
    background:
        radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,.20), transparent 60%),
        linear-gradient(135deg, #0b1220, #111827) !important;
}
.b-23{
    background:
        radial-gradient(900px 260px at 50% 110%, rgba(59,130,246,.35), transparent 60%),
        linear-gradient(135deg, #0b1220, #0b1020) !important;
}

/* ═══ Dark backgrounds — auto text color ═══ */
.b-01, .b-02, .b-03, .b-04, .b-05,
.b-06, .b-07, .b-08, .b-09, .b-10,
.b-11, .b-12, .b-13, .b-14, .b-15,
.b-16, .b-18, .b-19, .b-20, .b-21,
.b-22, .b-23 {
    color: #e7eefc;
}

/* Pastel background keeps dark text */
.b-17 { color: #0b1220; }

/* ═══ Fix inner elements for dark backgrounds ═══ */
body[class*="b-"] .site-header,
body[class*="b-"] .site-footer { position: relative; z-index: 1; }

/* Content area cards stay white bg */
body[class*="b-"]:not(.b-17) .oic-card:not(.card--dark):not(.card--glass):not(.card--o) {
    background: rgba(255,255,255,0.95);
    color: #1e293b;
}
body[class*="b-"]:not(.b-17) .oic-card:not(.card--dark):not(.card--glass):not(.card--o) .oic-card__title a { color: #1e293b; }
body[class*="b-"]:not(.b-17) .oic-card:not(.card--dark):not(.card--glass):not(.card--o) .oic-card__excerpt { color: #64748b; }

/* Section titles on dark bg */
body[class*="b-"]:not(.b-17) .oic-section__title { color: #f1f5f9; }
body[class*="b-"]:not(.b-17) .oic-section__more { color: #93c5fd; }
body[class*="b-"]:not(.b-17) .oic-section__header { border-color: rgba(255,255,255,0.15); }

/* Archive toolbar on dark bg */
body[class*="b-"]:not(.b-17) .archive-toolbar { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
body[class*="b-"]:not(.b-17) .archive-toolbar .sort-btn { color: #e7eefc; border-color: rgba(255,255,255,0.2); }
body[class*="b-"]:not(.b-17) .archive-toolbar .view-btn { color: #e7eefc; }

/* Background attachment fixed for smooth scroll */
body[class*="b-"] {
    background-attachment: fixed;
    min-height: 100vh;
}