/* ----------------------------------------------------
   РАБОЧИЕ!!!!!! ОСНОВНЫЕ СТИЛИ ДЛЯ КНОПОК
---------------------------------------------------- */

/* Текст кнопки (tn-elem с классом ps-text) */
.ps-text {
    transition: color .25s ease;
    color: #ffffff;
}

/* Стрелка (tn-elem с картинкой) */
.ps-arrow {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
    filter: brightness(1);
}

/* Линия */
.tn-elem.real-line {
    height: 15px !important;
}

.tn-elem.real-line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: #ffffff;
    transition: width .35s ease, background .25s ease;
}

.tn-elem.real-line.active::after {
    width: 100%;
}

/* 1) ТЕКСТ — НОВАЯ ВЕРСИЯ */
.ps-text.clicked .tn-atom,
.ps-text.clicked .tn-atom span {
    color: #b1b1b1 !important;
    opacity: 1 !important;
}

/* 2) СТРЕЛКА */
.ps-arrow.clicked {
    opacity: 1 !important;
    transform: translateX(0) !important;
    filter: brightness(0.55) !important;
}

/* 3) ЛИНИЯ */
.tn-elem.real-line.clicked::after {
    width: 100% !important;
    background: #b1b1b1 !important;
}

/* стрелка при ховере ДО клика */
.ps-arrow.hover {
    opacity: 1 !important;
    transform: translateX(0) !important;
}