/* Desktop Batch Selector Centering Fix */
/* This file fixes the alignment issue where batch selector appears left-aligned on desktop */

/* Desktop-specific styles (min-width: 1024px) */
@media screen and (min-width: 1024px) {
    /* Main batch selector container - ensure it's centered */
    #purchase .batch-selector {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        margin: 30px auto !important;
        width: 100% !important;
        max-width: 500px !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    /* Ensure the parent form group is also centered */
    #purchase .form-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Label should be centered */
    #purchase .form-label {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }
    
    /* Batch count display */
    #purchase .batch-selector .batch-count {
        min-width: 80px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* All buttons should be properly aligned */
    #purchase .batch-selector button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Ensure decrease and increase buttons are same size */
    #purchase .batch-selector #decreaseBatch,
    #purchase .batch-selector #increaseBatch {
        width: 56px !important;
        height: 56px !important;
    }
    
    /* MAX button positioning */
    #purchase .batch-selector #maxBatch {
        margin-left: 10px !important;
    }
    
    /* Additional centering for the entire purchase section */
    #purchase {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    #purchase .purchase-content {
        width: 100% !important;
        max-width: 800px !important;
        margin: 0 auto !important;
    }
}

/* Also apply for large desktop screens */
@media screen and (min-width: 1440px) {
    #purchase .batch-selector {
        max-width: 600px !important;
        gap: 25px !important;
    }
    
    #purchase .batch-selector .batch-count {
        min-width: 100px !important;
        font-size: 3.5rem !important;
    }
    
    #purchase .batch-selector #decreaseBatch,
    #purchase .batch-selector #increaseBatch {
        width: 64px !important;
        height: 64px !important;
        font-size: 2rem !important;
    }
}

/* Ultra-wide desktop screens */
@media screen and (min-width: 1920px) {
    #purchase .batch-selector {
        max-width: 700px !important;
        gap: 30px !important;
    }
}