/*
Theme Name: Vartec
Description: Product Tabs Icons - ICONS AUF ::after (Vermeidet Konflikt)
Version: 1.0.8
*/

/* ═══════════════════════════════════════════════════════════
   STRATEGIE: Icons auf ::after, base.css nutzt ::before
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   1. TAB LAYOUT
   ═══════════════════════════════════════════════════════════ */

.woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    border-bottom: 2px solid #e0e0e0 !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    list-style: none !important;
}

.woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.woocommerce-tabs ul.tabs li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 15px 20px !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: none !important;
    color: #666 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    position: relative !important;
}

/* Active State */
.woocommerce-tabs ul.tabs li.active a {
    color: #000 !important;
    border-bottom-color: #000 !important;
}

.woocommerce-tabs ul.tabs li a:hover {
    color: #000 !important;
}

/* ═══════════════════════════════════════════════════════════
   2. BASE.CSS ::before BLEIBT FÜR UNTERSTRICH
   ═══════════════════════════════════════════════════════════ */

/* Wir lassen base.css den ::before nutzen, aber verstecken ihn
   weil wir border-bottom nutzen */
.woocommerce-tabs .wc-tabs li.active a::before {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   3. ICONS AUF ::after STATT ::before
   ═══════════════════════════════════════════════════════════ */

.woocommerce-tabs ul.tabs li a::after {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    order: -1 !important; /* Erscheint VOR dem Text */
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    transition: filter 0.3s ease !important;
}

/* Icons werden schwarz bei active/hover */
.woocommerce-tabs ul.tabs li.active a::after,
.woocommerce-tabs ul.tabs li a:hover::after {
    filter: brightness(0) !important;
}

/* ═══════════════════════════════════════════════════════════
   4. ICON ZUWEISUNG AUF ::after
   ═══════════════════════════════════════════════════════════ */

/* 1. Beschreibung */
.woocommerce-tabs ul.tabs li.description_tab a::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>') !important;
}

/* 2. Produktdetails */
.woocommerce-tabs ul.tabs li.extratab1_tab a::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>') !important;
}

/* 3. Logistikdaten */
.woocommerce-tabs ul.tabs li.extratab2_tab a::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm13.5-9l1.96 2.5H17V9h2.5zm-1.5 9c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>') !important;
}

/* 4. Medien & Dokumente */
.woocommerce-tabs ul.tabs li.extratab3_tab a::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>') !important;
}

/* 5. Zusätzliche Informationen */
.woocommerce-tabs ul.tabs li.additional_information_tab a::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>') !important;
}

/* 6. Produktsicherheit */
.woocommerce-tabs ul.tabs li.extratab4_tab a::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>') !important;
}

/* ═══════════════════════════════════════════════════════════
   5. MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .woocommerce-tabs ul.tabs {
        flex-direction: column !important;
        border-bottom: none !important;
    }

    .woocommerce-tabs ul.tabs li {
        width: 100% !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .woocommerce-tabs ul.tabs li:last-child {
        border-bottom: 2px solid #e0e0e0 !important;
    }

    .woocommerce-tabs ul.tabs li a {
        width: 100% !important;
        padding: 18px 20px !important;
        justify-content: flex-start !important;
        border-bottom: none !important;
        border-left: 4px solid transparent !important;
    }

    .woocommerce-tabs ul.tabs li.active a {
        border-left-color: #000 !important;
        background: #f9f9f9 !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   6. TAB CONTENT
   ═══════════════════════════════════════════════════════════ */

.woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 30px 0 !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
    margin-top: 0 !important;
    color: #333 !important;
    font-size: 15px;

}