/* Add custom Js styles below */ 
<div id="google_translate_element" style="text-align: center; margin: 10px;"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ar', 
    includedLanguages: 'en,ar', 
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
    autoDisplay: false
  }, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<style>
/* تنسيق بسيط لجعل الأداة تظهر بشكل أنيق */
.goog-te-gadget-simple {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 4px;
}
</style>
<div class="translate-wrapper">
    <div class="translate-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="2" y1="12" x2="22" y2="12"></line>
            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
        </svg>
        <span class="lang-text">EN/AR</span>
    </div>
    
    <div id="google_translate_element"></div>
</div>

<style>
    /* إعدادات الألوان والمكان */
    .translate-wrapper {
        /* 👇 ضع كود لون متجرك هنا بدلاً من #0055AA */
        background-color: #0055AA; 
        
        position: fixed;
        bottom: 20px;
        left: 20px; /* للجهة اليمنى غيرها إلى right */
        z-index: 9999;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        border-radius: 50px;
        padding: 10px 18px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: transform 0.3s ease, background-color 0.3s;
        border: none;
    }

    .translate-wrapper:hover {
        transform: scale(1.05);
        opacity: 0.9; /* تأثير خفيف عند المرور بالفأرة */
    }

    /* تنسيق الأيقونة والنص */
    .translate-icon {
        display: flex;
        align-items: center;
        gap: 8px;
        
        /* 👇 لون النص والأيقونة (أبيض #ffffff أو أسود #000000) */
        color: #ffffff; 
        
        font-weight: bold;
        font-size: 15px;
        pointer-events: none;
    }

    /* إخفاء وتجهيز جوجل */
    #google_translate_element {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        overflow: hidden;
    }
    
    .goog-te-combo {
        width: 100% !important;
        height: 100% !important;
        cursor: pointer;
        display: block;
    }
</style>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ar', 
    includedLanguages: 'en,ar', 
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    autoDisplay: false
  }, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>