/* التنسيق الأساسي للحاوية الرئيسية لمعرض الفيديو */
.parent_video_gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* العنصر الفرعي */
.child_video_gallery {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    opacity: 0;
    transform: translateX(80px); /* البدء من اليمين للنسخة العربية (RTL) */
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.child_video_gallery.show {
    opacity: 1;
    transform: translateX(0);
}

.child_video_gallery img {
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
    border-radius: 4px;
}

/* الشاشات المتوسطة */
@media (max-width: 1023px) {
    .parent_video_gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }
}

/* الشاشات الصغيرة */
@media (max-width: 767px) {
    .parent_video_gallery {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }

    .child_video_gallery {
        padding: 8px;
    }

    .child_video_gallery img {
        max-width: 95%;
    }
}

/* ==========================================
   تنسيقات معرض فيديوهات التجميل
   الاسم الأساسي: video_gallery_beauty
   ========================================== */

/* التنسيق الأساسي للحاوية الرئيسية */
.parent_video_gallery_beauty {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* الافتراضي: 3 أعمدة للشاشات الكبيرة */
    gap: 24px; /* المسافة بين العناصر الفرعية */
    padding: 24px; /* حواشي اختيارية حول المعرض */
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px; /* الحد الأقصى للعرض */
    margin: 0 auto; /* محاذاة المعرض في المنتصف */
    justify-content: center; /* محاذاة العناصر في المنتصف */
}

/* تنسيق العناصر الفرعية (نمط بطاقة التجميل) */
/* الحالة الأولية - تظهر الصورة بالكامل منذ البداية */
.child_video_gallery_beauty {
    background-color: #fffaf9; /* خلفية بيضاء دافئة / نيود */
    border: 1px solid #f3e5e2; /* إطار بلون وردي نيود ناعم */
    border-radius: 16px; /* زوايا دائرية ناعمة لمظهر فاخر */
    padding: 12px;
    box-sizing: border-box;
    aspect-ratio: 9 / 16; /* نسبة الأبعاد المناسبة للفيديوهات الرأسية (ريلز / ستوري التجميل) */
    display: flex;
    align-items: center;
    justify-content: center; /* محاذاة المحتوى أفقياً وعمودياً في المنتصف */
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px rgba(229, 201, 194, 0.2); /* ظل دافئ وناعم */

    /* إزالة تأثير الإخفاء الأولي لعرض الصور مباشرة */
    opacity: 1;
    transform: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* تأثير التمرير (Hover) الخفيف لبطاقات التجميل */
.child_video_gallery_beauty:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(229, 201, 194, 0.4);
    border-color: #e5c9c2;
}

/* تنسيق الصور داخل العنصر الفرعي - خاصة أغلفة فيديوهات العناية بالبشرة */
.child_video_gallery_beauty img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ملء مساحة البطاقة بالكامل دون تشويه الصورة */
    display: block; /* إزالة المساحة الزائدة أسفل الصورة */
    border-radius: 10px; /* زوايا دائرية متناسقة مع البطاقة */
    transition: transform 0.5s ease;
}

/* تأثير تكبير طفيف على الصورة عند التمرير فوق البطاقة */
.child_video_gallery_beauty:hover img {
    transform: scale(1.03);
}

/* ==========================================
   التجاوب مع الشاشات (الهواتف / الأجهزة اللوحية)
   ========================================== */

/* الشاشات المتوسطة: عمودان (مثل الأجهزة اللوحية) */
@media (max-width: 1023px) {
    .parent_video_gallery_beauty {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 16px;
    }
}

/* الشاشات الصغيرة: عمودان / عمود واحد للجوّال */
@media (max-width: 767px) {
    .parent_video_gallery_beauty {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .child_video_gallery_beauty {
        padding: 8px; /* ضبط الحواشي للشاشات الأصغر */
        border-radius: 12px; /* نصف قطر أصغر قليلاً للجوّال */
    }

    /* ضبط إضافي للصور في الشاشات الصغيرة */
    .child_video_gallery_beauty img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* فقاعة الاقتباس / الحوار (النسخة العربية) */
.speech-bubble {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    background:
            radial-gradient(circle at 80% 80%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 100%),
            linear-gradient(135deg, #a2a0a0 0%, #fdf9f9 70%);
    border: 3px solid #494343;
    border-radius: 8px;
    padding: 15px 20px;
    font-family: "Tahoma", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    color: #000000;
    line-height: 1.8;
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
    box-shadow:
            0 14px 25px rgba(0, 0, 0, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ذيل الفقاعة على الجانب الأيسر مشيراً لليسار */
.speech-bubble::after {
    content: '';
    position: absolute;
    left: -10px;
    top: 18%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 13px solid #FFFFFF;
}

/* إطار ذيل الفقاعة */
.speech-bubble::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 18%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid #494343;
}

/* فقاعة الاقتباس الحديثة (صندوق اقتباس عصري - بدون ذيل) */
.speech-bubble-bottom {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 40px auto;
    min-height: 250px;

    /* الإبقاء على علامتي التنصيص وصورة الطبيب في الخلفية */
    background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 24 24'%3E%3Cpath fill='%237cc7ff' d='M11.2 15.8c0 2-1.6 3.6-3.6 3.6S4 17.8 4 15.8C4 11.9 7.2 8.7 11.1 8.7v2.1c-2.8 0-5 2.2-5 5h5.1v.0zM20.8 15.8c0 2-1.6 3.6-3.6 3.6s-3.6-1.6-3.6-3.6c0-3.9 3.2-7.1 7.1-7.1v2.1c-2.8 0-5 2.2-5 5h5.1v.0z'/%3E%3C/svg%3E"), /* علامة الاقتباس المفتوحة */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 24 24'%3E%3Cpath fill='%237cc7ff' d='M12.8 8.2c0-2 1.6-3.6 3.6-3.6S20 6.2 20 8.2c0 3.9-3.2 7.1-7.1 7.1v-2.1c2.8 0 5-2.2 5-5h-5.1v.0zM3.2 8.2c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6c0 3.9-3.2 7.1-7.1 7.1v-2.1c2.8 0 5-2.2 5-5H3.2v.0z'/%3E%3C/svg%3E"), /* علامة الاقتباس المغلقة */
            url('../../photo2/dr-hamidreza-hosnani-quote200.png'), /* صورة الطبيب */
            radial-gradient(circle at 80% 80%, rgba(123, 199, 255, 0.15) 0%, rgba(255, 255, 255, 0.9) 100%),
            linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);

    background-position:
            right 25px top 25px,     /* علامة الاقتباس المفتوحة */
            left 40px bottom 125px,  /* علامة الاقتباس المغلقة */
            bottom left,             /* صورة الطبيب على اليسار ليلائم العربية */
            center,
            center;

    background-repeat: no-repeat;
    background-size: 40px, 40px, auto, cover, cover;

    border: 1px solid #e1f2ff;
    border-radius: 15px;
    padding: 70px 60px 140px;

    font-family: "Tahoma", "Segoe UI", serif;
    font-style: normal;
    font-size: 17px;
    color: #3e4b55;
    line-height: 1.9;
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
    box-shadow: 0 15px 35px rgba(180, 210, 230, 0.2);
}

/* هذا القسم لحذف علامة الاقتباس الإضافية في الزاوية العلوية بشكل قاطع */
.speech-bubble-bottom::before,
.speech-bubble-bottom::after {
    content: none !important;
    display: none !important;
}