/* ===========================
   TAB ARROWS — [tbm_tab_arrows]
   =========================== */

.tbmta {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tbmta[hidden] {
    display: none !important;
}

.tbmta--start  { justify-content: flex-start; }
.tbmta--center { justify-content: center; }
.tbmta--end    { justify-content: flex-end; }

.tbmta .tbmta__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000000 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color 0.2s ease !important;
}

.tbmta__btn svg {
    width: 26px;
    height: 26px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Left arrow = the same arrow, flipped */
.tbmta__btn[data-dir="prev"] svg {
    transform: scaleX(-1);
}

/* Hover: a small nudge in the arrow's direction */
.tbmta__btn[data-dir="prev"]:not(.is-disabled):hover svg {
    transform: scaleX(-1) translateX(3px);
}

.tbmta__btn[data-dir="next"]:not(.is-disabled):hover svg {
    transform: translateX(3px);
}

/* At the start / end */
.tbmta .tbmta__btn.is-disabled {
    color: #C8C8C8 !important;
    cursor: default;
}

.tbmta .tbmta__btn:focus {
    outline: none !important;
}

.tbmta .tbmta__btn:focus-visible {
    outline: 2px solid #000000 !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    .tbmta__btn svg {
        transition: none;
    }
}