/*
 Theme Name: Astra Child Theme AR
 Theme URI: http://example.com/
 Description: Child theme for the Astra theme
 Author: Your Name
 Author URI: http://example.com/
 Template: astra
 Version: 1.0.0
*/

/* ------------------------------------------------------------
   تطبيق خطوط النظام (System Fonts) سريعة التحميل على النصوص العربية
   ------------------------------------------------------------ */
body.rtl, body[lang*='ar'] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

body.rtl h1, body.rtl h2, body.rtl h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* ============================================================
   1 — التنسيقات العامة
============================================================ */
.content-block {
    max-width: 1000px;
    margin: 40px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    gap: 40px;
    align-items: center;
}

.image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    object-fit: cover;
}

.text h1 {
    color: #007bff;
    font-size: 2em;
    margin-top: 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.text ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.text ul li {
    padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0;
    position: relative;
}

/* ============================================================
   2 — زر واتساب CTA
============================================================ */
.cta-wrapper {
    margin-top: 25px;
    text-align: inherit;
}

.text .cta {
    display: inline-flex;
    align-items: center;
    background: #25d366;
    color: white;
    padding: 14px 30px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(37,211,102,0.5);
    transition: .3s;
}

.text .cta img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.text .cta:hover {
    background: #128c7e;
    transform: translateY(-2px);
}

/* ============================================================
   3 — Desktop layout — EN / AR بناء على URL
============================================================ */

@media (min-width: 769px) {

    .content-block {
        display: flex;
        flex-direction: row;
    }

    .text, .image {
        flex: 1 1 50%;
    }

    .content-block h1 {
        order: 0 !important;
    }

    /* *************** AR *************** */
    body.lang-ar .content-block {
        direction: rtl;
        text-align: right;
    }

    body.lang-ar .text { order: 1; }
    body.lang-ar .image { order: 2; }

    body.lang-ar .text ul li {
        padding-right: 25px;
    }

    body.lang-ar .text ul li::before {
        content: "✅";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    body.lang-ar .cta img {
        margin-left: 12px;
        margin-right: 0;
    }

    /* *************** EN *************** */
    body.lang-en .content-block {
        direction: ltr;
        text-align: left;
    }

    body.lang-en .text { order: 1; }
    body.lang-en .image { order: 2; }

    body.lang-en .text ul li {
        padding-left: 25px;
    }

    body.lang-en .text ul li::before {
        content: "✅";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    body.lang-en .cta img {
        margin-right: 12px;
        margin-left: 0;
    }
}

/* ============================================================
   4 — Mobile layout — EN / AR
============================================================ */

@media (max-width: 768px) {

    .content-block {
        flex-direction: column;
        padding: 20px;
        margin: 20px auto;
        gap: 20px;
    }

    .content-block h1 {
        order: 1;
        text-align: center !important;
    }

    .image { order: 2; }
    .text { order: 3; }

    /* AR */
    body.lang-ar .content-block {
        text-align: right;
        direction: rtl;
    }

    body.lang-ar .cta {
        flex-direction: row-reverse;
    }

    body.lang-ar .cta img {
        margin-left: 12px;
        margin-right: 0;
    }

    /* CTA center mobile */
    .cta-wrapper {
        text-align: center;
        margin-top: 15px;
    }

    .text .cta {
        width: 90%;
        justify-content: center;
    }
    
    /* ****************************************************** */
    /* ** تعديل موضع زر تبديل اللغة في المنتصف على الموبايل ** */
    /* ****************************************************** */
    #lang-switcher {
        width: 100%;
        /* إجبارها على أن تكون في المنتصف */
        justify-content: center !important; 
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        /* إلغاء الـ fixed position على الموبايل */
        position: relative !important; 
        top: auto !important;
        right: auto !important;
    }
}

/* ============================================================
   تنسيقات زرار تبديل اللغة (Language Switcher) - التثبيت النهائي
============================================================ */
#lang-switcher {
    /* الحل الأقوى: إجبار الموضع والشكل على الديسكتوب */
    position: fixed !important; 
    top: 10px !important; 
    right: 30px !important;
    z-index: 99999 !important; /* ضمان الظهور فوق كل شيء */
    
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important; /* إزالة الهوامش الافتراضية */
}

#lang-switcher button {
    /* استعادة وتثبيت خصائص الأزرار (اللون الأبيض والكتابة السوداء) */
    width: 110px !important;
    border: 1px solid #ccc !important;
    background: #fff !important; /* خلفية بيضاء */
    cursor: pointer !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #222 !important; /* كتابة سوداء */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.3s !important;
}

/* ستايل عند المرور أو تفعيل الزر */
#lang-switcher button:hover,
#lang-switcher button.lang-active {
    background: #f0f0f0 !important;
    border-color: #999 !important;
}