/* =========================================================
   FEATURES NEW
   New clean styles for product features.
   Works only with .features_new
   Does NOT replace old .features styles
   ========================================================= */


/* ---------------------------------------------------------
   1. Base text styles for new features block
   --------------------------------------------------------- */
.features_new {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #2c2b29;
    word-wrap: break-word;
}

.features_new *:first-child {
    margin-top: 0;
}

.features_new *:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   2. Headings inside new features block
   --------------------------------------------------------- */
.features_new h1,
.features_new h2,
.features_new h3,
.features_new h4,
.features_new h5,
.features_new h6 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 28px 0 14px;
    color: #222;
}


/* ---------------------------------------------------------
   3. Normal lists
   Used if you want clean ul/ol inside features_new
   --------------------------------------------------------- */
.features_new ul,
.features_new ol {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.features_new li {
    margin: 0 0 6px;
    color: #555;
    line-height: 1.35;
}

.features_new li::before {
    content: "- ";
}


/* ---------------------------------------------------------
   4. Proper definition lists
   In case later you use real dt / dd structure
   --------------------------------------------------------- */
.features_new dl {
    margin: 0 0 20px;
}

.features_new dt {
    margin: 0 0 4px;
    font-weight: 700;
    color: #222;
}

.features_new dd {
    margin: 0 0 14px;
    color: #555;
}

.features_new dd ul,
.features_new dd ol {
    margin-top: 6px;
}


/* ---------------------------------------------------------
   5. Feature blocks
   Recommended structure for grouped text content
   --------------------------------------------------------- */
.features_new .feature-block {
    margin-bottom: 14px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.features_new .feature-title {
    margin: 0 0 6px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
}

.features_new .feature-text {
    margin: 0 0 6px;
    color: #555;
    line-height: 1.35;
}


/* ---------------------------------------------------------
   6. Two-columns text layout
   For text blocks, NOT for comparison tables
   Example:
   <div class="features_new">
     <div class="two-cols">...</div>
   </div>
   --------------------------------------------------------- */
.features_new .two-cols {
    -webkit-columns: 2;
    columns: 2;
    column-gap: 42px;
    column-fill: balance;
}

.features_new .two-cols p {
    margin: 0 0 7px;
    padding: 0;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 400;
    color: #555;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.features_new .two-cols p strong,
.features_new .two-cols p b {
    display: inline-block;
    margin: 10px 0 2px;
    font-weight: 700;
    color: #222;
}

.features_new .two-cols p:first-child strong,
.features_new .two-cols p:first-child b {
    margin-top: 0;
}

.features_new .two-cols p:empty {
    display: none;
}

.features_new .two-cols u {
    text-decoration: none;
}

.features_new .two-cols .feature-block {
    margin-bottom: 12px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}


/* ---------------------------------------------------------
   7. Clean tables for new features
   Important:
   We use stronger selectors because new block may still be
   rendered inside old .features container in template.
   This block overrides old table rules.
   --------------------------------------------------------- */
.features .features_new table,
.features_new table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    border: 1px solid #dcdcdc !important;
    margin: 0 0 20px !important;
    table-layout: fixed !important;
    background: #fff !important;
}

.features .features_new table th,
.features .features_new table td,
.features_new table th,
.features_new table td {
    border: 1px solid #dcdcdc !important;
    padding: 5px 8px !important;
    text-align: left !important;
    vertical-align: top !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.features .features_new table th,
.features_new table th {
    background: #f5f5f5 !important;
    font-weight: 700 !important;
    color: #222 !important;
}


/* ---------------------------------------------------------
   8. First column in normal 2-column tables
   Here we use 30 / 70 ratio for desktop
   --------------------------------------------------------- */
.features .features_new table:not(.features-wide) td:first-child,
.features_new table:not(.features-wide) td:first-child {
    background: #fafafa !important;
    font-weight: 700 !important;
    width: 30% !important;
}

.features .features_new table:not(.features-wide) td:last-child,
.features_new table:not(.features-wide) td:last-child {
    width: 70% !important;
}


/* ---------------------------------------------------------
   9. Section rows with colspan
   Big grey section headers
   Example:
   <tr><td colspan="2">Temperature Range</td></tr>
   --------------------------------------------------------- */
.features .features_new table td[colspan],
.features .features_new table th[colspan],
.features_new table td[colspan],
.features_new table th[colspan] {
    background: #eeeeee !important;
    font-weight: 800 !important;
    color: #222 !important;
}


/* ---------------------------------------------------------
   10. Subsection rows
   Lighter grey row for blocks like "LTE", "5G NR", etc.
   Use in HTML like:
   <tr class="subsection"><td colspan="2">LTE</td></tr>
   --------------------------------------------------------- */
.features .features_new table tr.subsection td,
.features .features_new table tr.subsection th,
.features_new table tr.subsection td,
.features_new table tr.subsection th {
    background: #f7f7f7 !important;
    font-weight: 800 !important;
    color: #222 !important;
}


/* ---------------------------------------------------------
   11. Table content styling
   --------------------------------------------------------- */
.features .features_new table strong,
.features .features_new table b,
.features_new table strong,
.features_new table b {
    font-weight: 700 !important;
}

.features .features_new table span,
.features .features_new table i,
.features .features_new table em,
.features_new table span,
.features_new table i,
.features_new table em {
    color: #555 !important;
    font-style: normal !important;
}

.features .features_new table ul,
.features .features_new table ol,
.features_new table ul,
.features_new table ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.features .features_new table li,
.features_new table li {
    margin: 0 0 4px;
    color: #555;
    line-height: 1.3;
}

.features .features_new table li::before,
.features_new table li::before {
    content: "- ";
}


/* ---------------------------------------------------------
   12. Wide tables (3–4+ columns)
   Add class="features-wide" to such tables
   These should scroll on mobile instead of squeezing
   --------------------------------------------------------- */
.features .features_new table.features-wide,
.features_new table.features-wide {
    table-layout: auto !important;
}

.features .features_new table.features-wide td:first-child,
.features .features_new table.features-wide th:first-child,
.features_new table.features-wide td:first-child,
.features_new table.features-wide th:first-child {
    width: 25% !important;
}


/* ---------------------------------------------------------
   13. Mobile styles
   --------------------------------------------------------- */
@media (max-width: 768px) {

    /* ---------------------------------------------
       13.1 Two-column text blocks become 1 column
       --------------------------------------------- */
    .features_new .two-cols {
        -webkit-columns: 1;
        columns: 1;
    }

    .features_new .two-cols p {
        margin: 0 0 4px;
        line-height: 1.25;
    }

    .features_new .two-cols p strong,
    .features_new .two-cols p b {
        margin: 8px 0 2px;
    }

    .features_new .two-cols p:first-child strong,
    .features_new .two-cols p:first-child b {
        margin-top: 0;
    }

    /* ---------------------------------------------
       13.2 Normal 2-column tables fit into mobile
       We keep them readable without horizontal scroll
       --------------------------------------------- */
    .features .features_new table:not(.features-wide),
    .features_new table:not(.features-wide) {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        display: table !important;
    }

    .features .features_new table:not(.features-wide) tr,
    .features_new table:not(.features-wide) tr {
        display: table-row !important;
    }

    .features .features_new table:not(.features-wide) td,
    .features .features_new table:not(.features-wide) th,
    .features_new table:not(.features-wide) td,
    .features_new table:not(.features-wide) th {
        display: table-cell !important;
        width: auto !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* On mobile for 2-column tables:
       first column 30%, second column 70% */
    .features .features_new table:not(.features-wide) td:first-child,
    .features .features_new table:not(.features-wide) th:first-child,
    .features_new table:not(.features-wide) td:first-child,
    .features_new table:not(.features-wide) th:first-child {
        width: 30% !important;
    }

    .features .features_new table:not(.features-wide) td:last-child,
    .features .features_new table:not(.features-wide) th:last-child,
    .features_new table:not(.features-wide) td:last-child,
    .features_new table:not(.features-wide) th:last-child {
        width: 70% !important;
    }

    /* ---------------------------------------------
       13.3 Wide tables (3–4 columns) on mobile
       Keep full table and allow horizontal scroll
       --------------------------------------------- */
    .features .features_new table.features-wide,
    .features_new table.features-wide {
        display: block !important;
        width: 100% !important;
        min-width: 700px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        table-layout: auto !important;
    }

    .features .features_new table.features-wide td,
    .features .features_new table.features-wide th,
    .features_new table.features-wide td,
    .features_new table.features-wide th {
        display: table-cell !important;
        width: auto !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
}