/**
 * AdSense Revenue Sharing - Frontend Styles
 * Optimized for Jannah Theme
 * Version: 1.0.2 - Updated with Mobile Ad Fixes
 */

/* ============================================
   1. إعلان جنب اللوجو (Header - Beside Logo)
   ============================================ */

/* Desktop - جنب اللوجو على اليمين */
@media (min-width: 1025px) {
    .logo-wrapper {
        position: relative;
    }
    
    .ars-ad-beside-logo-container,
    .ars-ad-beside-logo {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 300px;
        z-index: 10;
    }
    
    /* تعديل مساحة اللوجو لتجنب التداخل */
    .logo-container {
        margin-right: 320px;
    }
}

/* Tablet - في الوسط */
@media (min-width: 768px) and (max-width: 1024px) {
    .ars-ad-beside-logo-container,
    .ars-ad-beside-logo {
        position: static;
        width: 100%;
        max-width: 728px;
        margin: 15px auto;
        text-align: center;
        transform: none;
    }
}

/* Mobile - تحت اللوجو */
@media (max-width: 767px) {
    .ars-ad-beside-logo-container,
    .ars-ad-beside-logo {
        position: static;
        width: 100%;
        margin: 15px 0;
        text-align: center;
        transform: none;
    }
    
    .logo-container {
        margin-right: 0 !important;
    }
}

/* ============================================
   2. إعلان تحت اللوجو (Below Logo)
   ============================================ */

.ars-ad-below-logo {
    width: 100%;
    text-align: center;
    padding: 15px 0;
    margin: 15px 0;
}

@media (max-width: 767px) {
    .ars-ad-below-logo {
        padding: 12px 0;
        margin: 10px 0;
    }
}

/* ============================================
   3. إعلان بعد الهيدر (After Header)
   ============================================ */

.ars-ad-after-header {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    margin: 20px 0;
}

@media (max-width: 767px) {
    .ars-ad-after-header {
        padding: 15px 0;
        margin: 15px 0;
    }
}

/* ============================================
   4. إعلان بعد عنوان التصنيف (Category Title)
   ============================================ */

.ars-category-after-title-ad {
    text-align: center;
    margin: 20px auto;
    padding: 20px;
    max-width: 1200px;
}

@media (max-width: 767px) {
    .ars-category-after-title-ad {
        padding: 15px;
        margin: 15px 0;
        border-radius: 6px;
    }
}

/* ============================================
   5. إعلانات بين المقالات في التصنيفات
   ============================================ */

.ars-category-between-posts-ad {
    text-align: center;
    margin: 30px auto;
    padding: 25px 20px;
    max-width: 1200px;
}

.ars-category-between-posts-ad:hover {
    /* hover effect removed */
}

@media (max-width: 767px) {
    .ars-category-between-posts-ad {
        padding: 20px 15px;
        margin: 20px 0;
        border-radius: 8px;
        border-width: 1px;
    }
}

/* ============================================
   6. إعلان قبل الفوتر (Before Footer)
   ============================================ */

.ars-ad-before-footer {
    width: 100%;
    text-align: center;
    padding: 30px 0;
    margin: 30px 0;
}

@media (max-width: 767px) {
    .ars-ad-before-footer {
        padding: 20px 0;
        margin: 20px 0;
        border-top-width: 1px;
    }
}

/* ============================================
   7. إعلانات داخل المحتوى (In-Content)
   تحسينات خاصة للموبايل - CRITICAL FIX
   ============================================ */

.ars-ad-container {
    margin: 20px auto;
    padding: 15px;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* تحسينات خاصة لإعلانات المقالات على الموبايل */
@media (max-width: 767px) {
    /* إصلاح محاذاة الإعلانات داخل المقالات */
    .post-content .ars-ad-container,
    .entry-content .ars-ad-container,
    .article-content .ars-ad-container,
    .single-post .ars-ad-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }
    
    /* إصلاح عرض الإعلانات */
    .post-content .ars-ad-container ins.adsbygoogle,
    .entry-content .ars-ad-container ins.adsbygoogle,
    .article-content .ars-ad-container ins.adsbygoogle,
    .single-post .ars-ad-container ins.adsbygoogle {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* إزالة أي float أو position قد تؤثر على المحاذاة */
    .ars-ad-container {
        float: none !important;
        position: static !important;
        transform: none !important;
    }
    
    /* التأكد من أن المحتوى يتماشى مع العرض */
    .ars-ad-container > * {
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================
   8. تحسينات عامة للإعلانات
   ============================================ */

/* تحسين عرض إعلانات AdSense */
ins.adsbygoogle {
    display: block;
    max-width: 100%;
}

/* منع overflow */
.ars-ad-beside-logo-container ins.adsbygoogle,
.ars-ad-beside-logo ins.adsbygoogle,
.ars-ad-below-logo ins.adsbygoogle,
.ars-ad-after-header ins.adsbygoogle,
.ars-category-after-title-ad ins.adsbygoogle,
.ars-category-between-posts-ad ins.adsbygoogle,
.ars-ad-before-footer ins.adsbygoogle,
.ars-ad-container ins.adsbygoogle {
    overflow: hidden;
}

/* ============================================
   9. تحسينات RTL (اللغة العربية)
   ============================================ */

[dir="rtl"] .ars-ad-beside-logo-container,
[dir="rtl"] .ars-ad-beside-logo {
    right: auto;
    left: 20px;
}

[dir="rtl"] .logo-container {
    margin-right: 0;
    margin-left: 320px;
}

@media (max-width: 767px) {
    [dir="rtl"] .logo-container {
        margin-left: 0 !important;
    }
}

/* ============================================
   10. Loading States (حالات التحميل)
   ============================================ */

/* Placeholder أثناء تحميل الإعلان */
.ars-ad-container:empty::after,
.ars-category-between-posts-ad:empty::after,
.ars-category-after-title-ad:empty::after {
    content: 'جاري تحميل الإعلان...';
    display: block;
    color: #999;
    font-size: 12px;
    padding: 40px 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================
   11. تحسينات الطباعة (Print)
   ============================================ */

@media print {
    .ars-ad-beside-logo-container,
    .ars-ad-beside-logo,
    .ars-ad-below-logo,
    .ars-ad-after-header,
    .ars-category-after-title-ad,
    .ars-category-between-posts-ad,
    .ars-ad-before-footer,
    .ars-ad-container {
        display: none !important;
    }
}

/* ============================================
   12. تحسينات الأداء
   ============================================ */

/* تحسين تحميل الصور */
.ars-ad-container img,
.ars-category-between-posts-ad img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   13. Dark Mode Support (دعم الوضع الداكن)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Dark mode styles removed - ads display normally */
}

/* Dark skin styles removed - ads display normally */

/* ============================================
   14. Accessibility (إمكانية الوصول)
   ============================================ */

/* Focus Styles */
.ars-ad-container:focus-within,
.ars-category-between-posts-ad:focus-within {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* ============================================
   15. تحسينات خاصة بقالب Jannah
   ============================================ */

/* التوافق مع Container القالب */
.container .ars-category-after-title-ad,
.container .ars-category-between-posts-ad {
    margin-left: auto;
    margin-right: auto;
}

/* التوافق مع Sidebar */
.has-sidebar .ars-ad-after-header,
.has-sidebar .ars-category-after-title-ad {
    margin-left: 0;
    margin-right: 0;
}

/* التوافق مع Boxed Layout */
.boxed .ars-ad-after-header,
.boxed .ars-ad-before-footer {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   16. إعلان بعد عنوان المقالة
   ============================================ */

.ars-ad-after-post-title {
    text-align: center;
    margin: 20px auto;
    padding: 20px;
    max-width: 100%;
}

@media (max-width: 767px) {
    .ars-ad-after-post-title {
        padding: 15px;
        margin: 15px 0;
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   17. إعلان بعد الهيدر في المقالات
   ============================================ */

.ars-ad-post-after-header {
    text-align: center;
    margin: 25px auto;
    padding: 25px 20px;
    max-width: 100%;
}

@media (max-width: 767px) {
    .ars-ad-post-after-header {
        padding: 20px 15px;
        margin: 20px 0;
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   18. إعلان بعد الهيدر في التصنيفات
   ============================================ */

.ars-ad-category-after-header {
    text-align: center;
    margin: 25px auto;
    padding: 25px 20px;
    max-width: 1200px;
}

@media (max-width: 767px) {
    .ars-ad-category-after-header {
        padding: 20px 15px;
        margin: 20px 0;
        border-radius: 8px;
    }
}

/* Dark Mode removed for new placements */