/* Basic styling for the parent container */
.parent_video_gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default: 3 columns for large screens */
    gap: 20px; /* Space between child elements */
    padding: 20px; /* Optional padding around the gallery */
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px; /* Optional: Limit max width */
    margin: 0 auto; /* Center the gallery */
}

/* Styling for child elements */
/* حالت اولیه (قبل از دیده شدن) */
.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); /* شروع از سمت راست */
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* وقتی فعال شد */
.child_video_gallery.show {
    opacity: 1;
    transform: translateX(0);
}

/* استایل برای تصاویر داخل child - جلوگیری از سرریز عرض */
.child_video_gallery img {
    max-width: 100%; /* حداکثر عرض برابر با عرض div */
    height: auto; /* حفظ نسبت ابعاد بدون تغییر ارتفاع دستی */
    width: auto; /* عرض خودکار، اما محدود به max-width */
    display: block; /* حذف فضای اضافی زیر تصویر */
    border-radius: 4px; /* اختیاری: گوشه‌های گرد برای تصویر */
}

/* Medium screens: 2 columns (e.g., tablets) */
@media (max-width: 1023px) {
    .parent_video_gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }
}

/* Small screens: 1 column (e.g., mobiles) */
@media (max-width: 767px) {
    .parent_video_gallery {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }

    .child_video_gallery {
        padding: 8px; /* Adjust padding for smaller screens */
    }

    /* تنظیم اضافی برای تصاویر در صفحه‌های کوچک */
    .child_video_gallery img {
        max-width: 95%; /* کمی حاشیه بیشتر در موبایل */
    }
}








/* ==========================================
   Beauty Video Gallery Stylesheet
   Base Name: video_gallery_beauty
   ========================================== */

/* Basic styling for the parent container */
.parent_video_gallery_beauty {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default: 3 columns for large screens */
    gap: 24px; /* Space between child elements */
    padding: 24px; /* Optional padding around the gallery */
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px; /* Limit max width */
    margin: 0 auto; /* Center the gallery */
    justify-content: center; /* Center-aligned elements */
}

/* Styling for child elements (Beauty card style) */
/* حالت اولیه - تصویر از ابتدا کاملاً نمایان است */
.child_video_gallery_beauty {
    background-color: #fffaf9; /* Warm off-white/nude background */
    border: 1px solid #f3e5e2; /* Soft rose-nude border */
    border-radius: 16px; /* Smooth rounded corners for luxury look */
    padding: 12px;
    box-sizing: border-box;
    aspect-ratio: 9 / 16; /* نسبت ابعاد مناسب ویدیوهای عمودی (ریلز/استوری زیبایی) */
    display: flex;
    align-items: center;
    justify-content: center; /* Center content horizontally and vertically */
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px rgba(229, 201, 194, 0.2); /* Soft warm shadow */

    /* حذف افکت پنهان‌سازی اولیه برای نمایش مستقیم تصاویر */
    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);
}

/* افکت هاور ملایم برای کارت‌های زیبایی */
.child_video_gallery_beauty:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(229, 201, 194, 0.4);
    border-color: #e5c9c2;
}

/* استایل برای تصاویر داخل child - مخصوصاً کاور ویدیوهای اسکین‌کر */
.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);
}

/* ==========================================
   Responsive Adjustments (Mobile-First / Tablets)
   ========================================== */

/* Medium screens: 2 columns (e.g., tablets) */
@media (max-width: 1023px) {
    .parent_video_gallery_beauty {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 16px;
    }
}

/* Small screens: 1 column (e.g., mobiles) */
@media (max-width: 767px) {
    .parent_video_gallery_beauty {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .child_video_gallery_beauty {
        padding: 8px; /* Adjust padding for smaller screens */
        border-radius: 12px; /* Slightly smaller radius for mobile */
    }

    /* تنظیم اضافی برای تصاویر در صفحه‌های کوچک */
    .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 20% 80%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 100%), /* texture ظریف داخل (گلوزی ملایم) */
            linear-gradient(135deg, #a2a0a0 0%, #fdf9f9 70%); /* گرادیان نرم برای عمق */
    border: 3px solid #494343; /* کادر قرمز برجسته */
    border-radius: 8px; /* گوشه‌های گرد ملایم */
    padding: 15px 20px;
    font-family: 'Tahoma', 'Arial', sans-serif; /* فونت مناسب فارسی */
    font-size: 14px;
    color: #000000;
    line-height: 1.6;
    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); /* سایه داخلی ملایم برای texture */
}

/* tail (پیکان سمت راست) برای شبیه‌سازی حباب - تنظیم‌شده برای نوک تیز و ادغام بهتر */
.speech-bubble::after {
    content: '';
    position: absolute;
    right: -10px; /* نزدیک‌تر به لبه برای ادغام seamless */
    top: 18%; /* پایین‌تر برای طبیعی‌تر بودن، مطابق تصویر (نه وسط) */
    width: 0;
    height: 0;
    border-top: 10px solid transparent; /* نیمه بالایی شفاف، کوچکتر برای نوک تیز */
    border-bottom: 10px solid transparent; /* نیمه پایینی شفاف */
    border-left: 13px solid #FFFFFF; /* داخل سفید، کوچکتر و تیزتر */

    z-index: 0.5;
    filter: blur(0.1px); /* کمی نرم برای vector-like */
}

/* کادر قرمز روی tail - تنظیم‌شده برای اتصال دقیق و نازک */
.speech-bubble::before {
    content: '';
    position: absolute;
    right: -20px; /* هم‌تراز با tail */
    top: 18%; /* هم‌خوانی با موقعیت tail */
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid #494343; /* خط قرمز نازک و تیز، ادغام‌شده */
    z-index: 0.7;
}