/* =========================================
   Product Tabs Manager - CSS Styling
   Tables, Icon Lists, Shadow Icon Lists
   ========================================= */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

/* =========================================
   1. Tabs Container - FULL WIDTH
   ========================================= */
.woocommerce-tabs {
    margin-top: 40px !important;
    width: 100% !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: #F9FAFB !important;
    border-radius: 8px !important;
    border: 1px solid #EAECF0 !important;
    overflow: visible !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* =========================================
   2. Normal Tab Style - EQUAL WIDTH
   ========================================= */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    flex: 1 1 25% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    position: relative !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    color: #667085 !important;
    text-align: center !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================
   3. Active Tab Style
   ========================================= */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: transparent !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
       background: #098d8e !important;
    color: white !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06),
        0px 1px 3px 0px rgba(16, 24, 40, 0.1) !important;
    border-radius: 8px !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover a {
    color: #344054 !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

/* =========================================
   4. Tab Panel / Content Box
   ========================================= */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    background: #FFFFFF !important;
    border: 1px solid #EAECF0 !important;
    border-radius: 8px !important;
    padding: 32px !important;
    margin-top: 24px !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
}

/* =========================================
   5. Tab Content Title
   ========================================= */
.ptm-tab-content-wrapper {
    padding: 0 !important;
}

.ptm-tab-title {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    letter-spacing: 0 !important;
    color: #262626 !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
}

/* =========================================
   6. Tab Content Description (Overview)
   ========================================= */
.ptm-tab-description {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    color: #5D5D5D !important;
}

.ptm-tab-description p {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 22px !important;
    color: #5D5D5D !important;
    margin: 0 0 16px 0 !important;
}

.ptm-tab-description p:last-child {
    margin-bottom: 0 !important;
}

/* =========================================
   7. Specifications Table (Two Column)
   Gap between tables: 64px
   First row = Header row (user enters "Description" | "DC-411")
   ========================================= */
.ptm-specs-table-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}

.ptm-specs-column {
    width: 100%;
}

.ptm-specs-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

/* All rows have bottom border */
.ptm-specs-table tbody tr {
    border-bottom: 1px solid #EAECF0;
}

.ptm-specs-table tbody tr:last-child {
    border-bottom: none;
}

/* =========================================
   FIRST ROW = Header Row (Description | DC-411)
   font: Open Sans 400 12px/20px #3D3D3D
   padding: 12px 24px
   background: #FFFFFF
   ========================================= */
.ptm-specs-table tbody tr:first-child {
    background: #008e8f !important;
}

.ptm-specs-table tbody tr:first-child td {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    color: white;
    padding: 12px 24px;
}

/* =========================================
   DATA ROWS (after first row)
   Odd rows (2nd, 4th...) = White
   Even rows (3rd, 5th...) = Gray
   padding: 24px
   ========================================= */
/* Odd data rows (2nd, 4th, 6th... which are 1st, 3rd, 5th after header) */
.ptm-specs-table tbody tr:nth-child(2n) {
    background: #FFFFFF;
}

/* Even data rows (3rd, 5th, 7th... which are 2nd, 4th, 6th after header) */
.ptm-specs-table tbody tr:nth-child(2n + 1):not(:first-child) {
    background: #F9FAFC;
}

/* Data cells (not header row) */
.ptm-specs-table tbody tr:not(:first-child) td {
    padding: 24px;
    vertical-align: middle;
}

/* Label column (Drilling in M.S.)
   font: Open Sans 400 14px/22px #5D5D5D */
.ptm-specs-table tbody tr:not(:first-child) td:first-child {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    color: #5D5D5D;
}

/* Value column (42(1 5/8"))
   font: Open Sans 600 14px/22px #262626 */
.ptm-specs-table tbody tr:not(:first-child) td:last-child {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    color: #262626;
}

/* =========================================
   8. Features Grid (Circular Icon List)
   2 columns
   Gap between icon and title: 11px
   Gap between rows: 11px
   ========================================= */
.ptm-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px 40px;
}

.ptm-feature-item {
    display: flex;
    align-items: center;
    gap: 11px;
}

.ptm-feature-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.ptm-feature-icon svg {
    width: 20px;
    height: 20px;
}

/* font: Open Sans 400 16px/24px #475467 */
.ptm-feature-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #475467;
}

/* =========================================
   9. Applications Grid (Shadow Icon List)
   3 columns
   Gap between icon and text: 11px
   background: #F5FCFC
   padding: 16px
   border-radius: 11px
   ========================================= */
.ptm-applications-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ptm-application-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px;
    background: #F5FCFC;
    border-radius: 11px;
}

.ptm-application-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.ptm-application-icon svg {
    width: 24px;
    height: 24px;
}

/* font: Open Sans 400 16px/24px #475467 */
.ptm-application-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #475467;
}

/* =========================================
   10. Responsive Adjustments
   ========================================= */
@media (max-width: 1024px) {

    /* Applications - 2 columns on tablet */
    .ptm-applications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-wrap: wrap !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        flex: 1 1 50% !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 12px 16px !important;
        font-size: 13px !important;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 20px !important;
    }

    .ptm-tab-title {
        font-size: 18px !important;
        line-height: 26px !important;
    }

    /* Specifications table - single column */
    .ptm-specs-table-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ptm-specs-table tbody tr:not(:first-child) td {
        padding: 16px;
    }

    .ptm-specs-table tbody tr:first-child td {
        padding: 10px 16px;
    }

    /* Features - single column */
    .ptm-features-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    /* Applications - single column */
    .ptm-applications-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        flex: 1 1 100% !important;
    }

    .ptm-specs-table tbody tr:first-child td,
    .ptm-specs-table tbody tr:not(:first-child) td {
        padding: 12px;
        font-size: 13px;
    }

    .ptm-feature-text,
    .ptm-application-text {
        font-size: 14px;
        line-height: 22px;
    }

    .ptm-application-item {
        padding: 12px;
    }
}