:root {
    --bg1: url("/assets/images/resource/CommerceQaz3.jpg");
    --bg2: url("/assets/images/resource/CommerceQaz2.jpg");
    --bg3: url("/assets/images/resource/CommerceQaz.jpg");
}
/* کانتینر اصلی */
.accordion {
    width: 100vmax;
    overflow: hidden;
    position: relative;
    margin-right: -13vmax;
    margin-bottom:4vh;
}

    /* لیست فلکس */
    .accordion ul {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* هر آیتم */
    .accordion li {
        position: relative;
        display: flex;
        align-items: stretch;
    }

/* ورودی رادیو (فقط روی عنوان کلیک‌خور) */
.accordion-select {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px; /* هم‌اندازه با عرض عنوان */
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* عنوان هر بخش */
.accordion-title {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2d2d2d;
    color: #fff;
    transition: background-color 0.3s ease;
    position: relative;
    z-index: 1;
}

    .accordion-title span {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: 15px;
    }

/* جداکننده عمودی */
.accordion-separator {
    position: absolute;
    top: 0;
    right: 60px;
    width: 1px;
    height: 100%;
    background-color: #1f1f1f;
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* باکس محتوا */
.accordion-content {
    flex: 0 0 0;
    overflow: hidden;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: flex 0.3s ease, opacity 0.3s ease;
    width: 0px;
}


.accordion-content-Bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: contrast(0.5) saturate(2) blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

/* اختصاص مسیر تصویر به هر آیتم */
.accordion li:nth-child(1) .accordion-content-Bg {
    background-image: var(--bg1);
}

.accordion li:nth-child(2) .accordion-content-Bg {
    background-image: var(--bg2);
}

.accordion li:nth-child(3) .accordion-content-Bg {
    background-image: var(--bg3);
}

.accordion li:nth-child(4) .accordion-content-Bg {
    background-image: var(--bg4);
}

.accordion li:nth-child(5) .accordion-content-Bg {
    background-image: var(--bg5);
}

/* حالت انتخاب‌شده */
.accordion-select:checked ~ .accordion-title {
    background-color: #3068cc;
}
.accordion li:hover .accordion-select:checked ~ .accordion-title {
    background-color: #3068cc;
}
.accordion li:hover  .accordion-title {
    background-color: #027bb1;
}
.accordion-select:checked ~ .accordion-content {
    flex: 1;
    width: 68.5vmax;
    height: 70vh;
    overflow: auto;
    opacity: 1;
}

    .accordion-select:checked ~ .accordion-content .accordion-content-Bg {
        opacity: 1;
    }

.accordion-select:checked ~ .accordion-separator {
    opacity: 0;
    pointer-events: none;
}

/* رفع مارجین پیش‌فرض label */
label {
    margin-bottom: 0 !important;
}

/* واکنش‌گرایی برای موبایل */
@media (max-width: 768px) {
    .accordion ul {
        flex-direction: column;
    }

    .accordion li {
        flex-direction: column;
    }

    .accordion-title {
        flex: none;
        width: 100%;
        height: auto;
        writing-mode: horizontal-tb;
        padding: 10px;
    }

        .accordion-title span {
            transform: none;
            writing-mode: horizontal-tb;
        }

    .accordion-content {
        flex: none;
        width: 100%;
        height: 50vh;
        opacity: 0;
        padding: 0 10px;
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }

    .accordion-select:checked ~ .accordion-content {
        max-height: 500px;
        opacity: 1;
        padding: 10px;
    }

    .accordion-separator {
        display: none;
    }
}