/* ================================================
   Enhanced Product Details Styling
   For TWL Pharma - Nutraceuticals & Pharmaceuticals
   ================================================ */

/* Product Tagline */
.product-tagline {
    font-size: 16px;
    color: #666;
    font-weight: 500;
    margin-top: 8px;
    font-style: italic;
    display: none;
}

/* Key Benefits Section */
.product-key-benefits {
    background: #e4f5f4;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.product-key-benefits h6 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.benefits-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-content ul li {
    padding: 5px 0;
    padding-left: 30px;
    position: relative;
    color: #444;
    font-size: 16px;
    line-height: 1.6;
}

.benefits-content ul li:before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 10px;
    color: #28a745;
    font-weight: bold;
    font-size: 18px;
}

.benefits-content .icon-check {
    color: #28a745;
    margin-right: 10px;
}

/* ================================================
   ENHANCED TAB STRUCTURE STYLING
   ================================================ */

/* Improved Accordion Item Spacing */
.widget-tabs.accordion-style .accordion-item {
    margin-bottom: 18px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.widget-tabs.accordion-style .accordion-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Enhanced Accordion Header */
.widget-tabs.accordion-style .accordion-header {
    padding: 18px 24px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.widget-tabs.accordion-style .accordion-header.active {
    background: #ff3232;
    color: white;
    border-radius: 10px 10px 0 0;
}

/* Smooth Content Transitions */
.widget-tabs.accordion-style .accordion-content {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
}

.widget-tabs.accordion-style .accordion-content.active {
    max-height: 5000px;
    opacity: 1;
    padding: 30px 24px;
}

/* Content Section Refinements */
.widget-tabs.accordion-style .content-section {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* Composition Table Styling */
/* Composition Table - Proper Table View */
.composition-table {
    width: 100%;
    margin-top: 15px;
    border-collapse: collapse;
    background: white;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    border: 1px solid #e5e5e5;
    display: table !important;
    /* Force table display on all devices */
}

.composition-table thead {
    background: #f5f5f5;
    color: #1a1a1a;
    display: table-header-group !important;
}

.composition-table thead th {
    padding: 12px 15px;
    font-weight: 700;
    text-align: left;
    border: 1px solid #e5e5e5;
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
    display: table-cell !important;
}

.composition-table tbody {
    display: table-row-group !important;
}

.composition-table tbody tr {
    border: none;
    display: table-row !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.composition-table tbody tr:hover {
    background-color: transparent;
}

.composition-table tbody td {
    padding: 12px 15px;
    color: #1a1a1a;
    font-size: 14px;
    border: 1px solid #e5e5e5;
    /* Full grid */
    display: table-cell !important;
    width: auto !important;
}

.composition-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.composition-table tbody td:first-child {
    font-weight: 500;
    color: #1a1a1a;
}

/* Force Table Behavior on Mobile Override */
@media (max-width: 768px) {

    .composition-table,
    .composition-table thead,
    .composition-table tbody,
    .composition-table tr,
    .composition-table th,
    .composition-table td {
        display: revert !important;
    }

    .composition-table {
        display: table !important;
        border: 1px solid #e5e5e5 !important;
    }

    .composition-table thead {
        display: table-header-group !important;
    }

    .composition-table tr {
        display: table-row !important;
        margin-bottom: 0 !important;
        border: none !important;
    }

    .composition-table th,
    .composition-table td {
        display: table-cell !important;
        border: 1px solid #e5e5e5 !important;
        padding: 10px !important;
        font-size: 14px !important;
    }
}

/* FAQs Nested Accordion Styling */
.faqs-accordion {
    padding: 10px 0;
}

.faq-accordion-item {
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-accordion-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.faq-accordion-header {
    background: #f8f9fa;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.faq-accordion-header:hover {
    background: #e9ecef;
}

.faq-accordion-header.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.faq-accordion-header.active i {
    color: white !important;
}

.faq-question-text {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
}

.faq-accordion-header.active .faq-question-text {
    color: white;
}

.faq-toggle-icon {
    flex-shrink: 0;
    margin-left: 15px;
}

.faq-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: white;
}

.faq-accordion-content.active {
    max-height: 500px;
    padding: 15px 20px;
}

.faq-accordion-content p {
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

/* Old FAQ styles (for backward compatibility) */
.faqs-list {
    padding: 10px 0;
}

.faq-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
}

.faq-question i {
    color: #0066cc;
    margin-right: 10px;
    flex-shrink: 0;
}

.faq-answer {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    margin-left: 24px;
}

/* Accordion Enhancements */
.accordion-item {
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.accordion-header {
    background: #f8f9fa;
    padding: 15px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.accordion-header:hover {
    background: #e9ecef;
}

.accordion-header.active {
    background: #ff3232;
    color: white;
}

.faq-accordion-header.active {
    background: #ff3232;
    color: white;
}

/* Content Section Styling */
.content-section {
    margin-bottom: 25px;
    padding: 20px;
    background: #e4f5f4;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.content-section:nth-child(even) {
    background: #ebf2eb;
}

.content-section:last-child {
    margin-bottom: 0;
}

.section-heading {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    padding: 0px;
    background: rgba(255, 255, 255, 0.5);

}

/* Benefits List Styling */
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.benefits-list li {
    padding: 6px 0 6px 28px;
    position: relative;
    color: #555;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 4px;
}

.benefits-list li:before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 9px;
    color: #28a745;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
}

/* General List Styling in Content */
.widget-content-inner ul:not(.why-choose-list):not(.benefits-list) {
    list-style: none;
    padding: 0;
    margin: 0px 0;
}

.widget-content-inner ul:not(.why-choose-list):not(.benefits-list) li {
    padding: 6px 0 6px 25px;
    position: relative;
    color: #333;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 4px;
    transition: transform 0.2s ease;
}

.widget-content-inner ul:not(.why-choose-list):not(.benefits-list) li:hover {
    transform: translateX(3px);
}

.widget-content-inner ul:not(.why-choose-list):not(.benefits-list) li:before {
    content: "\2022";
    position: absolute;
    /* Adjusted alignment for Unicode bullet */
    left: 0;
    top: 5px;
    color: #ff3232;
    font-weight: bold;
    font-size: 26px;
    line-height: 1;
}

/* Paragraph Styling */
.widget-content-inner p {
    color: #333;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 15px;
}

.widget-content-inner p:last-child {
    margin-bottom: 0;
}

.widget-content-inner strong {
    color: #000;
    font-weight: 600;
}

.widget-content-inner em {
    color: #666;
    font-style: italic;
}

/* Heading Sizes - Reduced for Better Readability */
.widget-content-inner h4 {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-top: 20px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.widget-content-inner h5 {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin-top: 15px;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* Why Choose List Styling */
.why-choose-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.why-choose-list li {
    position: relative;
    color: #555;
    font-size: 16px;
    line-height: 1.6;
}

.why-choose-list li:last-child {
    border-bottom: none;
}

.why-choose-list li:before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 12px;
    color: #ff3232;
    font-weight: bold;
    font-size: 18px;
}

.why-choose-list li strong {
    color: #333;
    font-weight: 600;
}

.accordion-content {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-content.active {
    max-height: 2000px;
    padding: 20px;
}

/* Product Description Styling */
.tf-product-description p {
    color: #555;
    font-size: 16px;
    line-height: 1.7;
}

.tf-product-description h6 {
    color: #333;
    font-size: 17px;
    font-weight: 600;
    margin-top: 20px;

    /* Desktop Specific Styling for Usage & Safety Tab Split */
    @media (min-width: 992px) {

        /* Split content into two columns if there are multiple sections */
        .widget-tabs.accordion-style .accordion-content.active {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            align-items: flex-start;
        }

        .widget-tabs.accordion-style .content-section {
            flex: 1;
            min-width: 300px;
            /* Ensure they wrap if too narrow */
        }
    }

    /* Global Heading Style for Accordion Content (Desktop & Mobile) */
    .widget-content-inner h6,
    .widget-content-inner .section-heading {
        padding-left: 15px;
        border-left: 4px solid #d32f2f;
        color: #1a1a1a;
        font-weight: 700;
        font-size: 18px;
        margin-bottom: 20px;
        margin-top: 10px;
        background: transparent !important;
        /* Ensure no gray box */
        line-height: 1.4;
        display: block;
    }

    /* Why Choose Section Overrides if needed */
    .widget-content-inner h5 {
        padding-left: 15px;
        border-left: 4px solid #d32f2f;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 20px;
    }

    .widget-content-inner ul {
        padding-left: 0;
    }

    .widget-content-inner ul li {
        margin-bottom: 0px;
        color: #555;
        line-height: 1.6;
    }

    .widget-content-inner ul li strong {
        color: #333;
        font-weight: 600;
    }

    /* Dosage Section */
    .widget-content-inner p strong {
        color: #0066cc;
        font-weight: 600;
    }

    /* Responsive Adjustments - Mobile Clean Accordion */
    @media (max-width: 768px) {
        .product-key-benefits {
            padding: 15px;
        }

        .composition-table {
            font-size: 16px;
        }

        .composition-table thead th,
        .composition-table tbody td {
            padding: 10px;
        }

        .faq-question {
            font-size: 16px;
        }

        .faq-answer {
            font-size: 16px;
            margin-left: 0;
        }

        /* Mobile Accordion - Clean Style Matching Reference */
        .widget-tabs.style-has-border.accordion-style .accordion-item {
            margin-bottom: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            border: 1px solid #e5e5e5 !important;
            border-bottom: none !important;
            background: #ffffff !important;
        }

        .widget-tabs.style-has-border.accordion-style .accordion-item:last-child {
            border-bottom: 1px solid #e5e5e5 !important;
        }

        .widget-tabs.accordion-style .accordion-item:hover {
            box-shadow: none;
            transform: none;
        }

        /* High Specificity Header Override */
        .widget-tabs.style-has-border.accordion-style .accordion-header {
            padding: 12px 15px !important;
            font-size: 14px !important;
            font-weight: 600;
            background: #ffffff !important;
            color: #1a1a1a !important;
            border: none !important;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            border-radius: 0 !important;
            min-height: 0 !important;
            margin: 0 !important;
            line-height: normal !important;
        }

        .widget-tabs.style-has-border.accordion-style .accordion-header.active {
            background: #ffffff !important;
            color: #d32f2f !important;
            border-radius: 0 !important;
        }

        .widget-tabs.style-has-border.accordion-style .accordion-header .inner {
            color: inherit !important;
            font-weight: 600;
            flex: 1;
            margin: 0 !important;
            padding: 0 !important;
        }

        .widget-tabs.style-has-border.accordion-style .accordion-icon {
            color: #1a1a1a !important;
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .widget-tabs.style-has-border.accordion-style .accordion-header.active .accordion-icon {
            color: #d32f2f !important;
        }

        .widget-tabs.style-has-border.accordion-style .accordion-content {
            background: #ffffff !important;
            border-top: 0 none !important;
            /* Hide border when collapsed */
            max-height: 0 !important;
            min-height: 0 !important;
            /* CRITICAL FIX: Override default min-height */
            overflow: hidden !important;
            padding: 0 !important;
            margin: 0 !important;
            transition: max-height 0.3s ease, padding 0.3s ease;
            display: block !important;
            visibility: hidden !important;
            /* Ensure content is truly invisible */
            opacity: 0 !important;
        }

        /* Target content via the active item parent for robust visibility */
        .widget-tabs.style-has-border.accordion-style .accordion-item.active .accordion-content {
            max-height: 5000px !important;
            padding: 15px !important;
            border-top: 1px solid #e5e5e5 !important;
            background: #ffffff !important;
            visibility: visible !important;
            opacity: 1 !important;
            display: block !important;
            min-height: 0 !important;
        }

        /* Fix Icon Logic: Show/Hide based on .accordion-item.active */
        .widget-tabs.style-has-border.accordion-style .accordion-item.active .icon-plus {
            display: none !important;
        }

        .widget-tabs.style-has-border.accordion-style .accordion-item.active .icon-minus {
            display: block !important;
        }

        .widget-tabs.style-has-border.accordion-style .accordion-item:not(.active) .icon-plus {
            display: block !important;
        }

        .widget-tabs.style-has-border.accordion-style .accordion-item:not(.active) .icon-minus {
            display: none !important;
        }

        /* Also target the inner widget content if it exists to be safe */
        .widget-tabs.style-has-border.accordion-style .accordion-content .widget-content-inner {
            min-height: 0 !important;
        }

        .widget-tabs.style-has-border.accordion-style .accordion-content.active {
            max-height: 5000px !important;
            padding: 15px !important;
            border-top: 1px solid #e5e5e5 !important;
            background: #ffffff !important;
            visibility: visible !important;
            min-height: auto !important;
        }

        /* Remove extra spacing from content elements */
        .widget-tabs.accordion-style .accordion-content.active>*:first-child {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        .widget-tabs.accordion-style .accordion-content.active p,
        .widget-tabs.accordion-style .accordion-content.active ul,
        .widget-tabs.accordion-style .accordion-content.active h4,
        .widget-tabs.accordion-style .accordion-content.active h5 {
            margin-bottom: 10px;
        }

        /* Ensure content sections have no extra spacing */
        .widget-tabs.accordion-style .accordion-content.active .content-section {
            margin-bottom: 0 !important;
            padding: 0 !important;
        }
    }

    /* Print Styles */
    @media print {

        .product-enquiry,
        .tf-product-share,
        .accordion-icon {
            display: none !important;
        }

        .accordion-content {
            max-height: none !important;
            padding: 15px 0 !important;
        }

        .accordion-item {
            page-break-inside: avoid;
        }
    }

    /* ================================================
   Refined Tab Styling (Seamless Integration)
   ================================================ */

    /* Tab Container */
    .widget-tabs.style-has-border {
        border: none !important;
        background: transparent !important;
    }

    /* Tab Navigation (Header) */
    .widget-tabs .widget-menu-tab {
        background-color: #e4f5f4 !important;
        /* Teal background */
        border-radius: 12px 12px 0 0;
        /* Top rounding only */
        padding: 0px;
        /* Spacing */
        margin: 0 !important;
        /* Force zero margin */
        border-bottom: none !important;
        display: flex;
        gap: 40px;
        overflow-x: visible !important;
        /* No scrollbar */
        position: relative;
        z-index: 10;
    }

    /* Remove scrollbars */
    .widget-tabs .widget-menu-tab::-webkit-scrollbar {
        display: none;
    }

    /* Tab Items */
    .widget-tabs .widget-menu-tab .item-title {
        background: transparent !important;
        border: none !important;
        color: #666 !important;
        font-size: 16px;

        font-weight: 500;
        padding: 18px 30px;
        /* Increased padding */
        margin: 0 0px !important;
        /* Gap between tabs */
        position: relative;
        cursor: pointer;
        transition: all 0.3s ease;
        opacity: 0.75;
        border-radius: 0;
        /* No border radius */
    }

    /* Hover State for Inactive Tabs */
    .widget-tabs .widget-menu-tab .item-title:not(.active):hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.4) !important;
        transform: translateY(-2px);
        /* Lift on hover */
    }

    /* Active Tab - Button-like White Background */
    .widget-tabs .widget-menu-tab .item-title.active {
        background: #ffffff !important;
        /* Pure white */
        color: #000 !important;
        /* Strong black text */
        font-weight: 700;
        opacity: 1;
        /* Stronger shadow */
        border-radius: 0;
        /* No border radius */
        margin-bottom: -2px;
        /* Stronger overlap */
        z-index: 20;
        position: relative;
        border-left: 1px solid #e0e0e0;
        /* Side borders */
        border-right: 1px solid #e0e0e0;
        border-top: 3px solid #ff3232;
        /* Red top accent */
        padding: 20px;
    }

    /* Active Indicator */
    .widget-tabs .widget-menu-tab .item-title.active::after {
        display: none;
        /* Remove bottom indicator, using top border instead */
    }

    /* Content Box - Enhanced White Container */
    .widget-tabs .widget-content-tab {
        background: #ffffff !important;
        border: none !important;
        box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08) !important;
        border-radius: 0 0 12px 12px;
        /* Bottom rounding only */
        padding: 45px 60px;
        /* More horizontal padding like reference */
        margin-top: 0 !important;
        position: relative;
        z-index: 5;
        min-height: 400px;
        /* Ensure consistent height */
    }

    /* Inner Content Cleanup */
    .content-section {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 30px;
        /* Increased spacing between sections */
        border-radius: 0;
    }

    .content-section:last-child {
        margin-bottom: 0;
    }

    .content-section.no-bg {
        background: transparent !important;
    }

    /* Enhanced Headings */
    .section-heading {
        background: transparent;
        padding: 0 0 0 18px;
        margin-bottom: 25px;
        border-left: 4px solid #ff3232;
        font-size: 22px;
        font-weight: 700;
        color: #222;
        line-height: 1.4;
    }

    /* Paragraph Styling */
    .widget-content-inner p {
        font-size: 16px;
        line-height: 1.8;
        color: #555;
        margin-bottom: 20px;
    }

    .widget-content-inner p:last-child {
        margin-bottom: 0;
    }

    /* Enhanced List Styling */
    .widget-content-inner ul {
        margin: 20px 0;
        padding: 0;
    }

    .widget-content-inner ul li {
        font-size: 16px;
        line-height: 1.9;
        color: #444;
        margin-bottom: 15px;
        padding-left: 35px;
        position: relative;
    }

    .widget-content-inner ul li:last-child {
        margin-bottom: 0;
    }

    /* Bullet Points - Red Dots */
    .widget-content-inner ul li:before {
        content: "\2022";
        position: absolute;
        left: 0;
        top: -1px;
        color: #ff3232;
        font-size: 26px;
        font-weight: bold;
        line-height: 1;
    }

    /* Strong Text in Lists */
    .widget-content-inner ul li strong {
        color: #222;
        font-weight: 700;
    }

    /* Numbered Lists */
    .widget-content-inner ol {
        margin: 20px 0;
        padding-left: 25px;
        counter-reset: item;
    }

    .widget-content-inner ol li {
        font-size: 16px;
        line-height: 1.9;
        color: #444;
        margin-bottom: 15px;
        padding-left: 15px;
        position: relative;
        list-style: none;
    }

    .widget-content-inner ol li:before {
        content: counter(item) ".";
        counter-increment: item;
        position: absolute;
        left: -25px;
        color: #ff3232;
        font-weight: 700;
        font-size: 18px;
    }

    /* Enhanced Table Styling */
    .composition-table {
        box-shadow: none !important;
        border: 1px solid #e8e8e8;
        margin-top: 25px;
        margin-bottom: 25px;
        border-radius: 8px;
        overflow: hidden;
        width: 100%;
    }

    .composition-table thead {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    }

    .composition-table thead th {
        padding: 18px 20px;
        font-weight: 700;
        font-size: 15px;
        color: #ffffff !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
    }

    .composition-table tbody tr {
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.2s ease;
    }

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

    .composition-table tbody tr:hover {
        background-color: #f9f9f9;
    }

    .composition-table td {
        padding: 16px 20px;
        font-size: 15px;
        color: #444;
        border: none;
    }

    .composition-table td:first-child {
        font-weight: 600;
        color: #222;
    }

    .composition-table td:last-child {
        color: #666;
        font-size: 16px;
    }

    /* ================================================
   ENHANCED CONTENT ELEMENTS
   ================================================ */

    /* Info Boxes / Callouts */
    .widget-content-inner .info-box,
    .widget-content-inner .note {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border-left: 4px solid #667eea;
        padding: 20px 25px;
        margin: 25px 0;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* Highlighted Text */
    .widget-content-inner .highlight {
        background: linear-gradient(120deg, #fff9c4 0%, #fff59d 100%);
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: 600;
    }

    /* FAQ Enhancements */
    .faqs-accordion {
        margin-top: 10px;
    }

    .faq-accordion-item {
        margin-bottom: 15px;
        border: 1px solid #e8e8e8;
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.3s ease;
        background: #ffffff;
    }

    .faq-accordion-item:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        transform: translateX(3px);
    }

    .faq-accordion-header {
        background: #f8f9fa;
        padding: 18px 25px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
        border-bottom: 1px solid transparent;
    }

    .faq-accordion-header:hover {
        background: #f0f0f0;
    }

    .faq-accordion-header.active {
        background: linear-gradient(135deg, #ff3232 0%, #ff5252 100%);
        color: white;
        border-bottom-color: rgba(255, 255, 255, 0.2);
    }

    .faq-question-text {
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .faq-accordion-header.active .faq-question-text {
        color: white;
    }

    .faq-accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease;
        background: white;
    }

    .faq-accordion-content.active {
        max-height: 600px;
        padding: 20px 25px;
        border-top: 1px solid #f0f0f0;
    }

    .faq-accordion-content p {
        color: #555;
        font-size: 15px;
        line-height: 1.8;
        margin: 0;
    }

    /* Dividers */
    .widget-content-inner hr {
        border: none;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, #e0e0e0 50%, transparent 100%);
        margin: 35px 0;
    }

    /* ================================================
   UX ENHANCEMENTS
   ================================================ */

    /* Smooth Tab Content Transitions */
    .widget-tabs .widget-content-tab .widget-content-inner {
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        transform: translateY(10px);
    }

    .widget-tabs .widget-content-tab .widget-content-inner.active {
        transform: translateY(0);
    }

    /* Enhanced FAQ Interactions */
    .faq-accordion-item {
        transition: all 0.3s ease;
    }

    .faq-accordion-item:hover {
        transform: translateX(5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .faq-accordion-header {
        transition: all 0.3s ease;
    }

    .faq-accordion-header:not(.active):hover {
        background: #f0f0f0;
    }

    /* Improved List Hover Effects */
    .widget-content-inner ul li {
        line-height: 1.8;
        margin-bottom: 12px;
        transition: all 0.2s ease;
    }

    .widget-content-inner ul li:last-child {
        margin-bottom: 0;
    }

    .widget-content-inner ul li:hover {
        padding-left: 32px;
        color: #333;
    }

    /* Loading State */
    .widget-content-inner:not(.active) {
        min-height: 200px;
    }

    /* ================================================
   MOBILE RESPONSIVE STYLES
   ================================================ */

    @media (max-width: 768px) {

        /* Tab Navigation Mobile */
        .widget-tabs .widget-menu-tab {
            overflow-x: auto;
            gap: 20px;
            padding: 15px 20px 0 20px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }

        .widget-tabs .widget-menu-tab::-webkit-scrollbar {
            height: 3px;
        }

        .widget-tabs .widget-menu-tab::-webkit-scrollbar-thumb {
            background: #ff3232;
            border-radius: 3px;
        }

        .widget-tabs .widget-menu-tab .item-title {
            white-space: nowrap;
            font-size: 16px;
            padding: 12px 0;
        }

        /* Content Padding Mobile */
        .widget-tabs .widget-content-tab {
            padding: 25px 20px;
            border-radius: 0 0 8px 8px;
        }

        .widget-tabs .widget-menu-tab {
            border-radius: 8px 8px 0 0;
        }

        /* Section Headings Mobile */
        .section-heading {
            font-size: 18px;
            padding: 0 0 0 12px;
            margin-bottom: 15px;
        }

        /* Responsive Table - Card Layout */
        .composition-table {
            font-size: 16px;
            border: none;
        }

        .composition-table thead {
            display: none;
        }

        .composition-table tbody tr {
            display: block;
            margin-bottom: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            background: #fafafa;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .composition-table tbody tr:hover {
            background: #f5f5f5;
        }

        .composition-table td {
            display: block;
            text-align: left !important;
            padding: 8px 0 !important;
            border: none;
        }

        .composition-table td:before {
            content: attr(data-label);
            font-weight: 700;
            display: block;
            margin-bottom: 5px;
            color: #0066cc;
            font-size: 13px;
        }

        .composition-table td:first-child {
            font-weight: 600;
            color: #333;
            font-size: 15px;
            padding-bottom: 10px !important;
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 8px;
        }

        /* FAQ Mobile Adjustments */
        .faq-accordion-header {
            padding: 12px 15px;
            font-size: 15px;
        }

        .faq-accordion-content.active {
            padding: 12px 15px;
        }

        .faq-accordion-content p {
            font-size: 16px;
        }
    }

    /* Tablet Adjustments */
    @media (min-width: 769px) and (max-width: 1024px) {
        .widget-tabs .widget-menu-tab {
            gap: 30px;
            padding: 15px 30px 0 30px;
        }

        .widget-tabs .widget-content-tab {
            padding: 35px 30px;
        }
    }

    /* ================================================
   PRINT STYLES
   ================================================ */

    @media print {

        /* Hide navigation elements */
        .widget-tabs .widget-menu-tab {
            display: none !important;
        }

        /* Show all tab content */
        .widget-tabs .widget-content-tab .widget-content-inner {
            display: block !important;
            opacity: 1 !important;
            pointer-events: all !important;
            page-break-inside: avoid;
            margin-bottom: 30px;
            transform: none !important;
        }

        /* Add section titles for print */
        .widget-content-inner:before {
            content: attr(data-tab-title);
            display: block;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 15px;
            color: #000;
            border-bottom: 2px solid #ff3232;
            padding-bottom: 10px;
        }

        .section-heading {
            page-break-after: avoid;
        }

        .composition-table {
            page-break-inside: avoid;
        }

        .faq-accordion-item {
            page-break-inside: avoid;
            border: 1px solid #ddd;
            margin-bottom: 10px;
            padding: 10px;
        }

        .faq-accordion-content {
            max-height: none !important;
            padding: 10px 0 !important;
        }

        /* Remove shadows and backgrounds for print */
        .widget-tabs .widget-content-tab {
            box-shadow: none !important;
            border: 1px solid #ddd;
        }
    }

    /* ================================================
   ACCESSIBILITY ENHANCEMENTS
   ================================================ */

    /* Focus States */
    .widget-tabs .widget-menu-tab .item-title:focus {
        outline: 2px solid #ff3232;
        outline-offset: 2px;
    }

    .faq-accordion-header:focus {
        outline: 2px solid #ff3232;
        outline-offset: -2px;
    }

    /* High Contrast Support */
    @media (prefers-contrast: high) {
        .widget-tabs .widget-menu-tab {
            border: 2px solid #000;
        }

        .widget-tabs .widget-menu-tab .item-title.active::after {
            height: 4px;
        }
    }

    /* Reduced Motion Support */
    @media (prefers-reduced-motion: reduce) {

        .widget-tabs .widget-content-tab .widget-content-inner,
        .faq-accordion-item,
        .faq-accordion-header,
        .widget-content-inner ul li {
            transition: none;
            transform: none;
        }
    }

    /* ================================================
   RESPONSIVE HEADING ADJUSTMENTS (768px - 1408px)
   ================================================ */
    @media (min-width: 768px) and (max-width: 1408px) {
        .widget-tabs.accordion-style .accordion-header {
            font-size: 14px !important;
            /* Reduced font size */
            padding: 12px 15px !important;
            /* Reduced padding */
            letter-spacing: 0 !important;
            /* Reduced letter spacing */
            line-height: normal !important;
            min-height: 50px;
            /* Ensure uniform height */
            display: flex;
            align-items: center;
        }

        justify-content: center;
        text-align: center;
        float: none;
        /* Override any floats */
    }
}

/* 2. Restore Mobile Accordion Logic (Re-applying missing styles) */
@media (max-width: 768px) {

    /* Force Accordion Item Structure */
    .widget-tabs.style-has-border.accordion-style .accordion-item {
        margin-bottom: 10px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: block !important;
    }

    /* Header Styling */
    .widget-tabs.style-has-border.accordion-style .accordion-header {
        padding: 12px 15px !important;
        margin: 0 !important;
        border: 1px solid #e5e5e5 !important;
        background: white !important;
        color: #1a1a1a !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Active Header */
    .widget-tabs.style-has-border.accordion-style .accordion-item.active .accordion-header {
        color: #d32f2f !important;
        border-bottom: 1px solid #e5e5e5 !important;
        /* Keep separation */
    }

    .widget-tabs.style-has-border.accordion-style .accordion-item.active .accordion-header .accordion-icon {
        color: #d32f2f !important;
    }

    /* Content Hiding (Collapsed) - CRITICAL FOR "NOT WORKING" */
    .widget-tabs.style-has-border.accordion-style .accordion-content,
    .accordion-content {
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        min-height: 0 !important;
        display: block !important;
        /* Keep block but hidden height */
    }

    /* Content Showing (Active) */
    .widget-tabs.style-has-border.accordion-style .accordion-item.active .accordion-content,
    .accordion-item.active .accordion-content {
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 5000px !important;
        /* Allow expansion */
        padding: 15px !important;
        border: 1px solid #e5e5e5 !important;
        border-top: none !important;
    }

    /* Icon Toggling Logic */
    .accordion-item.active .icon-plus {
        display: none !important;
    }

    .accordion-item.active .icon-minus {
        display: block !important;
    }

    .accordion-item:not(.active) .icon-plus {
        display: block !important;
    }

    .accordion-item:not(.active) .icon-minus {
        display: none !important;
    }

    /* Fix Table in Accordion */
    .composition-table {
        display: table !important;
    }
}

td {
    font-size: 16px !important;
}

/* FIX: Force Content Visibility on Desktop to prevent FOUC/Resize issues */
@media (min-width: 769px) {
    .widget-tabs .widget-content-tab {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    .widget-tabs .widget-content-tab .widget-content-inner.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}