/* =========================
   WRAPPER
========================= */
.acf-tabs-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
}

/* =========================
   DIRECTIONS
========================= */
.direction-above,
.direction-below {
    flex-direction: column;
}

.direction-below .tabs {
    order: 2;
}

.direction-before {
    flex-direction: row;
}

.direction-after {
    flex-direction: row-reverse;
}

.direction-before .tabs,
.direction-after .tabs {
    width: 25%;
    flex-direction: column;
}

.direction-before .tab-contents,
.direction-after .tab-contents {
    width: 75%;
}

/* =========================
   TABS
========================= */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* JUSTIFY */
.justify-flex-start .tabs { justify-content: flex-start; }
.justify-center .tabs { justify-content: center; }
.justify-flex-end .tabs { justify-content: flex-end; }

/* STRETCH */
.justify-stretch .tab-title {
    flex: 1;
}

/* =========================
   TAB ITEM
========================= */
.tab-title {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.tab-title.active {
    font-weight: 600;
}

/* =========================
   CONTENT
========================= */
.tab-content {
    display: none;
    width: 100%;
}

.tab-content.active {
    display: block;
}

/* =========================
   HORIZONTAL SCROLL
========================= */
.tabs-scroll .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

.tabs-scroll .tab-title {
    flex: 0 0 auto;
}

/* =========================
   ACCORDION MODE
========================= */
.accordion-mode {
    flex-direction: column !important;
}

.accordion-mode .tabs {
    flex-direction: column;
}

.accordion-mode .tab-title {
    width: 100%;
}

/* Hide all content */
.accordion-mode .tab-content {
    display: none;
}

/* JS handles visibility via slideToggle */

/* =========================
   MOBILE SAFETY
========================= */
@media (max-width: 767px) {
    .direction-before,
    .direction-after {
        flex-direction: column;
    }

    .direction-before .tabs,
    .direction-after .tabs,
    .direction-before .tab-contents,
    .direction-after .tab-contents {
        width: 100%;
    }
}