/* TMA Nested FAQ v7
   Fixes Elementor boxed/e-con parents so FAQ can match the width of the sections above.
*/

.tma-nfaq,
.tma-nfaq * {
    box-sizing: border-box !important;
}

/* Arabic / RTL layout safety */
html[lang^="ar"] .tma-nfaq,
html[lang^="ar"] .tma-nfaq.tma-nfaq-ltr,
body.rtl .tma-nfaq,
body.rtl .tma-nfaq.tma-nfaq-ltr {
    direction: rtl !important;
    text-align: right !important;
}

html[lang^="ar"] .tma-nfaq .tma-nfaq-title,
body.rtl .tma-nfaq .tma-nfaq-title {
    text-align: center !important;
}

html[lang^="ar"] .tma-nfaq details.tma-nfaq-category > summary,
body.rtl .tma-nfaq details.tma-nfaq-category > summary {
    direction: rtl !important;
    text-align: right !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row-reverse !important;
    width: 100% !important;
}

html[lang^="ar"] .tma-nfaq .tma-nfaq-questions-box,
body.rtl .tma-nfaq .tma-nfaq-questions-box {
    direction: rtl !important;
    text-align: right !important;
}

html[lang^="ar"] .tma-nfaq details.tma-nfaq-category > summary i,
html[lang^="ar"] .tma-nfaq details.tma-nfaq-category > summary svg,
html[lang^="ar"] .tma-nfaq details.tma-nfaq-category > summary .icon,
body.rtl .tma-nfaq details.tma-nfaq-category > summary i,
body.rtl .tma-nfaq details.tma-nfaq-category > summary svg,
body.rtl .tma-nfaq details.tma-nfaq-category > summary .icon {
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* Remove hidden max-widths inside the FAQ only */
.tma-nfaq,
.tma-nfaq .tma-nfaq-wrapper,
.tma-nfaq .tma-nfaq-inner,
.tma-nfaq .tma-nfaq-list,
.tma-nfaq .tma-nfaq-categories,
.tma-nfaq .tma-nfaq-questions-box,
.tma-nfaq details,
.tma-nfaq summary,
.tma-nfaq .tma-nfaq-question,
.tma-nfaq .tma-nfaq-answer {
    max-width: none !important;
}

.tma-nfaq details.tma-nfaq-category,
.tma-nfaq details.tma-nfaq-category > summary,
.tma-nfaq .tma-nfaq-questions-box,
.tma-nfaq .tma-nfaq-question,
.tma-nfaq .tma-nfaq-answer {
    width: 100% !important;
}

/* Classes injected by JS on Elementor parents */
.tma-nfaq-full-section,
.tma-nfaq-full-econ,
.tma-nfaq-full-widget,
.tma-nfaq-full-widget-container {
    box-sizing: border-box !important;
}

/* Large desktop: break Elementor boxed container correctly and keep FAQ centered */
@media (min-width: 1400px) {
    .tma-nfaq-full-section,
    section.tma-nfaq-full-section.elementor-section,
    .tma-nfaq-full-econ.e-con.e-parent,
    .tma-nfaq-full-econ.e-con-boxed {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .tma-nfaq-full-section > .elementor-container,
    .tma-nfaq-full-section > .elementor-container > .elementor-column,
    .tma-nfaq-full-section > .elementor-container > .elementor-column > .elementor-widget-wrap,
    .tma-nfaq-full-econ > .e-con-inner,
    .tma-nfaq-full-econ.e-con,
    .tma-nfaq-full-econ.e-con > .e-con-inner {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        --width: 100% !important;
        --content-width: 100% !important;
        --container-max-width: 100% !important;
    }

    .tma-nfaq-full-widget,
    .tma-nfaq-full-widget-container,
    .tma-nfaq-full-widget > .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tma-nfaq {
        width: calc(100vw - 220px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        display: block !important;
    }
}

/* Ultra-wide: keep the same visual side gutters */
@media (min-width: 2200px) {
    .tma-nfaq {
        width: calc(100vw - 240px) !important;
    }
}

/* Mobile: do not squeeze the FAQ inside a tiny boxed width */
@media (max-width: 767px) {
    .tma-nfaq-full-widget,
    .tma-nfaq-full-widget-container,
    .tma-nfaq-full-widget > .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .tma-nfaq {
        width: calc(100vw - 28px) !important;
        max-width: none !important;
        margin-left: 50% !important;
        margin-right: 0 !important;
        transform: translateX(-50%) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tma-nfaq .tma-nfaq-title {
        font-size: clamp(24px, 7vw, 34px) !important;
        line-height: 1.25 !important;
        margin-bottom: 24px !important;
    }

    .tma-nfaq details.tma-nfaq-category > summary {
        min-height: 58px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* Mobile Arabic / RTL: match English layout without translateX shift */
    html[lang^="ar"] .tma-nfaq,
    body.rtl .tma-nfaq {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }

}

/* ==========================================================
   v7.0.1 - Large desktop centered FAQ width
   Stops FAQ/Elementor parents from shifting sideways on ultra-wide screens.
========================================================== */
@media (min-width: 1025px) {
    .tma-nfaq-full-section,
    section.tma-nfaq-full-section.elementor-section,
    .tma-nfaq-full-econ.e-con.e-parent,
    .tma-nfaq-full-econ.e-con-boxed {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .tma-nfaq-full-section > .elementor-container,
    .tma-nfaq-full-econ > .e-con-inner,
    .tma-nfaq-full-econ.e-con > .e-con-inner,
    .tma-nfaq-full-widget,
    .tma-nfaq-full-widget-container,
    .tma-nfaq-full-widget > .elementor-widget-container {
        width: min(1500px, calc(100vw - 120px)) !important;
        max-width: 1500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        --width: min(1500px, calc(100vw - 120px)) !important;
        --content-width: 1500px !important;
        --container-max-width: 1500px !important;
    }

    .tma-nfaq {
        width: 100% !important;
        max-width: 1500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
}

@media (min-width: 1025px) and (max-width: 1300px) {
    .tma-nfaq-full-section > .elementor-container,
    .tma-nfaq-full-econ > .e-con-inner,
    .tma-nfaq-full-econ.e-con > .e-con-inner,
    .tma-nfaq-full-widget,
    .tma-nfaq-full-widget-container,
    .tma-nfaq-full-widget > .elementor-widget-container {
        width: calc(100vw - 60px) !important;
    }
}


/* ==========================================================
   v7.0.2 - Wide desktop FAQ width
   Moved the large-screen width fix into the plugin so no
   Additional CSS is needed for FAQ.
========================================================== */
@media (min-width: 1025px) {
    .tma-nfaq-full-section,
    section.tma-nfaq-full-section.elementor-section,
    .tma-nfaq-full-econ.e-con.e-parent,
    .tma-nfaq-full-econ.e-con-boxed {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .tma-nfaq-full-section > .elementor-container,
    .tma-nfaq-full-econ > .e-con-inner,
    .tma-nfaq-full-econ.e-con > .e-con-inner,
    .tma-nfaq-full-widget,
    .tma-nfaq-full-widget-container,
    .tma-nfaq-full-widget > .elementor-widget-container {
        width: min(2200px, calc(100vw - 120px)) !important;
        max-width: min(2200px, calc(100vw - 120px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        --width: min(2200px, calc(100vw - 120px)) !important;
        --content-width: 2200px !important;
        --container-max-width: 2200px !important;
        box-sizing: border-box !important;
    }

    .tma-nfaq {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1025px) and (max-width: 1300px) {
    .tma-nfaq-full-section > .elementor-container,
    .tma-nfaq-full-econ > .e-con-inner,
    .tma-nfaq-full-econ.e-con > .e-con-inner,
    .tma-nfaq-full-widget,
    .tma-nfaq-full-widget-container,
    .tma-nfaq-full-widget > .elementor-widget-container {
        width: calc(100vw - 60px) !important;
        max-width: calc(100vw - 60px) !important;
    }
}