/* ============================================================================
   Checkbox Alignment & Spacing Fixes
   Professional Best Practices - Stable, Aligned, Proper Spacing
   ============================================================================ */

/* Checkbox Group Container */
.checkbox-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important; /* Normal gap - not too much space */
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Checkbox Labels - Proper Alignment */
.checkbox-group label,
.form-group label[for*="use-"],
.form-group label[for*="enable-"] {
    display: flex !important;
    align-items: center !important; /* Vertically center checkbox and label */
    gap: 0.625rem !important; /* Normal gap between checkbox and label text */
    cursor: pointer !important;
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.4 !important;
    margin: 0 !important; /* Remove default margins */
    padding: 0 !important; /* Remove default padding */
}

/* Checkbox Input - Stable Size & Alignment */
.checkbox-group input[type="checkbox"],
.form-group input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important; /* Prevent shrinking */
    flex-shrink: 0 !important; /* Keep checkbox size stable */
    cursor: pointer !important;
    accent-color: #00E4FF !important;
    margin: 0 !important; /* Remove default margins */
    vertical-align: middle !important; /* Align with label text */
}

/* Checkbox Label Text - Proper Alignment */
.checkbox-group label span,
.form-group label span {
    flex: 1 !important; /* Allow text to wrap if needed */
    line-height: 1.4 !important; /* Proper line height for readability */
    word-wrap: break-word !important;
}

/* Form Checkboxes Container */
.form-checkboxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important; /* Normal gap between checkbox items */
    margin-top: 0.5rem !important;
}

.form-checkboxes label {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.form-checkboxes input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    accent-color: #00E4FF !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Ensure labels are properly aligned in front of checkboxes */
label:has(input[type="checkbox"]) {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
}

/* Remove excessive spacing */
.form-group .checkbox-group + .form-help {
    margin-top: 0.75rem !important; /* Normal spacing after checkbox group */
}

/* Responsive - Maintain alignment on mobile */
@media (max-width: 768px) {
    .checkbox-group {
        gap: 0.625rem !important; /* Slightly tighter on mobile */
    }
    
    .checkbox-group label {
        font-size: 0.8125rem !important; /* Slightly smaller text on mobile */
    }
}