/* Minimal grid system to replace Bootstrap grid for layout alignment */
.container { width:100%; margin:0 auto; padding:0 15px; }
@media (min-width:576px){ .container{ max-width:540px } }
@media (min-width:768px){ .container{ max-width:720px } }
@media (min-width:992px){ .container{ max-width:960px } }
@media (min-width:1200px){ .container{ max-width:1140px } }
.row { display:flex; flex-wrap:wrap; margin-left:-15px; margin-right:-15px; }
.row > [class*="col-"] { padding-left:15px; padding-right:15px; box-sizing:border-box; }

/* Grid columns */
.col-1{flex:0 0 8.333333%;max-width:8.333333%}.col-2{flex:0 0 16.666667%;max-width:16.666667%}
.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.333333%;max-width:33.333333%}
.col-5{flex:0 0 41.666667%;max-width:41.666667%}.col-6{flex:0 0 50%;max-width:50%}
.col-7{flex:0 0 58.333333%;max-width:58.333333%}.col-8{flex:0 0 66.666667%;max-width:66.666667%}
.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.333333%;max-width:83.333333%}
.col-11{flex:0 0 91.666667%;max-width:91.666667%}.col-12{flex:0 0 100%;max-width:100%}
.col{flex:1 0 0; max-width:100%}

/* Responsive columns */
@media (min-width:576px){ .col-sm-6{flex:0 0 50%;max-width:50%} .col-sm-4{flex:0 0 33.333333%;max-width:33.333333%} }
@media (min-width:768px){ .col-md-6{flex:0 0 50%;max-width:50%} .col-md-4{flex:0 0 33.333333%;max-width:33.333333%} .col-md-12{flex:0 0 100%;max-width:100%} }
@media (min-width:992px){ .col-lg-4{flex:0 0 33.333333%;max-width:33.333333%} .col-lg-6{flex:0 0 50%;max-width:50%} .col-lg-8{flex:0 0 66.666667%;max-width:66.666667%} .col-lg-12{flex:0 0 100%;max-width:100%} }

/* Float utilities */
.fl { float: left !important; }
.fr { float: right !important; }
.clearfix::after { content: ""; display: table; clear: both; }

/* Text alignment utilities */
.tcl { text-align: left !important; }
.tcr { text-align: right !important; }
.tcc { text-align: center !important; }

/* General utilities */
.mx-auto{margin-left:auto!important;margin-right:auto!important}
.text-center{text-align:center!important}
.align-items-center{align-items:center!important}
.justify-content-center{justify-content:center!important}
.table-responsive{width:100%;overflow-x:auto}
.section-title{text-align:center;margin-bottom:1rem}

/* Fix for col-* with float */
.col-1.fl, .col-2.fl, .col-3.fl, .col-4.fl, .col-5.fl, .col-6.fl,
.col-7.fl, .col-8.fl, .col-9.fl, .col-10.fl, .col-11.fl, .col-12.fl {
    float: left !important;
    flex: none !important;
}

/* Display utilities */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

/* Flexbox utilities */
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

/* Spacing utilities */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* Width utilities */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }

/* Height utilities */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }

/* Mobile-specific utilities */
@media (max-width: 767px) {
    .container {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Mobile columns - stack on small screens */
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Mobile specific column widths */
    .col-mobile-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .col-mobile-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .col-mobile-3 { flex: 0 0 25% !important; max-width: 25% !important; }

    /* Mobile spacing */
    .row { margin-left: -5px !important; margin-right: -5px !important; }
    .row > [class*="col-"] { padding-left: 5px !important; padding-right: 5px !important; }

    /* Mobile text sizes */
    .section-title { font-size: 1.5rem !important; }

    /* Mobile button adjustments */
    .btn, .huobi-btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* Mobile form adjustments */
    .form-control, input, textarea, select {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 12px !important;
    }
}

/* Container fluid for mobile */
.container-fluid {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile navigation fixes */
@media (max-width: 767px) {
    .huobi-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1050 !important;
    }

    .huobi-nav-container {
        height: 50px !important;
        padding: 0 10px !important;
    }

    .huobi-nav-menu {
        display: none !important; /* Hide main nav on mobile */
    }

    .huobi-logo {
        font-size: 18px !important;
    }

    /* Add top padding to body to account for fixed header */
    body {
        padding-top: 50px !important;
    }
}