/* Mobile Padding CSS for User Pages 
   This will be applied to all pages except store.php and pricing.php
*/

/* Make sure body and html take full height */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Apply padding to mobile view for main content sections */
@media (max-width: 767px) {
    /* Target all pages content wrappers */
    .content-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Target specific sections that might need padding */
    section > div:not(.content-wrapper) {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Target common containers */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Don't apply padding to content-wrapper in store.php and pricing.php */
    body.page-store .content-wrapper,
    body.page-pricing .content-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Adjust the main layout spacing for a better mobile experience */
@media (max-width: 480px) {
    .content-wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    section > div:not(.content-wrapper) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}