/* =========================================================
   VIDEO ARCHIVE
   هماهنگ با Base Theme
========================================================= */


/* =========================================================
   PAGE TITLE
========================================================= */

main.container > h2 {
    position: relative;

    margin-top: 55px;
    margin-bottom: 42px;

    color: #fff;

    font-size: 32px;
    font-weight: 800;

    text-align: center;

    letter-spacing: -.5px;

    text-shadow:
        0 5px 25px rgba(0,0,0,.4);
}

main.container > h2::after {
    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin: 14px auto 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary-light),
            transparent
        );

    box-shadow:
        0 0 12px rgba(215,25,32,.35);
}


/* =========================================================
   PAGE SIZE
========================================================= */

.page-size-custom {
    position: relative;

    z-index: 3000;

    margin-bottom: 28px;
}

.dropdown-wrapper {
    position: relative;

    display: inline-block;
}


/* دکمه تعداد */

.dropdown-btn {
    min-width: 155px;

    padding: 10px 18px;

    border:
        1px solid var(--border-light);

    border-radius: 12px;

    background:
        var(--bg-card);

    color:
        var(--text-soft);

    font-family: inherit;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        var(--shadow-sm);

    transition:
        .25s ease;
}

.dropdown-btn:hover {
    color: #fff;

    border-color:
        var(--primary-border);

    background:
        var(--bg-card-2);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px rgba(0,0,0,.3);
}


/* =========================================================
   CUSTOM DROPDOWN
========================================================= */

.dm {
    position: absolute;

    top: calc(100% + 8px);
    left: 50%;

    width: 155px;

    padding: 6px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    transform:
        translateX(-50%)
        translateY(-5px);

    background:
        #15171c;

    border:
        1px solid var(--border-light);

    border-radius: 14px;

    box-shadow:
        var(--shadow-lg);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index: 99999;
}

.dm.show {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}

.dm a {
    display: block;

    padding: 9px 10px;

    border-radius: 9px;

    color:
        var(--text-soft);

    text-align: center;

    text-decoration: none;

    font-size: 12px;

    transition: .2s ease;
}

.dm a:hover {
    color: #fff;

    background:
        var(--primary-soft);

    transform:
        translateX(-2px);
}


/* =========================================================
   FILTER PANEL
========================================================= */

.filter-wrapper {
    position: relative;

    z-index: 2000;

    max-width: 850px;

    margin:
        0 auto 38px;

    padding:
        16px 18px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.018)
        );

    box-shadow:
        var(--shadow-sm);
}


/* خط بالای پنل */

.filter-wrapper::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 50%;

    width: 65px;
    height: 2px;

    transform:
        translateX(-50%);

    background:
        var(--primary);

    border-radius:
        20px;

    opacity: .7;
}


/* =========================================================
   UPDATE
========================================================= */

.filter-top {
    margin-bottom: 13px !important;
}

.filter-top .filter-btn {
    min-width: auto;

    padding:
        5px 14px !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        var(--muted) !important;

    font-size: 10px;

    box-shadow: none !important;

    cursor: default;
}

.filter-top .filter-btn:hover {
    transform: none;
}


/* =========================================================
   FILTER BUTTONS
========================================================= */

.filter-bar {
    gap: 8px !important;
}

.filter-item {
    position: relative;
}

.filter-btn {
    min-width: 112px;

    padding:
        8px 16px !important;

    border:
        1px solid var(--border-light) !important;

    border-radius:
        11px !important;

    background:
        rgba(255,255,255,.025) !important;

    color:
        var(--text-soft) !important;

    font-family: inherit;

    font-size: 11px;

    transition:
        .25s ease;
}

.filter-btn:hover,
.filter-btn:focus {
    color:
        #fff !important;

    border-color:
        var(--primary-border) !important;

    background:
        var(--primary-soft) !important;

    box-shadow:
        0 6px 18px rgba(0,0,0,.22);

    transform:
        translateY(-2px);
}


/* =========================================================
   FILTER DROPDOWN
========================================================= */

.filter-item .dropdown-menu {
    min-width: 160px;

    max-height: 280px;

    overflow-y: auto;

    padding: 6px;

    background:
        #15171c !important;

    border:
        1px solid var(--border-light);

    border-radius:
        13px;

    box-shadow:
        var(--shadow-lg);

    z-index: 99999;
}

.filter-item .dropdown-item {
    padding:
        9px 11px;

    border-radius:
        9px;

    color:
        var(--text-soft);

    text-align:
        center;

    font-size:
        11px;

    transition:
        .2s ease;
}

.filter-item .dropdown-item:hover {
    color: #fff;

    background:
        var(--primary-soft);

    transform:
        translateX(-2px);
}

.filter-item hr {
    margin:
        3px 7px;

    border:
        0;

    border-top:
        1px solid rgba(255,255,255,.045);
}


/* =========================================================
   VIDEO GRID
========================================================= */

.video-slider {
    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        20px;

    margin-top:
        10px;

    padding:
        5px 0 15px;
}


/* =========================================================
   VIDEO LINK
========================================================= */

.video-slider > a {
    position: relative;

    display: block !important;

    min-width: 0;

    color: inherit;

    text-decoration: none !important;

    animation:
        videoCardIn .5s ease both;
}


/* =========================================================
   VIDEO CARD
========================================================= */

.video-card {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius:
        17px;

    background:
        var(--bg-card);

    border:
        1px solid var(--border);

    box-shadow:
        0 8px 25px rgba(0,0,0,.22);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

    isolation: isolate;
}


/* خط قرمز بالای کارت */

.video-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 18%;

    width: 64%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary),
            transparent
        );

    opacity: 0;

    transition:
        .3s ease;

    z-index: 5;
}


/* Hover */

.video-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(215,25,32,.38);

    box-shadow:
        0 18px 40px rgba(0,0,0,.38),
        0 5px 20px rgba(215,25,32,.06);
}

.video-card:hover::before {
    opacity: 1;
}


/* =========================================================
   IMAGE
========================================================= */

.video-wrapper {
    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 10;

    overflow: hidden;

    background:
        #090a0d;
}


/* لایه روی تصویر */

.video-wrapper::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0,0,0,.58) 100%
        );

    pointer-events: none;

    z-index: 1;
}


/* تصویر */

.video-card img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    border-radius: 0 !important;

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        filter .4s ease;
}

.video-card:hover img {
    transform:
        scale(1.065);

    filter:
        brightness(1.05);
}


/* =========================================================
   PLAY INDICATOR
========================================================= */

.video-wrapper::before {
    content: "▶";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform:
        translate(-50%,-45%)
        scale(.8);

    border-radius:
        50%;

    background:
        rgba(215,25,32,.92);

    color:
        #fff;

    font-size:
        13px;

    padding-left:
        2px;

    opacity:
        0;

    box-shadow:
        0 8px 25px rgba(0,0,0,.35);

    transition:
        .3s ease;

    z-index:
        3;
}

.video-card:hover .video-wrapper::before {
    opacity: 1;

    transform:
        translate(-50%,-50%)
        scale(1);
}


/* =========================================================
   VIDEO BODY
========================================================= */

.video-body {
    position:
        relative;

    min-height:
        84px;

    height:
        auto !important;

    padding:
        11px 12px 12px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            transparent
        );

    z-index:
        4;
}


/* عنوان */

.video-body h6 {
    margin:
        0;

    color:
        #f5f5f5;

    text-align:
        center;

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.75;

    display:
        -webkit-box;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;

    transition:
        color .25s ease;
}

.video-card:hover .video-body h6 {
    color:
        var(--primary-light);
}


/* =========================================================
   OCCASION
========================================================= */

.video-body p {
    display:
        table;

    max-width:
        100%;

    margin:
        7px auto 0 !important;

    padding:
        3px 9px;

    border-radius:
        7px;

    color:
        var(--muted) !important;

    background:
        rgba(255,255,255,.035);

    font-size:
        9px !important;

    line-height:
        1.5;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


/* =========================================================
   PAGINATION
========================================================= */

.pagination {
    gap:
        6px;

    margin-top:
        35px;

    margin-bottom:
        45px;
}

.pagination .page-item {
    transition:
        .2s ease;
}

.pagination .page-item:hover {
    transform:
        translateY(-2px);
}

.pagination .page-link {
    min-width:
        40px;

    padding:
        8px 11px;

    border:
        1px solid var(--border) !important;

    border-radius:
        10px !important;

    background:
        rgba(255,255,255,.025);

    color:
        var(--text-soft);

    font-size:
        11px;

    text-align:
        center;

    transition:
        .2s ease;
}

.pagination .page-link:hover {
    color:
        #fff;

    background:
        var(--primary-soft);

    border-color:
        var(--primary-border) !important;
}

.pagination .page-item.active .page-link {
    color:
        #fff;

    background:
        var(--primary);

    border-color:
        var(--primary) !important;

    font-weight:
        700;

    box-shadow:
        0 6px 20px rgba(215,25,32,.18);
}

.pagination .page-item.disabled .page-link {
    opacity:
        .25;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.dropdown-menu::-webkit-scrollbar {
    width:
        4px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background:
        transparent;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background:
        rgba(215,25,32,.45);

    border-radius:
        20px;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .video-slider {
        grid-template-columns:
            repeat(5, minmax(0,1fr));

        gap:
            21px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .video-slider {
        grid-template-columns:
            repeat(4, minmax(0,1fr));

        gap:
            18px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .video-slider {
        grid-template-columns:
            repeat(3, minmax(0,1fr));

        gap:
            14px;
    }

    .filter-wrapper {
        margin-left:
            5px;

        margin-right:
            5px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    main.container > h2 {
        margin-top:
            35px;

        margin-bottom:
            30px;

        font-size:
            26px;
    }

    .filter-wrapper {
        padding:
            13px 10px;

        border-radius:
            16px;
    }

    .filter-bar {
        gap:
            6px !important;
    }

    .filter-btn {
        min-width:
            100px;

        padding:
            8px 10px !important;

        font-size:
            10px;
    }

    .dropdown-btn {
        min-width:
            145px;

        font-size:
            11px;
    }

    .video-slider {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap:
            11px;

        padding-left:
            2px;

        padding-right:
            2px;
    }

    .video-card {
        border-radius:
            14px;
    }

    .video-body {
        min-height:
            70px;

        padding:
            8px 7px 9px;
    }

    .video-body h6 {
        font-size:
            10px;

        line-height:
            1.65;
    }

    .video-body p {
        margin-top:
            5px !important;

        padding:
            2px 6px;

        font-size:
            8px !important;
    }

    .video-wrapper::before {
        width:
            34px;

        height:
            34px;

        font-size:
            10px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .video-slider {
        grid-template-columns:
            1fr;

        gap:
            13px;
    }

    .video-wrapper {
        aspect-ratio:
            16 / 9;
    }

    .video-body {
        min-height:
            68px;
    }

    .video-body h6 {
        font-size:
            12px;
    }
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes videoCardIn {

    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}
 


@media (max-width: 768px) {
    h2{
        margin-top: 50px !important;
    }
}

.navbar,
.mobile-header,
.fixed-bottom,
.bottom-nav,
.mobile-bottom-nav,
footer {
    /*
       عمداً پایین‌تر از پلیر نگه داشته می‌شوند.
    */
    z-index: 6000 !important;
}

.modal,
.offcanvas {
    z-index: 20000;
}

.audio-player,
#bottomAudioPlayer {
    z-index: 2147483647 !important;
}








 /* =========================================================
   PREMIUM VIDEO GRID
========================================================= */

.video-slider {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 22px;

    margin-top: 20px;
    padding: 10px 4px 30px;
}


/* =========================================================
   CARD LINK
========================================================= */

.video-slider > a {
    display: block !important;

    min-width: 0;

    color: inherit;
    text-decoration: none !important;

    animation:
        cardEntrance .75s cubic-bezier(.22,.61,.36,1) both;
}


/* ورود تدریجی */

.video-slider > a:nth-child(1)  { animation-delay: .05s; }
.video-slider > a:nth-child(2)  { animation-delay: .10s; }
.video-slider > a:nth-child(3)  { animation-delay: .15s; }
.video-slider > a:nth-child(4)  { animation-delay: .20s; }
.video-slider > a:nth-child(5)  { animation-delay: .25s; }
.video-slider > a:nth-child(6)  { animation-delay: .30s; }
.video-slider > a:nth-child(7)  { animation-delay: .35s; }
.video-slider > a:nth-child(8)  { animation-delay: .40s; }
.video-slider > a:nth-child(9)  { animation-delay: .45s; }
.video-slider > a:nth-child(10) { animation-delay: .50s; }


/* =========================================================
   CARD
========================================================= */

.video-card {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 22px;

    /*
       کادر چندلایه
    */

    border: 1px solid rgba(255,255,255,.085);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025) 45%,
            rgba(10,11,15,.92)
        );

    box-shadow:
        0 12px 35px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.055);

    isolation: isolate;

    /*
       انیمیشن دائمی بسیار ظریف
    */

    animation:
        cardFloat 5s ease-in-out infinite;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;

    will-change: transform;
}


/* =========================================================
   RED BORDER GLOW
========================================================= */

.video-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 10;

    pointer-events: none;

    border-radius: inherit;

    padding: 1px;

    background:
        linear-gradient(
            135deg,
            transparent 15%,
            rgba(215,25,32,.45),
            transparent 42%,
            transparent 65%,
            rgba(215,25,32,.18),
            transparent 85%
        );

    /*
       فقط حاشیه دیده شود
    */

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: .45;

    animation:
        borderFlow 6s linear infinite;
}


/* =========================================================
   MOVING LIGHT
========================================================= */

.video-card::after {
    content: "";

    position: absolute;

    inset: -100%;

    z-index: 9;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 42%,
            rgba(255,255,255,.055) 48%,
            rgba(215,25,32,.08) 50%,
            transparent 56%
        );

    transform:
        translateX(-35%)
        rotate(8deg);

    animation:
        lightMove 5.5s ease-in-out infinite;
}


/* =========================================================
   IMAGE
========================================================= */

.video-wrapper {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background:
        #090a0d;
}


/* تصویر */

.video-card img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    border-radius: 0 !important;

    filter:
        brightness(.9)
        saturate(.92);

    transform:
        scale(1.035);

    animation:
        imageBreathing 7s ease-in-out infinite;

    will-change: transform;

    transition:
        filter .4s ease;
}


/* =========================================================
   CINEMATIC OVERLAY
========================================================= */

.video-wrapper::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 20%,
            rgba(0,0,0,.10) 48%,
            rgba(0,0,0,.78) 100%
        );
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.video-wrapper::before {
    content: "▶";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    z-index: 5;

    padding-left: 3px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(230,35,42,.96),
            rgba(170,15,22,.96)
        );

    border:
        1px solid rgba(255,255,255,.22);

    color: #fff;

    font-size: 13px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.4),
        0 0 0 7px rgba(215,25,32,.07);

    transform:
        translate(-50%,-50%)
        scale(.92);

    animation:
        playButton 2.8s ease-in-out infinite;
}


/* =========================================================
   VIDEO BODY
========================================================= */

.video-body {
    position: relative;

    min-height: 92px;

    padding:
        13px 13px 14px;

    z-index: 6;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(0,0,0,.12)
        );
}


/* خط ظریف بالای Body */

.video-body::after {
    content: "";

    position: absolute;

    top: 0;
    left: 22%;

    width: 56%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215,25,32,.5),
            transparent
        );

    opacity: .6;

    animation:
        linePulse 3s ease-in-out infinite;
}


/* =========================================================
   TITLE
========================================================= */

.video-body h6 {
    margin: 0;

    color: #f4f4f4;

    text-align: center;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.8;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    animation:
        titleGlow 4s ease-in-out infinite;
}


/* =========================================================
   OCCASION
========================================================= */

.video-body p {
    display: table;

    max-width: 90%;

    margin:
        8px auto 0 !important;

    padding:
        4px 10px;

    border-radius:
        999px;

    color:
        var(--muted) !important;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.06);

    font-size:
        9px !important;

    line-height:
        1.5;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    animation:
        badgeFloat 3.5s ease-in-out infinite;
}


/* =========================================================
   ANIMATION 01
   CARD ENTRANCE
========================================================= */

@keyframes cardEntrance {

    0% {
        opacity: 0;

        transform:
            translateY(35px)
            scale(.94)
            rotateX(5deg);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1)
            rotateX(0);
    }
}


/* =========================================================
   ANIMATION 02
   FLOAT
========================================================= */

@keyframes cardFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-4px);
    }
}


/* =========================================================
   ANIMATION 03
   IMAGE BREATHING
========================================================= */

@keyframes imageBreathing {

    0%,
    100% {
        transform:
            scale(1.035);
    }

    50% {
        transform:
            scale(1.075);
    }
}


/* =========================================================
   ANIMATION 04
   BORDER
========================================================= */

 

/* =========================================================
   ANIMATION 05
   LIGHT
========================================================= */

@keyframes lightMove {

    0%,
    25% {
        transform:
            translateX(-55%)
            rotate(8deg);

        opacity: 0;
    }

    45% {
        opacity: 1;
    }

    70%,
    100% {
        transform:
            translateX(55%)
            rotate(8deg);

        opacity: 0;
    }
}


/* =========================================================
   ANIMATION 06
   PLAY
========================================================= */

@keyframes playButton {

    0%,
    100% {
        transform:
            translate(-50%,-50%)
            scale(.92);

        box-shadow:
            0 8px 25px rgba(0,0,0,.4),
            0 0 0 7px rgba(215,25,32,.07);
    }

    50% {
        transform:
            translate(-50%,-50%)
            scale(1);

        box-shadow:
            0 10px 30px rgba(0,0,0,.45),
            0 0 0 13px rgba(215,25,32,0);
    }
}


/* =========================================================
   ANIMATION 07
   TITLE
========================================================= */

@keyframes titleGlow {

    0%,
    100% {
        opacity: .9;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   ANIMATION 08
   BADGE
========================================================= */

@keyframes badgeFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-2px);
    }
}


/* =========================================================
   ANIMATION 09
   RED LINE
========================================================= */

@keyframes linePulse {

    0%,
    100% {
        opacity: .25;
        transform: scaleX(.7);
    }

    50% {
        opacity: .8;
        transform: scaleX(1);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .video-slider {
        grid-template-columns:
            repeat(4, minmax(0,1fr));

        gap: 18px;
    }
}


@media (max-width: 991px) {

    .video-slider {
        grid-template-columns:
            repeat(3, minmax(0,1fr));

        gap: 15px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .video-slider {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap: 11px;

        padding:
            8px 2px 20px;
    }

    .video-card {
        border-radius: 16px;
    }

    .video-wrapper {
        aspect-ratio:
            16 / 10;
    }

    .video-body {
        min-height: 72px;

        padding:
            9px 7px 10px;
    }

    .video-body h6 {
        font-size: 10px;
        line-height: 1.65;
    }

    .video-body p {
        margin-top: 5px !important;

        padding:
            3px 7px;

        font-size: 8px !important;
    }

    .video-wrapper::before {
        width: 35px;
        height: 35px;

        font-size: 10px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .video-slider {
        grid-template-columns:
            1fr;

        gap: 14px;
    }

    .video-wrapper {
        aspect-ratio:
            16 / 9;
    }

    .video-body {
        min-height: 68px;
    }

    .video-body h6 {
        font-size: 12px;
    }
}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .video-slider > a,
    .video-card,
    .video-card img,
    .video-card::before,
    .video-card::after,
    .video-wrapper::before,
    .video-body::after,
    .video-body h6,
    .video-body p {
        animation: none !important;
    }
}
 



 /* =========================================================
   VIDEO META
========================================================= */

.video-meta {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 9px;

    width: 100%;
}


/* =========================================================
   OCCASION BADGE
========================================================= */

.video-occasion {
    display: block;

    max-width: 62%;

    padding:
        4px 9px;

    border-radius:
        999px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color:
        var(--muted);

    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.055);

    font-size:
        8px;

    line-height:
        1.5;

    transition:
        .3s ease;
}


/* =========================================================
   VIEWS
========================================================= */

.video-views {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 4px;

    padding:
        4px 8px;

    border-radius:
        999px;

    color:
        rgba(255,255,255,.58);

    background:
        rgba(215,25,32,.055);

    border:
        1px solid rgba(215,25,32,.10);

    font-size:
        8px;

    line-height:
        1.5;

    white-space:
        nowrap;

    direction: rtl;

    animation:
        viewsFloat 3s ease-in-out infinite;
}


/* آیکون چشم */

.views-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 13px;
    height: 13px;

    color:
        var(--primary-light);

    font-size:
        9px;

    opacity:
        .85;
}


/* =========================================================
   CARD HOVER / MOTION
========================================================= */

.video-card:hover .video-views {
    color: #fff;

    background:
        rgba(215,25,32,.12);

    border-color:
        rgba(215,25,32,.25);
}

.video-card:hover .video-occasion {
    color: #eee;

    background:
        rgba(255,255,255,.065);
}


/* =========================================================
   VIEWS ANIMATION
========================================================= */

@keyframes viewsFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-1.5px);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .video-meta {
        gap: 4px;

        margin-top: 6px;
    }

    .video-occasion {
        max-width: 60%;

        padding:
            3px 6px;

        font-size:
            7px;
    }

    .video-views {
        padding:
            3px 6px;

        font-size:
            7px;
    }

    .views-icon {
        width: 11px;
        height: 11px;

        font-size: 8px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .video-meta {
        gap: 5px;
    }

    .video-occasion {
        font-size: 8px;
    }

    .video-views {
        font-size: 8px;
    }
}