/* Custom code goes here - paste your css code below in line 3 */

/* ==========================================================================
   ISOLATED MAGNIFIED LIGHTBOX MODAL RE-ALIGNMENT 
   ========================================================================== */
.product-modal,
.modal.product-modal,
body .product-modal .modal-dialog {
    max-width: 650px !important;
    margin: 30px auto !important;
    width: 90% !important;
}

.product-modal .modal-content,
.product-modal .modal-body {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Force modal layout thumbnails to wrap inside rows cleanly instead of sliding off-screen */
.product-modal .js-images-container,
.product-modal ul.product-images {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* Forces row wrapping inside the pop-up window bounds */
    justify-content: center !important;
    white-space: normal !important; /* Disables the long single line restriction */
    overflow-x: visible !important;
    width: 100% !important;
    padding: 10px !important;
}

.product-modal ul.product-images li,
.product-modal .thumb-container {
    display: block !important;
    flex: 0 0 75px !important;
    width: 75px !important;
    height: 75px !important;
    margin: 6px !important;
}


/* 1. Force the form container to allow inline flex layout */
#customer-form .form-group.row,
.register-form .form-group.row {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap;
}

/* 2. Strip out left indents/margins forced by the core engine columns */
#customer-form .form-group .col-md-6,
.register-form .form-group .col-md-6 {
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* 3. Ensure the custom checkbox inner label aligns perfectly as a tight row */
.custom-checkbox label {
    display: flex !important;
    align-items: flex-start !important; /* aligns checkbox nicely with the first line of text */
    margin-bottom: 0 !important;
    cursor: pointer;
}

/* 4. Fix space between the check icon container and the link text */
.custom-checkbox label span:not(.checkbox-content) {
    margin-top: 2px !important; /* micro-adjustment for alignment */
    margin-right: 10px !important; /* adds crisp spacing between square and text */
    flex-shrink: 0 !important; /* prevents square from squishing */
}

/* 5. Clean up any weird padding around the text/links */
.custom-checkbox .checkbox-content {
    display: inline-block !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
}