/**
 * 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:           70px;
    flex-shrink:     0;

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

    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:          14px;
    height:         14px;
}

.aq-shape::before {
    content:  '';
    display:  block;
}

/* مثلث ▲ — border trick */
.aq-shape-1::before {
    width:        0;
    height:       0;
    border-left:  6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid currentColor;
}

/* مربع ■ */
.aq-shape-2::before {
    width:      12px;
    height:     12px;
    background: currentColor;
}

/* دائرة ● */
.aq-shape-3::before {
    width:         12px;
    height:        12px;
    background:    currentColor;
    border-radius: 50%;
}

/* مرئي */
.aq-shape--on  { color: color-mix(in srgb, var(--c) 55%, #111); }

/* مخفي — يحجز المساحة */
.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-1::before { border-left-width: 5px; border-right-width: 5px; border-bottom-width: 9px; }
    .aq-shape-2::before { width: 11px; height: 11px; }
    .aq-shape-3::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-1::before {
    border-left-width:   3px !important;
    border-right-width:  3px !important;
    border-bottom-width: 6px !important;
}
.aqsl-badge .aq-shape-2::before { width: 7px !important; height: 7px !important; }
.aqsl-badge .aq-shape-3::before { width: 7px !important; height: 7px !important; }