/* Common Content Container Styles */
.content-container {
    width: 100%;
    min-height: calc(100vh - 155px); /* Accounting for header and bottom nav */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* For iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .content-container {
        padding-bottom: env(safe-area-inset-bottom, 70px);
    }
}

/* Reduced width for wallet, orders, and account pages */
body[data-page="wallet"] .content-container,
body[data-page="order"] .content-container,
body[data-page="account"] .content-container {
    width: 95%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .content-container {
        min-height: calc(100vh - 145px); /* Slightly less space for mobile */
        padding: 0;
    }
    
    /* Ensure content takes full width on mobile */
    .container-fluid, .container {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Remove unnecessary padding from rows and columns */
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Reduced width for wallet, orders, and account pages on mobile */
    body[data-page="wallet"] .content-container,
    body[data-page="order"] .content-container,
    body[data-page="account"] .content-container {
        width: 98%;
    }
}

/* Desktop adjustments */
@media (min-width: 768px) {
    .content-container {
        max-width: 100%;
        padding: 0;
    }
}