<div class="calculator" style="max-width:500px;margin:20px auto;padding:25px;background:#f9f9f9;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.1);direction:rtl;text-align:right;font-family:Tahoma,Arial,sans-serif;">
    <div class="header" style="text-align:center;color:#595959;margin-bottom:25px;padding-bottom:15px;border-bottom:1px solid #eee;">
<picture>
  <source media="(max-width:50px)" srcset="https://asgplastic.com.sa/wp-content/uploads/2024/05/Untitled-design-1.png">
  
  <img src="https://asgplastic.com.sa/wp-content/uploads/2024/05/Untitled-design-1.png" alt="Flowers" style="width:300;">
</picture> 
<!-- <p style="margin:10px 0 0;font-size:15px;">شركة عسق للبلاستيك  </p>-->
        <h2 style="margin:15;font-size:22px;
        ">حاسبة التحويل الشاملة (جرام ↔ ملليلتر)</h2>
       
        <p style="margin:5px 0 0;font-size:14px;">تحويل الوزن إلى حجم والعكس بناءً على كثافة المادة</p>

    </div>

    <div class="input-group" style="margin-bottom:20px;">
        <label class="input-label" style="display:block;margin-bottom:8px;font-weight:600;color:#595959;">نوع التحويل:</label>
        <select class="select-field" id="conversion-type" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;background:white;font-size:16px;direction:rtl;text-align:right;">
            <option value="gram-to-ml">جرام → ملليلتر</option>
            <option value="ml-to-gram">ملليلتر → جرام</option>
        </select>
    </div>

    <div class="input-group" style="margin-bottom:20px;">
        <label class="input-label" style="display:block;margin-bottom:8px;font-weight:600;color:#595959;">المادة:</label>
        <select class="select-field" id="material" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;background:white;font-size:16px;direction:rtl;text-align:right;">
            <optgroup label="السوائل" style="font-weight:bold;color:#595959;">
                <option value="ماء">ماء</option>
                <option value="حليب">حليب</option>
                <option value="زيت زيتون">زيت زيتون</option>
                <option value="زيت نباتي">زيت نباتي</option>
                <option value="عسل">عسل</option>
                <option value="كريمة">كريمة</option>
                <option value="لوشن">لوشن</option>
            </optgroup>
            <optgroup label="المواد الجافة" style="font-weight:bold;color:#595959;">
                <option value="حبوب قهوة كاملة">حبوب قهوة كاملة</option>
                <option value="قهوة مطحونة ناعمة">قهوة مطحونة ناعمة</option>
                <option value="قهوة مطحونة خشنة">قهوة مطحونة خشنة</option>
                <option value="سكر أبيض">سكر أبيض</option>
                <option value="سكر بني">سكر بني</option>
                <option value="دقيق قمح">دقيق قمح</option>
                <option value="ملح طعام">ملح طعام</option>
            </optgroup>
            <optgroup label="البهارات والتوابل" style="font-weight:bold;color:#595959;">
                <option value="فلفل أسود مطحون">فلفل أسود مطحون</option>
                <option value="كمون مطحون">كمون مطحون</option>
                <option value="كركم مطحون">كركم مطحون</option>
                <option value="قرفة مطحونة">قرفة مطحونة</option>
                <option value="هيل مطحون">هيل مطحون</option>
                <option value="كاري مسحوق">كاري مسحوق</option>
                <option value="زنجبيل مطحون">زنجبيل مطحون</option>
                <option value="قرنفل مطحون">قرنفل مطحون</option>
                <option value="بابريكا">بابريكا</option>
            </optgroup>
            <optgroup label="مواد أخرى" style="font-weight:bold;color:#595959;">
                <option value="زبدة">زبدة</option>
                <option value="صابون سائل">صابون سائل</option>
                <option value="شوكولاتة مبشورة">شوكولاتة مبشورة</option>
            </optgroup>
        </select>
    </div>

    <div class="input-group" id="input-gram-group" style="margin-bottom:20px;">
        <label class="input-label" style="display:block;margin-bottom:8px;font-weight:600;color:#595959;">الجرامات (جم):</label>
        <input class="input-field" type="number" id="gram-input" value="100" step="1" min="0" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;font-size:16px;transition:border 0.3s;text-align:right;">
    </div>

    <div class="input-group" id="input-ml-group" style="margin-bottom:20px;display:none;">
        <label class="input-label" style="display:block;margin-bottom:8px;font-weight:600;color:#595959;">الملليلتر (مل):</label>
        <input class="input-field" type="number" id="ml-input" value="100" step="1" min="0" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;font-size:16px;transition:border 0.3s;text-align:right;">
    </div>

    <div id="error" class="error" style="color:#595959;font-size:14px;margin-top:5px;text-align:right;"></div>

    <button class="btn" onclick="calculate()" style="width:100%;padding:14px;background:#e3e691;color:4a4a4a;border:none;border-radius:9px;font-size:19px;cursor:pointer;margin-top:10px;transition:background 0.3s;">حساب التحويل</button>

    <div class="result" id="result" style="font-size:19px;margin-top:25px;padding:20px;background:white;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.05);display:none;direction:rtl;text-align:right;">
        <div class="result-title" style="color:#2c3e50;font-weight:600;margin-bottom:10px;text-align:right;">نتيجة التحويل</div>
        <div class="conversion" id="conversion" style="font-size:19px;color:#a3a64e;margin:10px 0;text-align:right;"></div>
        <div class="details" style="font-size:14px;color:#7f8c8d;margin-top:15px;padding-top:15px;border-top:1px dashed #eee;text-align:right;">
            <div id="formula"></div>
            <div id="density"></div>
        </div>
    </div>
</div>

<script>
    // تبديل حقول الإدخال حسب نوع التحويل
    document.getElementById('conversion-type').addEventListener('change', function() {
        if (this.value === 'gram-to-ml') {
            document.getElementById('input-gram-group').style.display = 'block';
            document.getElementById('input-ml-group').style.display = 'none';
        } else {
            document.getElementById('input-gram-group').style.display = 'none';
            document.getElementById('input-ml-group').style.display = 'block';
        }
    });

    function calculate() {
        const conversionType = document.getElementById('conversion-type').value;
        const material = document.getElementById('material').value;
        const errorElement = document.getElementById('error');
        const resultElement = document.getElementById('result');
        const conversionElement = document.getElementById('conversion');
        const formulaElement = document.getElementById('formula');
        const densityElement = document.getElementById('density');

        // إخفاء الرسائل السابقة
        errorElement.textContent = '';
        resultElement.style.display = 'none';

        // كثافة المواد
        const densities = {
            'ماء': 1.0,
            'حليب': 1.03,
            'زيت زيتون': 0.92,
            'زيت نباتي': 0.92,
            'عسل': 1.42,
            'كريمة': 1.0,
            'لوشن': 1.05,
            'حبوب قهوة كاملة': 0.35,
            'قهوة مطحونة ناعمة': 0.53,
            'قهوة مطحونة خشنة': 0.43,
            'سكر أبيض': 0.85,
            'سكر بني': 0.80,
            'دقيق قمح': 0.57,
            'ملح طعام': 1.20,
            'فلفل أسود مطحون': 0.45,
            'كمون مطحون': 0.50,
            'كركم مطحون': 0.55,
            'قرفة مطحونة': 0.35,
            'هيل مطحون': 0.40,
            'كاري مسحوق': 0.60,
            'زنجبيل مطحون': 0.45,
            'قرنفل مطحون': 0.50,
            'بابريكا': 0.40,
            'زبدة': 0.95,
            'صابون سائل': 1.1,
            'شوكولاتة مبشورة': 0.50
        };

        const density = densities[material];

        if (conversionType === 'gram-to-ml') {
            const grams = parseFloat(document.getElementById('gram-input').value);

            // التحقق من المدخلات
            if (isNaN(grams)) {
                errorElement.textContent = 'الرجاء إدخال قيمة رقمية صحيحة';
                return;
            }

            if (grams <= 0) {
                errorElement.textContent = 'القيمة يجب أن تكون أكبر من الصفر';
                return;
            }

            const milliliters = grams / density;

            // تنسيق الأرقام لعرضها بشكل صحيح
            const formattedGrams = grams.toLocaleString('ar-EG');
            const formattedML = milliliters.toFixed(2).toLocaleString('ar-EG');

            // عرض النتيجة
            conversionElement.innerHTML = `${formattedGrams} جرام من <strong>${material}</strong> = <strong>${formattedML}</strong> مل`;
            formulaElement.textContent = `الصيغة: الملليلتر = الجرامات ÷ الكثافة`;
            densityElement.textContent = `كثافة ${material}: ${density.toLocaleString('ar-EG')} جم/مل`;

        } else {
            const ml = parseFloat(document.getElementById('ml-input').value);

            // التحقق من المدخلات
            if (isNaN(ml)) {
                errorElement.textContent = 'الرجاء إدخال قيمة رقمية صحيحة';
                return;
            }

            if (ml <= 0) {
                errorElement.textContent = 'القيمة يجب أن تكون أكبر من الصفر';
                return;
            }

            const grams = ml * density;

            // تنسيق الأرقام لعرضها بشكل صحيح
            const formattedML = ml.toLocaleString('ar-EG');
            const formattedGrams = grams.toFixed(2).toLocaleString('ar-EG');

            // عرض النتيجة
            conversionElement.innerHTML = `${formattedML} مل من <strong>${material}</strong> = <strong>${formattedGrams}</strong> جرام`;
            formulaElement.textContent = `الصيغة: الجرامات = الملليلتر × الكثافة`;
            densityElement.textContent = `كثافة ${material}: ${density.toLocaleString('ar-EG')} جم/مل`;
        }

        resultElement.style.display = 'block';
    }
</script>
/* زر الرجوع في صفحة المنتج */
.product-breadcrumbs a,
.product-breadcrumbs,
.breadcrumbs a {
  color: #444444 !important; /* رمادي غامق */
  font-weight: 600; /* يخلي الخط أوضح */
}

/* السهم نفسه */
.product-breadcrumbs svg,
.breadcrumbs svg {
  fill: #444444 !important;
}