﻿/* =========================================================
   AMAZING BOX
   ========================================================= */

.amazing-box {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 8px 0 18px !important;
    padding: 10px !important;
    background: var(--amazing-color) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

    .amazing-box *,
    .amazing-box *::before,
    .amazing-box *::after {
        box-sizing: border-box;
    }


    /* =========================================================
   HEADER
   ========================================================= */

    .amazing-box .amazing-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 42px !important;
        margin: 0 0 8px !important;
        padding: 0 4px !important;
        color: #fff !important;
    }

    .amazing-box .amazing-title {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .amazing-box .amazing-icon {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(255,255,255,.16) !important;
        border: 1px solid rgba(255,255,255,.25) !important;
        border-radius: 7px !important;
    }

        .amazing-box .amazing-icon i {
            font-size: 18px !important;
            color: #fff !important;
        }

    .amazing-box .amazing-title h2 {
        display: block !important;
        margin: 0 0 1px !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        font-weight: 800 !important;
        color: #fff !important;
    }

    .amazing-box .amazing-title span {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
        color: rgba(255,255,255,.85) !important;
    }


    /* مشاهده همه */

    .amazing-box .amazing-more {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 5px 9px !important;
        background: transparent !important;
        border: 1px solid rgba(255,255,255,.35) !important;
        border-radius: 6px !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
    }

        .amazing-box .amazing-more:hover {
            background: rgba(255,255,255,.15) !important;
            color: #fff !important;
        }


    /* =========================================================
   CONTENT
   ========================================================= */

    .amazing-box .amazing-content {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
    }


    /* =========================================================
   INTRO
   ========================================================= */

    .amazing-box .amazing-intro {
        width: 145px !important;
        min-width: 145px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 8px 7px !important;
        background: rgba(255,255,255,.10) !important;
        border: 1px solid rgba(255,255,255,.22) !important;
        border-radius: 9px !important;
        color: #fff !important;
        text-align: center !important;
    }

    .amazing-box .amazing-intro-image {
        width: 65px !important;
        min-width: 65px !important;
        height: 65px !important;
        margin: 0 0 5px !important;
        padding: 0 !important;
        object-fit: contain !important;
    }

    .amazing-box .amazing-intro strong {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        font-weight: 800 !important;
        color: #fff !important;
    }

    .amazing-box .amazing-intro span {
        display: block !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        font-size: 9px !important;
        line-height: 1.5 !important;
        color: rgba(255,255,255,.82) !important;
    }

    .amazing-box .amazing-intro-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: auto !important;
        margin: 8px 0 0 !important;
        padding: 4px 8px !important;
        background: transparent !important;
        border: 1px solid rgba(255,255,255,.45) !important;
        border-radius: 5px !important;
        color: #fff !important;
        font-size: 9px !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
    }

        .amazing-box .amazing-intro-button:hover {
            background: rgba(255,255,255,.15) !important;
            color: #fff !important;
        }


    /* =========================================================
   PRODUCTS
   ========================================================= */

    .amazing-box .amazing-products {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* Swiper */

    .amazing-box .amazing-swiper {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 1px 1px 24px !important;
    }


        /*
   Bootstrap ممکن است روی swiper-slide
   width / flex را تغییر دهد.
*/

        .amazing-box .amazing-swiper .swiper-wrapper {
            display: flex !important;
            align-items: stretch !important;
        }

        .amazing-box .amazing-swiper .swiper-slide {
            flex-shrink: 0 !important;
            width: 360px !important;
            height: auto !important;
            margin: 2px !important;
            padding: 0 !important;
            display: block !important;
        }


    /* =========================================================
   TICKET
   ========================================================= */

    .amazing-box .amazing-ticket-card {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 135px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
        transform: none;
    }


    /* =========================================================
   AMAZING BADGE
   ========================================================= */

    .amazing-box .amazing-badge {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 20 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 3px 8px !important;
        background: #dc2626 !important;
        border: 0 !important;
        border-radius: 0 11px 0 7px !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }

        .amazing-box .amazing-badge i {
            margin-left: 3px !important;
            font-size: 11px !important;
            color: #fff !important;
        }


    /* =========================================================
   OVERRIDE TICKET ELEMENTS
   ========================================================= */

    .amazing-box .ticket-image {
        width: 120px !important;
        min-width: 120px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
    }

        .amazing-box .ticket-image img {
            width: 100% !important;
            height: 90px !important;
            margin-top: 20px !important;
            padding: 0 !important;
            object-fit: cover !important;
            border-radius: 8px !important;
        }


    .amazing-box .ticket-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px 8px !important;
    }


    .amazing-box .ticket-title {
        margin: 0 0 5px !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        font-weight: 700 !important;
    }


        .amazing-box .ticket-title a {
            color: #1f2937 !important;
            text-decoration: none !important;
        }


    .amazing-box .ticket-type {
        display: inline-block !important;
        width: auto !important;
        margin: 0 0 4px !important;
        padding: 2px 7px !important;
        background: #f1f5f9 !important;
        border: 0 !important;
        border-radius: 5px !important;
        color: #64748b !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
    }


    .amazing-box .ticket-description {
        display: -webkit-box !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
        color: #64748b !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }


    .amazing-box .ticket-old-price {
        margin: 3px 0 0 !important;
        padding: 0 !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
        color: #94a3b8 !important;
    }

        .amazing-box .ticket-old-price span {
            display: inline-block !important;
            margin-right: 5px !important;
            padding: 1px 4px !important;
            background: #dc2626 !important;
            border-radius: 3px !important;
            color: #fff !important;
            font-weight: 700 !important;
        }


    .amazing-box .ticket-price {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        font-weight: 800 !important;
        color: #111827 !important;
    }

        .amazing-box .ticket-price small {
            font-size: 10px !important;
            font-weight: 400 !important;
            color: #64748b !important;
        }


    /* =========================================================
   ACTION
   ========================================================= */

    .amazing-box .ticket-action {
        width: 105px !important;
        min-width: 105px !important;
        min-height: 110px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border-right: 1px dashed #d1d5db !important;
    }


        .amazing-box .ticket-action::before,
        .amazing-box .ticket-action::after {
            content: "" !important;
            position: absolute !important;
            right: 103px !important;
            width: 18px !important;
            height: 18px !important;
            padding: 0 !important;
            margin: 0 !important;
            background: var(--amazing-color) !important;
            border: 1px solid rgba(255,255,255,.4) !important;
            border-radius: 50% !important;
        }


        .amazing-box .ticket-action::before {
            top: -10px !important;
        }

        .amazing-box .ticket-action::after {
            bottom: -10px !important;
        }


        .amazing-box .ticket-action .btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 85px !important;
            min-width: 85px !important;
            height: auto !important;
            margin: 0 !important;
            padding: 5px 8px !important;
            border-radius: 6px !important;
            font-size: 12px !important;
            line-height: 1.5 !important;
        }


    /* زمان */

    .amazing-box .ticket-expire {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1.5 !important;
        color: #dc2626 !important;
        white-space: nowrap !important;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .amazing-box .amazing-intro {
        display: none !important;
    }

    .amazing-box .amazing-products {
        width: 100% !important;
    }

    .amazing-box .amazing-swiper .swiper-slide {
        width: 350px !important;
    }
}


@media (max-width: 575.98px) {

    .amazing-box {
        padding: 7px !important;
    }

        .amazing-box .amazing-header {
            min-height: 36px !important;
            margin-bottom: 6px !important;
        }

        .amazing-box .amazing-title h2 {
            font-size: 13px !important;
        }

        .amazing-box .amazing-title span {
            font-size: 9px !important;
        }

        .amazing-box .amazing-icon {
            width: 28px !important;
            min-width: 28px !important;
            height: 28px !important;
        }

        .amazing-box .amazing-more {
            font-size: 9px !important;
            padding: 4px 7px !important;
        }

        .amazing-box .amazing-swiper .swiper-slide {
            width: 100% !important;
        }

        .amazing-box .amazing-ticket-card {
            min-height: 110px !important;
        }

        .amazing-box .ticket-image {
            width: 85px !important;
            min-width: 85px !important;
            padding: 7px !important;
        }

            .amazing-box .ticket-image img {
                height: 75px !important;
            }

        .amazing-box .ticket-content {
            padding: 7px 5px !important;
        }

        .amazing-box .ticket-title {
            font-size: 13px !important;
            margin-bottom: 3px !important;
        }

        .amazing-box .ticket-description {
            font-size: 10px !important;
            -webkit-line-clamp: 1 !important;
        }

        .amazing-box .ticket-price {
            font-size: 16px !important;
        }

        .amazing-box .ticket-action {
            width: 80px !important;
            min-width: 80px !important;
            padding: 6px !important;
        }

            .amazing-box .ticket-action::before,
            .amazing-box .ticket-action::after {
                right: 78px !important;
            }

            .amazing-box .ticket-action .btn {
                width: 68px !important;
                min-width: 68px !important;
                font-size: 10px !important;
            }

        .amazing-box .amazing-badge {
            font-size: 8px !important;
            padding: 2px 6px !important;
        }
}
