/*
 * MPS Ads CSS
 * تصميم حاوية الإعلانات للنظام الإعلاني المتوافق مع AdSense
 * 
 * @package MPS
 * @version 1.0.0
 */

/* ------------------------------------------------------------------
   حاوية الإعلان الرئيسية
   ------------------------------------------------------------------ */
.mps-ad-container {
    position: relative;
    margin: 28px 0;
    padding: 24px 16px 16px;
    background: #fafafa;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    text-align: center;
    clear: both;
    overflow: hidden;
    min-height: 90px;
    /* Prevent CLS - reserve space */
}

/* بني نظيف في الوضع المضيء */
.mps-ad-container:empty {
    display: none;
}


/* ------------------------------------------------------------------
   محتوى الإعلان
   ------------------------------------------------------------------ */
.mps-ad-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

/* إصلاح ins.adsbygoogle في داخل الفلكس */
.mps-ad-content ins.adsbygoogle {
    display: inline-block !important;
}

/* ------------------------------------------------------------------
   تخصيص بحسب موقع الإعلان
   ------------------------------------------------------------------ */

/* إعلان بين المواصفات */
.mps-ad-location-between_specs {
    margin: 20px 0 24px;
    border-right: 3px solid var(--mps-primary, #2d6bc4);
}

/* إعلان قبل المواصفات التفصيلية */
.mps-ad-location-before_specs {
    margin: 0 0 20px;
    border-top: 3px solid var(--mps-accent, #e67e22);
}

/* إعلان قبل وبعد الصور */
.mps-ad-location-before_album,
.mps-ad-location-after_album,
.mps-ad-location-after_images {
    margin: 20px 0;
    border-top: 3px solid var(--mps-accent, #e67e22);
}

/* ------------------------------------------------------------------
   Responsive - تعديلات للشاشات الصغيرة
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .mps-ad-container {
        margin: 18px 0;
        padding: 20px 10px 12px;
        border-radius: 8px;
    }

    .mps-ad-content {
        overflow-x: auto;
    }

    /* إخفاء الإعلانات الكبيرة فقط إذا كانت thrive responsive */
    .mps-ad-content ins[data-ad-format="leaderboard"] {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .mps-ad-container {
        margin: 14px -5px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* ------------------------------------------------------------------
   Dark mode support
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    .mps-ad-container {
        background: #1a1f2e;
        border-color: #2d3748;
    }
}

/* أيضاً دعم كلاس dark إذا كان السمة تستخدمه */
.dark .mps-ad-container,
[data-theme="dark"] .mps-ad-container {
    background: #1a1f2e;
    border-color: #2d3748;
}

/* ------------------------------------------------------------------
   صفحة إدارة الإعلانات في لوحة التحكم
   ------------------------------------------------------------------ */

/* تم نقل هذه الأنماط إلى PHP inline styles في الصفحة الإدارية
   للحد من حمل ملف CSS الخارجي على الـ frontend */