/* =====================================================
   GOEDERENTREINEN – TABS
   Versie: 2.0
   Datum: september 2026

   ✔ Gebruikt bestaande tabs-basis
   ✔ Gebruikt bestaande tabs.js
   ✔ Alleen uiterlijk van goederen-tabs
   ✔ Geen eigen JavaScript
   ✔ Lineas als eerste maatschappijvariant
   ===================================================== */


/* =====================================================
   GOEDERENTABS – BASIS
   ===================================================== */

body.site .tabs.goederen-tabs {
    margin: 0;
    padding: 18px 6% 0;

    font-family: Arial, sans-serif;
}


/* =====================================================
   TAB HEADERS
   ===================================================== */

body.site .tabs.goederen-tabs .tab-headers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;

    border-bottom: none;

    background: transparent;

    justify-content: flex-start;
}


/* =====================================================
   TAB BUTTONS
   ===================================================== */

body.site .tabs.goederen-tabs .tab-header {
    flex: 0 0 auto;

    min-width: 120px;

    padding: 13px 22px;

    border: 1px solid #333;
    border-bottom: 3px solid transparent;

    border-radius: 6px 6px 0 0;

    background:
        linear-gradient(
            180deg,
            #1a1a1a 0%,
            #090909 100%
        );

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;

    text-align: center;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.15s ease;
}


/* =====================================================
   HOVER
   ===================================================== */

body.site .tabs.goederen-tabs .tab-header:hover {
    background:
        linear-gradient(
            180deg,
            #242424 0%,
            #111111 100%
        );

    color: #ffffff;

    transform: translateY(-2px);
}


/* =====================================================
   ACTIEVE TAB – BASIS
   ===================================================== */

body.site .tabs.goederen-tabs .tab-header.active {
    background:
        linear-gradient(
            180deg,
            #292929 0%,
            #111111 100%
        );

    border-color: #555;

    border-bottom-color: #18b8c8;

    color: #18b8c8;

    box-shadow:
        0 -2px 10px rgba(24, 184, 200, 0.12);
}


/* =====================================================
   TAB INHOUD
   ===================================================== */

body.site .tabs.goederen-tabs .tab-content {
    display: none;

    padding: 16px;

    margin-top: -1px;

    border: 1px solid #333;

    background: #111;

    color: #ffffff;
}


/* =====================================================
   ACTIEVE INHOUD
   ===================================================== */

body.site .tabs.goederen-tabs .tab-content.active {
    display: block;
}


/* =====================================================
   LINEAS – ACCENT
   ===================================================== */

body.site .tabs.goederen-tabs.lineas .tab-header.active {
    color: #18b8c8;

    border-bottom-color: #18b8c8;

    box-shadow:
        0 -2px 10px rgba(24, 184, 200, 0.14);
}


/* =====================================================
   MOBIEL
   ===================================================== */

@media (max-width: 700px) {

    body.site .tabs.goederen-tabs {
        padding: 14px 5% 0;
    }

    body.site .tabs.goederen-tabs .tab-headers {
        gap: 4px;
    }

    body.site .tabs.goederen-tabs .tab-header {
        min-width: auto;

        padding: 10px 15px;

        font-size: 14px;
    }

}