/* ============================================================
   MDI GLOBAL RESPONSIVE — PREMIUM MOBILE FIX v3
   Created: 2026-03-08
   Rollback: delete this file
   ============================================================ */

/* ----------------------------------------------------------
   0. GLOBAL — Overflow prevention (all viewports)
   ---------------------------------------------------------- */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
.elementor-section-wrap,
.e-container, .e-con,
.elementor-container {
    max-width: 100vw !important;
}

/* ----------------------------------------------------------
   1. TABLET (768–1024px)
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Ensure multi-column containers wrap */
    .elementor-container {
        flex-wrap: wrap !important;
    }
}

/* ----------------------------------------------------------
   2. MOBILE (max-width: 767px)
   ---------------------------------------------------------- */
@media (max-width: 767px) {

    /* --- 2a. Column stacking --- */
    .elementor-container {
        flex-wrap: wrap !important;
    }
    .elementor-column {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .elementor-inner-section > .elementor-container > .elementor-column {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* --- 2b. Tables: horizontal scroll --- */
    .elementor-widget-container table,
    .elementor-widget-table table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: calc(100vw - 32px) !important;
        scrollbar-width: thin !important;
    }
    table td:first-child,
    table th:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 2 !important;
        background: inherit !important;
    }

    /* --- 2c. Stats counters --- */
    .elementor-widget-counter .elementor-counter-number-wrapper {
        font-size: clamp(26px, 7vw, 44px) !important;
    }
    .elementor-widget-counter .elementor-counter-title {
        font-size: clamp(11px, 3vw, 14px) !important;
    }

    /* --- 2d. Images and media --- */
    img, video, iframe, embed, object {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- 2e. Text wrapping (prevent letter-by-letter breaks) --- */
    .elementor-heading-title,
    .elementor-widget-text-editor *,
    .elementor-icon-box-content,
    .elementor-widget-container {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
    }
    /* Prevent letter-by-letter in all contexts */
    * {
        word-break: normal;
    }
    h1, h2, h3, h4, h5, h6,
    .elementor-heading-title {
        word-break: break-word !important;
    }

    /* --- 2f. Section padding --- */
    .elementor-top-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .elementor-column-wrap,
    .elementor-widget-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* --- 2g. Floating buttons: positioned to not overlap content --- */
    .wpr-stt-btn {
        bottom: 16px !important;
        right: 12px !important;
        z-index: 9990 !important;
        width: 36px !important;
        height: 36px !important;
    }
    .wpr-pc-btn {
        bottom: 64px !important;
        right: 12px !important;
        z-index: 9990 !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* --- 2h. Language switcher positioning --- */
    .mdi-lang-switcher {
        top: 8px !important;
        right: 12px !important;
        font-size: 11px !important;
    }
    .mdi-lang-switcher a {
        padding: 4px 8px !important;
    }

    /* --- 2i. Prevent wide inline styles breaking layout --- */
    [style*="max-width:920px"],
    [style*="max-width:1060px"],
    [style*="max-width: 920px"],
    [style*="max-width: 1060px"],
    [style*="max-width:960px"],
    [style*="max-width: 960px"] {
        max-width: 100% !important;
    }

    /* --- 2j. Icon boxes --- */
    .elementor-icon-box-wrapper {
        max-width: 100%;
    }

    /* --- 2k. Grid containers → 1 column --- */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* --- 2l. Accordion/FAQ mobile spacing --- */
    .elementor-accordion .elementor-tab-title {
        padding: 14px 16px !important;
        font-size: 14px !important;
    }
    .elementor-accordion .elementor-tab-content {
        padding: 12px 16px !important;
        font-size: 13px !important;
    }
}

/* ----------------------------------------------------------
   3. SMALL MOBILE (max-width: 480px)
   ---------------------------------------------------------- */
@media (max-width: 480px) {
    /* Tighter table cells */
    table th, table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* Smaller headings */
    h1, .elementor-heading-title[class*="elementor-size-xl"] {
        font-size: clamp(22px, 6vw, 32px) !important;
    }
    h2, .elementor-heading-title[class*="elementor-size-large"],
    .elementor-heading-title[class*="elementor-size-default"] {
        font-size: clamp(18px, 5vw, 26px) !important;
    }
    h3 {
        font-size: clamp(16px, 4.5vw, 22px) !important;
    }

    /* Even tighter section padding */
    .elementor-top-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ============================================================
   CRITICAL: Force visibility for animated elements on mobile
   Elementor entrance animations (slideInLeft, fadeIn, etc.) add
   .elementor-invisible class. IntersectionObserver doesn't trigger
   for stacked below-fold elements on mobile → content stays hidden.
   ============================================================ */
@media (max-width: 1024px) {
    .elementor-invisible {
        visibility: visible !important;
    }
}