/**
 * AQ Level Badge — v3.2
 *
 * الأشكال مرسومة بـ CSS بحت — لا اعتماد على Unicode أو خطوط.
 * نفس الحجم البصري على Desktop / iPad / Mobile / Safari / Chrome.
 *
 * @version 3.4.8
 */

/* ═══ الكبسولة الرئيسية ═══════════════════════════════ */
.aq-level-badge {
    display:        inline-flex;
    direction:      rtl;
    align-items:    stretch;
    border-radius:  100px;
    overflow:       hidden;
    background:     linear-gradient(
                        145deg,
                        color-mix(in srgb, var(--c) 80%, #fff) 0%,
                        var(--c) 55%,
                        color-mix(in srgb, var(--c) 90%, #000) 100%
                    );
    border:         2px solid color-mix(in srgb, var(--c) 60%, #000 40%);
    box-shadow:     0 2px 8px color-mix(in srgb, var(--c) 45%, transparent),
                    0 1px 2px rgba(0,0,0,.18);

    /* ↓ أنحف بـ 2px من السابق */
    padding:        3px 0 3px 3px;

    white-space:    nowrap;
    margin-top:     4px;
    line-height:    1;
}

/* ═══ اسم المستوى ════════════════════════════════════ */
.aq-badge-name {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       64px;
    padding:         5px 16px 5px 7px;
    color:           #fff;
    font-size:       16px;
    font-weight:     800;
    font-family:     inherit;
    text-shadow:     0 1px 4px rgba(0,0,0,.40);
    letter-spacing:  .3px;
}

/* ═══ حاوية الأشكال — البيضاء المحفورة ═══════════════ */
.aq-badge-shapes {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    background:      #fff;
    border-radius:   100px;
    align-self:      stretch;
    width:           78px;
    flex-shrink:     0;

    /* ↓ أنحف بـ 2px من السابق */
    padding:         0 8px;

    box-shadow:      inset 0 1px 3px rgba(0,0,0,.12);
}

/* ═══ الأشكال — CSS بحت، بدون Unicode ════════════════
 *
 * كل شكل <i> فارغ، CSS يرسمه بـ ::before.
 * currentColor = لون المستوى من الـ .aq-shape--on
 * الأحجام محسوبة للتساوي البصري:
 *   مثلث:  قاعدة 12px × ارتفاع 10px
 *   مربع:  12px × 12px
 *   دائرة: 12px × 12px
 * ════════════════════════════════════════════════════ */
.aq-shape {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           16px;
    height:          16px;
}

/* نجمة CSS بحتة — clip-path بدون SVG أو Unicode */
.aq-shape::before {
    content:      '';
    display:      block;
    width:        14px;
    height:       14px;
    background:   #E8A020;
    clip-path:    polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                          50% 70%, 21% 91%, 32% 57%,  2% 35%, 39% 35%);
}

/* مرئي */
.aq-shape--on::before  { background: #E8A020; }

/* مخفي — يحجز المساحة بدون لون */
.aq-shape--off { opacity: 0; pointer-events: none; }

/* ═══ بروفيسور — حافة ذهبية ══════════════════════════ */
.aq-level--professor {
    border-color: #C9A84C;
    box-shadow:   0 2px 8px rgba(201,168,76,.45),
                  0 1px 2px rgba(0,0,0,.25);
}

/* ═══ جوال ════════════════════════════════════════════ */
@media (max-width: 480px) {
    .aq-badge-name   { font-size: 14px; min-width: 54px; padding: 4px 12px 4px 6px; }
    .aq-badge-shapes { width: 60px; gap: 5px; padding: 0 8px; }
    .aq-shape        { width: 13px; height: 13px; }
    .aq-shape::before { width: 11px; height: 11px; }
}

/* ═══════════════════════════════════════════════════════
   Leaderboard Modifier — .aqsl-badge context
   Specificity: 0,2,0 (أعلى من base 0,1,0) + !important
   لا يؤثر على badge صفحة الأعضاء إطلاقاً.
═══════════════════════════════════════════════════════ */
.aqsl-badge .aq-level-badge {
    padding:      2px 0 2px 2px !important;
    border-width: 1.5px !important;
    margin-top:   0 !important;
    box-shadow:   0 1px 4px color-mix(in srgb, var(--c) 35%, transparent) !important;
}
.aqsl-badge .aq-badge-name {
    min-width:      40px !important;
    padding:        3px 8px 3px 4px !important;
    font-size:      10px !important;
    letter-spacing: 0 !important;
    text-shadow:    0 1px 1px rgba(0,0,0,.25) !important;
}
.aqsl-badge .aq-badge-shapes {
    width:   40px !important;
    gap:     3px !important;
    padding: 0 4px !important;
}
.aqsl-badge .aq-shape {
    width:  9px !important;
    height: 9px !important;
}
.aqsl-badge .aq-shape::before { width: 8px !important; height: 8px !important; }