/* =========================================================
   CEREMONY LIST — PREMIUM CINEMATIC
   RTL / DARK / STORY POSTERS
   ========================================================= */

:root {
    --cl-bg: #07090c;
    --cl-card: #0d1015;
    --cl-card-2: #12161c;
    --cl-red: #d71920;
    --cl-red-light: #ef3340;
    --cl-white: #f5f5f5;
    --cl-muted: #8d949d;
    --cl-border: rgba(255,255,255,.08);
}

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

.container.my-5 {
    position: relative;

    max-width: 1250px !important;

    padding-top: 15px;
    padding-bottom: 50px;

    direction: rtl;
}

/* background glow */
.container.my-5::before {
    content: "";

    position: fixed;

    top: 80px;
    left: 50%;

    width: 650px;
    height: 500px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(215,25,32,.09) 0%,
            rgba(215,25,32,.035) 35%,
            transparent 70%
        );

    pointer-events: none;

    z-index: -1;
}

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

.container.my-5 > h2 {
    position: relative;

    margin: 0 0 8px !important;

    color: #fff;

    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;

    line-height: 1.5;

    letter-spacing: -.5px;

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

/* red line below title */
.container.my-5 > h2::after {
    content: "";

    display: block;

    width: 65px;
    height: 3px;

    margin: 12px auto 0;

    background:
        linear-gradient(
            90deg,
            var(--cl-red),
            var(--cl-red-light)
        );

    border-radius: 10px;

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

/* description */
.container.my-5 > p.text-center {
    margin-bottom: 28px !important;

    color: #858c95 !important;

    font-size: 13px;

    font-weight: 600;
}

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

.page-size-custom {
    position: relative;

    z-index: 100;
}

.dropdown-wrapper {
    position: relative;

    display: inline-block;
}

/* button */
.dropdown-btn {
    min-width: 175px;

    padding: 11px 18px;

    color: #e8eaed;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

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

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

    border-radius: 12px;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

    transition:
        all .25s ease;
}

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

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

    background:
        linear-gradient(
            145deg,
            rgba(215,25,32,.14),
            rgba(255,255,255,.025)
        );

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

/* dropdown */
.dropdown-menu {
    position: absolute !important;

    top: calc(100% + 8px);
    right: 0;

    min-width: 175px;

    padding: 8px !important;

    background:
        rgba(13,16,21,.98) !important;

    border: 1px solid rgba(255,255,255,.09) !important;

    border-radius: 14px !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,.65) !important;

    backdrop-filter: blur(15px);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-8px)
        scale(.98);

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

    z-index: 9999;
}

.dropdown-menu.show {
    opacity: 1;

    visibility: visible;

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

.dropdown-menu a {
    display: block;

    margin: 3px 0 !important;

    padding: 9px 12px !important;

    color: #bfc4ca !important;

    font-size: 13px;
    font-weight: 700;

    text-align: center;

    text-decoration: none;

    border-radius: 9px;

    transition:
        all .2s ease;
}

.dropdown-menu a:hover {
    color: #fff !important;

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

    transform: translateX(-2px);
}

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

.container.my-5 > .row {
    --bs-gutter-x: 18px;
    --bs-gutter-y: 24px;

    margin-top: 5px;
}

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

.ceremony-item {
    min-width: 0;

    opacity: 0;

    animation:
        ceremonyCardIn .55s ease forwards;
}

.ceremony-item:nth-child(1) { animation-delay: .03s; }
.ceremony-item:nth-child(2) { animation-delay: .06s; }
.ceremony-item:nth-child(3) { animation-delay: .09s; }
.ceremony-item:nth-child(4) { animation-delay: .12s; }
.ceremony-item:nth-child(5) { animation-delay: .15s; }
.ceremony-item:nth-child(6) { animation-delay: .18s; }
.ceremony-item:nth-child(7) { animation-delay: .21s; }
.ceremony-item:nth-child(8) { animation-delay: .24s; }

@keyframes ceremonyCardIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.ceremony-card {
    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;

    background:
        linear-gradient(
            145deg,
            #11151a 0%,
            #0a0d11 100%
        );

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

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 15px 40px rgba(0,0,0,.35);

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

.ceremony-card:hover {
    transform: translateY(-8px);

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

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

/* red top line */
.ceremony-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 18%;
    left: 18%;

    height: 2px;

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

    opacity: .55;

    z-index: 5;
}

/* =========================================================
   POSTER
   ========================================================= */

.ceremony-image-wrapper {
    position: relative;

    width: 100%;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    background: #050608;

    cursor: pointer;
}

/* blurred poster behind */
.ceremony-image-wrapper::before {
    content: "";

    position: absolute;

    inset: -20px;

    background-image:
        var(--poster-bg);

    background-size: cover;
    background-position: center;

    filter: blur(25px);

    opacity: .18;

    transform: scale(1.15);

    z-index: 0;
}

/* actual poster */
.ceremony-poster {
    position: relative;

    display: block;

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

    aspect-ratio: 9 / 16;

    object-fit: cover;

    border: 0 !important;
    border-radius: 0 !important;

    margin: 0 !important;

    opacity: 0;

    transform: scale(1.01);

    transition:
        transform .5s cubic-bezier(.2,.7,.2,1),
        opacity .5s ease,
        filter .5s ease;

    z-index: 1;
}

.ceremony-poster.visible {
    opacity: 1;
}

.ceremony-card:hover .ceremony-poster {
    transform: scale(1.055);

    filter:
        brightness(1.06)
        saturate(1.08);
}

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

.image-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 20px;

    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(0,0,0,.10) 60%,
            rgba(0,0,0,.78) 100%
        );

    opacity: 0;

    transition:
        opacity .3s ease;

    z-index: 3;

    pointer-events: none;
}

.image-overlay span {
    padding: 8px 15px;

    color: #fff;

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

    background:
        rgba(0,0,0,.65);

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

    border-radius: 999px;

    backdrop-filter: blur(8px);

    transform: translateY(10px);

    transition:
        transform .3s ease;
}

.ceremony-card:hover .image-overlay {
    opacity: 1;
}

.ceremony-card:hover .image-overlay span {
    transform: translateY(0);
}

/* =========================================================
   CONTENT
   ========================================================= */

.ceremony-content {
    position: relative;

    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 17px 16px 16px;

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

/* title */
.ceremony-content h4 {
    display: -webkit-box;

    margin: 0 0 13px;

    color: #f3f4f5;

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

    line-height: 1.8;

    text-align: right;

    overflow: hidden;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    transition:
        color .25s ease;
}

.ceremony-card:hover .ceremony-content h4 {
    color: #fff;
}

/* =========================================================
   DATE
   ========================================================= */

.ceremony-date {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 15px;

    color: var(--cl-muted);

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

    white-space: nowrap;
}

.date-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;

    color: var(--cl-red-light);

    font-size: 8px;

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

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

    border-radius: 7px;
}

/* =========================================================
   DETAIL BUTTON
   ========================================================= */

.ceremony-btn {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-top: auto;

    padding: 10px 12px;

    color: #dfe2e5 !important;

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

    text-decoration: none !important;

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

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

    border-radius: 10px;

    overflow: hidden;

    transition:
        all .25s ease;
}

.ceremony-btn::before {
    content: "";

    position: absolute;

    inset: 0;

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

    transform: translateX(100%);

    transition:
        transform .5s ease;
}

.ceremony-btn span {
    position: relative;
    z-index: 2;
}

.ceremony-btn .btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    color: #fff;

    background:
        var(--cl-red);

    border-radius: 7px;

    font-size: 13px;

    transition:
        transform .25s ease,
        background .25s ease;
}

.ceremony-btn:hover {
    color: #fff !important;

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

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

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

.ceremony-btn:hover::before {
    transform: translateX(-100%);
}

.ceremony-btn:hover .btn-arrow {
    transform: translateX(-3px);

    background:
        var(--cl-red-light);
}

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

.container.my-5 > nav {
    margin-top: 45px !important;
}

.pagination {
    gap: 6px;

    flex-wrap: wrap;
}

.pagination .page-item {
    margin: 0 !important;
}

.pagination .page-link {
    min-width: 38px;
    height: 38px;

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

    padding: 0 11px;

    color: #aeb4bb !important;

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

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

    border: 1px solid rgba(255,255,255,.08) !important;

    border-radius: 10px !important;

    box-shadow: none !important;

    transition:
        all .2s ease;
}

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

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

    border-color:
        rgba(215,25,32,.35) !important;

    transform: translateY(-2px);
}

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

    background:
        linear-gradient(
            135deg,
            var(--cl-red),
            #a90f15
        ) !important;

    border-color:
        var(--cl-red) !important;

    box-shadow:
        0 8px 22px rgba(215,25,32,.22) !important;
}

.pagination .page-item.disabled .page-link {
    color: #4f555c !important;

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

    border-color:
        rgba(255,255,255,.04) !important;

    cursor: default;
}

/* =========================================================
   MODAL
   ========================================================= */

#imageModal .modal-dialog {
    max-width: 430px;
}

#imageModal .modal-content {
    background:
        #0b0e12 !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    border-radius:
        20px !important;

    box-shadow:
        0 30px 100px rgba(0,0,0,.8);
}

#imageModal .modal-body {
    padding: 8px !important;
}

#modalImg {
    display: block;

    width: 100%;

    max-height: 82vh;

    object-fit: contain;

    border-radius: 14px !important;
}

#imageModal .btn-close {
    z-index: 10;

    width: 32px;
    height: 32px;

    margin: 10px !important;

    opacity: 1;

    background-color:
        rgba(0,0,0,.75);

    border-radius: 50%;

    filter: invert(1);

    transition:
        transform .2s ease,
        background .2s ease;
}

#imageModal .btn-close:hover {
    transform: rotate(90deg);

    background-color:
        var(--cl-red);
}

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

@media (max-width: 767px) {

    .container.my-5 {
        margin-top: 25px !important;
    }

    .container.my-5 > h2 {
        font-size: 28px;
    }

    .container.my-5 > .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 17px;
    }

    .ceremony-card {
        border-radius: 15px;
    }

    .ceremony-content {
        padding: 12px 11px 11px;
    }

    .ceremony-content h4 {
        font-size: 12px;

        line-height: 1.75;
    }

    .ceremony-date {
        font-size: 9px;

        gap: 5px;
    }

    .date-icon {
        width: 18px;
        height: 18px;
    }

    .ceremony-btn {
        padding: 8px 9px;

        font-size: 9px;
    }

    .ceremony-btn .btn-arrow {
        width: 22px;
        height: 22px;

        font-size: 11px;
    }
}

@media (max-width: 575px) {

    .container.my-5 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .container.my-5 > h2 {
        font-size: 25px;
    }

    .container.my-5 > p.text-center {
        font-size: 11px;
    }

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

    .dropdown-menu {
        min-width: 155px;
    }

    .ceremony-item {
        width: 50%;
    }

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

    .ceremony-content h4 {
        font-size: 11px;
    }

    .ceremony-date {
        font-size: 8.5px;
    }
}

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

@media (max-width: 380px) {

    .container.my-5 > .row {
        --bs-gutter-x: 9px;
        --bs-gutter-y: 13px;
    }

    .ceremony-content {
        padding: 10px 9px;
    }

    .ceremony-content h4 {
        font-size: 10px;
    }

    .ceremony-date {
        font-size: 8px;
    }

    .ceremony-btn {
        font-size: 8px;
    }
}



/* =========================================================
   FIX CEREMONY POSTER — FORCE PRIORITY
   ========================================================= */

.ceremony-image-wrapper {
    position: relative !important;

    width: 100% !important;
    aspect-ratio: 9 / 16 !important;

    overflow: hidden !important;

    background: #111 !important;

    cursor: pointer !important;
}

/* خاموش کردن لایه اضافی قبلی */
.ceremony-image-wrapper::before {
    content: none !important;
    display: none !important;
}

/* خود عکس */
.ceremony-image-wrapper .ceremony-poster {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;

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

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #111 !important;

    filter: none !important;

    z-index: 1 !important;

    transition:
        transform .45s ease,
        filter .45s ease !important;
}

/* Hover */
.ceremony-card:hover .ceremony-image-wrapper .ceremony-poster {
    transform: scale(1.04) !important;

    filter: brightness(1.05) saturate(1.05) !important;
}

/* لایه مشکی فقط هنگام هاور */
.ceremony-image-wrapper .image-overlay {
    position: absolute !important;

    inset: 0 !important;

    z-index: 2 !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    padding: 18px !important;

    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(0,0,0,.75) 100%
        ) !important;

    opacity: 0 !important;

    pointer-events: none !important;

    transition: opacity .3s ease !important;
}

.ceremony-card:hover .ceremony-image-wrapper .image-overlay {
    opacity: 1 !important;
}

/* متن مشاهده پوستر */
.ceremony-image-wrapper .image-overlay span {
    color: #fff !important;

    padding: 7px 14px !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    background: rgba(0,0,0,.7) !important;

    border: 1px solid rgba(255,255,255,.12) !important;

    border-radius: 50px !important;
}