/* ═══════════════════════════════════════════════
   Bilingual Switcher — Frontend Styles
   تصميم عصري واحترافي — لا يؤثر على قالب ووردبريس
   ═══════════════════════════════════════════════ */

/* ── متغيرات التصميم ─────────────────────── */
:root {
    --bls-primary:      #1a1a2e;
    --bls-accent:       #4f46e5;
    --bls-accent-light: #818cf8;
    --bls-surface:      #ffffff;
    --bls-text:         #1e293b;
    --bls-text-muted:   #64748b;
    --bls-border:       rgba(0,0,0,.08);
    --bls-shadow:       0 4px 24px rgba(79,70,229,.18);
    --bls-radius:       50px;
    --bls-font:         -apple-system, 'Segoe UI', 'Tahoma', sans-serif;
    --bls-transition:   .22s cubic-bezier(.4,0,.2,1);
}

/* ── المبدّل المشترك ─────────────────────── */
.bls-switcher {
    display:         inline-flex;
    align-items:     center;
    background:      var(--bls-surface);
    border:          1.5px solid var(--bls-border);
    border-radius:   var(--bls-radius);
    box-shadow:      var(--bls-shadow);
    overflow:        hidden;
    font-family:     var(--bls-font);
    user-select:     none;
}

.bls-btn {
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         9px 18px;
    font-size:       13px;
    font-weight:     500;
    color:           var(--bls-text-muted);
    text-decoration: none;
    transition:      background var(--bls-transition),
                     color var(--bls-transition);
    white-space:     nowrap;
    letter-spacing:  .01em;
}

.bls-btn:hover {
    color:      var(--bls-accent);
    background: rgba(79,70,229,.06);
}

.bls-btn.bls-active {
    background:  var(--bls-accent);
    color:       #fff;
    font-weight: 600;
}

.bls-btn.bls-active:hover {
    background: #4338ca;
    color:      #fff;
}

.bls-flag {
    font-size: 16px;
    line-height: 1;
}

.bls-divider {
    width:      1px;
    height:     20px;
    background: var(--bls-border);
    flex-shrink: 0;
}

/* ── الزر العائم ────────────────────────── */
.bls-floating-switcher {
    position:   fixed;
    bottom:     28px;
    right:      28px;         /* يمين — يتغير لـ left عند RTL تلقائياً */
    z-index:    99999;
    box-shadow: 0 8px 32px rgba(79,70,229,.28), 0 2px 8px rgba(0,0,0,.08);

    /* ظهور ناعم عند التحميل */
    animation: bls-float-in .5s cubic-bezier(.34,1.56,.64,1) both;
}

[dir="rtl"] .bls-floating-switcher {
    right: auto;
    left:  28px;
}

@keyframes bls-float-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── الزر المضمّن (Shortcode) ────────────── */
.bls-inline-switcher {
    margin: 0 auto;
}

/* ── دعم الشاشات الصغيرة ────────────────── */
@media (max-width: 480px) {
    .bls-floating-switcher {
        bottom: 16px;
        right:  16px;
    }
    [dir="rtl"] .bls-floating-switcher {
        right: auto;
        left:  16px;
    }
    .bls-btn {
        padding: 8px 13px;
        font-size: 12px;
    }
}