/*
 * tabs.css — PrestaShop 9 Builder :: Tabs Component
 *
 * This stylesheet is intentionally structural-only.
 * All visual properties (colours, font sizes, border radii, spacing …)
 * are applied as inline styles by TabsComponent::render(), driven by the
 * StyleConfig objects (tabDefaultStyle / tabActiveStyle / tabContentStyle)
 * or by the flat legacy props (tabNavBgColor, activeTabBgColor, …).
 *
 * What lives here:
 *   – layout (flex, display rules)
 *   – show/hide logic for panels
 *   – icon positioning
 *   – vertical vs horizontal mode
 *   – accessibility / focus ring
 */

/* ═══════════════════════════════════════════════════════════════
   Outer container
═══════════════════════════════════════════════════════════════ */
.tabs-container {
    /* Fills a builder column naturally */
    width: 100%;
    margin: 0;
    font-size: 14px;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   Wrapper — carries data-builder="tabs"
   Inline style from PHP adds: background-color, border, border-radius
═══════════════════════════════════════════════════════════════ */
.tabs-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* Vertical layout: nav on the left, panels on the right */
.tabs-wrapper--vertical {
    flex-direction: row;
    align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   Tab nav bar
   Inline style from PHP adds: background-color, border, border-radius,
   padding, gap
═══════════════════════════════════════════════════════════════ */
.tabs-buttons {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

/* Horizontal: buttons in a row */
.tabs-wrapper:not(.tabs-wrapper--vertical) .tabs-buttons {
    flex-direction: row;
    align-items: center;
    width: 100%;
}

/* Vertical: buttons stacked in a column */
.tabs-wrapper--vertical .tabs-buttons {
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 160px;
    width: auto;
}

/* ═══════════════════════════════════════════════════════════════
   Individual tab button
   Inline style from PHP adds: background-color, color, font-size,
   font-weight, border-color, border-width, border-style, border-radius,
   padding
═══════════════════════════════════════════════════════════════ */
.tab-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, opacity 0.2s ease;
    border-style: solid; /* width & color come from inline style */
    flex-shrink: 0;
}

/* Horizontal mode: give equal-width buttons */
.tabs-wrapper:not(.tabs-wrapper--vertical) .tab-btn {
    flex: 1 1 0;
    justify-content: center;
}

/* Vertical mode: full-width, left-aligned */
.tabs-wrapper--vertical .tab-btn {
    width: 100%;
    justify-content: flex-start;
}

/* Accessibility: visible focus ring */
.tab-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ─── Icon positioning ──────────────────────────────────────── */
.tab-btn-icon {
    display: inline-block;
    flex-shrink: 0;
    /* Size / margin come from iconStyle inline on the <img> itself */
}

/* Icon on the left (default): icon is rendered first in the DOM */
.tab-btn--icon-left .tab-btn-icon {
    order: 0;
}
.tab-btn--icon-left .tab-btn-label {
    order: 1;
}

/* Icon on the right: label first, then icon */
.tab-btn--icon-right .tab-btn-icon {
    order: 1;
}
.tab-btn--icon-right .tab-btn-label {
    order: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Panels container
═══════════════════════════════════════════════════════════════ */
.tabs-panels {
    flex: 1 1 auto;
    min-width: 0; /* prevent overflow in vertical layout */
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   Individual tab panel
   Inline style from PHP adds: padding, background-color, border-radius
═══════════════════════════════════════════════════════════════ */
.tab-panel {
    display: none;
    box-sizing: border-box;
}

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


/* ═══════════════════════════════════════════════════════════════
   Responsive — stack vertical tabs on small screens
═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .tabs-wrapper--vertical {
        flex-direction: column;
    }

    .tabs-wrapper--vertical .tabs-buttons {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tabs-wrapper--vertical .tab-btn {
        width: auto;
        flex: 1 1 auto;
        justify-content: center;
    }
}