*{
    box-sizing:border-box;
}

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

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

canvas{
    max-width:100% !important;
    height:auto !important;
}

.leaflet-container,
#mapDiare,
#mapPreview{
    width:100% !important;
    max-width:100% !important;
}

table{
    width:100%;
    display:block;
    overflow-x:auto;
}

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

@media (max-width: 768px){

    .container,
    .container-fluid{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .row{
        margin-left:0 !important;
        margin-right:0 !important;
    }

    [class*="col-"]{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
    }

    .sidebar{
        transform:translateX(-100%);
        position:fixed;
        z-index:9999;
        height:100%;
    }

    .wrapper.hide .sidebar{
        transform:translateX(0);
    }

    .main-content{
        width:100% !important;
        margin-left:0 !important;
    }

    .topbar{
        flex-direction:column;
        gap:12px;
        align-items:flex-start !important;
    }

    .welcome-box,
    .stat-row,
    .premium-card,
    .step-card,
    .summary-box{
        flex-direction:column !important;
    }

    .stat-card{
        width:100% !important;
    }

    .main-title{
        font-size:28px !important;
    }

    .subtitle{
        font-size:22px !important;
    }

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

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

    h3{
        font-size:20px !important;
    }

    .progress-wrap{
        flex-direction:column;
        gap:12px;
    }

    .progress-step{
        width:100% !important;
    }

    .form-wrapper{
        padding:18px !important;
    }

    .map-box{
        height:250px !important;
    }

    #mapDiare{
        height:260px !important;
    }

    .ai-chat-box{
        width:95% !important;
        right:10px !important;
        left:auto !important;
        bottom:80px !important;
    }

    .ai-button{
        right:15px !important;
        bottom:15px !important;
    }

    .slider-track,
    #slider{
        overflow-x:auto !important;
        scroll-snap-type:x mandatory;
    }

    .premium-card{
        min-width:100% !important;
    }
}