/*
Theme Name: Jannah Child
Theme URI: http://jannah.tielabs.com/
Description: Jannah Child Theme - Fix HTML Stripping Issue
Author: TieLabs & Expert Dev
Template: jannah
Version: 2.2.0
*/

/* ================================================
1. CORE RESET
================================================ */
* { box-sizing: border-box; }

/* ================================================
2. CUSTOM ORDERED LIST
================================================ */
.custom-ordered-list {
    counter-reset: customCounter;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 25px 0 !important;
    display: block !important;
}

.custom-ordered-list li {
    position: relative;
    counter-increment: customCounter;
    list-style: none !important;
    margin: 20px 0 !important;
    padding-left: 60px !important;
    line-height: 1.7;
    min-height: 40px;
}

.custom-ordered-list li::before {
    content: counter(customCounter) !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #0088ff 0%, #0066cc 100%);
    border: 3px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 136, 255, 0.3);
    z-index: 10;
}

.custom-ordered-list li::marker { display: none !important; content: "" !important; }

/* Nested lists fix */
.custom-ordered-list ul, .custom-ordered-list ol {
    list-style: disc !important; padding-left: 25px !important; margin: 10px 0 !important; counter-reset: none !important;
}
.custom-ordered-list ul li, .custom-ordered-list ol li {
    padding-left: 0 !important; margin: 8px 0 !important; min-height: auto !important; list-style: disc !important;
}
.custom-ordered-list ul li::before, .custom-ordered-list ol li::before { display: none !important; }

/* ================================================
3. WP STEPS CONTAINER
================================================ */
.wp-steps-container {
    counter-reset: stepCounter;
    list-style: none !important;
    padding: 0 !important;
    margin: 30px 0 !important;
    position: relative;
    display: block !important;
}

.wp-steps-container li:not(.no-step) {
    position: relative;
    counter-increment: stepCounter;
    list-style: none !important;
    margin-bottom: 35px !important;
    padding: 0 !important;
    line-height: 1.7;
    min-height: 45px;
}

.wp-steps-container li:not(.no-step)::before {
    content: counter(stepCounter) !important;
    position: absolute;
    top: 0;
    left: -70px;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #0088ff 0%, #0066cc 100%);
    border: 4px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 136, 255, 0.3);
}

.wp-steps-container li:not(.no-step)::after {
    content: ''; position: absolute; top: 50px; left: -49px; bottom: -35px; width: 4px;
    background: linear-gradient(180deg, #0088ff 0%, #e0e0e0 100%); z-index: 5;
}
.wp-steps-container li:not(.no-step):last-child::after { display: none !important; }

/* ================================================
4. WOOCOMMERCE TABS
================================================ */
.woocommerce-tabs ul.tabs li.table_of_content_tab a:before {
  content: "\f02d"; font-family: 'FontAwesome'; margin-right: 8px; font-weight: normal;
}

.table-of-content-tab { padding: 20px 0; line-height: 1.8; font-size: 15px; }
.table-of-content-tab h3 {
  color: #333; margin-bottom: 20px; border-bottom: 2px solid #756f00; padding-bottom: 10px; font-size: 20px; font-weight: 700;
}

/* Reset list style inside TOC tab */
.table-of-content-tab ul:not([class*="wp-steps"]):not([class*="custom-ordered"]) {
  list-style: disc; padding-left: 25px; margin: 15px 0;
}
.table-of-content-tab ol:not([class*="wp-steps"]):not([class*="custom-ordered"]) {
  list-style: decimal; padding-left: 25px; margin: 15px 0;
}
.table-of-content-tab strong { color: #756f00; font-weight: 700; }

/* Responsive */
@media (max-width: 768px) {
    .wp-steps-container ol, .wp-steps-container ul { padding-left: 60px !important; }
    .wp-steps-container li:not(.no-step)::before { left: -60px; width: 38px; height: 38px; font-size: 15px; }
    .wp-steps-container li:not(.no-step)::after { left: -41px; }
    .custom-ordered-list li { padding-left: 50px !important; }
    .custom-ordered-list li::before { width: 32px; height: 32px; left: 0; }
}