/* ═══════════════════════════════════════════════════════════ */
/* RAVTRADER MOBILE RESPONSIVE CSS                            */
/* ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Global overflow prevention */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ═══ BENTO GRID → SINGLE COLUMN ═══ */
    .m-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .m-span {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    /* ALL grids → single column */
    div[style*="display:grid"],
    div[style*="display: grid"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* ═══ HERO CTA BUTTONS → STACK ═══ */
    .m-hero-cta {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .m-hero-cta>a {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* ═══ FLEX CONTAINERS → COLUMN ═══ */
    .m-flex-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .m-flex-wrap>div,
    .m-flex-wrap>a {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* Generic: any flex with large gap → column */
    div[style*="display: flex"][style*="gap: 32"],
    div[style*="display: flex"][style*="gap: 24"],
    div[style*="display: flex"][style*="gap: 40"],
    div[style*="display: flex"][style*="gap: 48"],
    div[style*="display:flex"][style*="gap:32"],
    div[style*="display:flex"][style*="gap:24"],
    div[style*="display:flex"][style*="gap:40"],
    div[style*="display:flex"][style*="gap:48"] {
        flex-direction: column !important;
    }

    /* Column layouts → 1 col */
    [style*="column-count"],
    [style*="columns:"],
    [style*="columns: "] {
        columns: 1 !important;
        column-count: 1 !important;
    }

    /* ═══ CONTAINING WIDTHS ═══ */
    div[style*="max-width: 1200"],
    div[style*="max-width:1200"],
    div[style*="max-width: 1100"],
    div[style*="max-width:1100"],
    div[style*="max-width: 1000"],
    div[style*="max-width:1000"],
    div[style*="max-width: 900"],
    div[style*="max-width:900"] {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Fix children with pixel widths */
    div[style*="display:flex"]>div[style*="px"],
    div[style*="display: flex"]>div[style*="px"] {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
    }

    /* ═══ STICKY CTA ═══ */
    #sticky-cta {
        padding: 8px 12px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    #sticky-cta span {
        font-size: 11px !important;
    }

    /* ═══ SOCIAL PROOF TOAST ═══ */
    #social-proof {
        bottom: 12px !important;
        left: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* ═══ EXIT POPUP ═══ */
    #exit-popup>div {
        padding: 24px 16px !important;
        width: 90vw !important;
        max-width: 90vw !important;
    }

    /* ═══ PERSPECTIVE / TERMINAL GRAPHIC ═══ */
    [style*="perspective"] {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Sections */
    section {
        padding: 40px 16px !important;
    }

    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Absolute badges */
    [style*="position: absolute"][style*="right: -"],
    [style*="position:absolute"][style*="right:-"] {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        margin: 12px auto !important;
    }
}

/* ═══ EXTRA SMALL ═══ */
@media (max-width: 420px) {
    #sticky-cta span {
        display: none !important;
    }
}