/* =========================
   GLOBAL RESPONSIVE SYSTEM
========================= */

*{
    box-sizing:border-box;
}

html,
body{
    overflow-x:hidden !important;
    max-width:100% !important;
}

/* =========================
   IMAGES
========================= */

img{
    max-width:100%;
    height:auto;
    display:block;
}

/* =========================
   CONTAINERS
========================= */

.container,
.wrapper,
.content,
.page,
.main-content{
    width:100%;
    max-width:100%;
}

/* =========================
   TABLES
========================= */

table{
    width:100%;
}

.table-responsive{
    overflow-x:auto;
}

/* =========================
   INPUTS
========================= */

input,
select,
textarea,
button{
    max-width:100%;
}

/* =========================
   FLEX FIX
========================= */

.flex,
.row,
.grid{
    flex-wrap:wrap;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    body{
        overflow-x:hidden !important;
    }

    .container{
        width:100% !important;
        padding-left:14px !important;
        padding-right:14px !important;
    }

    /* NAVBAR */

    .nav,
    .navbar,
    .header,
    .topbar{
        width:100% !important;
    }

    /* HERO */

    .hero,
    .hero-grid{
        display:block !important;
    }

    .hero-left,
    .hero-right,
    .hero-content,
    .hero-visual{
        width:100% !important;
        max-width:100% !important;
    }

    .hero h1{
        font-size:42px !important;
        line-height:1.15 !important;
    }

    /* CARDS */

    .card,
    .dashboard-card,
    .feature-card{
        width:100% !important;
    }

    /* BUTTONS */

    .btn{
        width:auto;
        max-width:100%;
    }

    /* SIDEBAR */

    .admin-side,
    .user-sidebar{
        width:100% !important;
    }

    /* FOOTER */

    footer{
        text-align:center;
    }

}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:480px){

    .hero h1{
        font-size:34px !important;
    }

    h1{
        font-size:32px !important;
    }

    h2{
        font-size:26px !important;
    }

    .btn{
        width:100%;
    }

}


/* =========================
   DEPOSIT / WITHDRAW MOBILE FIX
========================= */

@media(max-width:768px){

    .main{
        padding-top:96px !important;
        padding-left:14px !important;
        padding-right:14px !important;
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    .topbar{
        padding-left:64px !important;
        width:100% !important;
    }

    .search{
        width:100% !important;
        max-width:100% !important;
    }

    .top-right{
        width:100% !important;
        flex-wrap:wrap !important;
        justify-content:flex-start !important;
    }

    .hero,
    .deposit-card,
    .withdraw-card,
    .panel,
    .card{
        width:100% !important;
        max-width:100% !important;
        overflow:hidden !important;
    }

    .amount-grid,
    .quick-amounts,
    .preset-amounts{
        display:grid !important;
        grid-template-columns:repeat(2,1fr) !important;
        gap:10px !important;
        width:100% !important;
    }

    .amount-grid button,
    .quick-amounts button,
    .preset-amounts button{
        width:100% !important;
        min-width:0 !important;
    }

    .deposit-table,
    .withdraw-table,
    table{
        min-width:640px !important;
    }

    .table-wrap,
    .table-responsive,
    .recent-deposits,
    .recent-withdrawals{
        width:100% !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
    }

    .btn,
    .submit-btn,
    .generate-btn{
        width:100% !important;
        max-width:100% !important;
        white-space:normal !important;
        text-align:center !important;
    }

    input,
    select,
    textarea{
        width:100% !important;
        max-width:100% !important;
    }
}





@media(max-width:650px){
    .nav-actions{
        display:flex !important;
        gap:8px !important;
    }

    .nav-actions .btn{
        width:auto !important;
        padding:12px 16px !important;
        font-size:14px !important;
    }

    .nav-actions .btn-outline{
        display:inline-flex !important;
    }
}