@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ===== فونت متغیر (Variable) ===== */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn[wght].woff2') format('woff2 supports variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

* * {
    font-family: 'Vazirmatn', sans-serif;
    scrollbar-width: thin;
    scrollbar-arrow-color: rgba(255, 255, 255, 0);
}


/* ===== تصویر پس‌زمینه محو ===== */
.landing-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url('/images/vinyl-record-3a7796gznuht63v1.webp');
    /*background-size: 600px;*/
    background-repeat: repeat;
    /*filter: grayscale(1) opacity(0.2);*/
}

/* لایه‌ی شفاف برای خوانایی محتوا */
.landing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: rgba(255, 255, 255, 0.65); /* سفید با ۶۵٪ شفافیت */
}

/* محتوای اصلی بالای لایه‌ها */
.landing-content {
    background-image: url('/images/vintage-iphone-coca-cola-stickers-ajt2kciwqdsilozs.webp');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.landing-content .main-contents {
    background-color: #e2d7a7bb;
    border-radius: 5px;
}

.tab-active {
    border-bottom: 3px solid #ffffff66;
    border-right: 3px solid #ffffff66;
    color: #1f2937;
    font-weight: bold;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* دکمه‌های دسته‌بندی کافه */
.cafe-filter-btn {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.cafe-filter-btn.active {
    background: #f59e0b !important;
    color: white !important;
    border-color: #d97706;
    box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.3);
}

/* چک‌باکس‌های سفارشی */
.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: 0.375rem;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.custom-checkbox:checked {
    background: #f59e0b;
    border-color: #f59e0b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 0.875rem;
    background-position: center;
    background-repeat: no-repeat;
}

.custom-checkbox:hover {
    border-color: #f59e0b;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.game-category-checkbox-label {
    background-color: #59B292;
}

.price-tag {
    background: #fef3c7;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    color: #92400e;
    white-space: nowrap;
}

.tab-content {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
    height: 0;
    overflow: hidden;
}

.tab-content.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0s;
    height: auto;
    overflow: visible;
}

.tab-content-inner {
    padding: 1px 0;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

#no-games-message {
    color: #fff;
}


:root {
    --pink: #ecb2ba;
    --pink-dark: #c6939a;
    --tape-gray: #dbd8be;
    --tape-edge-gray: #b7b49d;
    --transparent: rgba(255, 255, 255, 0);
}

.pink {
    --paper-color: var(--pink);
    --paper-dark: var(--pink-dark);
    --shadow-size: 1px;
    --transparent: rgba(236, 178, 186, 0);
}

.blue {
    --paper-color: #d5e0f9;
    --paper-dark: #c2d0ea;
    --shadow-size: 3px;
    --transparent: rgba(213, 224, 249, 0);
}

.brown {
    --paper-color: #d38c60;
    --paper-dark: #985a33;
    --shadow-size: 3px;
    --transparent: rgba(213, 224, 249, 0);
}

.red {
    --paper-color: #E30000;
    --paper-dark: #B51200;
    --shadow-size: 3px;
    --transparent: rgba(213, 224, 249, 0);
}

.paper {
    position: relative;
    background: linear-gradient(
        to bottom right,
        var(--paper-dark),
        20%,
        var(--transparent)
    ),
    var(--paper-color);
    min-width: 200px;
    min-height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Caveat", cursive;
    font-size: 2rem;
    box-shadow: var(--shadow-size) var(--shadow-size) 2px var(--paper-dark);
    /*margin: auto;*/
    /*margin-top: 50px;*/
}

.paper::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        var(--transparent),
        50%,
        var(--paper-dark),
        51%,
        var(--transparent)
    ),
    linear-gradient(
        to right,
        var(--transparent),
        50%,
        var(--paper-dark),
        51%,
        var(--transparent)
    );
}

.tape-section {
    position: absolute;
    width: 100%;
}

.top-tape {
    position: absolute;
    height: 4vmin;
    top: -5px;
    width: 110%;
    background-color: var(--tape-gray);
    border-right: 1px dotted var(--tape-edge-gray);
    border-left: 1px dotted var(--tape-edge-gray);
    opacity: 0.5;
}

.tape-section:first-of-type {
    top: 0;
}

.tape-section:last-of-type {
    bottom: 0;
}

.tape-section::before,
.tape-section::after {
    content: "";
    width: 10vmin;
    height: 4vmin;
    position: absolute;
    background-color: var(--tape-gray);
    opacity: 0.5;
    border-right: 1px dotted var(--tape-edge-gray);
    border-left: 1px dotted var(--tape-edge-gray);
}

.tape-section:last-of-type::after {
    transform: rotate(-45deg);
    right: -4vmin;
    top: -3vmin;
}

.tape-section:first-of-type::before {
    transform: rotate(-45deg);
    left: -4vmin;
}

.tape-section:first-of-type::after {
    transform: rotate(45deg);
    right: -4vmin;
    top: 0;
}

.tape-section:last-of-type::before {
    transform: rotate(45deg);
    left: -4vmin;
    bottom: 0;
}

.main-tab-btn {
    cursor: pointer;
}


.box {
    /*width: 50%;*/
    min-width: 250px;
    display: block;
    /*height: 50px;*/
    position: relative;
    border-radius: 5px;
    background: linear-gradient(to right, #abbd73 35%, #d6e2ad 100%);
    /*margin-bottom: 40px;*/
    padding: 10px 25px 10px 20px;
    color: darkslategray;
    box-shadow: 1px 2px 1px -1px #777;
    transition: background 200ms ease-in-out;
}

.shadow {
    position: relative;
}

.shadow:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 13px;
    right: 7px;
    width: 25%;
    top: 0;
    box-shadow: 0 15px 10px #777;
    transform: rotate(4deg);
    transition: all 150ms ease-in-out;
}

.box:hover {
    background: linear-gradient(to right, #abbd73 0%, #abbd73 100%);
}

.shadow:hover::before {
    transform: rotate(0deg);
    bottom: 20px;
    z-index: -10;
}

.circle {
    position: absolute;
    top: 14px;
    right: 15px;
    border-radius: 50%;
    box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, .5), inset 0 0 0 25px antiquewhite;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.box .box-content {
    margin-right: 1rem;
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    gap: .5rem;
}

.box .box-content .box-content-price {
    align-self: center;
}


:root {
    --game-card-pink: 77.75% 0.1003 350.51;
    --game-card-gold: 84.16% 0.1169 71.19;
    --game-card-mint: 84.12% 0.1334 165.28;

    --mobile--w: 360px;
    --mobile--h: 540px;

    --outline-w: 9px;
    --preview-bg: #fff;
}

.game-card {
    --bg-pos-y--start: 0;
    --bg-pos-y--end: 0;
    --bg-pos-y: var(--bg-pos-y--start);
    --delay: 0;
    --duration: 6s;

    background-color: #fff;

    --shadow-blur: 24px;
    --shadow-color: oklch(var(--bg));

    background-clip: padding-box;
    /* 	background-origin: content-box; */
    background-image: var(--img);
    background-position-y: var(--bg-pos-y);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    border: var(--outline-w) solid var(--border-color, transparent);
    border-radius: 6px;
    box-shadow: 0 0 var(--shadow-blur) 0 var(--shadow-color);

    transition-property: border, box-shadow, filter, outline-offset, opacity, rotate, scale, z-index;
    transition-duration: 0.15s, 0.15s, 0.6s, 0.6s, 0.3s, 0.3s, 0.3s, 0.15s;

    filter: grayscale(100%) sepia(5%);
    mix-blend-mode: multiply;
    opacity: 0.69;

    /* 		backface-visibility: hidden;
    transform: translateZ(0) perspective(1px); */
    /* 	transform-origin: center center; */

    scale: 0.85;
    rotate: var(--rotation, -4deg);
    /* 	will-change: box-shadow, filter, rotate, scale, z-index; */

    outline: var(--outline-w) solid var(--preview-bg);
    outline-offset: var(--outline-w);

    min-height: var(--mobile--h);
    height: 100%;

    /*min-width: var(--mobile--w);*/
    width: 100%;

    position: relative;

    animation-name: bg-scroll;
    animation-delay: var(--delay);
    animation-duration: var(--duration);
    animation-fill-mode: forwards;

    &:focus-within,
    &:hover {
        --shadow-blur: 200px;
        --shadow-color: oklch(var(--game-card-gold));
        --border-color: var(--shadow-color);

        background-color: white;
        mix-blend-mode: initial;
        filter: none;
        opacity: 1;

        outline-offset: calc(var(--outline-w) / 2);

        scale: 1;
        rotate: 0deg;

        transition-property: border, box-shadow, filter, outline-offset, opacity, rotate, scale, z-index;
        transition-duration: 0.15s, 0.15s, 0.3s, 0.3s, 0.3s, 0.3s, 0.3s, 0.15s;
    }

    &:focus-within {
        --shadow-color: oklch(var(--game-card-pink));
        z-index: 5;
    }

    &:hover {
        z-index: 6;

        &:focus {
            --shadow-color: oklch(var(--game-card-mint));
        }
    }

    &.mobile {
        max-height: var(--mobile--h);
        max-width: var(--mobile--w);
    }

    &:nth-of-type(2) {
        --bg-pos-y--end: calc(var(--mobile--h) * -1.025);
        /*       --delay: .25s; */
        --rotation: 3deg;
    }

    &:nth-of-type(3) {
        --bg-pos-y--end: calc(var(--mobile--h) * -2.25);
        /*       --delay: .5s; */
        --duration: 6.5s;
        --rotation: -1deg;
    }

    &:nth-of-type(4) {
        --bg-pos-y--end: calc(var(--mobile--h) * -3.75);
        /*       --delay: .75s; */
        --duration: 6.75s;
        --rotation: -5deg;
    }

    &:nth-of-type(5) {
        --bg-pos-y--end: calc(var(--mobile--h) * -4.82);
        /*       --delay: 1s; */
        --duration: 7s;
        --rotation: -2deg;
    }

    &:nth-of-type(6) {
        --bg-pos-y--end: calc(var(--mobile--h) * -5.85);
        /*       --delay: 1.25s; */
        --duration: 7.25s;
        --rotation: 2deg;
    }

    &:nth-of-type(7) {
        --bg-pos-y--end: calc(var(--mobile--h) * -7.21);
        /*       --delay: 1.5s; */
        --duration: 7.5s;
        --rotation: 4deg;
    }
}

/* preview-scroll */
@keyframes bg-scroll {
    to {
        background-position-y: var(--bg-pos-y--end);
    }
}


/* ===== کاغذ پاره ===== */
.torn-paper {
    position: relative;
    padding: 2rem 2.5rem;
    margin: 0 0;
    background: #f1e9d2;
    background-image: radial-gradient(circle at 20% 30%, rgba(220, 200, 180, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(180, 160, 140, 0.1) 0%, transparent 40%),
    repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(200, 180, 160, 0.03) 20px,
        rgba(200, 180, 160, 0.03) 21px
    );
    color: #2c1e16;
    font-family: 'Vazirmatn', 'Times New Roman', serif;
    box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.08),
    inset 0 0 40px rgba(0, 0, 0, 0.02);
    /* لبه‌های پاره و ناهموار */
    clip-path: polygon(
        0% 5%,
        3% 0%,
        8% 8%,
        14% 2%,
        20% 6%,
        27% 1%,
        34% 9%,
        42% 3%,
        49% 7%,
        56% 0%,
        63% 8%,
        70% 2%,
        78% 6%,
        85% 1%,
        92% 7%,
        97% 3%,
        100% 5%,
        99% 15%,
        100% 25%,
        98% 35%,
        100% 48%,
        99% 58%,
        100% 68%,
        98% 78%,
        100% 88%,
        99% 95%,
        97% 100%,
        91% 96%,
        85% 100%,
        78% 94%,
        70% 100%,
        63% 95%,
        55% 100%,
        48% 94%,
        40% 100%,
        33% 95%,
        25% 100%,
        18% 93%,
        10% 100%,
        5% 95%,
        0% 100%,
        1% 90%,
        0% 78%,
        2% 65%,
        0% 52%,
        1% 40%,
        0% 28%,
        2% 15%
    );
    transform: rotate(-0.5deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ===== سایه‌ی طبیعی زیر کاغذ ===== */
.torn-paper::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: -2px;
    bottom: -2px;
    background: rgba(0, 0, 0, 0.04);
    clip-path: inherit;
    z-index: -1;
    filter: blur(6px);
}

/* ===== لکه‌های قدیمی روی کاغذ ===== */
.torn-paper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 15% 25%, rgba(180, 140, 100, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 75% 65%, rgba(160, 120, 80, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 45% 80%, rgba(200, 170, 130, 0.05) 0%, transparent 40%);
    pointer-events: none;
    z-index: 1;
    clip-path: inherit;
    border-radius: inherit;
}

/* ===== خطوط دفترچه (کاغذ خط‌دار) - اختیاری ===== */
.torn-paper.lined::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        transparent,
        transparent 28px,
        rgba(200, 180, 170, 0.15) 28px,
        rgba(200, 180, 170, 0.15) 29px
    );
    clip-path: inherit;
    pointer-events: none;
    z-index: 0;
}

/* ===== گوشه‌ی تا خورده (اختیاری) ===== */
.torn-paper.folded-corner::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.04) 50%);
    z-index: 2;
    clip-path: none;
    pointer-events: none;
}

/* ===== هایور (تعامل کاربر) ===== */
.torn-paper:hover {
    transform: rotate(0deg) scale(1.01);
    box-shadow: 4px 8px 30px rgba(0, 0, 0, 0.12);
}

/* ===== کاغذ پاره با رنگ‌های مختلف ===== */
.torn-paper.cream {
    background: #f5efe6;
}

.torn-paper.old-white {
    background: #f1e9d2;
}

.torn-paper.sepia {
    background: #ede5d8;
}

.torn-paper.vintage {
    background: #e8ddd0;
}

.torn-paper.red-paper {
    background: #b81027;
}

/* ===== اندازه‌های مختلف ===== */
.torn-paper.small {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
}

.torn-paper.xsmall {
    padding: .5rem .75rem;
    font-size: 0.9rem;
}

.torn-paper.large {
    padding: 3rem 4rem;
    font-size: 1.2rem;
}

/* ===== ریسپانسیو ===== */
@media (max-width: 640px) {
    .torn-paper {
        padding: 1.2rem 1.5rem;
        margin: 0 0;
    }

    .torn-paper.large {
        padding: 1.5rem 2rem;
    }
}

.gallery-card {
    position: relative;
    background: #a68b8a;
    /*width: 190px;*/
    height: 500px;
    cursor: pointer;
    transition: all .3 ease;
    overflow: visible;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .3);

    display: flex;
    justify-content: center;
    width: 100%;

}

.product {
    content: "";
    position: absolute;
    /*top: 10%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, 0);*/
    width: 100%;
    height: 100%;
    /*background-color: #faf3e8;*/
    z-index: 1;
}

.product .product-image {
    height: 175px;
}

.product .product-content {
    /*font-size: 17px;*/
    /*text-align: center;*/
    /*color: #181818;*/
    /*line-height: 150px;*/
    height: 300px;
}

.product .product-content p {
    max-height: 150px;
    height: 150px;
    overflow: auto;
}

.shine {
    position: relative;
    top: 0;
    left: 0;
    /*width: 190px;*/
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.shine-effect {
    position: absolute;
    top: -7%;
    left: 150%;
    width: 25px;
    height: 120%;
    background-color: #ffffff2a;
    box-shadow: 0 0 15px 2px #ffffff42;
    transform: rotate(25deg);
    transition: all 1s cubic-bezier(0.78, 0.02, 0.5, 0.77);
    z-index: 5;
}

.pattern-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 125px;
    height: auto;
    z-index: 2;
}

.pattern-2 {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 200px;
    height: auto;
    z-index: 2;
}

.tree {
    position: absolute;
    bottom: 1%;
    right: -2%;
    width: 100px;
    height: auto;
    transform-origin: 100% 0;
    transform: rotate(-15deg);
    z-index: 3;
    opacity: .4;
}

.tape-1 {
    position: absolute;
    top: -8%;
    left: 2%;
    width: 35px;
    height: auto;
    filter: drop-shadow(1px 3px 3px #18181870);
    z-index: 6;
}

.tape-2 {
    position: absolute;
    top: -8%;
    right: 2%;
    width: 35px;
    height: auto;
    filter: drop-shadow(1px 3px 3px #18181870);
    z-index: 6;
}

/*.gallery-card:hover {*/
/*    transform: scale(1.02);*/
/*}*/

/*.gallery-card:hover .tape-1 {*/
/*    transform: scale(1);*/
/*}*/

/*.gallery-card:hover .tape-2 {*/
/*    transform: scale(1);*/
/*}*/

.gallery-card:hover .shine-effect {
    left: -100%;
}

/*.gallery-card:active {*/
/*    transform: scale(1.02) translate(0, 5%);*/
/*}*/

/*.gallery-card:active .tape-1 {*/
/*    transform-origin: 0 100%;*/
/*    transform: scaleY(1.1);*/
/*}*/

/*.gallery-card:active .tape-2 {*/
/*    transform-origin: 0 100%;*/
/*    transform: scaleY(1.1);*/
/*}*/

.fil-tape-10 {
    fill: #A99473
}

.fil-tape-11 {
    fill: #BBAA88;
    fill-rule: nonzero
}

.fil-tape-20 {
    fill: #A99473
}

.fil-tape-21 {
    fill: #BBAA88;
    fill-rule: nonzero
}

.fil-pattern-1 {
    fill: #f3dfde
}

.fil-pattern-2 {
    fill: #333333;
    fill-rule: nonzero
}

.fil0 {
    fill: #333333
}

.tobacco-filter-btn {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.tobacco-filter-btn.active {
    background: #f59e0b !important;
    color: white !important;
    border-color: #d97706;
    box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.3);
}

.cigarette-holder-box {
    display: flex;
    margin: 1rem;
    justify-content: center;
    width: 100%;
}

.cigarette-holder {
    display: flex;
    width: 400px;
    height: 30px;
    position: relative;
    justify-content: flex-end;
}

.cigarette-holder:before {
    content: "";
    position: absolute;
    border-radius: 0 0 50% 50%;
    width: 90%;
    height: 6px;
    filter: blur(3px);
    background: rgba(0, 0, 0, 0.2);
    top: 130%;
    left: 5%;
    animation: shrinkShade 14s linear infinite;
}

.filter {
    flex-basis: 25%;
    background: -moz-linear-gradient(top, #dd8e04, #f3a41d, #dd8e04);
    background: -webkit-linear-gradient(top, #dd8e04, #f3a41d, #dd8e04);
    background: -ms-linear-gradient(top, #dd8e04, #f3a41d, #dd8e04);
    background: -o-linear-gradient(top, #dd8e04, #f3a41d, #dd8e04);
    background: linear-gradient(top, #dd8e04, #f3a41d, #dd8e04);
    position: relative;
}

.filter:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 100%;
    background: -moz-linear-gradient(top, #f3a41d, yellow, #f3a41d);
    background: -webkit-linear-gradient(top, #f3a41d, yellow, #f3a41d);
    background: -ms-linear-gradient(top, #f3a41d, yellow, #f3a41d);
    background: -o-linear-gradient(top, #f3a41d, yellow, #f3a41d);
    background: linear-gradient(top, #f3a41d, yellow, #f3a41d);
}

.filter span {
    position: absolute;
    width: 5px;
    height: 3px;
    background: #ffc45e;
    border-radius: 0 3px 0 3px;
}

.filter span:nth-of-type(1) {
    left: 10px;
    top: 4px;
}

.filter span:nth-of-type(2) {
    left: 30px;
    top: 10px;
}

.filter span:nth-of-type(3) {
    left: 52px;
    top: 17px;
}

.filter span:nth-of-type(4) {
    left: 18px;
    top: 16px;
}

.filter span:nth-of-type(5) {
    left: 70px;
    top: 20px;
}

.filter span:nth-of-type(6) {
    left: 40px;
    top: 22px;
}

.filter span:nth-of-type(7) {
    left: 80px;
    top: 6px;
}

.filter span:nth-of-type(8) {
    left: 55px;
    top: 3px;
}

.filter span:nth-of-type(9) {
    left: 42px;
    top: 8px;
}

.filter span:nth-of-type(10) {
    left: 5px;
    top: 19px;
}

.ciggi-body {
    width: 65%;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: -moz-repeating-linear-gradient(left, white 0, white 5px, rgba(0, 0, 0, 0.05) 5px, rgba(0, 0, 0, 0.05) 6px);
    background: -webkit-repeating-linear-gradient(left, white 0, white 5px, rgba(0, 0, 0, 0.05) 5px, rgba(0, 0, 0, 0.05) 6px);
    background: -ms-repeating-linear-gradient(left, white 0, white 5px, rgba(0, 0, 0, 0.05) 5px, rgba(0, 0, 0, 0.05) 6px);
    background: -o-repeating-linear-gradient(left, white 0, white 5px, rgba(0, 0, 0, 0.05) 5px, rgba(0, 0, 0, 0.05) 6px);
    background: repeating-linear-gradient(left, white 0, white 5px, rgba(0, 0, 0, 0.05) 5px, rgba(0, 0, 0, 0.05) 6px);
    background-attachment: fixed;
    animation: ciggiBurnt 14s linear infinite;
}

.ciggi-body:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05), transparent, rgba(0, 0, 0, 0.05));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05), transparent, rgba(0, 0, 0, 0.05));
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.05), transparent, rgba(0, 0, 0, 0.05));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.05), transparent, rgba(0, 0, 0, 0.05));
    background: linear-gradient(top, rgba(0, 0, 0, 0.05), transparent, rgba(0, 0, 0, 0.05));
}

.ciggi-body span {
    display: inline-block;
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.6), transparent);
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.6), transparent);
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.6), transparent);
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0.6), transparent);
    background: linear-gradient(left, rgba(0, 0, 0, 0.6), transparent);
    width: 6px;
    height: 100%;
    border-left: 1px solid rgba(0, 0, 0, 0.5);
}

.burnt {
    width: 10%;
    margin: 1px 0;
    border-radius: 10px 0 0 10px;
    background: red;
    position: relative;
}

.burnt p {
    position: absolute;
    border-radius: 4px 2px 2px 4px;
    margin: 0;
    left: 0;
    right: 2px;
    height: 100%;
    background: radial-gradient(#232323, #444444) center/5px 5px;
}

.burnt span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #636363;
    border: 1px solid #4c4c4c;
    transform: skew(-14deg);
}

.burnt span:nth-of-type(1) {
    left: 0;
    top: 0;
}

.burnt span:nth-of-type(2) {
    left: 6px;
    top: -1px;
}

.burnt span:nth-of-type(3) {
    left: 0;
    top: 6px;
    border-right: 2px solid rgba(255, 255, 255, 0.5);
}

.burnt span:nth-of-type(4) {
    left: 1px;
    top: 12px;
}

.burnt span:nth-of-type(5) {
    left: 0;
    top: 16px;
}

.burnt span:nth-of-type(6) {
    left: 1px;
    top: 21px;
}

.burnt span:nth-of-type(7) {
    left: 0;
    top: 25px;
}

.burnt span:nth-of-type(8) {
    left: 6px;
    top: 25px;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.burnt span:nth-of-type(9) {
    left: 6px;
    top: 20px;
}

.burnt span:nth-of-type(10) {
    left: 6px;
    top: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.burnt span:nth-of-type(11) {
    left: 6px;
    top: 8px;
}

.burnt span:nth-of-type(12) {
    left: 6px;
    top: 4px;
}

.burnt span:nth-of-type(13) {
    left: 12px;
    top: 0;
}

.burnt span:nth-of-type(14) {
    left: 12px;
    top: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.burnt span:nth-of-type(15) {
    left: 12px;
    top: 12px;
}

.burnt span:nth-of-type(16) {
    left: 12px;
    top: 18px;
}

.burnt span:nth-of-type(17) {
    left: 12px;
    top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.burnt span:nth-of-type(18) {
    left: 18px;
    top: 24px;
    transform: rotate(-45deg);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.burnt span:nth-of-type(19) {
    left: 18px;
    top: 18px;
}

.burnt span:nth-of-type(20) {
    left: 18px;
    top: 12px;
    transform: rotate(-45deg);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.burnt span:nth-of-type(21) {
    left: 18px;
    top: 6px;
}

.burnt span:nth-of-type(22) {
    left: 18px;
    top: 0;
}

.burnt span:nth-of-type(23) {
    left: 24px;
    top: 0;
    transform: rotate(-45deg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.burnt span:nth-of-type(24) {
    left: 24px;
    top: 6px;
}

.burnt span:nth-of-type(25) {
    left: 24px;
    top: 12px;
    transform: rotate(-45deg);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.burnt span:nth-of-type(26) {
    left: 24px;
    top: 18px;
}

.burnt span:nth-of-type(27) {
    left: 24px;
    top: 24px;
    transform: rotate(-45deg);
}

.burnt span:nth-of-type(28) {
    left: 30px;
    top: 24px;
    transform: rotate(-45deg);
}

.burnt span:nth-of-type(29) {
    left: 28px;
    top: 18px;
    transform: rotate(-45deg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.burnt span:nth-of-type(30) {
    left: 29px;
    top: 12px;
    transform: rotate(-45deg);
}

.burnt span:nth-of-type(31) {
    left: 30px;
    top: 6px;
    transform: rotate(-45deg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.burnt span:nth-of-type(32) {
    left: 29px;
    top: 0;
    transform: rotate(-45deg);
}

.smoke, .smoke-2, .smoke-3, .smoke-4, .smoke-5 {
    position: absolute;
    width: 1px;
    height: 25px;
    border-radius: 50%;
    background: black;
    top: 0%;
    left: 0;
    animation: animeSmoke 2.2s linear infinite;
    z-index: -1;
}

.smoke-2 {
    animation: animeSmoke2 1.7s linear 0.5s infinite;
}

.smoke-3 {
    animation: animeSmoke3 2.2s linear 1s infinite;
}

.smoke-4 {
    animation: animeSmoke4 1.7s linear 1.5s infinite;
}

.smoke-5 {
    animation: animeSmoke2 1.7s linear 2s infinite;
}

@keyframes animeSmoke {
    90% {
        opacity: 1;
    }

    100% {
        transform: translate(30px, -120px);
        filter: blur(10px);
        opacity: 0;
    }
}

@keyframes animeSmoke2 {
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(0, -120px);
        filter: blur(10px);
        opacity: 0;
    }
}

@keyframes animeSmoke3 {
    90% {
        opacity: 1;
    }

    100% {
        transform: translate(20px, -120px);
        filter: blur(10px);
        opacity: 0;
    }
}

@keyframes animeSmoke4 {
    90% {
        opacity: 1;
    }

    100% {
        transform: translate(-10px, -120px);
        filter: blur(10px);
        opacity: 0;
    }
}

@keyframes ciggiBurnt {
    20% {
        width: 65%;
    }
    80% {
        width: 5%;
    }

    100% {
        width: 5%;
    }
}

@keyframes shrinkShade {
    20% {
        width: 90%;
    }
    80% {
        width: 30%;
    }

    100% {
        width: 30%;
    }
}

ul.cigarette-pack {
    cursor: pointer;
    margin: auto auto auto 1rem;
    height: 150px;
    width: 178px;
    padding: 0;
    list-style-type: none;
    /*   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); */
}

ul.cigarette-pack:after {
    content: "Need a cigarette?";
    direction: ltr;
    position: absolute;
    /*margin-top: 100px;*/
    display: block;
    text-align: center;
    font-weight: 500;
    font-size: 18px;
    line-height: 125px;
    letter-spacing: 1px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #fff;
    background-color: #dc6666;
    background-image: var(--cigarette-pack-bg);
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 180px;
    height: 150px;
    pointer-events: none;
    margin-left: -5px;
    transition: .25s;
    /*   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); */
}

ul.cigarette-pack:hover {
    /*     box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 3px 3px 6px rgba(0, 0, 0, 0.23); */
}

ul.cigarette-pack:hover:after {
    /*background-color: #d74c4c;*/
    /*background: attr(data-image url) no-repeat;*/
    background-size: cover;
}

ul.cigarette-pack li div {
    box-sizing: border-box;
    float: left;
    width: 25px;
    border-right: 1px solid #d3d3d3;
    height: 150px;
    background: #fff;
    transition: .25s;
}

ul.cigarette-pack li div:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    margin-top: 0px;
    display: block;
    background-color: #c19a6b;
    width: 25px;
    height: 50px;
    pointer-events: none;
    border-right: 1px solid #f5f5f5;
}

ul.cigarette-pack li:nth-child(7) div {
    border-right: none;
}

ul.cigarette-pack li:nth-child(7) div:after {
    border-right: none;
}

ul.cigarette-pack li div:hover {
    margin: -60px 0 0 0;
    /*   box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 3px 3px 6px rgba(0, 0, 0, 0.23); */
}

ul.cigarette-pack .bg {
    pointer-events: none;
    position: absolute;
    width: 179px;
    height: 100px;
    margin-left: -2px;
}

ul.cigarette-pack .bg > .left, .right {
    position: absolute;
    width: 20px;
    height: 80px;
    top: 20px;
    background: #f2f2f2;
}

ul.cigarette-pack .bg > .left {
    left: 0px;
    border-top-right-radius: 20px;
}

ul.cigarette-pack .bg > .right {
    right: 0px;
    border-top-left-radius: 20px;
}

ul.cigarette-pack .bg > .bottom {
    position: absolute;
    width: 139px;
    height: 20px;
    left: 20px;
    bottom: 0px;
    background: #f2f2f2;
}

ul.cigarette-pack .bg > .top {
    width: 139px;
    height: 13.5px;
    background: -moz-radial-gradient(100% 0, circle, rgba(0, 0, 0, 0) 39px, #f2f2f2 13.5px), -moz-radial-gradient(0 0, circle, rgba(0, 0, 0, 0) 13px, #f2f2f2 13.5px);
    background: -webkit-radial-gradient(100% 0, circle, rgba(0, 0, 0, 0) 13px, #f2f2f2 13.5px), -webkit-radial-gradient(0 0, circle, rgba(0, 0, 0, 0) 13px, #f2f2f2 13.5px);
    background-position: bottom left, bottom right;
    -moz-background-size: 10% 50%;
    -webkit-background-size: 10% 100%;
    background-size: 10% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 20px;
    bottom: 20px;
}

/* ===== مودال جزئیات رویداد ===== */
.event-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.event-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.event-modal {
    background: #fcf9f2;
    max-width: 520px;
    width: 92%;
    padding: 2rem 2rem 1.8rem;
    border-radius: 16px 8px 16px 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(200, 180, 160, 0.2);
    transform: scale(0.92) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    opacity: 0;
    position: relative;
    font-family: 'Vazirmatn', 'Times New Roman', serif;
}

.event-modal-overlay.active .event-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ===== دکمه بستن ===== */
.event-modal-close {
    position: absolute;
    top: 12px;
    left: 16px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #8b7a6a;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    padding: 0 8px;
    line-height: 1;
}

.event-modal-close:hover {
    color: #c0392b;
    transform: rotate(90deg);
}

/* ===== نشانگر نوع رویداد ===== */
.event-modal-badge {
    display: inline-block;
    padding: 0.15rem 0.8rem;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.event-modal-badge.gallery {
    background: #fef3c7;
    color: #92400e;
}

.event-modal-badge.competition {
    background: #dbeafe;
    color: #1e40af;
}

.event-modal-badge.other {
    background: #e5e7eb;
    color: #4b5563;
}

/* ===== عنوان ===== */
.event-modal-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1f140e;
    margin: 0.2rem 0 0.8rem 0;
    line-height: 1.3;
    font-family: 'MedievalSharp', 'Vazirmatn', cursive;
}

/* ===== جزئیات ===== */
.event-modal-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0 1.2rem;
    padding: 0.8rem 0;
    border-top: 1px dashed #d4c8b8;
    border-bottom: 1px dashed #d4c8b8;
}

.event-modal-detail {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: #3d2b1f;
    flex-wrap: wrap;
}

.event-modal-detail .label {
    font-weight: 600;
    color: #7a5a3a;
    min-width: 60px;
    font-size: 0.85rem;
}

.event-modal-detail .value {
    color: #1f140e;
    font-weight: 400;
}

/* ===== توضیحات ===== */
.event-modal-desc {
    background: rgba(200, 180, 160, 0.08);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #2c1e16;
    line-height: 1.7;
    margin: 0.2rem 0 1.2rem;
    border-right: 3px solid #b8956e;
}

/* ===== دکمه بستن پایین ===== */
.event-modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.2rem;
}

.event-modal-footer .btn-close {
    background: #2c1e16;
    color: #f5efe6;
    border: none;
    padding: 0.4rem 1.6rem;
    border-radius: 30px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Vazirmatn', 'Times New Roman', serif;
}

.event-modal-footer .btn-close:hover {
    background: #4a3426;
    transform: scale(1.02);
}

/* ===== ریسپانسیو ===== */
@media (max-width: 480px) {
    .event-modal {
        padding: 1.5rem 1.2rem 1.2rem;
    }

    .event-modal-title {
        font-size: 1.3rem;
    }

    .event-modal-detail {
        font-size: 0.85rem;
    }
}

.product-card {
    max-width: 20rem;
    color: #282a3a;
    border-bottom-left-radius: 4rem;
    border-top-right-radius: 4rem;

    .product-img {
        border-bottom-left-radius: 4rem;
        border-top-right-radius: 4rem;
        width: 100%;
    }

    .card-body {
        padding: 1rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        h2 {
            font-size: 1.5rem;
            line-height: 1.4;
            font-weight: 600;
        }

        .rating-container {
            display: flex;
            align-items: center;
            line-height: 1.2;

            img {
                margin-right: 4px;
                width: 1.5rem;
            }

            span:first-of-type {
                font-size: 1.25rem;
                font-weight: 700;
                letter-spacing: 0.4px;
                opacity: 0.7;
            }

            .reviews {
                margin-left: 0.5rem;
                font-size: 1rem;
                opacity: 0.72;
            }
        }

        .description {
            font-size: 1rem;
            line-height: 1.4;
            opacity: 0.72;
        }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
                font-size: 1.5rem;
                font-weight: 700;
                line-height: 1.2;
                opacity: 0.7;
                letter-spacing: 0.4px;
            }

            button {
                background-color: #6d1600;
                padding: 0.75rem 2rem;
                border-radius: 0.5rem;
                border: none;

                img {
                    width: 1rem;
                    height: 1rem;
                }
            }
        }
    }
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-overlay.active {
    display: flex;
}

.modal-box {
    background: #fcf9f2;
    padding: 2rem;
    border-radius: 16px;
    max-width: 460px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-box h3 {
    margin-bottom: 1.2rem;
    font-size: 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
}

.orders-modal .order-item {
    border-bottom: 1px solid #eee;
    padding: 0.8rem 0;
}

.orders-modal .order-item:last-child {
    border-bottom: none;
}