/* ===== Карточка — контейнер ===== */
.uc-accordion .tn-accordion-card {
    position: relative;
    background: transparent !important;
    transition: background 0.35s ease-in-out;
}

/* ===== Полоса слева (::before) ===== */
.uc-accordion .tn-accordion-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out,
                width 0.3s ease-in-out;
    pointer-events: none;
    z-index: 5;
}

/* Полоса при наведении — появляется */
.uc-accordion .tn-accordion-card:hover::before {
    width: 3px;
}

/* Полоса при открытии — остаётся */
.uc-accordion .tn-accordion-card:not(.collapsed)::before,
.uc-accordion .tn-accordion-card.open::before,
.uc-accordion .tn-accordion-card.active::before {
    width: 3px;
}

/* ===== Цвета полос по карточкам ===== */
.uc-accordion .tn-accordion-card:nth-child(1):hover::before,
.uc-accordion .tn-accordion-card:nth-child(1):not(.collapsed)::before,
.uc-accordion .tn-accordion-card:nth-child(1).open::before,
.uc-accordion .tn-accordion-card:nth-child(1).active::before {
    background-color: #a6a3ff;
}

.uc-accordion .tn-accordion-card:nth-child(2):hover::before,
.uc-accordion .tn-accordion-card:nth-child(2):not(.collapsed)::before,
.uc-accordion .tn-accordion-card:nth-child(2).open::before,
.uc-accordion .tn-accordion-card:nth-child(2).active::before {
    background-color: #3ff4e5;
}

.uc-accordion .tn-accordion-card:nth-child(3):hover::before,
.uc-accordion .tn-accordion-card:nth-child(3):not(.collapsed)::before,
.uc-accordion .tn-accordion-card:nth-child(3).open::before,
.uc-accordion .tn-accordion-card:nth-child(3).active::before {
    background-color: #54e4b6;
}

.uc-accordion .tn-accordion-card:nth-child(4):hover::before,
.uc-accordion .tn-accordion-card:nth-child(4):not(.collapsed)::before,
.uc-accordion .tn-accordion-card:nth-child(4).open::before,
.uc-accordion .tn-accordion-card:nth-child(4).active::before {
    background-color: #ff92c2;
}

.uc-accordion .tn-accordion-card:nth-child(5):hover::before,
.uc-accordion .tn-accordion-card:nth-child(5):not(.collapsed)::before,
.uc-accordion .tn-accordion-card:nth-child(5).open::before,
.uc-accordion .tn-accordion-card:nth-child(5).active::before {
    background-color: #ffad71;
}

/* ===== Прозрачный градиентный фон при открытии (::after) ===== */
.uc-accordion .tn-accordion-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(0turn,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0.02) 100%);
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    pointer-events: none;
    z-index: 1;
}

.uc-accordion .tn-accordion-card:not(.collapsed)::after,
.uc-accordion .tn-accordion-card.open::after,
.uc-accordion .tn-accordion-card.active::after {
    opacity: 1;
}

/* Таб и контент — над фоном, без своих background */
.uc-accordion .tn-accordion-tab,
.uc-accordion .tn-accordion-content {
    position: relative;
    z-index: 2;
    background: transparent !important;
    background-image: none !important;
}

/* ===== Иконка: 0° ↔ 45° ===== */
.uc-accordion .tn-accordion-icon,
.uc-accordion .tn-accordion-icon .tn-atom {
    transform: rotate(0deg) !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
    transform-origin: 50% 50% !important;
    display: inline-block;
}

.uc-accordion .tn-accordion-card:not(.collapsed) .tn-accordion-icon,
.uc-accordion .tn-accordion-card.open .tn-accordion-icon,
.uc-accordion .tn-accordion-card.active .tn-accordion-icon,
.uc-accordion .tn-accordion-card:not(.collapsed) .tn-accordion-icon .tn-atom,
.uc-accordion .tn-accordion-card.open .tn-accordion-icon .tn-atom,
.uc-accordion .tn-accordion-card.active .tn-accordion-icon .tn-atom {
    transform: rotate(45deg) !important;
    color: #fcfcfc;
}
</style>