/* ==========================================================
   هذا الملف يحتوي فقط على الأنماط العامة للوسائط المدمجة
   (YouTube, TikTok, X, Instagram, Facebook)
   والتي تُستخدم في جميع المقالات.
   تم نقل جميع أنماط الصفحات (sp-*) إلى ملفاتها الخاصة.
========================================================== */

/* ---- القسم العام للوسائط ---- */
.sumer-media-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #eee;
}

.sumer-media-divider {
    margin: 30px auto;
    border: none;
    border-top: 2px dashed #ddd;
    max-width: 80%;
}

/* ---- التصميم الموحد لجميع صناديق الفيديو (في المنتصف) ---- */
.sumer-video-box,
.sumer-tiktok-box,
.sumer-x-box,
.sumer-instagram-box,
.sumer-facebook-box {
    max-width: 800px;
    margin: 25px auto !important;
    padding: 15px;
    border: 6px solid #bb9c7f;
    border-radius: 16px;
    background: #343c4f;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* ---- تنسيق iframe العام ---- */
.sumer-video-box iframe,
.sumer-tiktok-box iframe,
.sumer-x-box iframe,
.sumer-instagram-box iframe,
.sumer-facebook-box iframe {
    width: 100%;
    border-radius: 12px;
    border: 0;
    display: block;
}

/* ---- YouTube (نسبة 16:9) ---- */
.sumer-video-box iframe {
    aspect-ratio: 16 / 9;
}

/* ---- TikTok (نسبة 9:16) ---- */
.sumer-tiktok-box {
    max-width: 400px;
}
.sumer-tiktok-box iframe {
    aspect-ratio: 9 / 16;
    max-height: 700px;
}

/* ---- X / Twitter ---- */
.sumer-x-box {
    max-width: 600px;
}
.sumer-x-box .twitter-tweet {
    margin: 0 auto !important;
    width: 100% !important;
}

/* ---- Instagram ---- */
.sumer-instagram-box {
    max-width: 540px;
}
.sumer-instagram-box blockquote {
    margin: 0 auto !important;
    max-width: 100% !important;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
}

/* ---- Facebook ---- */
.sumer-facebook-box {
    max-width: 600px;
}
.sumer-facebook-box iframe,
.sumer-facebook-box .fb-video,
.sumer-facebook-box .fb-post {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px;
}

.sumer-facebook-video-wrapper {
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:30px auto;
    padding:15px;
    background:#061a33;
    border:3px solid #c8a45d;
    border-radius:16px;
    box-sizing:border-box;
}

.sumer-facebook-video-wrapper .fb-video {
    max-width:560px;
    width:100%;
}

/* ---- صناديق اجتماعية إضافية (للتوافق مع الكود القديم) ---- */
.sumer-partner-social-box {
    max-width: 800px;
    margin: 25px auto;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #e1e1e1;
    text-align: center;
}
.sumer-partner-social-box iframe {
    width: 100%;
    border: none;
}
.sumer-partner-social-box .twitter-tweet {
    margin: 0 auto !important;
}

/* ==========================================================
   📱 استجابة للشاشات الصغيرة (خاصة بالوسائط)
========================================================== */
@media(max-width:768px) {
    .sumer-media-section {
        width: 95%;
        margin: auto;
    }

    .sumer-video-box,
    .sumer-tiktok-box,
    .sumer-x-box,
    .sumer-instagram-box,
    .sumer-facebook-box {
        padding: 10px;
        border-width: 4px;
        max-width: 100%;
        margin: 15px auto !important;
    }

    .sumer-tiktok-box {
        min-width: 0;
        width: 100%;
    }
}

@media(max-width:480px) {
    .sumer-video-box,
    .sumer-tiktok-box,
    .sumer-x-box,
    .sumer-instagram-box,
    .sumer-facebook-box {
        padding: 8px;
        border-width: 3px;
        border-radius: 12px;
        margin: 10px auto !important;
    }
}