* {
    margin: 0;
    box-sizing: border-box;
}

/* فعال کردن قابلیت اسکرول اسنپ (snap) به صورت عمودی */
html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth; /* اسکرول نرم */
}


/* تنظیمات استایل برای بدنه (body) برای مرکز کردن محتوا و استفاده از پس‌زمینه مشکی با متن سفید */
body {
    color: white; /* رنگ متن سفید */
    background-color: black; /* پس‌زمینه مشکی */
    height: 100vh; /* ارتفاع کل صفحه برابر با ارتفاع ویوپورت */
    display: grid; /* استفاده از چیدمان گرید برای مرکز کردن محتوا */
    place-items: center, top; /* مرکز کردن محتوا در دو جهت افقی و عمودی */
}

/* استایل مربوط به بخش ویدیوها */
.app__videos {
    position: relative; /* موقعیت نسبی برای تعیین موقعیت فرزندان */
    height: 95vh; /* ارتفاع برابر با کل صفحه */
    background-color: white; /* پس‌زمینه سفید */
    overflow: scroll; /* فعال کردن اسکرول در صورت نیاز */
    width: 100%; /* عرض 100 درصد */
     /* حداکثر عرض 400 پیکسل */
    scroll-snap-type: y mandatory; /* قابلیت اسنپ عمودی اجباری */
}

/* مخفی کردن اسکرول‌بار در مرورگرهای مبتنی بر وب‌کیت */
.app__videos::-webkit-scrollbar {
    display: none;
}

/* مخفی کردن اسکرول‌بار در مرورگرهای دیگر */
.app__videos {
    -ms-overflow-style: none; /* غیرفعال کردن اسکرول‌بار در مرورگرهای مایکروسافت */
    scrollbar-width: none; /* غیرفعال کردن اسکرول‌بار در مرورگرهای مدرن */
    scroll-snap-type: y mandatory; /* فعال کردن اسکرول اسنپ عمودی */
    overflow-y: auto; /* فعال کردن اسکرول عمودی */
    -webkit-overflow-scrolling: touch; /* اسکرول نرم در دستگاه‌های لمسی */
}





/* استایل برای هر ویدیو */
.video {
scroll-snap-align: start; /* هر ویدیو از ابتدای اسکرول اسنپ می‌شود */
scroll-snap-stop: normal; /* اجازه می‌دهد هر بار فقط یک بخش اسکرول شود */
    position: relative; /* موقعیت نسبی برای تنظیم موقعیت اجزا */
    height: 100%; /* ارتفاع 100 درصدی */
    width: 100%; /* عرض 100 درصدی */
    background-color: rgb(0, 0, 0); /* پس‌زمینه سفید */
}

/* تنظیم ابعاد پلیر ویدیو و جلوگیری از کشیدگی تصویر */
.video__player {
    object-fit: cover; /* تناسب تصویر به گونه‌ای که پر شود و برش بخورد */
    width: 100%; /* عرض 100 درصدی */
    height: 100%; /* ارتفاع 100 درصدی */
}



/* استایل مربوط به هدر ویدیو */
.videoHeader {
    position: absolute; /* موقعیت ثابت درون ویدیو */
    width: 100%; /* عرض 100 درصدی */
    display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
    justify-content: space-between; /* فاصله مساوی بین آیتم‌ها */
    align-items: center; /* چینش آیتم‌ها در وسط عمودی */
}

/* تنظیم پدینگ برای همه اجزای هدر ویدیو */
.videoHeader * {
    padding: 20px;
}

/* استایل مربوط به فوتر ویدیو */
.videoFooter {
    position: relative; /* موقعیت نسبی */
    bottom: 100px; /* فاصله از پایین */
    margin: 20px; /* فاصله از سمت چپ */
}

/* استایل متن فوتر */
.videoFooter__text {
    position: absolute; /* موقعیت ثابت */
    bottom: 0; /* چسبیدن به پایین */
    color: white; /* رنگ متن سفید */
    display: flex; /* نمایش به صورت فلکس‌باکس */
    align-items: center; /* قرارگیری آیتم‌ها در مرکز عمودی */
    margin-bottom: 45px; /* فاصله از پایین */
}

/* استایل آواتار کاربر در فوتر */
.user__avatar {
    border-radius: 50%; /* دایره‌ای کردن تصویر */
    width: 50px; /* عرض 50 پیکسل */
    height: 50px; /* ارتفاع 50 پیکسل */
}

/* استایل عنوان‌های متن در فوتر */
.videoFooter__text h3 {
    margin-left: 10px; /* فاصله از سمت چپ */
}

/* استایل دکمه درون عنوان‌های متن فوتر */
.videoFooter__text h3 a { 
    color: white; /* رنگ متن سفید */
    font-weight: 900; /* ضخامت فونت بالا */
    text-transform: inherit; /* عدم تغییر حروف بزرگ یا کوچک */
    background: rgba(29, 70, 252, 0.363); /* پس‌زمینه نیمه شفاف مشکی */
    border: none; /* بدون حاشیه */
    padding: 5px; /* فاصله داخلی */
    border-radius: 5px;
}

/* استایل تیتر متحرک در فوتر */
.videoFooter__ticker {
    width: 60%; /* عرض 60 درصد */
    margin-left: 30px; /* فاصله از چپ */
    margin-bottom: 20px; /* فاصله از پایین */
    height: fit-content; /* تنظیم خودکار ارتفاع براساس محتوا */
}

/* تنظیم استایل برای متن متحرک */
.videoFooter__ticker marquee {
    font-size: 12px; /* اندازه فونت */
    padding-top: 7px; /* فاصله از بالا */
    color: white; /* رنگ متن سفید */
}

/* استایل آیکون‌های موجود در تیتر متحرک */
.videoFooter__ticker .material-icons {
    position: absolute; /* موقعیت ثابت */
    left: 5px; /* فاصله از سمت چپ */
    color: white; /* رنگ سفید */
}

/* استایل اکشن‌های فوتر */
.videoFooter__actions {
    display: flex; /* نمایش به صورت فلکس‌باکس */
    position: absolute; /* موقعیت ثابت */
    width: 95%; /* عرض 95 درصد */
    justify-content: space-between; /* فاصله مساوی بین آیتم‌ها */
    color: white; /* رنگ سفید */
}

/* استایل آیکون‌های سمت چپ اکشن‌های فوتر */
.videoFooter__actionsLeft .material-icons {
    padding: 0 7px; /* فاصله افقی 7 پیکسل */
    font-size: 1.6em; /* اندازه فونت 1.6 برابر */
}

/* استایل آیکون‌های سمت راست اکشن‌های فوتر */
.videoFooter__actionsRight .material-icons { 
    font-size: 25px; /* اندازه فونت 25 پیکسل */
}

/* استایل کلی اکشن‌های سمت راست */
.videoFooter__actionsRight {
    display: flex; /* نمایش به صورت فلکس‌باکس */
}


/* استایل متن آماری در کنار آیکون‌ها */
.videoFooter__stat p {
    margin-left: 3px; /* فاصله از سمت چپ */
}

.overscroll-placeholder {
    height: 100vh; /* ارتفاع فضای خالی برابر با ارتفاع صفحه */
    background-color: #f5f5f5; /* رنگ زمینه */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #777;
}