/* ============================================================
   IMAGE OPTIONS ADDON — image_options.css
   كل الـ CSS الخاص بالإضافة في ملف واحد مستقل:
     1) :root متغيرات افتراضية (100%) — تُحقن كذلك من PHP لكن
        بنحطها هنا كـ fallback عشان لو الـ hook مش بيشتغل
     2) Override للعناصر الموجودة (list_rank, list_flag,
        chat_rank, username, list_xprank_icon, chat_xprank_icon,
        user_item_flag img) عشان تستخدم CSS variables بدل القيم
        الثابتة في ملفات الأساس (main.css / premium_features.css)
     3) ستايل المعاينة + السلایدرز + أزرار preset
   ============================================================ */

/* ===== 1) CSS variables default fallback =====
   [FIX] القيم لازم تكون أرقام بدون وحدة (1.0) مش نسبة مئوية (100%).
   السبب: calc(18px * 100%) = CSS غير صالح. المتصفح بيرفضه والقاعدة
   بتتسقط، فالأيقونات بتظهر بحجمها الطبيعي من ملف SVG (ممكن 290px!).
   calc(18px * 1) = 18px ده صالح. */
:root{
        --img-rank-list: 1;
        --img-flag-list: 1;
        --img-namebg-list: 1;
        --img-nametext-list: 1;
        --img-rank-msg: 1;
        --img-namebg-msg: 1;
        --img-nametext-msg: 1;
        /* [ADD v7] حجم اللمعة (زي الباقي: 1 = 100%) وقوة التوهج
           (0 = بدون توهج افتراضياً). */
        --img-lm3a-size: 1;
        --img-lm3a-glow: 0;
        /* [ADD v8] */
        --img-list-width: 1;
        --img-room-zoom: 1;
}

/* ===== 2) Override للعناصر الموجودة ===== */
/* قائمة المتصلين — حجم أيقونة الرتبة */
.user_item .list_rank {
        height: calc(14px * var(--img-rank-list, 1)) !important;
}
/* قائمة المتصلين — حجم علم الدولة */
.user_item_flag img,
.user_item .list_flag {
        height: calc(14px * var(--img-flag-list, 1)) !important;
        width: auto !important;
}
.user_item_flag img {
        width: calc(20px * var(--img-flag-list, 1)) !important;
}
/* قائمة المتصلين — حجم نص الاسم */
.user_item .username {
        font-size: calc(11px * var(--img-nametext-list, 1)) !important;
}
/* قائمة المتصلين — شارة الاكس بي (premium_features.css بـ 10px) */
.list_xprank_icon {
        height: calc(10px * var(--img-rank-list, 1)) !important;
}
/* رسائل الغرفة — حجم أيقونة الرتبة */
.chat_rank {
        height: calc(14px * var(--img-rank-msg, 1)) !important;
}
/* رسائل الغرفة — شارة الاكس بي (premium_features.css بـ 18px) */
.chat_xprank_icon {
        height: calc(18px * var(--img-rank-msg, 1)) !important;
}
/* رسائل الغرفة — حجم نص الاسم */
.my_text .username {
        font-size: calc(12px * var(--img-nametext-msg, 1)) !important;
}
/* رسائل الغرفة — خلفية الاسم: padding يستجيب للسلايدر.
   ملاحظة: premiumNameWrap في function_temp.js بيبني style مباشرة،
   فبنحقن override بـ !important هنا عشان يطغي على الـ inline style.
   لو الإضافة مفعّلة، الـ head_load_hook بيمسح الـ padding من الـ
   inline style ويحط CSS class بدلاً منه (احنا مش بنعمل ده هنا عشان
   الإضافة مستقلة)، فعشان كده بنعتمد على الـ !important هنا. */
.my_text .cname > span[style*="padding"] {
        padding-left: calc(6px * var(--img-namebg-msg, 1)) !important;
        padding-right: calc(6px * var(--img-namebg-msg, 1)) !important;
}
/* نفس الشيء لقائمة المتصلين — nameBgAttrs في function.php بتحط
   padding مباشر على <p>. بنحقن override هنا. */
.user_item_data > p[style*="padding"] {
        padding-left: calc(6px * var(--img-namebg-list, 1)) !important;
        padding-right: calc(6px * var(--img-namebg-list, 1)) !important;
}
/* [ADD v7] توهج اللمعة المتحركة (lm3a / Arabic*) اللي بتتحط من
   تبويب "تعديل الملف الشخصي". الكلاس بيتحط جنب username مباشرة
   (زي: class="username Arabic23")، فبنستهدفه بـ attribute selector
   عشان ما نلمسش أي عنصر تاني اسمه username من غير توهج.
   الحجم: نفس مبدأ باقي السلايدرز (calc على القيمة الأصلية 15px).
   قوة التوهج: drop-shadow حوالين النص، شفافيته وحجمه بيكبروا مع
   var(--img-lm3a-glow) اللي مداها من 0 (بدون) لـ 1 (أقوى توهج). */
.username[class*="Arabic"] {
        font-size: calc(15px * var(--img-lm3a-size, 1)) !important;
        filter: drop-shadow(0 0 calc(6px * var(--img-lm3a-glow, 0)) rgba(255, 255, 255, calc(0.9 * var(--img-lm3a-glow, 0)))) !important;
}
/* [ADD v8] عرض قائمة المتصلين. .cright هو الحاوي الحقيقي (280px
   أصلاً)، و.cright2 نسخة بديلة بتستخدم في وضع تبديل الأعمدة. #chat_center
   جنبه table-cell من غير عرض ثابت، فبيملأ أوتوماتيك أي مساحة تفضل. */
.cright, .cright2 {
        width: calc(280px * var(--img-list-width, 1)) !important;
}
/* [ADD v8] تكبير/تصغير مباشر لمنطقة الغرفة (الرسائل + شريط الكتابة)
   بمعزل عن عرض القائمة. zoom مش معيار قياسي 100% لكنه مدعوم في كل
   المتصفحات الحديثة (Chrome/Edge/Safari وFirefox من إصدار 126+)،
   ولو المتصفح مش داعمه هيتجاهله بس من غير أي كسر بصري. */
#chat_center {
        zoom: var(--img-room-zoom, 1);
}

/* ===== 3) ستايل المعاينة + السلایدرز ===== */
.imgopt_wrap { padding: 5px 0 10px; }
.imgopt_section { margin-bottom: 18px; padding: 10px; background: #f7f7f7; border-radius: 8px; border: 1px solid #eaeaea; }
.imgopt_section_title { font-weight: bold; font-size: 13px; margin-bottom: 10px; color: #333; text-align: center; }
.imgopt_preview_box { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 8px; margin-bottom: 12px; overflow: hidden; }
.imgopt_preview_msg { background: #fff; }
.imgopt_preview_msg .other_logs { background: #ededed !important; padding: 8px 10px; border-radius: 8px; }
.imgopt_preview_lm3a { background: #222 !important; text-align: center; padding: 16px 8px !important; }
/* [ADD v8] معاينة مصغّرة بتوضّح النسبة بين الغرفة والقائمة بصرياً.
   القيمة 70px هنا مجرد مقياس مصغّر للمعاينة فقط (تمثيل نسبي)، مش
   نفس رقم الـ 280px الحقيقي المستخدم فعلياً في .cright. */
.imgopt_preview_layout { display: flex !important; height: 60px; padding: 0 !important; overflow: hidden; }
.imgopt_layout_room {
        flex: 1;
        background: #e8f4fb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(11px * var(--img-room-zoom, 1));
        color: #0288a8;
}
.imgopt_layout_list {
        width: calc(70px * var(--img-list-width, 1));
        background: #03add8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        color: #fff;
}
.imgopt_preview_msg .chat_message { display: inline; font-size: 13px; color: #222; }
.imgopt_control { margin-bottom: 12px; }
.imgopt_control_label { font-size: 12px; font-weight: bold; margin-bottom: 4px; color: #444; }
.imgopt_control_row { display: flex; align-items: center; gap: 8px; }
.imgopt_slider { flex: 1; height: 6px; -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 6px; outline: none; }
.imgopt_slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #03add8; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.imgopt_slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #03add8; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.imgopt_value { min-width: 44px; text-align: center; font-size: 12px; font-weight: bold; color: #03add8; background: #e0f7fa; padding: 3px 6px; border-radius: 4px; }
.imgopt_presets { display: flex; gap: 4px; margin-top: 6px; }
.imgopt_preset { flex: 1; padding: 5px 8px; font-size: 11px; background: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; color: #444; transition: all .15s; }
.imgopt_preset:hover { background: #03add8; color: #fff; border-color: #03add8; }
.imgopt_status { margin-right: 10px; font-size: 12px; color: #4caf50; font-weight: bold; }
.imgopt_status.error { color: #f44336; }
/* Make sure the preview cards inside the modal look right */
.imgopt_preview_box .user_item { padding: 5px 10px; }
.imgopt_preview_box .user_item .username { font-weight: bold; }
.imgopt_preview_box .list_xprank_icon { color: #03add8; }
.imgopt_preview_box .chat_xprank_icon { color: #03add8; }